Bannersnack y GIFMaker

¡Hola a todos! Hoy os traigo otra entrada dedicada a los banners 😊. En esta ocasión, os traigo dos páginas que os pueden servir para crear banners animados o incluso gifs de vuestros vídeos favoritos, etc.

No son muy difíciles de utilizar, pero os lo voy a explicar brevemente por si no sabéis utilizarlo u os atascáis en un momento.
La primera página que he utilizado es https://www.bannersnack.com. Es gratuita y muy fácil de utilizar.

Para empezar, os tenéis que crear una cuenta (podéis utilizar vuestra cuenta de gmail o incluso de facebook). Luego lo único que tenéis que hacer es seleccionar el tipo de banner que queráis crear y a partir de ahí ya podéis hacer lo que queráis con el banner. Yo os voy a dejar un ejemplo por aquí que anuncia mi blog.



La siguiente página que vamos a utilizar es http://gifmaker.me. En esta página, podemos crear los gif mediante imágenes, capturas, etc.

Yo he utilizado capturas de mi anterior gif para poder realizar el nuevo, y la verdad es que es bastante sencillo. Lo único que he tenido que hacer ha sido subir las capturas y luego ajustar la velocidad a la que quiero que vaya el gif.
En este caso, no es necesario crearse una cuenta para poder utilizar esta web, así que una cosa menos que revisar en el correo 😂.
Aquí os dejo el gif realizado en esta página para que veais como queda.

Y nada más por mi parte. Ya sabéis que tenéis los comentarios para dejarme alguna duda o crítica. ¡Un saludo y hasta la próxima 😄!

Banners estáticos y dinámicos: ejercicio

¡Hola a todos 😊! En esta entrada, os voy a enseñar un par de ejercicios de banners que he realizado en clase. La aplicación que he utilizado es Photoshop.

Antes de comenzar, recordemos lo que es un banner estático y un banner dinámico.

Un banner estático es aquel que no tiene ningún tipo de animación, tiene un breve texto con un enlace y puede contener un logo.

Un banner dinámico es aquel que tiene algún tipo de animación (de corta o larga duración), ya sea efectos de texto o de imagen que lo hace más interesante. Puede contener un logo, texto simple, eslogan, etc.

Lo único que lo diferencia del estático es la animación.

Y ahora, vamos con el ejercicio:

El proceso para crear este banner dinámico ha sido el mismo que el de la bailarina en la anterior entrada, solo que añadiendo más elementos como pueden ser los marcos, los círculos y los textos.

El siguiente banner es sobre el día mundial sin tabaco. Sigo los mismos pasos que en los dos anteriores.

Por último, el banner dinámico del instituto: 

Y aquí os voy a dejar tres ejemplos de banners estáticos. Dos de ellos son parte de los dos ejercicios anteriores 😊.

Y hasta aquí la entrada de hoy. Ya sabéis que si tenéis alguna duda o alguna crítica, podéis dejarme un comentario y responderé lo más rápido posible. ¡Un saludo!

Cómo hacer un banner dinámico

¡Hola a todos 😊! En esta entrada voy a explicar cómo se hace un banner dinámico en Photoshop. No es un proceso muy difícil, pero puede hacerse pesado en algunos pasos. El resultado puede ser muy bueno si se tiene paciencia y se va con calma, porque esto no se hace en cinco minutos.

Como modelo para esta explicación, voy a utilizar a una bailarina que gira sobre si misma. Vosotros podéis utilizar cualquier imagen, pero os recomiendo que la vectoricéis antes de utilizarla, ya que si no, perdería calidad y no sería adecuada para este proceso.

El primer paso es abrir photoshop y mirar la línea de tiempo (en este caso ya tiene los fotogramas que vamos a utilizar para la animación, pero a vosotros os tiene que aparecer vacía):

En este proceso vamos a tener que estar muy pendientes de las capas y de la línea de tiempo, así que os recomiendo que los tengáis siempre a mano (lo tenéis todo en el apartado ventana).

Lo segundo que vamos a hacer es coger a la bailarina y ponerla en otra posición,, tamaño, etc. Para esto podéis utilizar la transformación libre y todas sus otras opciones. Yo he hecho que gire sobre si misma:

Mi proyecto tiene en total unas 14 capas, contando con el fondo y la bailarina inicial, mientras que lo demás es el giro.

Lo siguiente puede ser lo más pesado. Para crear la animación vais a tener que estar quitando y poniendo las capas que hayáis hecho para este proyecto y hacer "capturas" de los fotogramas que vayáis a utilizar. Para hacerlo, tenéis que iros a la línea de tiempo y darle a esta pestaña. Esta os hará una "captura" del fotograma y os lo añadirá a la línea de tiempo como podéis ver en la foto.

