http://blog.hubspot.es/marketing/crear-un-gif-animado?

utm_campaign=
%23HubSpotEspanol&utm_source=hs_email&utm_medium=email&utm_conten
t=32548359

5 de agosto, 2016 // 08:00

[Tutorial] Cmo crear un GIF animado

en Photoshop
Escrito por Laura Martinez Molera | @LauraMolera

COMPARTIR
23
inCompartir

Si has estado navegado por Internet, probablemente hayas visto

un GIF animado (en ingls). Se trata de un archivo de imagen que te
permite mostrar imgenes animadas que parecen tener movimiento.
Piensa en ellos como un hbrido entre una imagen esttica y un video.

Por qu es una excelente idea sumar archivos GIF a tu estrategia de

marketing? Son fciles de crear, ofrecen una nueva manera de captar
la atencin del pblico y pueden tener un gran impacto emocional. Si
tenemos en cuenta que los contenidos que nos hacen sentir algo nos
gusta compartirlos, vale la pena experimentar con estas pequeas
animaciones.
Lo mejor de los GIF es que no son demasiado difciles de crear. Si
tienes acceso a Photoshop y unos minutos libres, puedes crear un GIF
animado en un abrir y cerrar de ojos.

Haz clic aqu y descarga nuestra gua gratuita

para aprender a disear grficos de alta calidad.
En el siguiente tutorial sobre creacin de GIF animados, se usa la
versin de Photoshop Creative Cloud 2015, pero los pasos son ser
similares para otras versiones.

Cmo crear un GIF animado en

Photoshop
El siguiente es un ejemplo de GIF animado que podras crear con este
tutorial:

Bien, comencemos!

Paso 1: Carga tus imgenes en Photoshop.

Si ya tienes imgenes creadas...
Guarda las imgenes que desees en una carpeta separada. Para
cargarlas en Photoshop, haz clic en Archivo > Secuencias de
comandos > Cargar archivos en pila.

A continuacin, selecciona Explorar y elige los archivos que usars

en tu GIF. Haz clic enAceptar.

Photoshop crear una capa separada para cada imagen que hayas
seleccionado. Cuando hayas hecho esto, avanza al paso 2.
Si an no tienes creada la serie de imgenes...
Crea cada fotograma del GIF animado como una capa de Photoshop
diferente. Para agregar una nueva capa, elige Capa > Nueva > Capa.

Asegrate de ponerle nombre a tus capas para poder identificarlas

fcilmente cuando crees el GIF. Para nombrar una capa, dirgete
al panel Capas en la esquina inferior derecha de la pantalla, haz

doble clic sobre el nombre predeterminado de la capa y luego escribe

el nombre que deseas ponerle. Toca la tecla Intro cuando termines.

Cuando tengas listas las capas y les hayas puesto nombre a todas,
avanza al paso 2.
Consejo profesional: Si deseas combinar capas para que aparezcan
en un solo fotograma en el GIF, activa la visibilidad en las capas que
deseas fusionar (para ello, haz clic en el cono de ojo que aparece a la
izquierda del nombre de cada capa para que solo se abran los conos
de ojo de las capas que quieres fusionar). A continuacin, presiona
Shift + Command + Option + E (Mac) o Shift + Ctrl + Alt + E
(Windows). Photoshop crear una nueva capa con el contenido que se
fusion. Debers renombrar esta capa.

Paso 2: Abre la ventana Lnea de tiempo.

Para abrir la ventana Lnea de tiempo, ve a la parte superior de la
barra de navegacin y selecciona Ventana > Lnea de tiempo. La
ventana Lnea de tiempo te permite activar y desactivar distintas capas
para diversos perodos de tiempo. De esta manera, tu imagen esttica
se transformar en un GIF.

La ventana Lnea de tiempo aparecer en la parte inferior de la

pantalla de la siguiente manera:

Paso 3: En la ventana Lnea de tiempo, haz clic

en "Crear animacin de cuadros".
Si la opcin no est seleccionada automticamente, elgela del men
desplegable, pero asegrate de hacer clic en ella; de lo contrario, las
opciones de animacin de cuadros no se mostrarn.

Ahora tu lnea de tiempo debera verse as:

Paso 4: Crea una capa nueva para cada

fotograma nuevo.
Para ello, primero selecciona todas las capas yendo al men de
navegacin superior y eligiendo Seleccin > Todas las capas.
Luego, haz clic en el cono de men a la derecha de la pantalla Lnea
de tiempo.

En el men desplegable que aparece, elige Crear nueva capa para

cada fotograma nuevo.

Paso 5: Abre el mismo cono de men a la

