Crea GIF animados con Adobe Photoshop

1. Introducción a GIF: Oigan chicos, quieren aprender a crear un GIF animado muy sencillo y fácil en Photoshop, entonces esta clase es para ustedes. Mi nombre es Kate y soy instructor de Adobe trabajando en el Centro de Capacitación Adobe líder del Reino Unido en Londres. También soy diseñadora gráfica y diseñadora de moda con fondos en calzado. Los gráficos animados, los videos, y los GIFs animados generan mucha interacción del usuario en las redes sociales. Aún más que imágenes fijas. Literalmente puedes crear un GIF animado a partir de cualquier imagen que te guste, ya sean productos que estás vendiendo, tu ilustración, tu ilustración, o incluso un GIF animado selfie muy divertido. Estaremos creando dos GIF animados. Empezaremos con un GIF animado muy simple y fácil solo para que tus jugos de Photoshop fluyan y luego pasaremos a un GIF animado un poco más complicado de una ilustración que realmente hice en Photoshop. Siéntase libre de usar sus propias imágenes y sus propios gráficos y crear su propio increíble GIF animado. Espero ver con qué se te ocurre y si puedes publicarlo en la sección de proyectos, eso sería increíble. Empecemos. 2. GIF 1: cargar imágenes: De acuerdo chicos, empecemos a aprender sobre los GIF animados. hoy estaremos trabajando con Photoshop y mostraré un poco cómo funciona photoshop y luego estaremos creando dos GIF animados. Empezaremos con este, que es un GIF animado más sencillo pero todavía realmente lindo. Entonces una vez que hayamos adquirido algunas nuevas habilidades, estaremos haciendo un GIF un poco más complicado, este. Esta es en realidad una ilustración que hice en Photoshop, que podrías hacer también y puedes usar tus propias ilustraciones para crear unos GIFs magníficos. Ahora, también puedes crear tu propio GIF, una vez que hayamos hecho estos dos ejercicios con tus propias imágenes, tus propias ilustraciones, incluso selfies de ti mismo, eso podría ser realmente divertido y tal vez tu proyecto de marca, lo que sea que quiero, te estaré guiando en cómo crear GIF. Ahora, cómo descargar los archivos. Lo que he hecho es que he creado algunos archivos zip y los archivos zip son básicamente carpetas comprimidas. Si hace doble clic en un archivo zip. Haga clic ahí está. Se expandirá a una carpeta y si haces doble clic en una carpeta, podrás acceder a los archivos que se encuentran dentro. He creado dos carpetas, una para el primer GIF animado y la otra para la otra. Estaremos empezando por el primer GIF animado, si hago doble clic verás el ejemplo, que es el GIF que personalmente hice y en la carpeta Imágenes, verás todas estas imágenes y eso es lo que estaremos usando para nuestro primer GIF. Ahora, podríamos abrirlos individualmente en Photoshop pero te mostraré una forma de subir todos estos de una sola vez. Simplemente puedes sentarte y relajarte y dejar que Photoshop haga su trabajo. Vamos a Photoshop, estaremos usando la última versión de Photoshop pero si tienes una versión más antigua, eso está absolutamente bien. Lo que tenemos que hacer es ir a Archivo, Scripts, Cargar archivos en Stack. Ahora, esto significa que Photoshop cargará automáticamente todos estos archivos, las cinco imágenes de una sola vez. Verás este panel y podrás hacer click en “Navegar” y podrás buscarlo en todo tu documento. Ahora, puedo ir a mi carpeta GIF animados y puedo ir al GIF animado de Londres, que es donde vivo por cierto. Podemos hacer doble clic en Imágenes, seleccionar las cinco imágenes, click en “Abrir” y luego presionar “Ok” y dejar que Photoshop haga sus cosa.él 3. GIF 1. Bucle, finalización y guardado: Ahora que tenemos todos nuestros gráficos, necesitamos alinear estos para que estén bien alineados en el centro. ¿ Cómo hacemos esto? Vamos a nuestro panel Capas, mantenemos pulsada la tecla Mayús, y hacemos clic en la capa superior, y esto seleccionará todas nuestras capas, al igual que cuando seleccionas varias carpetas. Después, en la parte superior, verás los iconos de alineación. Por lo que te has alineado en centro horizontal. Si quieres alinear algo completamente en el centro, entonces tienes que hacer clic en Alinear centro vertical, y se alineará en el centro. Súper. Ahora si queremos tener abierto este panel en particular, que se llama panel Línea de tiempo para crear animaciones, tenemos que ir Ventana. Ventana es donde viven todos los paneles. Entonces si vamos a Ventana, Línea de tiempo, se ocultará o se mostrará. Si vas a Ventana, Línea de tiempo, asegúrate de ver la línea de tiempo. Ahora, es posible que veas Crear animación de fotograma aquí, o puede que veas Crear línea de tiempo de vídeo. Simplemente asegúrate de seleccionar Crear animación de fotograma, y luego haces clic en Crear animación de fotograma. Ahora puedes hacer clic en el icono de la hamburguesa. esto se le conoce con frecuencia como el icono de la hamburguesa. Actualmente, todos nuestros marcos, todas nuestras capas se han convertido en un solo marco y necesitamos crear un marco a partir de cada capa. Si vamos al ícono de la hamburguesa, haciéndome hambre, podemos hacer clic en Hacer marcos desde capas, y luego verás que cada capa tiene su propia carpeta. Ahora si presiono Play now, ten cuidado, esto va a ir muy rápido, así que no saltes arriba. Whoa, eso es rápido. Obviamente, vamos a cambiar el tiempo en un poco. Lo que se ve en cada fotograma depende de lo que se pueda ver en las capas. Ahora, ¿puedes ver ese pequeño yo? Eso significa que esta capa se encuentra actualmente en exhibición y las demás están ocultas. Si quería que este círculo fuera el fondo de cada fotograma, lo que tengo que hacer es ir a esta capa, este marco, ir en el panel Capas y simplemente resaltar el círculo. Esto lo mostrará y lo mostrará en el panel Capas, pero también en el marco. Necesito hacer esto por cada fotograma individual. Entonces tengo el corazón, queremos ver el círculo, dar click en el círculo. Tenemos Londres, haga clic en el círculo, y tenemos el paraguas, haga clic en el círculo. Ahora cambiemos el tiempo porque esto es muy rápido. También tenemos que deshacernos de la primera capa porque ya no la necesitamos. Cambiemos el tiempo. Amor, podríamos hacerlo 05 segundos o 02, y podríamos hacer el segundo 02 también. A ver. No está mal. Vamos a intentar hacer todo 02 segundos, y vamos a pulsar Play. Eso no está mal. Ahora si querías que fuera un poco más largo, puedes seleccionar 05. Esto lo hará más lento. Eso es un poco lento, ¿no? Si lo quieres en medio, lo que hago es ir aquí, hago click en Otro, y verás este panel, y puedes teclear 03, digamos, y luego haces lo mismo por cada uno. Yo sólo voy a copiar eso y sólo voy a pegarlo. Creo que eso es más rápido. Comando C, Comando V, FYI. Ese es el atajo. Después presionas “Ok”, y luego Play. No está mal. Eso es exactamente lo que necesitamos. Ahora, abajo verás la palabra Forever. Ese es el looping. Eso significa cuántas veces va por ahí. Ahora, podrías hacerlo ir una vez, y luego lo que hace es que se detenga en el cuadro final, o puedes hacerlo ir tres veces. Por lo que esto es importante cuando quieres resaltar el marco final, ya sea que esa sea tu marca o tu ilustración favorita. Pero a mí personalmente me gusta hacerlo ir para siempre. Yo quiero mantenerlo en marcha personalmente, pero depende de ti qué hacer. Esa es nuestra animación. Ahora te voy a mostrar cómo salvarlo. Lo que haces es ir a Archivo, Exportar, Guardar para Web Legacy. Tendrás este pequeño panel que acaba de ir a mi otra pantalla. Entonces aquí está. Aquí puedes elegir si quieres ver el original. A mí me gusta mucho hacer click en 4-Up, lo que significa que puedo ver las cuatro versiones diferentes de mi archivo, y por aquí puedo ver lo grandes que son. Este está justo por debajo de un megabyte. Si desea un archivo más grande, podría seleccionar éste, si desea un archivo más pequeño, podría seleccionar otro. Después puedes hacer clic en “Guardar” y podrás guardarlo en tu escritorio. Yo lo llamaré LDN. Aquí asegúrate de seleccionar HTML e imágenes para que tengas el formato HTML y el formato GIF. Lo guardé y ahora solo necesito encontrarlo. La historia de mi vida encontrando mis archivos. Aquí, encontré el archivo HTML. Qué agradable. Entonces el archivo de imágenes, a menudo entra en una carpeta de Imágenes, ahí vamos, y el formato GIF real. Eso es todo para el primer GIF animado sencillo pero genial. Nos vemos pronto para el segundo GIF. 4. GIF 2: hacer capas en fotogramas: Vamos a crear el segundo GIF animado. Bien hecho por crear el primero. Increíble. Puedes crear tu propio GIF animado ahora con tus propias imágenes o incluso selfies. Siempre divertido. Ahora, en la carpeta GIF animados, tienes la segunda, la llamada Hibernación. ¿ Se puede decir que soy de Londres? Hibernación, es todo lo que hago en Londres en estos días grises lluviosos. En la carpeta Ejemplo, verás el ejemplo que creé. En la carpeta Imágenes, verás todas las imágenes que he numerado por lo que nos será más fácil apilar en capas. Tienes estrellas llanas y la luna. Entonces tienes estrellas de gradiente. Entonces, tienes los tres marcos clave: los ojos cerrados, y los ojos abiertos, y los ojos semiabiertos. Llevémoslos a Photoshop. Lo hacemos como antes. Volvemos a Photoshop y vamos a Archivo, Scripts, Cargar archivos en Stack. Ahí hay ventanilla de compra. Haga clic en “Navegar”. Esta vez volvemos a nuestro escritorio. Tengo muchas carpetas, ¿no? Haga doble clic en GIF animados, seleccione la segunda carpeta, haga clic en “Imágenes”. Simplemente vamos a seleccionar toda la pila y dar click en “Abrir”. Eso son muchas imágenes. Entonces, hacemos click en “Ok”. Simplemente nos relajamos, nos sentamos y dejamos que Photoshop haga lo suyo. Esto podría tardar un poco más porque tenemos un poco más de archivos. He numerado todos estos archivos. Sería genial si sólo movemos todo de acuerdo a los números. Podemos simplemente seleccionar esos y simplemente arrastrarlos hasta el fondo. Uno más. Deberían estar aquí los 10 gradientes. Uno, dos, tres, cuatro, cinco, seis, siete, ocho, nueve, 10, 11, 12, 13. Perfecto. En primer lugar, con lo que voy a empezar es que voy a crear carpetas sólo para que sea más fácil y mucho más claro dividirlas y crear nuestros marcos. Para crear una carpeta, primero puedes seleccionar los archivos que te gustaría en una carpeta y luego hacer clic en el icono de la carpeta pequeña aquí. Crear un nuevo grupo. Voila, todo fue a nuestro grupo. Ahora, recuerda, si haces click en esta pequeña flecha, expandirás la carpeta y verás todas las capas dentro. Ahora, estas son mis estrellas llanas y luna. Simplemente voy a seguir adelante y renombrar esto a estrellas llanas. Lo que haces es hacer doble clic y escribes estrellas llanas. Ahora voy a crear otra carpeta, pero para mis elementos de gradiente. Voy a hacer lo mismo, crear una carpeta y llamarla estrellas gradientes. Ahora, para estos, realmente no necesitamos crear carpetas porque solo hay marcos individuales de ellas. Ahora lo que hacemos es, como antes, hacemos click en “Crear animación de cuadro” y todo se amontonará en un solo fotograma. Al igual que antes, tenemos que ir al icono de la hamburguesa. Después podremos hacer click en “Hacer marcos desde capas” y tendremos montones de capas. Ahora, sólo necesitamos dos marcos. Podemos deshacernos de todos estos marcos yendo click, manteniendo presionada la tecla Mayús y haciendo clic en el marco final, para luego presionar la pequeña bolsa de basura aquí o basura, si estás en EU. En el Reino Unido, decimos bin. Con clase. Después puedes hacer click en “Sí”, quieres eliminar los marcos, y ahora tenemos tres. 5. GIF 2: bucle y guardado: Empecemos con el primero. En el primer fotograma, tenemos que decidir qué queremos ver en el primer fotograma. Quisiera empezar con los ojos abiertos. Voy a dar click en el ojo, para que pueda ver esta capa. Ahora, no necesito tener los ojos cerrados capa abierta, así que sólo voy a ocultar eso, y sólo voy a añadir todas las estrellas llanas. Solo necesito hacer clic individualmente en los ojos para que podamos ver esas hermosas pequeñas estrellas de avión y luna. Ese es el primer cuadro hecho. Ahora vamos a seleccionar el segundo fotograma. Ahora para el segundo fotograma, necesitamos anular la selección de los ojos abiertos, así que escóndelo. Tenemos que tener el semicerrado encendido. Ahora, para las estrellas, lo que les voy a mostrar ahora es cómo duplicar algunas de ellas porque vamos a mover un par de estrellas sólo para que agregue más movimiento. Para duplicar una de estas estrellas, puede hacer clic derecho y duplicar capa, o también puede alt y arrastrar, que es el atajo para la duplicación, y ahora verá estrella una copia. Ahora, se asegura de que escondas la original para que solo veamos una sola estrella, y entonces lo que puedes hacer es simplemente mover un poco la estrella, solo para que haya un poco de movimiento. Si quieres, puedes hacer eso por todas las estrellas. Yo voy a hacer eso por este pequeño. Alt y arrastrar y duplicar y ocultar el original y sólo mover ese solo un poquito para el movimiento. Siéntete libre de hacer eso por todas las estrellas. Voy a hacer una más. A veces no funciona. Oculta la estrella original, y luego simplemente muévete. A veces hago clic en los ojos para poder ver cuál me acabo de duplicar, con cuál estoy trabajando. Basta con mover eso y ese es nuestro segundo marco hecho. Ahora vamos a dar click en el tercer fotograma y esta vez vamos a tener los ojos cerrados, y vamos a dormir y entrar en hibernación. Puedes esconder los 11 ojos abiertos y mostrar 13 ojos cerrados. Podemos ocultar todas las estrellas llanas, cerrar la carpeta, y mostrar en su lugar las estrellas gradientes. Amplía la carpeta y solo asegúrate de mostrar todos los arranques de gradiente en su lugar. Tengamos una pequeña vista previa rápida a nuestra animación. Si hacemos clic en el botón de juego pequeño, eso casi me está dando un ataque al corazón, eso es rápido. Vamos a frenarlo. Hagamos que el marco sea más largo. Podríamos hacer cinco o dos, me gustan mucho 0.3 segundos, a menudo uso eso. Si hago clic en otro, puedo escribir 0.3 y copiar eso, y bien y el segundo. Para la final, creo que me gustaría mantener esto un poco más porque ésa es la que quiero terminar. Vamos a intentarlo ahora. Me está dando sueño, casi bostezo, muy lindo. Esta animación y una bonita canción de cuna sería perfecta. Guardemos este archivo. Vamos a archivar, exportar, guardar para legado web. Ya conoces el taladro, para arriba, y puedes elegir. Por lo que 12.5 megabyte es bastante grande. Si querías un archivo más pequeño, solo puedes hacer clic en cualquiera de estos. Haga clic en “Guardar”, guárdelo. Yo lo voy a llamar hibernación. Cargas de tipografías ahí, y HTML e imágenes. El poco complicado ahora es dónde encontrarlo como de costumbre. Aquí tengo uno, solo busco la carpeta de imágenes y ahí está la carpeta de imágenes. Echemos un vistazo a las imágenes uno y veamos el GIF y voila, ese es nuestro precioso modo de hibernación en GIF, perfecto para la hora de acostarse. Al ir hacia adelante, siempre puedes usar estas habilidades recién adquiridas y crear tus propios gráficos. Usa tus propias selfies o imágenes, o incluso fotos de ráfaga que puedes tomar en un iPhone. Me encantaría ver en qué estás tramando. Me encantaría ver qué tipo de GIFs vas a estar creando. Vamos a ponernos creativos. Nos vemos pronto.