Banners

Banners
Una breve introducción...

Un Banner es un gráfico, generalmente alaborado en un formato de
archivo .GIF o JPG, de apróximadamente 400 x 40 pixeles, el cual
se coloca como un encabezado o una representación de una "Página
de un Website".

Hacer un Banner no es una tarea difícil si se dispone de todas las
herramientas básicas que nos permitan prepararlos, tales como: un
programa de dibujos especializado, similar al Paint Shop Pro, y
un mezclador de archivos gráficos con la finalidad de generar los
archivos GIFs con movimientos.

Si sólo poseemos un programa de dibujo básico, que no cuente con
ciertas características fundamentales, entonces es necesario poseer
algunos softwares adicionales que puedan servir de complemento: un
convertidor de formatos de imagenes y un utility para el manejo de
fondos (background) transparentes.

Tipos de Banner

Pueden clasificarse como estáticos o animados, de acuerdo con la
cantidad de archivos gráficos que se utilicen en su preparación,
o como simples y complejos, según la cantidad de elementos que
intervengan en su composición. En realidad, lo banners complejos
son aquellos en lo que se utilizan efectos especiales en menor o
en mayor cantidad. El movimiento es un efecto especial, el cual
se obtiene con la combinación de dos o más archivos en secuencia.

A continuación se presentan varios ejemplos de banners simples y
complejos, los cuales fueron preparado con la ayuda del programa
"Paint Shop Pro" versión 3.11 un shareware de JASC, Inc.

Banners Simples

Banner con letras negras y fondo azul

1. Selecciona los colores del fondo (background) y de la imagen
(foreground). En este caso, los colores azul y negro.

2. Apunta con el cursor del mouse al Menú de Archivos (File), y
luego, a la opción Nuevo (New). De inmediato observarás un cuadro
de diálogo en el cual se especifican, entre otras características
de la imagen, el Ancho (width), Alto (height) y Tipo. Coloca en
esas casillas los valores: 400 y 40, y selecciona como el Tipo de
imagen la opción "16.7 Millions color (24 bit)". De inmediato, el
programa te presentará una ventana con el fondo del banner:

3. Apunta el cursor del mouse sobre la parte superior de la ventana
y arrástrala hasta el medio del escritorio del Paint Shop Pro con el
fin de que puedas trabajar comodamente.

4. Apunta al icono que muestra la letra "T" (text) para activar el
modo de escritura, y seguidamente, apunta el cursor sobre el medio
de la pantalla destinada al Banner, la cual se identifica con el
nombre sugerido por el Paint Shop Pro: " New-1.gif ". Ahora, debes
selecciona el font (Arial Rounded MT bold), su estilo Bold (Font
Style) y su tamaño 24 (Size).

Escribe la frase "The Peter´s Coffee".

El banner tendrá ahora esta apariencia cuando se observa con un
browser, como el Netscape:

5. Finalmente, apunta con el cursor del mouse al Menú de Archivos
(File) y selecciona la opción "Save as..". El Paint Shop Pro te
presentará un cuadro de diálogo y te sugerirá un nombre, tal como
New-1.gif. Presiona el botón "OK".

Banner con letras blancas sobre fondo rojo

1. Selecciona los colores del fondo (background) y de la imagen
(foreground). En este ejemplo, los colores rojo y blanco.

2. Selecciona las mismas características de la imagen aplicadas
en el ejemplo anterior.

EL programa te presentará una ventana con el fondo del banner:

3. Posesiona el cursor del mouse sobre la parte superior de la
ventana y arrástrala hasta el medio del escritorio del Paint Shop
Pro con el fin de que puedas trabajar comodamente.

4. Apunta al icono que muestra la letra "T" (text) para activar
el modo de escritura, y seguidamente, apunta el cursor sobre el
medio de la pantalla destinada al Banner, la cual se identifica
como "New-1.gif". Selecciona el font (Arial Rounded MT bold), su
estilo Bold (Font Style) y su tamaño 24 (Size).

Escribe la frase "La Boutique de Alicia".

El banner tendrá ahora esta apariencia cuando se observa con un
browser, como el Netscape:

Banners Complejos

Banner con letras en relieve

