Animándonos un poco (chiste malo)

[dianificus]

Me he enterado un poco de cómo se hacen las animaciones, no es que esté muy puesta pero os lo cuento en plan garrafón. Esto bien usado debe de ser todo un arte, pero el mecanismo básico no tiene mucho misterio.
Ahí va:

• Creo que no se pueden hacer con el mismo Photoshop, yo las hago con el ImageReady que viene con el Photoshop.
• Buscad imágenes que puedan quedar bien en plan fotogramas consecutivos. Que la camara no se mueva, que no sean muy distintas unas de otras... Empezad con dos o tres para pillarle el truco. Que sean jpg o png o similar, no hace falta que sean gif.
• Cread una imagen nueva vacía con el menú Archivo/Nuevo. Poned el tamaño adecuado según el de las imágenes que vais a usar como fotogramas, o un poco más pequeño.
• Una a una copiad las imágenes en capas de la imagen nueva, que se irán creando en orden de abajo a arriba: la capa de abajo del todo será el primer fotograma (suele llamarse "Capa 1" si no le ponéis explícitamente un nombre distinto), la siguiente será el segundo (la "Capa 2"), y así sucesivamente.
• Si no está ya abierta, abrid la ventanita "Animación" con el menú Ventana / Animación.
• Aseguraos de que no salga ninguna imagen en la ventana de Animación. Si sale, eliminadla (seleccionad la imagen con el ratón, pinchad el botón de cubo de la basura que aparece abajo a la derecha). Esta ventana de animación tiene que quedar vacía antes del siguiente paso.
• En la ventana de animación, un poco camuflado, hay un botoncito arriba a la derecha, con una especie de flecha hacia la derecha. Pinchadlo, seleccionad la opción "Crear cuadros a partir de capas".
• Con esto se han creado los fotogramas de la animación, uno en cada cuadro. Podéis añadir alguno nuevo, borrarlos, etc.
• Ponedle a cada imagen el tiempo que tiene que mostrarse antes de pasar al siguiente fotograma: con la pequeña lista desplegable que aparece debajo de cada cuadro seleccionad el valor adecuado. Si no está en la lista indicad "Otro" y metedlo a mano.
• Guardad el fichero como psd.
• Finalmente, guardadlo como GIF que es el formato adecuado para las animaciones: Menú Archivo / Opción "Guardar optimizada como...". Si no sale directamente el formato GIF seleccionadlo en el desplegable "Tipo".
  • Apunte de nycox (gracias maja): Si no sale el tipo GIF en el desplegable (sólo sale jpg o html, o similar), ir al menú Ventana / Optimizar y seleccionar como valor GIF. Después de esto ya dejará guardar la imagen optimizada como GIF.

Y ya está, seguro que hay muchas más cosas que desconozco, pero lo mínimo es esto que os he contado. Para ver la animación abrid el fichero GIF con Internet Explorer o Firefox o el navegador que uséis.

He hecho esta pruebecilla con sólo dos imágenes para comprobar que os cuento los pasos correctos:


Nota: la manera que tiene esto de funcionar es la siguiente:

• Al crear automáticamente los cuadros a partir de las capas existentes, en cada cuadro se pone visible la capa indicada y no visibles todas las demás. Si editáis cuadros a mano debéis tener esto en cuenta.
• Aseguraos de que al crear un cuadro esté visible sólo la capa que queréis que se muestre (puede ser más de una capa según la escena, si tenéis transparencias o capas de ajuste o similar).
• Si al reproducir la animación veis que no se mueve la imagen o que algún cuadro no se muestra correctamente revisad lo primero la visibilidad de las capas: seleccionad el cuadro en la ventana Animación y mirad en la ventana Capas qué capa tiene puesto el icono del ojo.

Comments

[willhemina]

Halaaaaaaaa!!!!!! ¡que bien te ha quedado! ¡me encanta! En dos días te veo haciendo animaciones complejas y preciosas.
Esto de las animaciones me parecía un misterio, pero si no he entendido mal es algo así como el sistema que se usa en los dibujos animados o aquellos apaños cutres que hacia yo de niña poniendo dibujos con ligeras diferencias para que al pasarlos rápido dieran impresión de movimiento.
Muchísimas gracias guapísima, eres una fuente inagotable de información y conocimientos.
Besos y abrazos.

