Bannersnack y Gifmaker

¡Hola a todos!✋😄 hoy os voy a enseñar como hacer un Banner con estas dos aplicaciones primero os vamos a hablar de Bannersnack y luego de Gif Maker.

HTML 5:

El “Hypertext Markup Language”, más conocido como HTML, es un lenguaje de programación que, como su nombre indica, describe el formato que tendrá el contenido de un documento.

Este estándar sirve de referencia para la elaboración de páginas web en sus diferentes versiones, definiendo una estructura básica y un código (denominado código HTML) para la definición de contenido de una página web, como texto, imágenes, etc.

Por ejemplo, especifica los formatos de carácter y párrafo, las imágenes que se utilizarán, etcétera.

HTML 5 es el sucesor de HTML 4.

Esta última versión, debe reflejar las necesidades actuales y, por esta razón, incluye algunas novedades.

Por ejemplo, permite la reproducción interna de vídeos, audio y juegos. Todo ello sin que sean necesarios, además, programas adicionales, como es el caso de Adobe Flash.

¿CUÁLES SON SUS VENTAJAS?

 HTML 5 ofrece a los programadores de sitios web nuevas oportunidades. Así, navegadores web tan populares como Internet Explorer, Mozilla Firefox o Google Chrome ya son compatibles con HTML 5.

Además, este estándar también funciona correctamente con smartphones y tablets.
De este modo, también es posible mejorar la velocidad y visualización de las páginas webs en dispositivos móviles.

Bannersnack: bannersnack.com  

Creador de banner de fácil uso, arrastrando y soltando.Creador de Banners en HTML5 animado y estáticos. 

Gifmaker.me. gifmaker.me

Crea banners compatible con todas las redes. Rápido y sencillo de usar con tan solo un click eliges tus imágenes y el mismo te las coloca, puedes ir ajustando la velocidad a la que quieras.

Banners Dinámicos ( Rich Media) y Banners Estáticos

¡Hola a todos! ✋😁  aquí os dejo unos cuantos Banners dinámicos que henos realizado en clase con photoshop espero que os guste.

Rich Media:

Rich media es un término que se usa en el mundo de la publicidad digital para describir los anuncios con funciones avanzadas como vídeo, sonido u otros elementos que atraen a los espectadores y consiguen que estos interactúen con el contenido.

Mientras que los anuncios de texto venden con palabras y los anuncios de display venden con fotos, los anuncios rich media ofrecen más formas de captar la atención de la audiencia.

Entre las ventajas clave de las creatividades Rich Media se encuentran las siguientes:
Una experiencia de usuario atractiva que da lugar a una mayor tasa de interacción
Aumento de la tasa de conversiones, clics de destino y visualizaciones
Mejores métricas que con los anuncios tradicionales

A continuación se detallan las diferencias entre las creatividades Rich Media y las estándar:

Creatividad estándar

Creatividad Rich Media

Un formato de archivo único .html, .gif, .png, or .jpg file format de 200 K o menos No contiene vídeo ni expansiones Por lo general, solo realiza el seguimiento de un enlace de destino.

Por lo general supera los 200 K. Puede usar varios archivos. Puede contener vídeo. Puede expandirse a un tamaño mayor. Puede incluir métricas de seguimiento detalladas sobre la interacción de los usuarios. Puede realizar el seguimiento de varios enlaces de destino Puede contener otras funciones especiales (sondeos, envíos a amigos, galería, etc.). Algunos editores pueden requerir una carga progresiva

Banners Dinámicos:

Banners Estáticos:

No tienen ningún tipo de animación, tienen un breve texto de información con enlace a la web, y pueden tener un logo.

Banner estático Large rectangle 336 x 280 ppp.

Banner estático pop under 720  x 300 ppp.

 Banner Estático Leaderboard 728 x 90 ppp.

Explicación de como hacer un Banner Dinámico

¡Hola a todos! hoy os voy a explicar paso a paso como se hace un Banner Dinámico en Photoshop, en este caso es de una bailarina y vamos a hacer que gire. Para comenzar os voy a explicar que es un Banner dinámico.

Banners Dinámicos:

Los formatos dinámicos, también llamados “rich media”, proporcionan opciones avanzadas como sonido, video o animaciones especiales como la expansión del anuncio al pasar el cursor por encima del mismo. Estos formatos son más visuales, además de soportar un mayor peso (hasta 10 MB, dependiendo de la web).

El coste de producción de este tipo de piezas suele ser más elevado que la de los formatos estándar, sin embargo, proporcionan una mayor atracción y visibilidad. Por otro lado, hay que tener en cuenta que es necesaria la contratación de un Adserver para poder servirse la pieza.

Pasos para hacer un Banner Dinámico en photoshop:

1. Vamos a dar en ventana y a Línea del tiempo. 

¿Que es La Línea del tiempo en Photoshop?

Sirve para animar contenido de capa en modo de línea de tiempo, se definen imágenes principales en el panel Línea de tiempo a medida que se mueve el indicador de tiempo actual a un cuadro/tiempo diferente y, a continuación, se modifica la posición, la opacidad o el estilo del contenido de capa. Photoshop añade o modifica automáticamente un conjunto de cuadros entre dos cuadros existentes variando las propiedades de capa (posición, opacidad y estilos) de forma equitativa entre los nuevos cuadros para crear la ilusión del movimiento o transformación.

