Tutorial How to Make an Animated Gif with Adobe Photoshop
Hello, Hello, Hello, dear colleagues Hiveanimated.
I am Zulay Pulido, Illustrator with Philosophical Thought.
This is my proposal to participate in the Build-It Contest Weekly, promoted by 
“Yabba Dabba Doo.” - Peter Flintstone.
All the images of this post are my own.
Today is Tuesday March 31, 2020
Concurso Semanal Hazlo Tú Mismo (Español-English)
Tutorial Cómo hacer un Gif Animado con Adobe Photoshop
Hola, Hola, Hola, queridos compañeros Hiveanimados.
Soy Zulay Pulido, Ilustradora con Pensamiento Filosófico.
Esta es mi propuesta para participar en el Concurso Semanal Hazlo Tú Mismo, promovido por la Comunidad
“Yabba Dabba Doo.” - Pedro Picapiedra.
Todas las imágenes de esta publicación son de mi autoría.
Hoy es martes 31 de marzo de 2020.
Today, I offer you a simple tutorial to learn how to create your own Animated Gifs with Adobe Photoshop 2017.
I open Photoshop and you see the desktop (1) where the latest designs I have worked on appear, such as here:
Hoy, te ofrezco un sencillo tutorial para que aprendas a crear tus propios Gif Animados con Adobe Photoshop 2017.
Abro Photoshop y se ve el escritorio (1) donde aparecen los últimos diseños en los cuales he trabajado, tal como aquí:
I click New (2) and the New Document Window appears (3).
I set up my new job like this:
(4) I select Web
(5) Name: gif-zulay (This is the name I want to give my design. It can be any name you like).
(6) Width: 500 (7) Pixels
(8) Height: 500 (Width and height equal, so that it is square, but it can have the shape and size you want).
(9) Resolution: 72 (10) Pixels / inch (It is the adequate resolution to upload images to the web).
(11) Color Mode: RGB (12) 8 bit
(13) Background content: Transparent (It can have a background color that you like. I leave it without a background, because the images I'm going to use already have a background).
(14) Create
Hago click en Nuevo (2) y aparece la Ventana Nuevo Documento (3).
Configuro mi nuevo trabajo así:
(4) Selecciono Web
(5) Nombre: gif-zulay (Es el nombre que le quiero poner a mi diseño. Puede ser cualquier nombre que gustes).
(6) Anchura: 500 (7) Píxeles
(8) Altura: 500 (Ancho y alto igual, para que quede cuadrado, pero puede tener la forma y el tamaño que desees).
(9) Resolución: 72 (10) Píxeles/pulgada (Es la resolución adecuada para subir imágenes a la web).
(11) Modo de Color: RGB (12) 8 bit
(13) Contenido de fondo: Transparente (Puede tener un color de fondo que gustes. Lo dejo sin fondo, porque las imágenes que voy a usar ya tienen fondo).
(14) Crear
The window closes and my desktop looks like this (15)
The gray and white squares indicate that it has a transparent background.
Se cierra la ventana y se ve mi escritorio de la siguiente manera (15)
Los cuadritos grises y blancos indican que tiene fondo transparente.
(16) I click on the buton File in the Top tool box
(17) I click on the text Place embedded elements
(16) Hago click en el botón Archivo de la barra de herramientas superior
(17) Hago click en el texto Colocar elementos incrustados
(18) The file manager of my laptop opens and I look for the location where there are three images that I prepared previously on Adobe Illustrator.
It is very important that all images are the same size.
(19) I select image gifzulay1
(22) Open
(18) Se abre el administrador de archivos de mi laptop y busco la ubicación donde se encuentran tres imágenes que preparé previamente en Adobe Illustrator.
Es muy importante que las imágenes sean del mismo tamaño.
(19) Selecciono la imagen gifzulay1
(22) Abrir
The selected gifzulay1 image(20) is seen with an X above it.
To fix it on screen I have to click on the chulito (23)
Se ve la imagen gifzulay1(20) seleccionada con una X encima.
Para fijarla en pantalla hay que hacer click en el chulito (23)
I repeat steps (16), (17) and (18)
I select the second gifzulay2 image (20), make click on Open (22) and the image gifzulay2 will be ubicated exactly over the first gifzulay1 image (19).
To fix it on screen I have to click on the chulito (23)
Repito los pasos (16), (17) y (18)
Escojo la imagen gifzulay2 (20), hago click en Abrir (22) y la imagen gifzulay2 (20) se ubicará exactamente sobre la primera gifzulay1 (19).
Para fijarla en pantalla hay que hacer click en el chulito (23)
I repeat steps (16), (17) and (18)
I select the third gifzulay3 image (21), make click on Open (22) and the image gifzulay3 will be ubicated exactly over the two previous gifzulay1 (19) and gifzulay2 (20) images.
To fix it on screen I have to click on the chulito (23)
Repito los pasos (16), (17) y (18)
Escojo la imagen gifzulay3 (21), hago click en Abrir (22) y la imagen gifzulay3 (21) se ubicará exactamente sobre las dos primeras imágenes: gifzulay1 (19) y gifzulay2 (20).
Para fijarla en pantalla hay que hacer click en el chulito (23)
I click the Layers Window (24) in the right tool panel (25). There I can see the three images that I placed on the desktop: gifzulay1 (26), gifzulay2 (27) y gifzulay3 (28).
I stop on the image gifzulay1 (26), which is third from top to bottom.
In the upper toolbox I click on Window (29)
A long window of options opens and I click on the text Timeline (30)
Hago click en la ventana Capas (24) y abro en el panel de herramientas de la derecha (25). Allí puedo ver las tres imágenes que coloqué en el escritorio: gifzulay1 (26), gifzulay2 (27) y gifzulay3 (28).
Me paro sobre la imagen gifzulay1 (26), la que está de tercera de arriba hacia abajo.
En la caja de herramientas superior hago click en la herramienta Ventana (29)
Se abre una ventana larga de opciones y hago click en el texto Línea del tiempo (30)
The Timeline window (31) appears at the bottom of the program.
In the Layers Window (24) and (25) I deactivate the Little Eyes to the layers gifzulay2 (33) and gifzulay3 (34)
I stop on the image gifzulay1 (26) keeping the little eye (32) active. This will make that the only image that is seen, at the moment.
I click Create frame animation (35) on the Timeline Window (31)
Aparece al pie del programa la ventana Línea de tiempo (31).
En la Ventana Capas (24) y (25) desactivo los Ojitos a las capas gifzulay2 (33) y gifzulay3 (34)
Me paro sobre la imagen gifzulay1 (26) manteniendo el ojito (32) activo. Esto hará que esa sea la única imagen que se vea, por los momentos.
Hago click en Crear animación de cuadros (35) en la Ventana Línea del tiempo (31)
In the Timeline Window (31) the first square with the image gifzulay1 (36) appears on the left.
En la Ventana Línea del tiempo (31) aparece a la izquierda el primer cuadrito con la imagen gifzulay1 (36)
I click the Duplicate Image Timeline Tool (37)
I activate the little eye next to the gifzulay2 image (33) of the Layers Window (25) and that image appears second in the Timeline (38) from left to right.
Hago click en la Herramienta Duplicar imagen de la Línea del Tiempo (37)
Activo el Ojito a la imagen gifzulay2 (33) de la Ventana Capas (25) y esa imagen aparece de segunda en la Línea del Tiempo (38) de izquierda a derecha.
I click the button Duplicate Image (37) on the Timeline window (31)
I activate the little eye next to the gifzulay3 image (34) of the Layers Window (25) and that image appears third in the Timeline (39) from left to right.
Hago click en la Herramienta Duplicar Imagen (37) de la Línea del Tiempo (31)
Le activo el Ojito a la imagen gifzulay3 (34) de la Ventana Capas (25) y esa imagen aparece de tercera en la Línea del Tiempo (39) izquierda a derecha.
Now, I apply the Animation Time (40) that each image will have in the resulting gif. There are several options and each image can have a different time if you prefer.
In this case, I am going to put a second to each image (41)
Ahora, le aplico el Tiempo de Animación (40) que tendrá cada imagen en el gif resultante. Hay varias opciones y cada imagen puede tener un tiempo diferente, si así lo prefieres.
En este caso, voy a ponerle un segundo a cada imagen (41)
Once each image has a set visibility time, I click on the arrow in the Amount of Gif Repetitions box (42). By default it is marked Once, but I will put Infinity (43), so the animation will never stop.
You can try different exposure times and number of repetitions, until you are satisfied with the result.
Una vez que cada imagen tiene un tiempo de visibilidad establecido, hago click en la flechita del cuadrito Cantidad de Repeticiones del Gif (42). Por defecto viene marcado Una vez, pero le voy a colocar Infinito (43), con lo cual la animación nunca se detendrá.
Puedes probar con diferentes tiempos de exposición y cantidad de repeticiones, hasta que estés satisfecho(a) del resultado.
To see the Animation in Photoshop, click on the little triangle that looks to the right (44) of the Timeline Window
Para ver la Animación en Photoshop haces click en el triangulito que apunta a la derecha (44) de la Ventana de Línea del tiempo
To stop it, I click on the Stop Animation box (45)
Para detenerlo, hago click en el cuadrito Detener la Animación (45)
When I was satisfied with my Animation, I opened the File Window (46) at the top tool box, looked for the Export option (47) and selected in the right window Save for Web (inherited) (48).
Cuando quedé conforme con mi Animación, abrí en la caja de herramientas superior, la Ventana Archivo (46), busqué la opción Exportar (47) y seleccioné en la ventana derecha Guardar para Web (heredado) (48).
In that moment The Save for Web Window (49) is displayed there.
There I make the final adjustments in order to optimize its use for the Web, as I want.
I make sure the Visualize box is active (50)
In the Zoom Level box (51) I select Fit to Screen (52)
In the box on the right (50) I select GIF (51)
I make sure that the Image Size (52) is Width: 500 px and Height: 500 px, as I decided from the beginning.
I leave the rest as is, by default.
En ese momento se despliega la Ventana Guardar para Web (49).
Realizo los Ajustes finales con el objetivo de optimizar su uso para la Web, tal como quiero.
Me aseguro de que esté activo el recuadro Visualizar (50)
En el recuadro Nivel de Zoom (51) selecciono Encajar en Pantalla (52)
En el cuadro de opciones de la derecha selecciono GIF (53)
Me fijo que el Tamaño de imagen (54) sea Ancho: 500 px y Altura: 500 px, tal cual lo decidí desde el principio.
Dejo lo demás tal cual está, por defecto.
In the lower left corner I can verify that the image is a GIF (55) its weight is 69.46 KB, which seems perfect to me. Images for web must weigh less than 1 MB, the lower their weight, without compromising quality, optimizes the time for loading and displaying the image on the internet. All images going to the internet should be previously optimized.
Finally, I click the Save button (57) and
En la esquina inferior izquierda puedo verificar que la imagen es un GIF (55), su peso es de 69,46 KB (56), lo cual me parece perfecto. Las imágenes para web deben pesar menos de 1 MB, mientras menor sea su peso, sin perjudicar la calidad, se optimiza el tiempo de carga y visualización de la imagen en internet. Todas las imágenes que van a internet deberían ser optimizadas previamente.
Por último, doy click en el botón Guardar (57)
The Optimized Save As window appears (58) in which the file manager of my computer is seen, where I search for the location to download the finished gif.
I put the final name I want: animated-zulay-gif (59)
I click Save (60) and voila, the gif is finished.
Aparece la Ventana Guardar Optimizada como (58) en la cual se ve el administrador de archivos de mi computador, donde busco la ubicación para descargar el gif terminado.
Le coloco el nombre final que quiero: gif-animado-zulay (59)
Hago click en Guardar (60) y listo, ya el gif está finalizado.
I can already find the gif in the location where I saved it on my computer (61).
I stand on gif (62), click the right mouse button and a floating window opens.
I click Open (63)
Ya puedo buscar el gif en la ubicación donde lo guardé en mi equipo (61).
Me paro sobre el gif (62), hago click en el botón derecho del Mouse y se abre una ventana flotante
Hago click en Abrir (63)
And I can see my animation from the browser that I have assigned by default (64).
Ya puedo ver mi animación desde el navegador que tengo asignado por defecto (64).
If I am not satisfied with the result, I prepare to make the necessary modifications, and when I like it completely, I proceed to upload it to the web.
And here is the end result. The working gif.
Si no estoy conforme con el resultado, me dispongo a realizar las modificaciones necesarias, y cuando me agrade por completo, procedo a subirlo a la web.
Y aquí está el resultado final. El gif en funcionamiento.
Mis Redes Sociales personales son:
Facebook: https://www.facebook.com/zupulido,
y Twitter: https://twitter.com/zupulido, pero no las uso con frecuencia.
Sin embargo, las de la FAVTachira,
Facebook: https://www.facebook.com/FAVTachira/,
Twiiter: https://twitter.com/favtachira
e Instagram: https://www.instagram.com/favtachira/,
sí se actualizan constantemente.
If you liked this publication and it has some benefit for you, I thank you for leaving your kind comment and some recommendations to improve my work.
Remember, you can find me at @librepensadora
Greetings from Venezuela, a Country of great Builders.
Si te gustó esta publicación y tiene algún provecho para ti, te agradezco dejar tu gentil comentario y algunas recomendaciones para mejorar mi trabajo.
Recuerda, puedes encontrarme en @librepensadora
Un saludo desde Venezuela, un País de grandes Constructores.