wikipediaillustrated

marketing

Cómo hacer un GIF animado en Photoshop [Tutorial]

how to make animated gif photoshop 1.jpgkeepProtocol

Si ha pasado algún tiempo en Internet, probablemente haya entrado en contacto con un GIF animado. Es un archivo de imagen que le permite presentar imágenes animadas, lo que hace que parezca que la imagen se está moviendo. Piense en ellos como un híbrido entre una imagen fija y un video.

¿Por qué los GIF son grandes adiciones a su marketing? Son fáciles de consumir, brindan una nueva forma de captar la atención de los espectadores y pueden tener un impacto emocional grave. y desde ccontenido que nos hace sentir algo nos anima a compartir, vale la pena experimentar con estas diminutas animaciones.

La mejor parte de los GIF es que no son muy dificiles de hacer. Si tiene acceso a Photoshop y dispone de unos minutos, puede crear un GIF animado en poco tiempo.

En el siguiente tutorial sobre cómo hacer GIF animados, estoy usando la versión Creative Cloud 2015 de Photoshop, pero los pasos deberían ser similares en otras versiones.

Cómo crear un GIF animado en Photoshop

Aquí hay un ejemplo de un GIF animado que podrías hacer usando este tutorial:

marketing-trivia-GIF-ejemplo-1.gif

Muy bien, comencemos.

Paso 1: sube tus imágenes a Photoshop.

Si ya tienes imágenes creadas…

Reúna las imágenes que desee en una carpeta separada. Para cargarlos en Photoshop, haga clic en Expediente > Guiones > Cargar archivos en la pila.

cargar-archivo-en-la-pila.png

Luego, seleccione Navegar, y elige qué archivos te gustaría usar en tu GIF. Luego, haga clic en está bien.

cargar-múltiples-imágenes.png

Photoshop creará una capa separada para cada imagen que hayas seleccionado. Una vez que hayas hecho eso, salta al paso dos.

Si aún no tienes la serie de imágenes creada…

Cree cada cuadro del GIF animado como una capa diferente de Photoshop. Para agregar una nueva capa, elija Capa > Nuevo > Capa.

añadir-nueva-capa.png

Asegúrese de nombrar sus capas para que pueda realizar un seguimiento de ellas fácilmente cuando cree su GIF. Para nombrar una capa, vaya a la Panel de capas en la parte inferior derecha de su pantalla, haga doble clic en el nombre de la capa predeterminada y escriba el nombre al que desea cambiarlo. prensa Ingresar cuando hayas terminado.

nombre-capas.png

Una vez que tenga sus capas allí y las haya nombrado todas, estará listo para el paso dos.

Consejo profesional: Si desea combinar capas para que aparezcan en un solo cuadro en su GIF, active la visibilidad de las capas que desea fusionar (haciendo clic en el «ojo» a la izquierda del nombre de cada capa para que solo se vean los ojos de las capas que desea combinar). desea fusionar están abiertas). A continuación, presione Mayús + Comando + Opción + E (Mac) o Mayús + Ctrl + Alt + E (Windows). Photoshop creará una nueva capa con el contenido fusionado, que también debe cambiar de nombre.

Paso 2: abre la ventana de la línea de tiempo.

Para abrir la línea de tiempo, vaya a la barra de navegación superior, elija Ventana > Línea de tiempo. La línea de tiempo le permitirá activar y desactivar diferentes capas durante diferentes períodos de tiempo, convirtiendo así su imagen estática en un GIF.

línea-de-tiempo-abierta.png

La ventana de la línea de tiempo aparecerá en la parte inferior de la pantalla. Esto es lo que parece:

linea-de-tiempo-en-photoshop.png

Paso 3: en la ventana de la línea de tiempo, haga clic en «Crear animación de cuadro».

Si no se selecciona automáticamente, elíjalo del menú desplegable, pero luego asegúrese de hacer clic en él, de lo contrario, las opciones de animación del cuadro no aparecerán.

crear-fotograma-animacion.png

Ahora, su línea de tiempo debería verse así:

línea-de-tiempo-con-cuadro-animación.png

Paso 4: crea una nueva capa para cada nuevo cuadro.

Para hacer esto, primero seleccione todas sus capas yendo al menú de navegación superior y eligiendo Seleccione > Todas las capas.

Luego, haga clic en el icono de menú a la derecha de la pantalla de la línea de tiempo.

línea-de-tiempo-icono.png

En el menú desplegable que aparece, elija Crea una nueva capa para cada nuevo cuadro.

nueva-capa-para-nuevo-fotograma.png

Paso 5: abra el mismo ícono de menú a la derecha y elija «Crear marcos a partir de capas».

Esto hará que cada capa sea un marco de tu GIF.

hacer-fotogramas-desde-capas.png

Paso 6: Debajo de cada cuadro, seleccione cuánto tiempo debe aparecer antes de cambiar al siguiente cuadro.

Para hacer esto, haga clic en el tiempo debajo de cada marco y elija cuánto tiempo desea que aparezca. En nuestro caso, elegimos 0,5 segundos por cuadro.

elegir-fotograma-tiempo.png

Paso 7: En la parte inferior de la barra de herramientas, seleccione cuántas veces desea que se reproduzca.

El valor predeterminado dirá Una vezpero puedes repetirlo tantas veces como quieras, incluso Siempre. Hacer clic Otro si desea especificar un número personalizado de repeticiones.

elegir-número-de-lazo.png

Paso 8: Obtenga una vista previa de su GIF presionando el ícono de reproducción.

play-icono.png

Paso 9: guarda y exporta tu GIF

¿Satisfecho con tu GIF? Guárdelo para usarlo en línea yendo a la barra de navegación superior y haciendo clic en Expediente > Exportar > Guardar para web (heredado)…

guardar-para-web.png

A continuación, elija el tipo de archivo GIF en el que le gustaría guardarlo bajo el Preestablecido desplegable. Si tienes un GIF con degradados, elige GIF difuminados para evitar bandas de color. Si su imagen emplea una gran cantidad de colores sólidos, puede optar por no tramar.

El número junto al archivo GIF determina el tamaño (y la precisión) de los colores del GIF en comparación con los archivos JPEG o PNG originales. Según Adobe, un porcentaje de tramado más alto se traduce en la apariencia de más colores y detalles, pero aumenta el tamaño del archivo.

guardar-para-web-preset-dropdown.png

Hacer clic Salvar en la parte inferior para guardar el archivo en su computadora. ¡Ahora está listo para cargar este GIF para usarlo en su comercialización!

Cargue el archivo GIF en cualquier lugar en línea donde colocaría una imagen, y debería reproducirse sin problemas. Así es como se vería el producto final:

marketing-trivia-GIF-ejemplo.gif

Cómo usar GIF en su marketing

1) En las redes sociales.

Pinterest fue el primero en habilitar los GIF animados, seguido de Twitter. Y para el verano de 2015, Facebook también se había subido al carro de los GIF. Luego, Instagram cambió el juego con Boomerang, que permite a los usuarios filmar y compartir sus propios GIF. En cualquiera de estos feeds sociales, los GIF animados pueden ser una excelente manera de destacar en un feed abarrotado.

Por ejemplo, vea cómo Product Hunt usó un GIF para promocionar un foro en su sitio web:


2) En sus correos electrónicos.

Los GIF animados se muestran en el correo electrónico de la misma manera que una imagen normal. Entonces, ¿por qué no arreglar su correo de propaganda reemplazando imágenes fijas por animadas?

Esto no solo podría ayudar a capturar la atención de los destinatarios solo con la novedad, sino que también podría tener un impacto directo en sus resultados. Para algunas marcas, incluir un GIF animado en los correos electrónicos se correlacionó con un aumento del 109% en los ingresos. Utilizando El software gratuito de marketing por correo electrónico de HubSpot es una manera fácil de lograr este tipo de aumento en su propio sitio.

Utilice los GIF al exhibir productos, hacer anuncios de eventos o atraer a los lectores de otra manera. Mira el GIF a continuación de la tienda de ropa para mujeres Ann Taylor LOFT: Hicieron que un regalo pareciera estar temblando para crear intriga y hacer que los destinatarios hicieran clic para «desenvolver» su regalo.

loft-unwrap-animation-repeat.gif

Fuente: Tornasol

3) En publicaciones de blog.

Su publicación de blog no tiene que ser sobre GIF animados o estar estructurada como una lista de estilo BuzzFeed. para incluir GIF – aunque nos encanta una buena dosis de GIF de listas tontas de vez en cuando.

Por ejemplo, aquí hay un GIF animado simple creado por un compañero comercializador ginny mineo para explicar la definición de un llamado a la acción para una publicación de blog:

Definición-de-CTA-1.gif

Y, por último, uno de nuestros viejos pero buenos favoritos: un GIF animado de una publicación sobre recetas de cocina de oficina.

Escuela-Almuerzo-1.gif

¿Cómo utilizarás los GIF en tu marketing? Comparte con nosotros en los comentarios.

Nota del editor: esta publicación se publicó originalmente en septiembre de 2013 y se actualizó para brindar frescura, precisión y exhaustividad.

Guía del vendedor de Photoshop

Nueva llamada a la acción

Publicado originalmente el 10 de julio de 2017 a las 8:00:00 a. m., actualizado el 1 de abril de 2022

Temas:

Contenido visual

Puede que también te guste...

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *