Marketero

Marketero · Entrevistas

¡Cómo Hacer un GIF para Anuncios en Meta 2024!

20 ideas de marketing sacadas de «¡Cómo Hacer un GIF para Anuncios en Meta 2024!», de Oski de Haciendola. Sobre todo de estrategia de contenidos, canales…

Ver la entrevista entera en YouTube

De qué habla

Las 20 ideas de esta entrevista se reparten así entre las etapas del marketing. El reparto es lo que distingue una entrevista de otra: dice en qué se detuvo de verdad quien hablaba.

Las 20 ideas, con su cita y su minuto

Cada una está sacada de un punto concreto de la entrevista. El enlace del titular lleva a la página de esa idea, donde se ve quién más la dice por separado; el del pie salta al segundo exacto del vídeo para que la compruebes tú.

Al cuadro con texto darle 0,75 segundos en vez de 0,5

Estrategia de contenidos

Los cuadros con texto necesitan mas tiempo que los de imagen: con 0,5 segundos pasa muy rapido y no se alcanza a leer, con 1 segundo queda demasiado lento y desentona con el resto. Probando llego a un valor propio de 0,75 segundos.

volvemos al 1 y volvemos a ver nuestra animación ahora si se dan cuenta el tercer cuadro que es donde dice cactus quizás 0.5 segundos muy rápido generalmente cuando tenemos texto hay que darle un poquito más de tiempo porque sino como que pasa muy rápido y no alcanza a leer en ese caso paramos acá la prueba de la animación vamos al tercer cuadro y ahí seleccionamos en vez de 0.5 un segundo ya volvemos a probar y si nos damos cuenta y cactus para más lento pero hay quizás demasiado lento y queda como raro con el resto de la animación paramos de nuevo esta previsualización y acá nos deja…

Escúchalo en el minuto 17:38

Para redes sociales exportar la animacion como video, no como GIF

Canales de adquisición

Para web basta exportar el archivo como GIF, pero las redes sociales no aceptan ese formato. Para Instagram o Facebook hay que usar Archivo, Exportar, Interpretar video y subir el mismo archivo animado como video.

la misma lógica. Entonces, ¿cierto? Ya está listo nuestro GIF, ya estamos claro, ya bien, esto es lo que queremos. ¿Cómo lo exportamos? Para usarlo en web, en general, basta con que lo exportemos como GIF, ya. Pero para redes sociales no nos sirve como GIF, entonces tenemos que exportarlo como video. Afortunadamente Photoshop nos permite hacer exportar en video y así lo podemos usar sin problema en redes sociales, ya. ¿Dónde exportamos? Vamos acá arriba a archivo, presionamos,

Escúchalo en el minuto 7:06

Marcar convertir en sRGB al guardar para web

Estrategia de contenidos

En Guardar para web hay que marcar la casilla convertir en sRGB, un paso que mucha gente olvida. Eso adapta los colores del archivo a los colores de pantalla y hace que la grafica se visualice bien.

selectivo, difusión, transparencia en el caso de que tuviéramos un GIF sin fondo y sólo una forma es necesario mantener eso. Ahora viene algo muy importante que mucha gente de repente se olvida, tienen que marcar acá esta sección, convertir en sRGB, ya. ¿Por qué? Porque eso hace que los colores se adapten a los colores de pantalla y eso nos permite que se visualicen bien las gráficas.

Escúchalo en el minuto 8:04

Maximo un mega por archivo grafico en web

Estrategia de contenidos

La regla que recomiendan es no pasar de un mega de peso en los archivos para web. Un archivo mas pesado retrasa la carga de la pagina, la gente espera para verlo y al final la grafica no cumple su objetivo.

es el tamaño que habíamos decidido guardar. Y acá está el otro ítem importante que es este, ya, que acá nos dice cuánto pesa nuestro GIF. Nosotros recomendamos un máximo de un mega para archivos en web y en general, entonces con esto estaríamos cumpliendo esa regla y lo que siempre tratan de mantener los archivos en esa medida, ya. O sea, perdón, en ese peso. ¿Por qué? Porque facilitan la carga, no se demoran después en descargar las personas cuando lo vean, si pesa mucho más va a ser un problema, se pone todo lento, la página no va a cargar bien, entonces al final lo único que hacen es que…

Escúchalo en el minuto 8:36

Nombrar el archivo describiendo contenido, ubicacion y marca para SEO y orden

Canales de adquisición

