Preimpresión Digital: abril 2018

lunes, 30 de abril de 2018

Banner para Web

¡Bienvenid@s a otra entrada!

A continuación, voy a hablar de tres páginas online en la que podrás crear banners, sin necesidad de utilizar Photoshop.

Bannersnack

Es una página que permite comenzar el banner con unos tamaños preparados utilizando banners ya creados, o bien, empezar desde el principio. Además, se pueden agregar textos, formas y colores para el fondo.

HTML5

Esta es una página sencilla, únicamente te permite añadir imágenes o utilizar las de la página, textos, efectos y transiciones. Es necesario disponer de Adobe Flash para su uso.

Gifmaker

Es el programa más fácil de los tres de utilizar, tan sólo se necesitan las fotografías para generar el gif, la única pega es que no tiene opción a copiar el código HTML.

A continuación, os dejo unos ejemplos de cada programa para que elijáis el que más os guste, u os convenga según lo que deseéis.

1º Gifmaker.

2º Bannersnack.

3º HTML5 Maker.

Espero que os sirva de gran ayuda a la hora de crear vuestros gifs de manera rápida y sencilla.
Un saludo, y hasta la siguiente entrada.

jueves, 26 de abril de 2018

Ejemplos de Banners

En esta entrada os muestro más tipos de banners creados en Photoshop:

He dinamizado este banner, porque previamente la profesora nos facilitó la siguiente imagen original y una final, con la que teníamos que conseguir movimiento:

ORIGINAL

IMAGEN FINAL

Para ello, he utilizado la tipografías y colores correspondientes, aplicándole los efectos deseados como bien explico en mi anterior entrada, es decir, para crear movimiento.

Su tamaño es 720 x 300 px

Para crear este banner, se siguen los mismos pasos que en el anterior, únicamente cambia el tamaño.

Su tamaño es 336 x 280 px.

Este banner, está creado desde cero por mi mismo, únicamente he escogido unas imágenes (en este caso de mi centro y su logotipo) siendo creativo, las he ido colocando, y aplicando el movimiento deseado, utilizando las opciones que explico en mi anterior entrada.

Su tamaño es 728 x 90 px.

Un saludo, y hasta la próxima entrada.

Creación de Banners con Photoshop

Hoy hemos aprendido a crear banners animados mediante Photoshop, os voy a explicar como lograr hacer un banner similar:

1. Escoger una imagen y abrirla en Photoshop.

2. Abrir línea del tiempo (menú/ventana/línea del tiempo).

3. Aplicas el efecto deseado a través de capas, clicando después en la opción "duplicado de cuadros seleccionados", ubicado en la línea del tiempo que aparecerá en la parte inferior izquierda de la pantalla.

4. Le aplicas los segundos que deseas que haya de transición entre imágenes, y la cantidad de veces que quieres repetirlo.

5. Reproduces el video para observar que todo está correcto, y finalmente lo exportas para web utilizando GIF como formato de archivo, para que el movimiento sea posible y visible.

Quedando de esta forma:

En la siguiente entrada os explicaré más sobre los banners, si tenéis dudas o cualquier pregunta, podéis contactar conmigo.

Un saludo.

Banners

¿Qué son los banners?

Son piezas publicitarias dentro de una página web. Su objetivo es atraer el 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...

Pueden ser:

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.

Animados o dinámicos: Tienen algún tipo de animación, ya sea corta o larga, efectos de texto e imagen que lo hacen más interesantes, enlace a la web, y estos pueden tener: logo, texto simple, eslogan, idea de venta, texto publicitario e imagen.

Existen zonas en las pantallas de los dispositivos que los usuarios visualizan más que otras, podemos decir que se denominan zonas calientes.

Os dejo un ejemplo en esta imagen de dichas zonas, en la que el color rojo representa la parte más visualizada, y la azul la menos.

Existen muchos formatos de banner, los principales son los siguientes: