BANNER EN PHOTOSHOP

LOS BANNER EN PHOTOSHOP 

- Los banner en photoshop son secuencias de imágenes estáticas en movimiento rápido.

Cada elemento o imagen editibale del fotograma en la línea de tiempo de photoshop aparecerá como si fuese una capa , por lo cual no es muy difícil de entender. 

El tiempo aproximado de duración que he utilizado ha sido de 0,1-0,2 segundos. 

Y a la hora de guardarlo en photoshop sería a través de ARCHIVO - EXPORTAR- GUARDAR PARA LA WEB HEREDADO

CONSEJO : utilizar la opción de infinito para que se repita todo el rato y se pueda ver el efecto deseado. 

AQUÍ OS DEJO MIS DOS BANNERS 👇👀

300 x 600 

REPETICIÓN  INFINITA , 72ppp

Este banner está hecho desde cero es decir , he cogido la silueta de la bailarina y he cambiado el fondo a un color rojo llamativo. El truco está en ir creando una capa nueva a la vez que la vas haciendo más pequeña y le vas cambiando la perspectiva para dar la sensación de movimiento. 

300 x 100 

REPETICIÓN INFINITA  , 72ppp

BANNER INSTITUCIONAL DEL IES PUERTA BONITA 

En el baner institucional he cogido el gif de la entrada anterior y en photoshop en vez de crearlo desde cero , he añadido capas intermedias para hacerlo más largo y que se vean diferentes transformaciones de las imágenes. 

GIFMAKER

¿QUÉ ES GIFMAKER ?

GIFMAKER es una aplicación web que se encarga de crear archivos en formatos gif. Puedes crear tanto un gif como utilizarlo para crear un banner. 

Solamente tienes que coger las imágenes que vas a utilizar y arrastrarlas a un panel que hay.

Como toda aplicación tiene sus herramientas , en ellas puedes elegir la velocidad del gif , e ritmo con el que quieres que pasen las imágenes seleccionadas y hasta puedes añadirle música.

En mi caso he utilizado esta app para crear un banner institucional de mi instituto , os voy a enseñar las 5 imágenes que he utilizado. Entre ellas está la portada diseñada por mi . También están los 4 ciclos de mi instituto dedicados al diseño gráfico. 

ESTE ÚLTIMO ES MI BANNER CREADO EN GIFMAKER 👈

CLASES DE BANNERS

BANNERS 

- ¿QUÉ ES UN BANNER ?

Es 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...

Las medidas se establecen en pixeles y el peso en KB , suelen rondar los 30-50 Kb  

TIPOS: 

- 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. 

-DINÁMICOS : tienen algún tipo de animación , ya sea corta o larga, efectos de texto e imágenes que lo hacen más interesantes , enlace a la web , y estos pueden tener:logo , texto simple , slogan, idea de venta, texto publicitario e imagen. 

-ROTATIVOS : son un tipo de banners que dependiendo de la importancia que quieras darle , se puede ajustar para aparecer cada periodo de tiempo. 

A continuación os muestro 6 ejemplos de cada uno ( estáticos y dinámicos )

ESTÁTICOS : 

BANNER ESTÁTICO ENCONTRADO EN AMAZON 

BANNERS TAMBIÉN ENCONTRADO EN AMAZON

BANNERS PUBLICIARIO DE RENAULT DE FONDO, EN LA PÁGIAN DE EL PAIS 

BANNERS ESTÁTICO ENCONTTRADO EN VOLKSWAGEN 

BANNERS PUBLICATORIO EN UNA PÁGINA DE COMIDA 

BANNERS PUBLICIATRIO ENCONTRADO EN UNA PAGINA SIN MAS LLAMADA : 

DINÁMICOS : 

CORTE INGLÉS , BANNER DEL NIÑO 

BANNER DE LA PÁGIAN WEB DEL CORTE INGLÉS 

BANNER DE COMPAÑÍAS MÓVILES 

PÁGINA WEB DE CINESA DONDE SE ENCONTRABA EL BANNER DINÁMICO 

BANNER DE COCHES ENCONTRADO EN LA PÁGINA YASS 

PÁGINA YASS 

 BANERS PUBLICITARIO DE MEDIASET EN LA PÁGINA YASS 

BANNER PUBLICITARIO DE CUATRO 

PÁGINA WEB DONDE SE ENCUENTRA EL BANNER PUBLICITARIO DE CUATRO 

BANNER PUBLICITARIO DE YVES ROCHER 