derecha y elige "Crear cuadros a partir de
capas".
Esto transformar cada capa en un fotograma de tu GIF.

Paso 6: En cada fotograma, selecciona cunto

tiempo debe pasar antes de cambiar al siguiente.
Para ello, haz clic en el lapso de tiempo debajo de cada fotograma y
elige cunto tiempo quieres que el fotograma aparezca. En nuestro
caso, elegiremos 0,5 segundos por fotograma.

Paso 7: En la parte inferior de la barra de

herramientas, selecciona cuntas veces te
gustara que se repita.

La opcin predeterminada es Una vez, pero puedes repetirlo las veces

que desees, inclusoSiempre. Haz clic en Otro si deseas especificar
una cantidad personalizada de repeticiones.

Paso 8: Haz una vista previa de tu GIF

presionando el botn de reproduccin.

Paso 9: Guarda el GIF para usarlo online.

Ests conforme con tu GIF? Gurdalo para usarlo online. Para ello,
ve a la parte superior de la barra de navegacin y haz clic
en Archivo > Exportar > Guardar para Web (heredado).

A continuacin, elige el tipo de archivo GIF con el que deseas

guardarlo en el men desplegable Ajustes preestablecidos. Si tienes
un GIF con degradados, elige GIF interpolados para evitar la
visualizacin de franjas de colores. Si tu imagen tiene muchos colores
slidos, puedes optar por no interpolar los colores.
El nmero que aparece junto al archivo GIF determina el tamao (y la
precisin) de los colores del GIF en comparacin con los archivos
JPEG o PNG originales. Segn Adobe, un porcentaje de interpolacin
de colores ms alto otorga una apariencia de ms colores y detalles,
pero aumenta el tamao del archivo.

Haz clic en Guardar en la parte inferior para guardar el archivo en tu

equipo. Listo! Ya puedes cargar este GIF y usarlo en tu estrategia de
marketing.
Sube el archivo GIF en cualquier pgina o sitio online donde pondras
una imagen y debera reproducirse sin problemas. As debera
aparecer el GIF:

Cmo incorporar GIF a tu estrategia

de marketing
1) En las redes sociales.
Pinterest fue la primera plataforma en habilitar GIF animados, seguida
por Twitter. Y en el verano de 2015, Facebook tambin se sum al
equipo y permiti los GIF. En cualquiera de estas redes sociales, los
GIF animados pueden ser una excelente manera de destacarse en un
mar de ltimas noticias.
Por ejemplo, observa cmo Samsung utiliz un GIF para promocionar
un producto:

Seguir

Samsung Mobile

@SamsungMobile
You
just HAVE to send one more GIF on Twitter before your phone dies? Switch
to Ultra Power Saving Mode. #GALAXYS5
13:06 - 18 jun 2014

136136 Retweets

245245 me gusta

Deseas incluir GIF animados en tus propios posts de redes sociales?

Haz clic aqu para ver instrucciones para Twitter.
Haz clic aqu para ver instrucciones para Facebook.
Haz clic aqu para ver instrucciones para Pinterest.

2) En tus correos electrnicos.

Los GIF animados se muestran en el correo electrnico de la misma
manera que una imagen normal. Entonces, por qu no darle un toque
extra a tus correos electrnicos reemplazando imgenes estticas por
imgenes animadas?
Esto no solo podra ayudar a captar la atencin de los destinatarios
por su originalidad sino que podra afectar directamente el balance de
tu empresa. En una prueba A/B que llev a cabo BlueFly, se lleg a la
conclusin de que los correos electrnicos que contenan un GIF
animado lograron un aumento del 12 % en las ganancias en
comparacin con sus versiones no animadas.
Usa los GIF para presentar productos, hacer anuncios sobre eventos o
atraer a los lectores.Observa el GIF a continuacin de la tienda de
ropa para mujeres LOFT de la marca Ann Taylor: Hicieron que un
paquete de regalo se moviera para generar intriga y lograr que los
destinatarios hicieran clic en l para abrir su regalo.

Crditos de la imagen: LitmusLitmus

3) En posts.
No es necesario que tu post est repleto de GIF animados o diseado
al estilo de BuzzFeed, con listas (listicles) que incluyen GIF. (Aunque
de vez en cuando nos encanta una buena dosis de listas de GIF
graciosos).
Por ejemplo, mi colega Ginny Soskey cre un GIF animado simple
para explicar la definicin de una llamada a la accin para este post.

Aqu tenemos otro ejemplo de un GIF animado de nuestro post sobre

recetas para preparar en la cocina de la oficina:

Cmo usars los GIF en tu estrategia de marketing? Comparte tus

GIFs ms abajo!