2. Vamos a ir duplicando las capas y modificando a la bailarina, poniéndola de distintas formas para darle el efecto de que está girando. una vez que tenemos todas las capas hacemos la línea del tiempo.

3.Vamos duplicando los cuadros seleccionados, dandole a visualizar una por una las capas que tenemos, es decir pinchamos en nuestra primera capa de la bailarina con la vista puesta y las demás quitadas y hacemos un nuevo duplicado de capa y lo mismo con la segunda ponemos la vista en la segunda las de las demás capas las quitamos y hacemos un nuevo cuadro y así sucesivamente .

4. Ya lo tenemos y lo que tenemos que hacer es ir a Archivo exportar guardar para web ( heredado).

5. Ultimo paso le damos a Guardar y ya lo tendríamos.

Resultado de el banner dinamico de la bailarina.

Banners integrados

Hola a todos os voy a hablar sobre los banners y los distintos tipos de banners vamos a poneros varios ejemplos de 6 Banners estáticos y 6 Dinámicos.

¿ Que es un Banner?

Una pieza publicitaria dentro de una página web. Su objetivo es atraer tráfico hacia el sitio web del anunciante que paga por su inclusión.

Su contenido puede incluir imágenes, textos, animaciones, vídeos, audio, formularios...

Puede ser estático (JPEG o PNG), o animado (con animaciones, GIF, java, flash).

Las medidas se establecen en pixeles y el peso (tamaño o volumen del archivo en Kb). Suelen rondar entre 30 y 50 Kb.

Banners estáticos

Son los banners más básicos, diseñados en .jpg, .gif o en .swf (flash). Su peso está limitado aproximadamente a 150KB (el peso depende del site dónde te publicites), dando la posibilidad de ser estáticos o animados, dependiendo del formato en que hayan sido diseñados.

Robapáginas:


Banner rectangular vertical que está muy bien integrado en las páginas y en sitios estratégicos donde el usuario no se siente molestado por la publicidad. Normalmente se ubica al lado del contenido de un artículo. Posee una muy buena efectividad. Con formato png  y unas dimensiones de 300px x 600px de Anchura 10,58 cm , Altura 21,17 cm y de resolución de 72 con un peso de 230 KB y un modo de color en RGB.

 

Rascacielos o skycraper: Banner rectangular vertical que se coloca normalmente al lado derecho de la página web.Posee una buena efectividad. Con formato jpeg  y unas dimensiones de 160 px x 600 px de Anchura 5,64 , Altura 21,17 y de resolución de 72 con un peso de 281,3 KB y un modo de color RGB.

Leaderboard (728x90). Banner vertical que se suele situar en la parte superior de la página.

Posee una buena efectividad. Con formato jpeg y unas dimensiones de 980 px x 250 px de Anchura 34,57 y de Altura 8,82 y de resolución de 72 con un peso de 717, 8 KB y un modo de color RGB

Botones: Son banners más pequeños, generalmente cuadrados y rectangulares. Pueden ser estáticos o dinámicos, Son “clickables” en muchos casos y situados en puntos diversos dentro de la composición de la página.  Con formato jpeg y unas dimensiones de 800 px x 467 px de Anchura 28,22, de altura 16,47 y una resolución de 72 con un peso de 1,07 MB y un modo de color RGB.

Banners Dinámicos.

Los formatos dinámicos, también llamados “rich media”, proporcionan opciones avanzadas como sonido, video o animaciones especiales como la expansión del anuncio al pasar el cursor por encima del mismo. Estos formatos son más visuales, además de soportar un mayor peso (hasta 10 MB, dependiendo de la web).

Botones: Son banners más pequeños, generalmente cuadrados y rectangulares. Pueden ser estáticos o dinámicos, Son “clickables” en muchos casos y situados en puntos diversos dentro de la composición de la página. Esta en un formato jpeg de dimensiones de 300 px x 250 px de anchura tiene 10,58 y de Altura 8,82, presenta una resolución de 72 y un tamaño de 219,7 KB

Leaderboard (728x90). Banner vertical que se suele situar en la parte superior de la página. Con un formato JPEG. De dimensiones 728 PX X 90 PX, de Anchura 25,68 y de Altura 3,18, presenta una resolución de 72 y un tamaño de imagen de 192,0 KB el modo de color es RGB.

Rascacielos o skycraper (120 x 600): Banner rectangular vertical que se coloca normalmente al lado derecho de la página web. Formato JPEG de dimensiones de 120 px x 600 px, de Anchura de 4,23 y Altura de 21,17, con una resolución de 72, presenta un tamaño de 210,9 KB y su modo de color es RGB.

Formato JPEG, Tamaño de la imagen 281,3 KB, con unas dimensiones de 160 px x 600 px , de Anchura de 5,64 , Altura 21,17 y de resolución de 72

Botones: Son banners más pequeños, generalmente cuadrados y rectangulares. Pueden ser estáticos o dinámicos, Son “clickables” en muchos casos y situados en puntos diversos dentro de la composición de la página. Formato JPEG de dimensiones de  450 px x 200 px , de Anchura de 15,88 y de Altura de 7,06 resolución 72 y un tamaño de 263,7 KB. modo de color RGB