Cuando ya tengáis los fotogramas que queráis, podéis cambiarle el tiempo de transición que hay entre ellos. Yo personalmente le he puesto 0,07 segundos para que no vaya ni muy rápido ni muy lento.

Ahora hay que guardarlo. En este caso se tiene que ir a: 

Archivo -> Exportar -> Guardar para la web.

Ahí os saldrá un recuadro como este:

Lo único que hay que hacer es darle a guardar y ya estaría 😃. Aquí os dejo el resultado de mi animación como ejemplo de banner dinámico. Espero que lo hayáis entendido y si tenéis alguna duda o algo, dejádmelo en los comentarios y lo intentaré resolver en cuanto pueda. ¡Un saludo!

Tipos de banners

¡Hola a todos 😁! Hoy os voy a explicar los diferentes tipos de banners que existen en el mundo de Internet.

Pero, ¿qué es un banner? 

Un banner es una pieza publicitaria dentro de una página web. El objetivo que tienen es atraer tráfico hacia el sitio web anunciante que paga por su inclusión.
El tipo de contenido que puede incluir un banner va desde imágenes, audios, y vídeos hasta textos, formularios, etc.

Ahora, vamos a los tipos de banners, que se pueden dividir entre estáticos (JPEG o PNG) y animados (animaciones, GIF, Java y Flash)

Tipos de banners estáticos:

Los banners estáticos no tienen ningún tipo de animación, tienen un breve texto con un enlace y pueden contener un logo.
Ahora vamos a poner seis tipos como ejemplo:

-Robapáginas: es un banner rectangular vertical que está muy bien ubicado para que el usuario no se sienta molestado por el. Suele tener muy buena efectividad y suele ubicarse al lado de un artículo. Este banner tiene unas dimensiones de 339 x 663 px y una resolución de 72 ppp. Su formato es de JPEG, pesa unos 86 KB y su modo de color es RGB.

-Leaderboard: banner vertical que se suele situar en la parte superior de la pantalla. Sus dimensiones son de 970 x 250 px y tiene una resolución de 72 ppp. Utiliza el formato PNG, pesa unos 41 KB y su modo de color es el RGB.

                          

-Skycraper/rascacielos: es un banner vertical que se coloca normalmente a la derecha de la página. Las dimensiones de este banner son 160 x 600 px y tiene una resolución de 72 ppp. Utiliza el formato JPEG, pesa unos 281,3 KB y su modo de color es el RGB.

-Botones: son banners que suelen ser rectangulares o cuadrados. Pueden ser "clickables" y están situados en puntos diversos de la composición de la página. Las dimensiones de este banner son 425 x 111 px y tiene una resolución de 72 ppp. Utiliza el formato PNG, pesa 138,2 KB y su modo de color es RGB.

-Micro banner: es un banner de reducido tamaño que se suele encontrar en el lado inferior de las páginas. Este tiene unas dimensiones de 300 x 100 px y tiene una resolución de 72 ppp. Utiliza el formato TIFF, pesa unos 87,9 KB y su modo de color es RGB.

-Half page: muy parecido al robapáginas y al skyscraper. Sus dimensiones son 144 x 288 px y tiene una resolución de 72 ppp. Utiliza el formato JPEG, pesa 121,5 KB y su modo de color es el RGB.

Tipos de banners dinámicos:

Los banners dinámicos tienen algún tipo de animación (de corta o larga duración), ya sea efectos de texto o de imagen que los hacen más interesantes. Pueden contener un logo, texto simple, eslogan, etc.

Lo único que los diferencian de los estáticos es la animación.

Vamos a poner otros seis ejemplos:

-Robapáginas: 300 x 250 px y 72 ppp de resolución. Utiliza el formato GIF, pesa 219,7 KB y su modo de color es el RGB.

-Leaderboard: 730 x 92 px y 72 ppp de resolución. Utiliza el formato GIF, pesa unos 196,8 KB y su modo de color es el RGB

-Skyscraper/rascacielos: 160 x 600 px y 72 ppp de resolución. Utiliza el formato GIF, pesa 281,3 KB y su modo de color es el RGB.

-Botones: 283 x 113 px y 72 ppp de resolución. Utiliza el formato GIF, pesa 93,7 KB y su modo de color es RGB.

-Micro banner: dimensiones de 300 x 100 px y tiene una resolución de 72 ppp. Utiliza el formato GIF, pesa unos 87,9 KB y su modo de color es RGB.

-Half page: 302 x 602 px y su resolución es de 72 ppp. Utiliza el formato GIF, pesa 532,6 KB y su modo de color es el RGB.

Y hasta aquí todo chicos. Si tenéis alguna duda o crítica, me podéis dejar un comentario e intentaré resolverlo lo más rápido posible ☺️. ¡Un saludo!