[dianificus]

Pues sí, lo que es la parte técnica no parece nada complicada, el mérito estará en escoger bien los fotogramas, modificarlos para que dé sensación de movimiento más suave, igualarlos más o menos... Si son pantallazos de las series basta con capturarlos muy seguidos y ponerlos uno detrás de otro y en teoría no haría falta nada más. Otra cosa que queda bien es dejar el mismo fotograma todo el rato y poner o quitar texto en algunos fotogramas. Se pueden simular efectos de fundido haciendo dos capas visibles y cambiando la transparencia de la segunda capa en varios fotogramas consecutivos (primero al 20%, luego al 40%, etc. hasta alcanzar el 100%). Luego se pueden hacer virguerías modificando imágenes, por ejemplo, recortando las figuras y dejando el mismo fondo en todos los fotogramas, o simulando movimientos. También hay programas más profesionales que sí hacen animación de verdad, y eso ya sería algo más serio y más complicado. Pero con ImageReady básicamente es como lo que dices tú de poner los dibujos con pequeñas diferencias y pasarlos rápido, no tiene más misterio. Parece muy entretenido. :D
Un beso!

[nycox]

aixxx qué cosa nos has enseñado!! yo ya he hecho un par de cosillas. lo de anoche y este avatar que es una chuminada, vaya más un capricho que algo que esté bien, que las capturas son muy malillas.

viva numfar y sus danzas

lo que le contabas a willh me ha dejado alucinada, joer que de cosas se pueden hacer. lo de las transparencias me ha dejado muerta. a ver a ver qué más cositas haces.

muaks

[dianificus]

Juaaa, me parto con Numfar... Podemos hasta hacer una coreografía para el baile de la vergüenza reordenando los fotogramas, que nos quedamos con las ganas de verlo en la serie. Qué avatar más bueeno te ha quedado!
Esas cosas que cuento en el comment de Willhelmina no las he probado pero las he leído por ahí, tengo ganas de probarlas... Creo que este finde si va bien la cosa me pondré unos ratos buenos. :D
Imaginaba que te iba a molar lo de las animaciones, ¡me alegro de haber acertado! :D Un beso!

[nycox]

síiiiiiiii has acertado muchooooooo, me ha encantado!!!
no me des malas ideas que lo de no haber visto la danza de la vergüenza fue un disgustazo tremendo :D
UN BESAZOOOOOO (icono de abracito)

[shivana]

HALAAAAAAAAA!!!! que chulo, Si es que eres una fuente inagotable de información. Lo bien que lo voy a pasar con vuestras animaciones, y desde luego lo explicas estupendamente. MUUUUUUUUUUUUUUUUUUUCHAS GRACIAS Y UN BESAZO!! :D

[shivana]

jajajajajaj como mola Nycox, te ha quedado muy chulo, y para nada chuminada, dentro de poco os veo ya con autenticas maravillas. Eres lo mas!!! muaks

[nycox]

aix si es que me parto con este tio. la pena es que las capturas eras malillas y no quedaban demasiado bien, porque o salía muy borroso o había gente por en medio. esto es lo mejor que ha quedado, pero es que me hace muucha gracia. jisjis

muaks

[dianificus]

Anímate shivana, que es más fácil de lo que parece. Un besooo!

[shivana]

jajajja, no sé solo me falta engancharme a esto, yo siempre apurada de tiempo, pero vamos que seguro que caigo, si es que soy debil, y vosotras haceis cosas tan bonitas y encima las explicais tam bien, que claro apetece probar y luego una se engancha y ya no hay remedio.

MUUUUUUUUUUUUUUUUUUUAKS!!!

[willhemina]

jjajajajaajajajajajj ME ENCANTA!!!!!!

Eres la bomba Nycox, me has dejao muerta cuando he visto el avatar, y a mi me parece que está estupendo no sé por qué dices eso de la chuminada, yo lo veo genial y ya me gustaría a mi conseguir algo así de chulo.
Y tienes mucha razón ¡¡¡Vivan Numfar y sus danzas!!!

Un besazo enorme, guapa.

[dianificus]

Que síii, no te resistas que luego es peor. :DDD