Este Banner representa una mejora notable en comparación con los
que se presentaron anteriormente.

1. Selecciona los colores del fondo (background) y de la imagen
(foreground). En este caso, los colores azul y negro.

2. Apunta con el cursor del mouse al Menú de Archivos (File) y
luego a la opción Nuevo (New). De inmediato observarás un cuadro
de diálogo en el cual se especifican, entre otras características
de la imagen, el Ancho (width), Alto (height) y Tipo. Coloca en
esas casillas los valores: 400 y 40, y selecciona como el Tipo de
imagen la opción "16.7 Millions color (24 bit)". De inmediato, el
programa te presentará una pantalla con el fondo del banner:

3. Posesiona el cursor del mouse sobre la parte superior de la
ventana y arrástrala hasta el medio del escritorio con el fin de
que puedas trabajar comodamente.

4. Apunta al icono que muestra la letra "T" (text) para activar
el modo de escritura, y seguidamente, apunta el cursor sobre el
medio de la pantalla destinada al Banner, la cual se identifica
como "New-1.gif". Selecciona el font (Arial Rounded MT bold), su
estilo Bold (Font Style) y su tamaño 24 (Size).

Escribe la frase "The Peter´s Coffee".

El banner tendrá ahora esta apariencia cuando se observa con un
browser, como el Netscape:

5. Selecciona las opciones: Image, Special Filters y Erode. Esto
dará como resultado un aumento en el grosor de los caracteres:

6. Apunta al icono que muestra el color del modo de texto de la
imagen (foreground), haz un doble click para cambiar al color y
selecciona el color blanco de la carta de colores básicos.

7. Apunta al icono que muestra la letra "T" (text) para activar
el modo de escritura, coloca el cursor del mouse sobre la ventana
destinada al Banner para activar el modo de escritura y selecciona
el botón OK.

Después de esto, observarás que la frase "The Peter´s Coffee" se
encuentra unida al cursor del mouse. Colócala encima de la otra
frase de color negro, que ya se encuentra en la ventana en donde
preparas el banner, y presiona el botón derecho del mouse. Esta
nueva frase debes colocarla un poco hacia arriba, de manera tal
que la frase de color negro transmita el efecto de una sombra.

El banner tendrá ahora esta apariencia cuando se observa con un
browser, como el Netscape:

8. Finalmente, apunta con el cursor del mouse al Menú de Archivos
(File) y selecciona la opción "Save as..". El Paint Shop Pro te
presentará un cuadro de diálogo y te sugerirá un nombre, tal como
New-1.gif. Presiona el botón "OK".

Banner con bordes

1. Siga los pasos 1-7 descritos en el ejemplo anterior.

2. Selecciona la opción "Add Borders" en el menú Image.

3. Cuando selecciones Agregar bordes (Add Borders), observarás una
ventana denominada "Add borders" que contiene un cuadro de diálogo
(Border size) en el cual debes prodecer de la manera siguiente:

- Selecciona: Symmetric.

- Escribe un "1" en Top y luego coloca el cursor del mouse en
la casilla Bottom para que el programa llene con ese mismo
número el resto de las casillas (left y right).

- Presiona el botón "OK"

El banner tendrá ahora esta apariencia cuando se observa con un
browser, como el Netscape:

Banner con bordes complejos

1. Selecciona un color rojo con las siguientes características (red
200, blue 0, green 0) como fondo (background) del banner.

2. Selecciona un color rojo con las siguientes características (red
150, blue 0, green 0) para la superficie (foreground) del banner.

3. Apunta con el cursor del mouse al Menú de Archivos (File) y
luego a la opción Nuevo (New). De inmediato, observarás un cuadro
de diálogo en el cual se especifican, entre otras características
de la imagen, el Ancho (width), Alto (height) y Tipo. Coloca en
esas casillas los valores: 400 y 40, y selecciona como el Tipo de
imagen la opción "16.7 Millions color (24 bit)". De inmediato, el
programa te presentará una pantalla con el fondo del banner:

3. Selecciona la opción "Add Borders" en el menú Image.

4. Al seleccionar Agregar bordes (Add Borders), observarás una
ventana denominada "Add borders" que contien un cuadro de diálogo
(Border size) en el cual debes prodecer de la manera siguiente:

- Selecciona: Symmetric.

- Desactiva la opción "Symmentric" y escribe los siguientes
valores:
Top = 0
Botton = 2
Left = 0
Right = 2

- Presiona el botón "OK"

El banner tendrá ahora esta apariencia cuando se observa con un
browser, como el Netscape:

5. Haz doble click sobre el icon correspondiente al color de tipo
superficial (foreground), apunta sbre la casilla "Red" y coloca el
valor "255". Deja como están los valores de las demás casillas.

6. Selecciona de nuevo la opción "Add Borders" en el menú Image y
establece los siguientes valores:

Top = 2
Botton = 0
Left = 2
Right = 0

Para ello, debes desactivar la opción "Symmetric".

El banner tendrá ahora todos sus bordes, tal y como se observa en
la figura que observas a continuación:

7. Apunta con el cursor del mouse al Menú de Archivos (File) y
selecciona la opción "Save as..".

Banner radioactivo

Se denominan de esta manera a aquellos banners que se elaboran
usando un color negro para el fondo (background) y dos colores
para la preparación del texto (foreground), siendo uno de ellos
un color eléctrico, por ejemplo, el verde o el naranja intenso.

Es necesario utilizar un color puro, muy intenso, tales como el
amarillo, el verde, o el anaranjado, y posteriormente, el color
negro para suministrale al banner su apariencia característica.
Ejemplos de banners radioactivos son los siguientes:

Instrucciones:

1. Selecciona los colores del fondo (background) y de la imagen
(foreground). En este caso, los colores verde intenso y negro.

2. Apunta con el cursor del mouse al Menú de Archivos (File) y
luego a la opción Nuevo (New). Coloca los valores siguientes:

Ancho (width) = 400
Alto (height) = 40
Tipo = 16.7 Millions color (24 bit)

Presiona el botón "OK.

De inmediato, obvervarás una ventana con el fondo del banner:

3. Posesiona el cursor del mouse sobre la parte superior de la
ventana y arrástrala hasta el medio del escritorio con el fin
el fin de trabajar con mayor comodidad.

4. Apunta al icono que muestra la letra "T" (text) para activar
el modo de escritura, y seguidamente, apunta el cursor sobre el
medio de la ventana destinada al Banner, la cual se identifica
como "New-1.gif". En el cuadro de diálogo que se visualizará de
inmediato, selecciona Bookman Old Style (Font), Bold (Font Style)
y 24 (size).

Selecciona "Shadow" en la casilla de efectos especiales (Special
Effects) y en "Text" escribe la frase "PELIGRO !!!". Presiona OK.

Después de presionar el botón OK, el cursor adoptará la forma de
una cruz y la frase escrita anteriormente se encontrará unida a
uno de sus cuadrantes. Coloque el cursor en el medio del banner,
de manera tal, que el texto quede centrado y después presione el
botón izquierdo del mouse para pegarlo sobre el fondo negro.

El banner tendrá ahora esta apariencia:

5. Selecciona Image, Special Filters y Dilate. Esta operación es
necesario repetirla dos veces para que las letras se expandan y
puedan visualizarse de la siguiente forma:

6. Selecciona Image, Normal Filters y Blur. Repite este proceso
cinco veces o más para que las letras se vean así:

7. Ahora, selecciona el color negro para el texto (foreground).

8. Apunta el cursor del mouse sobre la ventana destinada al Banner
y presiona dos veces el botón izquierdo para que escribas de nuevo
la frase "PELIGRO !!!" sobre las letras verdes expandidas. Cuando
el Paint Shop Pro te presente el cuadro de diálogo, desactiva la
marca en la opción "Shadows" en la casilla de "Efectos Especiales"
(Special Effects) y presiona el botón "OK".

10. Coloca el cursor en el medio del banner, de manera tal que el
texto quede centrado y después presiona el botón izquierdo del mouse
para pegarlo encima de las letras expandidas de color verde.

El banner tendrá ahora esta apariencia:

11. Finalmente, apunta con el cursor del mouse al Menú de Archivos
(File) y selecciona la opción "Save as..".

____________