Banners animados en Photosop para tu sitio web o campañas display de Google Adwords.

 Crea banners animados en Photoshop

para tu sitio web y campañas de Google Adwords

NIVEL PRINCIPIANTES


¿Quieres hacer banners como este?



Sin ser experto en diseño o Photoshop aquí aprenderás a hacerlos, solo ten paciencia y no te desesperes, lo que necesitas hacer es lo siguiente:

1. Photoshop, crear documento y habilitar línea de tiempo.

Abre tu Photoshop, de la parte superior selecciona: Archivo > Nuevo.

Vamos a crear un banner de medida: Anchura 728 x Altura 90 Pixeles, al ser para pantallas podemos usar 72 como Resolución mínima y Modo de Color: RGB, pon el Nombre que más gustes al documento y listo darle en "OK", te dejamos esta imagen como referencia de la configuración del archivo.

Ya teniendo tu documento abierto, debemos activar la ventana de Línea de Tiempo, para hacerlo selecciona Ventana de la barra superior y posteriormente selecciona Línea de Tiempo, te aparecerá en la parte inferior de tu área de trabajo una ventana como la que mostramos a continuación.




En esta ocasión vamos a crear una linea de tiempo de vídeo. En otro tutorial podemos enseñarles la animación de cuadros.


2. Elementos y duración de animación.

Agrega tu logo, imagenes y texto que necesites en tu banner, esto se acomodara en las capas que se muestran a la derecha de la imagen, en la ventana de linea de tiempo que abrimos aparecerán también dichas capas, al inicio del nombre de cada capa hay un triangulo, al dar clic se abrirán las propiedades que puedes animar para crear los efectos de movimiento y transición.

Arrastra desde la linea del tiempo la capa hacia la derecha para alargar o acortar la duración de tu animación.



3. Efectos y capas.

Modificar las propiedades de las capas y realizar los efectos de animación es más sencillo de lo que parece, sigue estos pasos y quedarás muy feliz con los resultados.

Mira el siguiente vídeo con el cual te será más fácil entender este punto.




Haciendo esto ya solo es cuestión de que tu explores las posibilidades, solo recuerda que el orden de las capas afecta, es decir, la capa superior se ve encima de las inferiores.

4. Exportar archivo.

Para poder visualizar correctamente la animación de tu banner ent u sitio web, necesitaras tenerlo en formato .gif, para esto en la parte superior seleccionaras: Archivo > Exportar > Guardar para Web, puedes configurarlo como se muestra en la siguiente imagen, posteriormente dar clic en el botón de Hecho, abrirá una ventana donde seleccionaras la ubicación donde lo guardaras y ¡Listo!.




¿Quieres saber como colocarlo en tu sitio web? comenta para realizar tutorial.


Te mostramos los tamaños y medidas de banners para Google Adwords


Tamaños para vista en dispositivos móviles de escritorio:


Tamaños para vista en computadoras de escritorio:



Nuestros tutoriales, tips y recomendaciones son dirigidos a personas autodidactas, principiantes y emprendedores que desean realizar estas actividades por ellos mismos (sin tener la finalidad de convertirse en expertos en la materia), por lo tanto, mostramos las opciones más fáciles y utilizamos el lenguaje más sencillo para transmitir este conocimiento, sabemos de antemano que para todos los expertos existen otras herramientas y procedimientos.

¿Tienes dudas sobre este tema?, deja tus comentarios y con gusto te responderemos a la brevedad.

¿Requieres ayuda de un profesional? da clic en el siguiente enlace 👉 CONTACTO

0 Comentarios

Comenta con Facebook