¿Cómo se hacen los banners?

En está nueva subida va a ser en modo tutorial, para explicaros paso a paso como hice un banner en Photoshop.

1º Hay que tener una idea de lo que quieres reproducir (ya sean imágenes, dibujos, logotipos...) y crearlo. 

En mi caso elegí una imagen.

2º Una vez realizado el primer paso, vamos a llevar la imagen a photoshop, si la habéis creado en dicho programa este paso nos los saltamos. Vamos a dar a la imagen unos valores para cuando la reproduzcamos en la web no tengamos problemas en la subida o visualización: Imagen modo RGB, Formato GIF, dimensiones: 283x213px (suelen ser entre 280 x 150 a 1024 x 512px) a un resolución de 72ppp y un peso de archivo de 176,6Kb (no mas de 1Mb).

                                                        

3º Una vez aplicados todos los valores, vamos a iniciar el procedimiento de las "secuencias" para realizar el producto final.

En menú/ventana, encontramos la pestaña de línea del tiempo, la casamos o clicamos sobre ella. Y nos aparecerá en la parte inferior de la pantalla.

                           

Como podeis ver, ya tengo añadidas todas las capas de imagen para formar movimiento, pero en el siguiente paso empezaremos desde cero.

4º Ya tenemos sacada la línea del tiempo y en ella en la parte inferior izquierda hay dos opciones: Convertir en línea del tiempo vídeo o convertir en animación por cuatros.

 

Las dos opciones son adecuadas pero por vídeo ocupa más espacio (en nuestro caso usaremos por cuadros).

5º Para dar movimiento al trabajo final lo que he hecho ha sido duplicar la imagen principal en varias capas y en cada una de ellas mediante una selección (a la medusa) e transformado sus proporciones. 

6º Una vez terminadas tocas las capas, vamos a añadirlas a la línea del tiempo en la secuencia que queramos para dar un efecto de movimiento.

El procedimiento es : primero indicamos la visibilidad de la primera capa (por la que queramos que empiece), en la línea del tiempo en su parte inferior encontramos una pestaña que pone duplica los cuadros seleccionados, pinchamos y se nos añade la capa visible y así sucesivamente con todas las capas (siempre con un orden).

           

7º Una vez añadidas todas las capas que queremos reproducir en nuestro trabajo y seleccionando la pestaña de repetición: infinito (para dar más sensación de viveza), vamos a guardarlo.                                                                                                     Capas visibles

8º El guardado: el primer paso es posicionarte en la barra superior del programa, seleccionando Archivo/Exportar/Guardar para la web. Aparecerá una ventana con múltiples opciones, en este caso solo modificamos el formato: GIF y las dimensiones: 50%, para optimizar y que el archivo pese menos podemos reducir también la gama de tonos.

                                                                                     

En dicha ventana nos da la opción de previsualización en la parte inferior izquierda que permite que veamos una visualización del banner( de como se va a ver en la web), con sus características y el código HTML para la subida.

9º Una vez realizado todos los ajustes finales y vista su previsualización daremos a la opción guardar en la ventana anterior, donde aparecerá otra ventana, con las opciones: guardar como, formato, ajuste... Solo vamos a tocar el formato a HTML e imágenes.

Para finalizar hacemos click a guardar y en nuestro escritorio (por defecto) aparecerá el archivo GIF y HTML.

¡Y el resultado es este!

¡Un saludo y nos vemos en la próxima! 🙋📩