la wir-escuela: mundo banner

post#10

 

Hoy es viernes y como cada 15 días llega la wir-escuela. Ese momento tan apasionante donde descubriréis cómo hacer cosas que no sabíais (o quizás sí).

En el capítulo de hoy aprenderemos a hacer un…

banner animado

(Me siento como un programa de televisión diciendo cosas como: «en el capítulo de hoy...»).

Igual sois inquietos y habéis enredado con photoshop para hacer pequeñas (o grandes) composiciones, ¿no? Bien, pues hoy vamos a darle un poco de movimiento al asunto.

Pasos para crear un banner resultón:

Lo primero es abrir un documento nuevo del tamaño del cual vaya a ser el banner. En el caso del ejemplo que voy a hacer con vosotros lo he hecho de 600×100 pixeles y siempre, al ser para monitor debe ser con colores RGB y a 72ppp.

Bien, pues ya tenemos nuestro lienzo en blanco y preparado. Comentar que el tamaño final no debe superar los 150kb para que tenga un buen rendimiento… es poco, sí, así que hay que optimizar al máximo las imágenes (si es que las lleva). En mi caso, será todo vectorial, no hay ninguna imagen y por eso también me he podido «permitir el lujo» de hacer algo más animado y que no se un simple: «foto-foto-foto, plas, plas, plas» (no sé si me entendéis, jeje) que también podría ser, ¿eh? es una opción muy válida.

Como consejo, si vuestro banner tiene tres escenarios, es decir, tres loops, (que es lo idóneo para no entrar en una noria loca de imágenes e información), os recomiendo hacer antes de nada como esos tres escenarios por separado (o bien en el mismo archivo del banner o en otros PSD si os parece menos lioso). Yo lo he hecho en el mismo archivo que me parece más práctico y éste es el resultado:

 

banner_01banner_02banner_03

Para que veáis como está mi archivo en photoshop os pongo una captura. Os adelanto que lo he creado con toooodas las capas que voy a necesitar para hacer el banner. Es decir, tengo ya como todas las herramientas que necesitaré y ahora ya solo es jugar con la visibilidad de las capas.

mesa_trabajo

Si os fijáis, yo lo he separado por colores por organizarme personalmente un poco, me resulta más rápido que agruparlo por carpetas y estar abriendo y cerrando pero bueno, eso ya es cosa de cada uno, como mejor os organicéis. Para mi el color rojo corresponde al primer loop, el verde al segundo y el azul al tercero.

Para hacer el banner es indispensable abrir la ventana de LINEA DE TIEMPO que está en el menú>ventana>línea de tiempo (no es muy difícil) y si os pide seleccionar lo que vais a hacer tenéis que pulsar en la opción Crear animación de cuadros.

Os voy a poner una imagen justo aquí abajo a modo de instrucciones y con todos los cuadros de animación ya creados del banner ejemplo que voy a hacer y también el banner en sí… ¡no os asustéis! os lo voy explicando paso a paso.

instrucciones_bannerbanner_somoswir_ejemplo

 

Teniendo ya claro lo que queremos y teniendo ya todas las capas con los elementos que vamos usar, solo hay que ir quitando visibilidad y poniendo. Yo he querido jugar con la desaparición de los triángulos para dar un poco de dinamismo y a un ritmo no taquicárdico pero sí algo animadillo. No hay ninguna animación en sí, solo crear cuadros y ocultar o dar visibilidad a los triángulos que quiera.

Con nuestro primer cuadro de animación vamos creando el resto. Pulsamos en nuevo cuadro de animación y nos creará uno absolutamente igual que el anterior, es decir, con las mismas capas visible, así a ese nuevo cuadro le quitamos o ponemos las capas que queramos que aparezcan. Si lo vamos haciendo así, añadiendo cuadro a cuadro a la vez que avanzamos en nuestro banner y no crear todos de golpe es mejor por eso que cuento, que te respeta las visibilidades de capa del anterior y eso es lo que queremos para llevar una concordancia.

