LinkBack URL
About LinkBacks
Como hacer BANNERS animados e inanimados (tutorial). (Este tutorial esta pensado para aquellos que recien se inician en photoshop y el mundo del diseño)
Realizaremos dos tipos de banners:
- Inanimado, utilizando únicamente Photoshop.
- Animado, utilizando Photoshop e ImageReady.
Lo primero que debemos saber es:
¿Qué es un Banner?
Un banner, también conocido como anuncio banner, es un anuncio normalmente rectangular colocado arriba, abajo o en los lados del contenido principal de un sitio Web y que enlaza con el sitio Web del anunciante.
Al principio los banners eran anuncios con imágenes de texto y gráficos. Hoy, con tecnologías tales como flash, se consiguen banners mucho más complejos y pueden ser anuncios con texto, gráficos animados y sonido. La mayoría de los sitios Web comerciales utiliza anuncios tipo banner.
Banner Inanimado.
El primer Banner que haremos será el inanimado, por ser el más sencillo, y el que menos problemas reviste. Para hacerlo sólo necesitamos trabajar con Photoshop.
Crear el documento.
Abrimos Photoshop y creamos un nuevo documento, para ello: Pulsamos Archivo > Nuevo. (Ctrl.+N si utilizamos el teclado)
Nos aparecerá la siguiente ventana:
En la Casilla nombre, pondremos el nombre del archivo.
Las medidas que utilizaremos para nuestro banner serán de 460 pixeles de Anchura por 60píxiles de Altura. Aunque podemos utilizar diferentes medidas estás son las más usuales
Selección del color de fondo.
Damos al botón Aceptar, y nos aparece la siguiente imagen:
Para cambiar el color de fondo podemos utilizar varias herramientas:
- Pincel
- Bote de pintura
Como lo que queremos es que todo el fondo sea homogéneo y no tenga ninguna mancha blanca, utilizaremos la herramienta bote de pintura.
En el caso de que no queramos que el fondo de nuestro banner sea negro, daremos doble clic en configurar control frontal.
Nos aparecerá la ventana de selector de color, y en ella elegimos el color que queremos utilizar como fondo.
Una vez elegido pulsamos sobre la herramienta "Bote de Pintura" y damos clic dentro del banner, el fondo pasará a ser el color que hemos seleccionado.
También podríamos usar como fondo una imagen que tengamos guardada en el PC. Para ello la abriríamos, la seleccionaríamos y la arrastraríamos dentro de nuestro banner.
Introducir el Texto del Banner.
Como ya dijimos el banner es una imagen publicitaria que se coloca en nuestra Web o en nuestra plantilla de correo electrónico. Por ello la parte más importante es el mensaje que aparece en el banner.
Una vez que tenemos el color de fondo o la imagen, debemos introducir el texto, para ello seleccionamos la herramienta de texto.
Pulsamos dentro del banner y arrastramos nos aparecerá un rectángulo en el que escribiremos nuestro mensaje.
Antes de proceder a escribir, cambiamos el color de la letra, ya que si mantenemos como color frontal el que hemos utilizado para el fondo del banner, no se distinguirá.
Aunque hay varias formas de cambiar el color de la letra que queremos emplear, recomiendo que uséis la ventana conmutar paletas de caracter y párrafo, ya que en ella no sólo se puede cambiar el color sino también el tipo de letra, el tamaño, la forma del párrafo; si la queremos negrita, cursiva, etc.
Conmutar paletas de caracter y párrafo:
Una vez que hemos elegido el color, el tipo de letra (Fuente), el tamaño, etc., escribimos nuestro mensaje dentro del banner.
Cuando ya hemos terminado de escribir, pulsamos: Archivo > Guardar para la Web y damos Aceptar.
Banner Animado.
Para realizar un banner animado, seguiremos los mismos pasos que para un banner inanimado.
Lo único que cambia es que debemos usar diferente capas donde aparecerán los diferentes mensajes que queremos que aparezcan en nuestro banner publicitario.
Pulsaremos la herramienta texto y escribiremos dentro del banner, y lo haremos con cada mensaje, así aparecerán diferentes capas.
Es importante que guardemos este PSD (formato en el que se guardan los archivos de photoshop) para que si una vez hecho el banner (que se guarda en formato GIF) queremos hacer algún cambio. Para ello pulsamos Archivo > Guardar y aceptamos.
Para ver un determinado mensaje sin visualizar los otros sólo tenemos que hacer clic en el ojo del las capas que no queremos que se visualicen, y estas dejaran de verse.
Exportar el documento PSD de Photoshop a ImageReady.
Para animar el banner utilizaremos ImageReady, accederemos a través de:
Y podremos comenzar a animar nuestro banner.
Es importante abrir la ventana Animación, ya que sin ella no podremos realizar nuestro trabajo. La encontraremos en Ventana > Animación.
Animación del Banner
Una vez que tenemos la ventana de animación abierta, comenzamos a animar nuestro banner.
Lo primero que debemos hacer es hacer invisibles las capas que no queremos que se vean (pulsaremos en el icono ojo de cada capa).
Después iremos creando capas en la ventana animación y vamos pulsando en el icono ojo del mensaje que queremos que aparezca. Hasta que veamos el mensaje entero (crearemos tantas capas en la ventana animación como capas tengamos en la ventana capas).
Establecer el tiempo de intervalo y guardar el banner.
Por último tenemos que elegir el intervalo de tiempo en el que irán apareciendo los mensajes. Para ello seleccionamos la capa y pulsamos en la pestaña tiempo que hay en cada capa, y elegimos el tiempo de intervalo.
Una vez elegido el tiempo, pulsamos Archivo > Guardar Optimizada. Y ya tendremos nuestro banner Animado.
Esos es todo, con un poco de imaginacion e ingenio podras crear excelentes banners...saludos
Responder Con Cita
Re: Como hacer BANNERS animados e inanimados (tutorial). 
Iniciado por sebas 
Marcadores