Como hacer un GIF animado en Photoshop
Photoshop es la herramienta preferida de cientos de miles de profesionales de la fotografía y del diseño gráfico alrededor del mundo, no sólo por ser el estándar para todo lo que tiene que ver con las artes gráficas y la fotografía, sino por ser el programa que mejores características y opciones ofrece.
Comentarios (0)Sin embargo, Photoshop no solamente es el preferido de los profesionales, sino también por usuarios que nada tienen que ver con estos ámbitos, pero que tienen necesidades gráficas puntuales. A pesar de que no es una herramienta sencilla de dominar, Photoshop también es el software al que recurren los usuarios amateur, debido principalmente a la inmensa cantidad de tutoriales que se encuentran disponibles en la red. Exactamente como este, en donde aprenderemos a crear un GIF animado con Photoshop.
Como bien saben los diseñadores gráficos, la creación de un GIF animado no es una tarea precisamente excitante, pero que puede llegar a dejarnos algún dinero que sumar a la actividad principal, más aún si estamos comenzando a dar nuestros primeros pasos en el diseño.
Si ya somos diseñadores, este tutorial no contendrá demasiadas novedades, ya que está más enfocado en aquellos usuarios principiantes que tienen un sitio web personal o de un pequeño emprendimiento, y que no tienen ni el presupuesto ni el conocimiento para crear un banner del tipo GIF animado de aspecto profesional.
Antes de comenzar, es necesario resaltar una regla general, que todo diseñador conoce: Lo más grande que se pueda dentro de los límites de espacio, y con el mayor atractivo posible. También es importante recordar no hacer un banner con más de tres diapositivas, ya que el espectador puede llegar a perder la atención muy rápidamente.
Una vez que tenemos aclarados estos conceptos, podemos pasar a hacer el GIF animado en Photoshop.
Creación de un GIF animado en Photoshop
- Configuración del documento
Paso 1
Una vez que hemos ejecutado Photoshop, lo primero que tenemos que hacer es desplazarnos hasta el menú de la aplicación y seleccionar “Archivo>Nuevo”.
Paso 2
En el cuadro de diálogo que aparece, pulsamos sobre el menú desplegable “Predefinir” y seleccionamos la opción “Web”.
Paso 3
En este punto deberemos ajustar algunas variables como el tamaño, la resolución y demás. En el caso de que no estemos muy seguros de qué valores debemos modificar, lo mejor es dejarlo en los valores predefinidos.
El único valor que debemos modificar es el tamaño, para que se ajuste a nuestras necesidades de diseño. También en este punto es una buena ida comprobar en el menú “Vista” que todas las opciones del apartado “Ajustar a” se encuentren habilitadas.
- Añadir los elementos gráficos para hacer el GIF animado
A partir de este punto, ya podremos comenzar a añadir los elementos que necesitaremos para realizar el GIF animado
Paso 1
En este caso, añadiremos tan sólo un logo y algún texto, con el propósito de hacerlo más sencillo y claro. Pero se pueden agregar tantas imágenes y textos como se crea conveniente.
Aquí debemos poner especial cuidado en nombrar a las capas de Photoshop con un nombre bien descriptivo, para no tener problemas cuando las tengamos que poner en orden.
- Preparación de las diapositivas
Paso 1
Básicamente, podemos crear una diapositiva comenzando primero con el fondo, luego con los logos o imágenes y luego añadiendo el texto. Recordar que siempre debemos tener una capa por elemento que queremos mostrar en el resultado final.
Es decir, creamos el fondo y los elementos que permanecerán estáticos. Luego de ello, añadimos los elementos que variarán, como las imágenes y el texto. Una vez que estamos satisfechos con el resultado, comenzamos a combinar las capas que deseamos que permanezcan estáticas.
- Creación del GIF animado
A partir de este punto, comenzaremos con la creación de la línea de tiempo del GIF animado. Para ello, seguimos las instrucciones que se detallan a continuación.
Paso 1
Una vez que tenemos los gráficos terminados, nos desplazamos hasta el menú de Photoshop y pulsamos sobre “Ventana”, donde seleccionaremos la opción “Línea de tiempo”. En este punto podremos observar que ha aparecido una nueva sección en la interfaz, ubicada en el borde inferior.
Paso 2
En principio, debemos preparar la primera escena. Para ello, ocultamos todas las capas que no deban mostrar. Luego, pulsamos sobre el pequeño botón ubicado en el extremo derecho del panel de “Línea de tiempo”. Cabe destacar que podemos seleccionar el tiempo en que cada una de las imágenes o cuadros permanecerán visibles antes de dar paso al siguiente, lo que podemos hacer fácilmente pulsando sobre cada cuadro y seleccionando el tiempo que deseamos permanezcan en primer plano. Para terminar de crear la animación web, debemos repetir el mismo procedimiento para cada cuadro que deseamos incluir en la animación.
Aquí es necesario hacer una pequeña aclaración con respecto a la velocidad a la que se reproducen los fotogramas. No deben ser extremadamente lentos, ya que se perderá la atención del espectador rápidamente, pero tampoco debe ser tan rápidos como para que no se pueda leer el mensaje que se quiere mostrar. Para hacer esto de la manera debida, lo mejor es ponernos en el papel del espectador y comprobar si ambos puntos son aceptables.
Lo único que resta a partir de este punto es guardar la animación en un formato que pueda ser incluido en otros proyectos y que también pueda ser reproducido en multitud de dispositivos sin que genere problemas de ningún tipo.
- Guardar el GIF animado
El formato indicado para ello es el llamado GIF “Graphics Interchange Format”, también conocido como “Formato de Intercambio de Gráficos”. Para exportar nuestro trabajo a este formato, lo único que tenemos que hacer es desplazarnos hasta el menú de Photoshop, pulsar sobre “Archivo”, y finalmente sobre “Guardar para Web”.
En este punto, en la ventana que aparece, podremos seleccionar el tipo de archivo, en este caso GIF, en el menú desplegable y algunas opciones para conseguir el resultado deseado, como por ejemplo el tamaño y la calidad, parámetros que se pueden ajustar en el apartado “Tamaño de imagen”, ubicado en la parte inferior de la ventana.
Ahora lo único que resta es presionar sobre el botón “Guardar” y seleccionar la ubicación de almacenamiento.
Para probar el resultado, podemos arrastrar nuestro GIF animado a la ventana de cualquier navegador web.
Si esta página te gustó, puedes compartirla ...