El nombre del archivo debe indicar todas sus caracteristicas: que es, donde va y de quien es. El ejemplo que da es gif coleccion cactus banner colecciones home plantas hipster. Aunque quede largo, eso ayuda a que los motores de busqueda lo reconozcan y a no perderse entre archivos que se llaman igual.

podríamos decir por ejemplo este GIF, digamos que de promoción de un producto, entonces podríamos poner GIF promoción o GIF colección por ejemplo porque estamos promocionando ya una colección de cactus por ejemplo. GIF colección cactus y este GIF lo pensamos para el banner o para una sección del home, entonces ponemos banner colecciones home y la marca de mi tienda por ejemplo en este caso plantas hipster ya. Entonces a la larga si bien el nombre es largo lo que estoy haciendo es en el nombre del archivo indicar todas las características del archivo, su ubicación, con quien me linkea y eso…

Escúchalo en el minuto 10:08

Si el texto se pierde sobre la foto, darle un cuadro propio con fondo plano

Mensaje y copywriting

El texto sobre el fondo rosado se perdia, asi que en vez de forzarlo creo un tercer cuadro con una capa de color de fondo donde solo se ve la palabra. Cuadro 1 y 2 muestran el producto y el cuadro 3 el mensaje, legible sobre color plano.

sería entonces voy a poner ahí vamos a probar la animación y ahí se claro con el rosado se me pierde un poco la tipografía entonces ahí obtengo varias opciones podría decir no voy a por ejemplo de si sabes que no quiero que se vea los cactus solo cierto cuadro 1 cactus con el fondo amarillo cuadro 2 cactus con el fondo rosado y voy a crear un tercer cuadro acá abajo voy a sacar esto que no esté visible en ese cuadro voy a crear una nueva capa acá ya una nueva capa con un color de fondo vamos a elegir un color tenemos amarillo rosado podríamos elegir quizás algo en estos tonos ya y lo…

Escúchalo en el minuto 15:33

Cambiar la repeticion a infinito o el GIF se reproduce una sola vez

Estrategia de contenidos

Por defecto la animacion queda configurada para repetirse una sola vez y por eso se detiene al probarla. Hay que cambiar la opcion de repeticion, abajo en la linea de tiempo, a infinito para que el GIF cicle.

que yo quiero que se vea, ya. Entonces, si yo aprieto play acá bajito, va a pasar esto. Yo voy a ver cómo se anima, pero o paró. ¿Por qué? Porque yo tengo que ser repito una sola vez la animación acá abajo. Entonces ahí yo voy y digo que se repite infinito. Entonces vuelvo a ir a mi cuadro uno y si ahora ven se va a repetir infinitamente la animación y puedo ver cómo se genera el movimiento, ya.

Escúchalo en el minuto 6:16

Trabajar a 300 de resolucion y comprimir a 72 al exportar

Estrategia de contenidos

Aunque la pieza sea para web, arma el archivo a resolucion 300 y recien al exportar comprimelo a 72, que es la resolucion de pantalla. Asi el archivo conserva calidad y al bajar el peso no se degrada tanto.

La resolución 300. Siempre la recomiendo para web, trabajar en resolución 300 y después cuando exportan, ahí uno lo comprime a 72 ya que es la resolución de pantalla. ¿Por qué trabajar en 300? Porque así conserva la calidad del archivo, entonces después cuando lo exportan no pierden tanta calidad. Aunque bajen el peso la calidad se mantiene. Entonces ponemos OK y acá tenemos ahí nuestro lienzo para

Escúchalo en el minuto 2:14

Crear contornos en el vectorial y pegar el texto como objeto inteligente

Estrategia de contenidos

Cuando la pieza lleva tipografia, arma el texto en el programa vectorial y aplicale crear contorno para transformar las letras en forma. Al copiarlo y pegarlo en Photoshop, pegalo siempre como objeto inteligente: asi mantiene la calidad y se puede escalar sin problemas.

con crear contorno es decir transformar esta tipografía que funciona como letras que yo escribo a una forma que hoy es como que si fuera un dibujo que logro con esto que al llevarlo photoshop se mantenga la calidad bien y a lo largo lo pueda trabajar sin problemas ya entonces creo contorno ahí la puedo agrandar o no ahí tengo mi tipografía la voy a usar en negro o a ver veamos no quizás podríamos en blanco no para que haya la copio comando c o control c voy a fototop y la pego comando b o control b acá también viene algo importante peguen siempre este tipo de elementos como objeto inteligente…

Escúchalo en el minuto 13:43

Ruta en Photoshop: Ventana, Linea de tiempo, Crear animacion de cuadro

Estrategia de contenidos