PÁGINA WEB TELECINCO DONDE HE ENCONTRADO EL BANNER PUBLICITARIO DE YVES ROCHER

ABAJO OS VOY A DEJAR EL PESO DE CADA BANER , EL FORMATO Y LAS DIMENSIONES. EN CASO DE UN BANNER DINÁMICO , OS PONDRÉ TAMBIEN EL NÚMERO DE FOTOGRAMAS DE LOS QUE SE COMPONEN. 

ESTÁTICOS : 

BANNER 1 : DIMENSIÓN - 1500 x 600. MODO DE COLOR - RGB . TAMAÑO - 98 KB.

BANNER 2 : DIMENSIÓN - 1940 x 500. MODO DE COLOR - RGB . TAMAÑO - 66 KB.

BANNER 3 : DIMESIÓN - 2048 x 1152. MODO DE COLLOR - RGB . TAMAÑO - 492 KB.

BANNER 4 : DIMESIÓN - 640 x 420. MODO DE COLOR - RGB . TAMAÑO - 131 KB.

BANNER 5 : DIMESIÓN - 980 x 220. MOD DE COLOR - RGB . TAMAÑO 33 KB.

BANNER 6 : SE HA ENCONTRADO EN LA PÁGINA DEL PAÍS COLOCADO DE FONDO. ASI QUE ES IMPOSIBLE DESCARGARLO Y SABER SUS DIMESIONES. PERO COMO PODÉIS VER EL MODO DE COLOR COINCIDE IGUAL EN TODOS LOS BANNER .

TODOS LOS FORMATOS DE ESTOS BANNERS SON JPEG. 

DINÁMICOS : 

BANNER 1 : 2 FOTOGRAMAS . DIMENSIÓN - 600 x 700 . MODO DE COLOR - RGB . FORMATO - GIF . TAMAÑO - 336 KB.

BANNER 2 : AL SER UNA CAPTURA PORQ NO ME DEJABA DESCARGARLO NO OS PUEDO DECIR SUS CARACTERÍSTICAS.

BANNER 3 : 3 FOTOGRAMAS . DIMENSIÓN - 980 x 90 . MODO DE COLOR - RGB. FORMATO - GIF . TAMAÑO - 70 KB.

BANNER 4 : 125 FOTOGRAMAS . DIMESNIÓN - 300 x 600 . MODO DE COLOR - RGB . FORMATO - GIF . TAMAÑO - 823 KB ( SUPERA EL TAMAÑO GENÉRICO )

BANNER 5 : 3 FOTOGRAMAS . DIMESIÓN - 990 x 90 . MODO DE COLOR - RGB ( PERFIL SRGB IEC61966-2.1) . FORMATO - GIF . TAMAÑO - 152 KB .

BANNER 6 : 2 FOTOGRAMAS . DIMESIÓN - 300 x 600 . MODO DE COLOR - RGB. FORMATO - GIF . TAMAÑO - 143 KB.  

SEMANA DE PRODUCCIÓN

LA SEMANA DE PRODUCCIÓN 

- La semana de producción es una semana en la que se dedica todo el tiempo a exponer proyectos realizados por los alumnos del 2 año , tanto del grado medio , como del grado superior. Sinceramente hay grandes diseños muy chulos que por suerte os voy a enseñar.Hay diseños de camisetas , de tazas , catálogos , bolsas , diseños de campañas publicitarias e incluso de portadas de revistas. 

 

Diseño de una página de la revista TOULUSSE.

Diseño del metro de la casa de papel 

Diseño de una campaña publicitaria del exterior de un edificio de Callao.

Selección final del diseño de camiseta. 

Selección final de diseño de bolsa.

A parte de estos proyectos que os he enseñado había muchos más , los cuales los diseñadores de estos nos han contado paso por paso su proceso y los errores que se han ido encontrando hasta llegar al resultado final. 

Bajo mi punto de vista es una semana muy interesante en la que puedes aprender y sobre todo descubrir la creatividad de otras personas.

STOP MOTION

¿QUÉ ES STOP MOTION? 

Es una técnica de rodaje basada en continuas tomas fotográficas , donde cada plano varia ligeramente del anterior , creando así la ilusión de una animación , como en los dibujos animados y en los cortos con muñecos de plastilina. 

La animación se realiza cuadro a cuadro , variando ligeramente la posición de los muñecos o recortes de imágenes en función del movimiento que se quiera dar , adecuada al argumento o mensaje que se quiera dar. 

En mi caso hemos utilizado recortables en papeles de colores y cartulinas para crear el Stop Motion , a continuación os muestro unas imágenes :