El guión:
Antes de crear un gif, lo fundamental será tener en claro en nuestra mente (o en papel, mejor) TODO el guión de la animación, cuadro por cuadro, ya que cualquier cambio "sobre la marcha" implicará una carga extra de trabajo.
Lo principal será pensar en función de un conjunto sucesivo de "movimientos" (como si fueran escenas de una película); detectar los "cuadros clave" o "keyframes", es decir, las "puntas" de cada movimiento: el comienzo y el fin de cada tramo o "etapa" de la animación.
Luego es cuestión de ir creando los cuadros intermedios entre esas puntas.
La velocidad deberemos regularla mediante el tiempo que permanecerá en pantalla cada cuadro de la animación.
Podemos medirla en segundos o décimas de segundo.
Finalmente, debemos - como en todo GIF- regular la cantidad de colores de la paleta (con un máximo de 256).
Eso definirá el "peso" del archivo (además de la cantidad de cuadros, obviamente, a mayor cantidad, mayor peso).
Variables típicas:
Las variables típicas en una animación (cambio de cuadro a cuadro) son:
» Aparición (y desaparición) de un objeto.
» cambio de color (o luminosidad, o transparencia).
» cambio de tamaño (escala).
» cambio de forma.
» cambio de posición (movimiento).
» rotación.
» todas combinadas.
Si bien las animaciones existen desde el inicio casi de la web, también desde ese momento comienza el uso innecesario de animaciones, que no tienen relación estética con el resto del estilo del sitio, o que cargan la pantalla de puntos de atención innecesarios.
Por eso, hay que tener prudencia en el uso de las animaciones es fundamental si queremos evitar el disgusto de los usuarios.
La idea es "preparar antes" en Photoshop cada uno de los "cuadros" o "fotogramas" de la animación, a razón de un "cuadro" en cada capa de un archivo editable PSD.
Podremos convertir con un click cada capa en un cuadro de una animación, y solo nos restará definir cuánto tiempo permanecerá en pantalla cada cuadro (generalmente, décimas de segundo o un segundo) y guardar el resultado con formato GIF.
Creación de animaciones de cuadros
Flujo de trabajo de animación Con Photoshop, se utiliza el panel Animación para crear cuadros de animación.
Cada cuadro representa una configuración de capas.
1. Abrir un nuevo documento.
Si no están ya visibles, abrir también los paneles Animación y Capas.
En Photoshop, asegurarse de que el panel Animación se encuentra en modo de animación de cuadro
(hacer clic en el botón Convertir en animación de cuadros en el panel Animación).
2. Añadir una capa o convertir la capa de fondo.
Debido a que una capa de fondo no puede tener animación, añada una nueva capa o convierta la capa de fondo en una
capa normal.
3. Añadir contenido a la animación.
Si la animación incluye varios objetos animados de forma independiente o si se desea cambiar el color de un objeto o
cambiar totalmente el contenido de un cuadro, crear objetos en capas separadas.
4. Añadir un cuadro al panel Animación.
5. Seleccionar un cuadro.
6. Editar las capas del cuadro seleccionado.
• Activar o desactivar la visibilidad para capas distintas.
• Cambiar la posición de los objetos o las capas para que el contenido de la capa se mueva.
• Cambiar la opacidad de la capa para provocar la transición del contenido.
• Cambiar el modo de fusión de las capas.
• Añadir un estilo a las capas.
7. Añadir más cuadros y editar las capas según sea necesario.
El número de cuadros que se puede crear está limitado sólo por la cantidad de memoria del sistema disponible para
Photoshop.
Definir las opciones de retardo de cuadro y de repetición.
Se puede asignar un tiempo de retardo para cada cuadro y especificar repeticiones de manera que la animación se ejecute una vez, un número determinado de veces, o de forma continua.
8. Previsualizar la animación.
Utilizar los controles del panel Animación para reproducir la animación a medida que se crean.
A continuación, utilizar el comando Guardar para Web y dispositivos para previsualizar la animación en el navegador Web.
9. Guardar la animación.
Puede guardar la animación en forma de GIF animado con el comando Guardar para Web y dispositivos.
También se puede guardar la información en formado Photoshop (PSD) para poder trabajar más tarde en la animación.