Para animar en Photoshop se va al menu Ventana, se selecciona Linea de tiempo y se presiona Crear animacion de cuadro. Ahi aparece el cuadro 1, al que se le asigna la duracion en segundos desde la flecha que esta al lado.

número uno y nos vamos acá arriba. Si se dan cuenta, ahí se ventana. Ahí hacen clic en ventana, bajan y seleccionan línea de tiempo. Apretan ahí línea de tiempo y se les va a abrir esto, ya. Y lo que necesitamos nosotros es crear una animación de cuadro, ya. Entonces acá presionan en crear animación de cuadro y aparece ahora esto, ¿cierto? Entonces, en este momento el cuadro uno me dice que tiene 0 segundos. Yo lo voy a poner acá, bueno, cuando abro ahí en esta flechita acá al lado, me aparecen todas las opciones de segundos que yo tengo. Entonces voy a poner 0,5, ya.

Escúchalo en el minuto 5:14

Lienzo vertical de 1000 x 1250 pixeles para el GIF

Estrategia de contenidos

Para un GIF de formato vertical crea el archivo nuevo con 1000 pixeles de ancho por 1250 de alto, es decir mas alto que ancho.

poder hacer nuestro GIF. En este caso voy a hacer un GIF que tiene un formato vertical, es decir, su alto es mayor que el ancho. Vamos a ir entonces a archivo nuevo. Voy a crear entonces GIF Tutorial. La altura la vamos a dejar en 1000 píxeles como aparece acá y la altura en 1250 como aparece acá.

Escúchalo en el minuto 1:42

La logica del GIF: cada cuadro muestra las capas que estan activas

Estrategia de contenidos

Se crea un cuadro nuevo y en el se activan las capas de la imagen que debe verse y se desactivan las demas, de modo que cada cuadro tenga una imagen distinta. Esa es la logica del GIF: ir animando cuadro por cuadro la grafica que uno quiere mostrar.

Y acá, en este ícono, yo creo un nuevo cuadro. Y en ese nuevo cuadro activo estas capas que son mi animación 2 y desactivo la capa 1, ¿cierto? Entonces si yo veo cada cuadro tiene una imagen distinta, que esa es la lógica finalmente del GIF. Yo acabo ir animando cuadro por cuadro la gráfica que yo quiero que se vea, ya. Entonces, si yo aprieto play acá bajito, va a pasar esto. Yo voy a

Escúchalo en el minuto 5:54

Lo que pegas solo aparece en el cuadro que tenias seleccionado

Estrategia de contenidos

Al pegar la tipografia con el cuadro 1 seleccionado, el texto solo se ve en ese cuadro y desaparece en el cuadro 2, porque esa capa no queda activa ahi. Hay que activar la capa en cada cuadro donde deba verse.

foto yo aquí pienso ahí está el tamaño cierto ahí está y ahí me queda listo si se dieron cuenta cuando yo pegué la tipografía yo solo tenía seleccionado el primer cuadro por lo tanto solo se me va a ver en el primer cuadro si voy al cuadro 2 no se me ve no está activa la capa de la tipografía ya ahí pueden ir viendo esa diferencia de que finalmente lo que cada cuadro me muestra son las capas que yo tengo activas si yo tuviera activa esta también se mostraría ese

Escúchalo en el minuto 14:37

Rellenar un borde faltante copiando y pegando un pedazo de la propia imagen

Estrategia de contenidos

Cuando a una imagen le falta borde para llenar el lienzo, una solucion simple es seleccionar un pedacito de ese borde, copiarlo con Control C, pegarlo con Control V y agrandarlo un poco para rellenar el espacio.

ya. Esto también es parte de armar el gil. En casos como esto, creo que no está pasando acá, que nos falta como un borde, ¿cierto? Hay varias maneras, pero una que es relativamente simple es que seleccionen un pedacito este borde abajo, con control C o comand C que es para copiar y después control B o comand B para pegar y lo agrandan un poquitito, ya. Y ahí rellenan sin

Escúchalo en el minuto 4:33

Igualar el tamano de las imagenes entre cuadros para que el cambio no salte

Estrategia de contenidos

Si una imagen queda muy chica y la otra muy grande, el cambio de cuadro se ve raro. Hay que escalar y reubicar cada imagen para que haya similitud en el movimiento, e ir comprobando visualmente mientras se arma el archivo.