Llega el momento de uno de los efectos, el de movimiento. Es muy simple, tenemos que crear dos cuadros de animación y en uno poner el inicio y en el otro el final. En el ejemplo para el cuadro del inicio, está puesto el logo «escondido» a la izquierda, y digo escondido porque la capa tiene que estar visible pero fuera del documento para que no se vea. Para el cuadro del final está el logo donde quiero que finalice y solo visible esa propia capa de logo. ¡Ah! Se me olvidaba deciros que hay que duplicar la capa del logo en cuestión porque si una capa de nuestro documento la movemos, se mueve en todos los cuadros de animación.

Teniendo ya los dos cuadros de animación con las dos capas del logo visible en cada uno de ellos, simplemente seleccionamos los dos cuadros y pulsamos en el icono que he llamado crear efectos en transiciones y decidir cuando pasos queremos que dé en la transición (si pones menos va más rápido que si pones más y también pesa menos 😊) y el tipo de efecto, en este caso seleccionaríamos POSICIÓN y… ¡tachán! el logo aparece de la nada.

La segunda animación que hay en este banner es de opacidad. Es un fundido del logo con un fondo verde donde aparece el resto de información. Esto es igual que en el caso anterior pero con uno parámetro, es decir:

  • creamos cuadro de animación con el principio y otro cuadro con el final (con las capas que queremos ver en cada uno)
  • seleccionamos los dos cuadros de animación
  • pulsamos en crear efectos en transiciones
  • pensamos el número de pasos que queremos que dé para llegar al final
  • en parámetros marcamos OPACIDAD

¡LISTO! Ya tendríamos nuestro banner.

Ahora faltaría verlo para ver si queremos modificar tiempos de algunas de las partes porque vaya muy lento o muy rápido y no de tiempo a leer. Esto simplemente se cambia de tiempo de cuadro de animación que se abrirá un desplegable para seleccionar el que queramos o bien poner uno personalizado.

Sugerencia marketiniana que en este ejemplo no he puesto: que el banner tenga un CTA (llamada a la acción) y el logo en todos los loops. Un botón por ejemplo que sea: ver tienda, ver productos, contáctanos… para lo que sea que se haya creado el banner y cual sea su finalidad. Esto del CTA y el logo es más que nada es porque no sabes en qué momento verá la gente tu banner, así que mejor que sepan desde el principio de quién es 😊

Bueno amiguitos, ¡pues esto es todo por hoy! ¿Os ha resultado muy complicado? Espero que os resulte útil y que me haya explicado bien… si no, para cualquier duda preguntad y os ayudo encantadisisisisma. Y que no se me olvide decir… ¡que me encantará ver vuestros banners por las redes! Usad el hashtag #lawirescuela y así no nos perderemos nada.

¡Nos leemos! (no tengáis miedo por dejar un comentario, ¡que me hará mucha ilusión!)

🙂

 

[icon color=»Extra-Color-3″ animation_speed=»Slow» size=»tiny» icon_size=»» animation_delay=»» image=»fa-music»] suena: jump in the line – harry belafonte      [icon color=»Extra-Color-3″ animation_speed=»Slow» size=»tiny» icon_size=»» animation_delay=»» image=»fa-camera»] foto: Olu Eletu

 

¿te ha gustado?

¡comparte pues!

Facebook
Twitter
LinkedIn
Pinterest
Email
¿quieres ser más de lo que ya eres?

¡trabaja con nosotros!

2 comentarios en “la wir-escuela: mundo banner”

Dejar un comentario

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

“Al enviar aceptas la política de privacidad. Los datos que proporciones al enviar tu comentario, serán tratados conforme la normativa vigente de Protección de Datos y gestionados en un fichero privado por Ana Cristina Gadea Sánchez, propietaria del fichero. La finalidad de la recogida de los datos, es para responder únicamente y exclusivamente a tu comentario. En ningún caso tus datos serán cedidos a terceras personas. Consulta más información en mi Política de privacidad.