Ahora si se dan cuenta el cactus en el fondo rosado me queda como muy abajo y chico, entonces ahí yo puedo editar un poquito para que se vea bien. Lo vamos a verandar un poco, ¿cierto? Para que haya como una similitud en el movimiento y en el cambio de imagen. Ya que no nos pase como que queda uno muy chico, otro muy grande. A ver ahí, vamos a ver. Ven ahí funciona mejor, ¿no? Aunque debería que haya más espacio quizás abajo, ¿cierto? Acá, ahí. Entonces, como puede que les pase esto cuando estén armando sus archivos, siempre vayan comprobando que visualmente funcione también,

Escúchalo en el minuto 3:43

Elegir la tipografia segun el estilo de la tienda para mantener coherencia

Marca y posicionamiento

Al agregar texto a la pieza elige una tipografia acorde al estilo de la tienda, en su caso una mas manual. Insiste en que toda la grafica que se genere tenga un estilo coherente entre si.

el documento vamos como es la colección cactus vamos a escribir cactus entonces voy a elegir una tipografía más manual quizás para como para que quedado con el estilo de mi tienda cierto eso también es importante cuando genera esta gráfica que todo tenga un estilo coherente y acá lo que voy a hacer es

Escúchalo en el minuto 13:14

Hacer los GIF en Photoshop en vez de bancos de GIF gratuitos

Estrategia de contenidos

Recomienda armar los GIF en Photoshop porque permite animar por cuadros con imagenes propias. Las plataformas gratuitas para descargar o generar GIF dan menor calidad y casi nunca tienen relacion directa con el contenido que la marca quiere destacar.

y a la larga ir ahí desarrollando nuevas ideas. ¿Qué plataforma usamos para trabajar en GIF? Adopt Photoshop. ¿Por qué? Porque acá podemos animar con cuadros y con imágenes, entonces no es tan complejo. Igual hay plataformas gratuitas donde pueden desarrollar GIF o incluso descargar GIF, pero la calidad no es tan buena y aparte que muchas veces no tienen tanta relación directa con el contenido que ustedes quieren destacar. Entonces, partamos por lo básico. Creemos el archivo para

Escúchalo en el minuto 1:06

El GIF sirve para mostrar marca, equipo y procesos, no solo para vender

Estrategia de contenidos

Un GIF permite mostrar contenido de forma mas dinamica que una imagen fija: sirve para destacar productos, pero tambien para mostrar los valores de la marca, al equipo y los procesos que hay detras de lo que se vende.

Que permite mostrar contenido de manera mucho más dinámica, más interesante, porque obviamente uno parte de ciertas básicos como por ejemplo acá que se mueven las imágenes pero también no puede incluir otro tipo de animaciones. Entonces, habrá una serie de posibilidades para mostrar contenido, para mostrar contenido destacado y todo lo que pueda ayudar a la larga a no solo vender, sino también a mostrar los valores de su marca, de repente el equipo o los procesos que hay detrás de lo que ustedes hacen o venden. Lo que vamos a hacer ahora en este tutorial es aprender a hacer

Escúchalo en el minuto 0:21

El nombre del archivo de video se corta: usar iniciales de la marca

Estrategia de contenidos

Al exportar el video el sistema no dejo escribir el nombre completo, asi que reemplazo el nombre de la tienda por sus iniciales, ph por plantas hipster, para conservar la informacion clave dentro del limite de caracteres.

exportar interpretar vídeo guardamos ahí acá lo mismo el mismo nombre antes GIF promoción colección cactus creo que eso me faltó poner en el otro banner colecciones home y plantas hipster la marca ya y no me dejó poner más nombre entonces le vamos a poner ph por plantas hipster ya

Escúchalo en el minuto 11:29

Animar es probar: previsualizar cada cambio y simplificar el movimiento

Estrategia de contenidos

Insiste en que el proceso de armar la grafica animada tiene mucho de ir probando y experimentando: las ideas van apareciendo mientras se arma, y el trabajo consiste en animar cuadro por cuadro y ver como simplificar los movimientos para mostrar lo que se quiere.

bien más o menos el proceso de creación en verdad tiene mucho de ir probando y de ir experimentando ya porque al final es como uno va armando gráfica las ideas que se te van ocurriendo cuando les hablé un poco del esto mucho traten de retomar ese espíritu ya porque al largo tiene mucho de eso como ir animando cuadro por cuadro y viendo cómo podemos simplificar movimientos para mostrar ya así que eso pues espero que sirva mucho este tutorial y bueno ya

Escúchalo en el minuto 20:26

Seguir leyendo

Esta es una de las 1872 entrevistas despiezadas. Puedes ver todas, leer las ideas por tema o empezar por la ruta guiada si no sabes por dónde.