C U R SO D E C R EAC IÓ N D E BAN N ER S Por Angel Luis Almaraz Gonzalez www.microshopnet.net
[email protected] 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 M enú de Archivos (File)y luego a la opción N uevo (N ew ).D e inm ediato observarás un cuadro de diálogo en elcualse 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 im agen la opción "16.7 M illions color(24 bit)".C uando presiones elbotón "O K",observarás una ventana que contiene elfondo del banner:
3. Posesiona el cursor del mouse sobre la parte superior de la ventana y arrástrala hasta elm edio delescritorio delPaintShop 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, coloca el cursor sobre el medio de la ventana destinada al Banner, la cual se identifica como "New-1.gif", y presiona elbotón izquierdo delm ouse. Selecciona el font "Arial Rounded MT bold", el estilo Bold (Font Style)y eltam año 24 (Size). Luego, escribe la frase: "The Peter´s Coffee". Elbannertendrá ahora esta apariencia cuando se observa con un browser, como el Netscape:
5.Finalm ente,apunta con elcursordelm ouse alM enú 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 nom bre,talcom o New-1.gif.Escoje ese o elde tu agrado y presiona elbotón "O K". 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. Apunta con el cursor del mouse alM enú de Archivos (File)y luego a la opción N uevo (N ew ).D e inm ediato,observarás un cuadro de diálogo en elcualse especifican,entre otras características: el Ancho (width), Alto (height) y Tipo (Image Type) de la imagen. Coloca en esas casillas los valores: 400 y 40, y selecciona como elTipo de im agen la opción "16.7 M illions color(24 bit)".Luego, presiona "OK".
EL program a te presentará una ventana con elfondo delbanner:
3. Posesiona el cursor del mouse sobre la parte superior de la ventana y arrástrala hasta elm edio delescritorio delprogram a 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, coloca el cursor sobre el medio de la pantalla destinada al Banner, la cual se identifica como "New-1.gif",y presiona elbotón izquierdo delm ouse dos veces para ira elcuadro de diálogo "Add Text". Selecciona el font "Arial Rounded MT bold", el estilo "Bold" (Font Style) y eltam año 24 (Size). Escribe en la casilla "text" la frase "La Boutique de Alicia" y luego presiona elbotón "O K".
Ahora,elbannertendrá esta apariencia cuando se observa con un browser, como el Netscape o el Explorer:
5.Finalm ente,apunta con elcursordelm ouse alM enú 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 nom bre,talcom o New-1.gif.Presiona elbotón "O K".
Banners en Relieve Para preparar este tipo de efectos en los bordes se utilizan tres tonalidades diferentes de un mismo color: brillante, medio y oscuro. En este ejemplo, se seleccionaron las siguientes tonalidades del color rojo, a saber:
rojo (brillante) = red 255, blue 0, green 0 rojo (intermedio) = red 200, blue 0, green 0 rojo (oscuro) = red 150, blue 0, green 0 El tono intermedio se utiliza como fondo (background) del banner, el brillante para el borde superior (top) e izquierdo (left), y el tono oscuro en los bordes inferior (bottom) y derecho (right). Partiendo de esta base, procede de la siguiente manera: 1. Selecciona como fondo (background) del banner un color rojo con las siguientes características: red 200, blue 0, green 0. 2. Selecciona para la superficie (foreground) del banner un color rojo con las siguientes características:red 150,blue 0,green 0.
3.Apunta con elcursordelm ouse alM enú de Archivos (File)y luego a la opción N uevo (N ew ).D e inm ediato,observarás un cuadro de diálogo en elcualse especifican,entre otras características de la imagen, su Ancho (width), Alto (height) y Tipo. Coloca en esas casillas los valores: 400, 40 y selecciona la opción "16.7 Millions color (24 bit)" como el Tipo de imagen. Luego, debes presionarelbotón "O k".
Sobre elescritorio observarás una ventana con elfondo delbanner:
3.Selecciona la opción "Add Borders"en elm enú Im age.
4.D espués de seleccionarAgregarbordes (Add Borders),observarás una ventana que contiene un cuadro de diálogo (Border size) en el cual debes prodecer de la manera siguiente:
- D esactiva la opción "Sym m entric"y escribe los siguientes valores: Top
=0
Botton = 2 Left = 0 Right = 2 - Presiona elbotón "O K"
Elbannertendrá 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 sobre la casilla "Red" y coloca el valor"255".D eja com o están los valores en las dem ás casillas.
6.Selecciona de nuevo la opción "Add Borders"en elm enú Im age y establece los siguientes valores: Top
=2
Botton = 0 Left = 2 Right = 0
R ecuerda que antes debes desactivarla opción "Sym m etric".
Elbannertendrá ahora todos sus bordes,taly com o se observa en la figura siguiente:
7.Apunta con elcursordelm ouse alM enú de Archivos (File)y selecciona la opción "Save as..".
Banners en Relieve. Para elaborar este tipo de efectos en los bordes se utilizan tres tonalidades diferentes de un mismo color: brillante, medio y oscuro. En este ejemplo, se seleccionaron las siguientes tonalidades del color verde, a saber: verde (brillante) = red 0, blue 0, green 255 verde (intermedio) = red 0, blue 0, green 206 verdeo (oscuro) = red 0, blue 0, green 148 El tono intermedio se utiliza como fondo (background) del banner, el brillante para el borde superior (top) e izquierdo (left), y el tono oscuro en los bordes inferior (bottom) y derecho (right). Partiendo de esta inform ación,procede de la siguiente manera: 1. Selecciona como fondo (background) del banner un color rojo con las siguientes características:red 0,blue 0,green 206. 2. Selecciona para la superficie (foreground) del banner un color rojo con las siguientes características:red 0,blue 0,green 148.
3.Apunta con elcursordelm ouse alM enú de Archivos (File)y luego a la opción N uevo (N ew ).D e inm ediato observarás un cuadro de diálogo en elcualse especifican,entre otras características de la imagen, el Ancho (width), Alto (height) y Tipo.
C oloca en esas casillas los valores:400,40 y selecciona la opción "16.7 Millions color (24 bit)" como el Tipo de imagen. Luego, debes presionar el botón "O k".
En elm edio delescritorio observarás una ventana con elfondo del banner:
3.Selecciona la opción "Add Borders"en elm enú Im age.
4.D espués de seleccionarAgregarbordes (Add Borders),observarás una ventana que contiene un cuadro de diálogo (Bordersize)en el cual debes prodecer de la manera siguiente: - D esactiva la opción "Sym mentric" y escribe los siguientes valores: Top
=0
Botton = 2 Left = 0 Right = 2 - Presiona elbotón "O K"
Elbannertendrá 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 sobre la casilla "Gree" y coloca elvalor"255".C oloca "0"en las dem ás casillas.
6.Selecciona de nuevo la opción "Add Borders"en elm enú Im age y desactiva la opción "Sym m etric".Luego,establece los siguientes los valores: Top
=2
Botton = 0 Left = 2 Right = 0
Elbannertendrá ahora todos sus bordes,taly com o se observa en la figura siguiente:
7. Apunta con el cursor del mouse alM enú de Archivos (File)y selecciona la opción "Save as..".
Bordes Dorados. Existen varias maneras de hacer un barnner con un borde de este tipo: - Realizar un zoom a la imagen y editar los pixels que integran el borde de la imagen. Este es un proceso lento, laborioso y que requiere dom inio en elm anejo de la degradación de los colores. - Copiar toda la imagen desde otro banner usando la herramienta "Magic Wand" y las opciones Copy y Paste, y luego, eliminar todo el centro de la imagen usando las opciones Rectangular y Clear. Esta alternativa es m uy sencilla y rápida,pero exige precisión alm arcarelárea de corte.Llam aré a esta opción Técnica W ard1. - Copiar el borde desde otro banner usando la herramienta "Magic Wand" y las opciones Copy y Paste del Edit del Paint Shop. Esta ú ltim a alternativa es sencilla y rápida.
En este tutorialexplicarem os la segunda y tercera opción,a las cuales denom inarem os "técnicas W ard1 y W ard2"con elobjeto de diferenciarlas.
Técnica W ard 1 1. Selecciona los colores del fondo (background) y de la imagen (foreground). En este caso, los colores carne y amarillo.
2.Apunta con elcursordelm ouse alM enú de Archivos (File)y luego a la opción N uevo (N ew ).D e inm ediato observarás un cuadro de diálogo en elcualse especifican,entre otras características de la imagen, el Ancho (width), Alto (height) y Tipo. Coloca en esas casillas los valores: 396 y 36, y selecciona como el Tipo de im agen la opción "16.7 M illions color(24 bit)".Luego, presiona "O K"y observarás una ventana con elfondo delbanner:
Observa que las dimensiones iniciales del banner son "396 x 36", esto se debe a que luego se le agregarán bordes;en consecuencia, eltam año de la im agen aum entará a cada lado en función deltam año que se asigne a cada uno de ellos.D e esta m anera,se alcanzarán las medidas estandars de 400 x 40.En este ejem plo,elborde será sim étrico y su tam año será "2"de cada lado: Top
=2
Botton = 2 Left = 2 Right = 2 Por lo tanto: Ancho (width) = 396 + borde izq + borde der Ancho (width) = 396 + 2
+2
Alto (height) = 36 + borde izq + borde der Alto (height) = 36 + 2
+2
3.Selecciona la opción "Add Borders"en elm enú Im age.
4.AlseleccionarAgregarbordes (Add Borders),observarás una ventana denom inada "Add borders"que contiene un cuadro de diálogo (Border size) en el cual debes prodecer de la manera siguiente: - Selecciona: Symmetric. - Escribe un "2" en Top y luego coloca el cursor del mouse en la casilla Bottom para que el programa llene con ese mismo nú m ero elresto de las casillas (left y right). - Presiona elbotón "O K"
Elbannertendrá ahora esta apariencia cuando se observa con un browser, tal como el Netscape:
5.- C apture elbannersiguiente y guárdelo com o dorado.gif:
Para ello, coloque el cursor del mouse sobre el barnner, presione elbotón derecho,m ueva elcursorsobre la opción "Save im age as" y click. Asumo que usted posee el Netscape, si este no es el caso, créam e que lo siento,pero m e im agino que elproceso de guardaro salvar un archivo debe ser parecido en otros navegadores. 6.- Abra (File, Open) la imagen del banner dorado.gif sobre el escritorio del Paint Shop.
7.- Seleccione la herramienta "Magic Ward" del "Select Toolbox" y luego apunte y disparé sobre la parte superiorde la ventana que
contiene el banner "dorado.gif" para que sea la ventana activa. 8.- Coloque el cursor del mouse sobre el borde dorado y presione elbotón izquierdo delm ouse (click).D espués de esto,elárea que selecciones se destacará (form a punteada). 9.- Apunta y dispara a Im age y selecciona la opción C opy. 10. Apunte y disparé sobre la parte superiorde la nueva ventana en la que se pegará elborde. 11.- Selecciona Image, Paste y "As New selection". 12.- Coloca el cursor sobre el borde del barnner New-1.gif, en el mismo lugar relativo en el cual se encuentra ese mismo pedazo en elbarnnerde m uestra "dorado.gif",y presiona elbotón izquierdo delm ouse (click)para pegarese pedazo de borde.D espués de esto, elárea que en donde se pegó eltrozo de borde se destacará (form a punteada)y tendrá una apariencia sim ilara la siguiente:
13. Repite los pasos 8 a 12 antes descritos, y poco a poco, el bannerirá tom ando form a:
hasta que quede completamente listo:
14.Ahora,es cuestión de procedera colocarles algo de texto.Por
lo tanto, haz un "doble click" sobre el icon que contiene el color superficial (foreground) y selecciona el color negro.
15.Selecciona elicon en form a de "T"que está disponible en la caja de herramientas "Select Toolbox" con el fin de activar modo de texto. 16. Apunta y doble click sobre el medio de la pantalla destinada alBannerdorado.gifpara iralcuadro de diálogo "Add Text".Allí, selecciona el font Brush Script MT, el estilo Negrita cursiva (Font Style)y asígnale eltam año (Size)22. En la casilla "Text" escribe la frase "Bordes dorados...".
Elbannertendrá ahora esta apariencia cuando se observa con un browser:
17. 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 elcolorblanco de la carta de colores básicos. 18. Apunta al icono que muestra la letra "T" (text) para activar el modo de escritura, coloca el cursor del mouse sobre la ventana destinada alBannery presiona dos veces elbotón izquierdo del mouse para activar el modo de escritura. Presiona elbotón "O K".
D espués de esto,observarás que la frase "Bordes dorados..."se encuentra unida alcursordelm ouse.C olócala encim a de la otra frase de color negro, que ya se encuentra en la ventana en donde preparas el banner,y presiona elbotón izquierdo delm ouse para fijar la frase sobre el banner.
Ahora,ya elbarnnerestá listo...
Disfrú talo!
Letras en Relieve y con Sombras 1. Selecciona los colores del fondo (background) y de la imagen (foreground). En este caso, los colores azul y negro.
2.Apunta con elcursordelm ouse alM enú de Archivos (File)y luego a la opción N uevo (N ew ).D e inm ediato observarás un cuadro de diálogo en elcualse 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 im agen la opción "16.7 M illions color(24 bit)".Luego,presiona "O K"y observarás una ventana con elfondo delbanner:
3. Posesiona el cursor del mouse sobre la parte superior de la ventana y arrástrala hasta elm edio delescritorio delPaintShop Pro para que puedas trabajar con 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 pantalla destinada al Banner, la cual se identifica como "New-1.gif". Presiona dos veces elbotón izquierdo delm ouse para iralcuadro de diálogo "Add Text".Allí,selecciona el font Arial Rounded MT bold, el estilo Bold (Font Style) y asigna 24 altam año (Size). Enla casilla "Text" escribe la frase "The Peter´s Coffee".
Elbannertendrá ahora esta apariencia cuando se observa con un
browser:
5. Selecciona las opciones: Image, Special Filters y Erode. Esto dará com o resultado un aum ento en elgrosorde 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 elcolorblanco 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 alBannery presiona dos veces elbotón izquierdo del m ouse para activarelm odo de escritura.Presiona elbotón "O K". Después de esto,observarás que la frase "The Peter´s C offee"se encuentra unida alcursordelm ouse.C olócala encim a de la otra frase de color negro, que ya se encuentra en la ventana en donde preparas elbanner,y presiona elbotón izquierdo del mouse para fijar la frase sobre el banner. Esta nueva frase debes colocarla un poco hacia arriba y hacia el lado izquierdo,sólo un poco,de m anera talque la frase de color negro transmita al lector el efecto de una sombra.
Elbannertendrá ahora esta apariencia cuando se observa con un browser, como el Netscape:
8. Finalmente, apunta con elcursordelm ouse alM enú de Archivos (File)y selecciona la opción "Save as..".Acepta (O K)elnom bre
por defecto o escribe cualquier otro que sea de tu agrado. Luego, presiona elbotón "O K"para salvarelarchivo.
Figuras sobre un Banner 1. Selecciona los colores del fondo (background) y de la imagen (foreground). En este caso, los colores rojo y negro. 2.Apunta con elcursordelm ouse alM enú de Archivos (File)y luego a la opción N uevo (N ew ).O bservarás un cuadro de diálogo en elcualse especifican,entre otras características de la im agen, su Ancho (width), Alto (height) y Tipo. Coloca en esas casillas los valores: 400 y 40, y selecciona como elTipo de im agen la opción "16.7 M illions color(24 bit)".Luego, presiona "O K"y aparecerá una ventana con elfondo delbanner,la cual se denomina New-1.gif:
3. Abre (file, open) los archivos andy.gif y barney.gif.
4. Posesiona el cursor del mouse sobre la parte superior de la ventana New-1.gify arrástrala hasta elm edio delescritorio del "Paint Shop Pro" para que puedas trabajar con comodidad. 5. Posesiona el cursor del mouse sobre la parte superior de la ventana andy.gify colócala en la parte superiorizquierda,justo encima de la ventana New-1.gif. 6. Apunta y click con el cursor del mouse sobre la parte superior de la ventana barney.gify arrástrala hasta ellado derecho de la ventana de la imagen andy.gif.
7.Aum enta eltam año de las im agenes Andy y Barney,cuyas medidas son de 32 x 32,hasta eltam año 41 x 40.Para ello,debes hacerlo siguiente: Figura de Andy - Selecciona la herramienta "Magic Ward". - Coloca el cursor sobre la figura de Andy y presiona la tecla shift+ botón derecho delm ouse.Toda la figura se rem arcará con líneas punteadas. - Selecciona Image y Resize para llevar la imagen a 41 x 40.
La im agen resultante será la siguiente: Figura de Barney - Selecciona la herramienta "Magic Ward". - Coloca el cursor sobre la figura de Barney y presiona la tecla shift + botón derecho delm ouse.Toda la figura se rem arcará con líneas punteadas. - Selecciona Image y Resize para llevar la imagen a 41 x 40.
Esto dará com o resultado:
8.Elpróxim o paso consiste en pegarla im agen de "Andy"sobre el banner New-1.gif. - Apunta a la parte superior de la ventana de "Andy" con el
propósito de activarla. - Coloca el cursor sobre la figura de "Andy" y presiona la tecla shift+ botón derecho delm ouse.Toda la figura se rem arcará con líneas punteadas. - Selecciona Edity C opy para copiarla im ágen de "Andy"al "clipboard". - Apunta a la parte superior de la ventana New-1.gif con el fin de activarla. - Selecciona Edit, Paste y As New selection. Luego coloca el cursor del mouse en lado izquierdo del banner sobre el cualpegarás la im agen (N ew -1.gif) y haz click para que se pegue.
ElBannerse verá de esta m anera:
9. Ahora pegaremos la imagen de "Barney" sobre el lado derecho del banner New-1.gif: - Apunta a la parte superior de la ventana de "Barney" con el fin de activarla. - Coloca el cursor sobre la figura de "Barney" y presiona la tecla shift+ botón derecho delm ouse.Toda la figura se rem arcará con líneas punteadas. - Selecciona Edity C opy para copiarla im ágen de "Barney" al clipboard. - Apunta a la parte superior de la ventana New-1.gif con el
fin de activarla. - Selecciona Edit, Paste y As New selection. Luego coloca el cursor del mouse en lado derecho del banner sobre el cualpegarás la im agen (N ew -1.gif) y haz click para que se pegue.
ElBannerse verá así:
9. Ahora, es necesario retocar las imagenes de "Andy y Barney" de manera tal de poder integrarlas con el fondo del banner. Integrado a Andy y Barney - Selecciona "Pen" desde la caja de herramientas (Toolbox) y haz un acercamiento (zoom in) de nivel 10:1. Para ello, utiliza la herram ienta de controldelpanelubicada en elm enú im agen (tool panel control). Puedes activar esa herramienta para que todo el tiempo este disponible sobre el escritorio. - Elimina con la pluma (pen) todos los cuadros blancos que rodean a la imagen de Andy, de tal manera que muestra el aspecto siguiente:
- Elimina con la pluma (pen) todos los cuadros blancos que rodean a la imagen de Barney.
10. 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 negro. 11. Apunta al icono que muestra la letra "T" (text) para activar el modo de escritura, y seguidamente, coloca el cursor sobre el medio de la ventana destinada al Banner "New-1.gif". Presiona dos veces elbotón izquierdo delm ouse para iralcuadro de diálogo denom inado "Add Text".Allí,selecciona elfontArialR ounded M T bold, el estilo Bold (FontStyle)y eltam año (Size). En la casilla "Text" escribe la frase "Ady y Barney".
Elbannertendrá ahora esta apariencia cuando se observa con un browser:
12. 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. 13. Apunta al icono que muestra la letra "T" (text) para activar el modo de escritura, y seguidamente, coloca el cursor sobre el medio de la ventana destinada al Banner "New-1.gif". Presiona dos veces elbotón izquierdo delm ouse para iralcuadro de diálogo denominado "Add Text". Deja todos los valores y el texto, tal y están.Presiona elbotón "O K". Eureka! El banner ya esta listo:
14.Finalm ente,apunta con elcursordelm ouse alM enú de Archivos (File)y selecciona la opción "Save as..".Acepta (O K)elnom bre por defecto o escribe cualquier otro que sea de tu agrado para que "salves" el archivo.
Eso es todo, hasta luego! 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 deltexto (foreground),porejem plo,verde brillante y negro,de m anera tal,que transm itan la percepción de un halo luminoso alrededor de las letras. Es necesario utilizar un color puro, muy intenso, tales como el amarillo, verde, o el anaranjado, y finalmente, el color negro para sum inistrales su apariencia característica.Porejem plo:
Instrucciones: 1. Selecciona los colores del fondo (background) y de la imagen (foreground). En este caso, los colores verde brillante y negro.
2.Apunta con elcursordelm ouse alM enú de Archivos (File)y luego a la opción N uevo (N ew ).C oloca los valores siguientes: Ancho (width) = 400 Alto (height) = 40 Tipo
= 16.7 Millions color (24 bit)
Presiona elbotón "O K.
D e inm ediato,obvervarás una ventana con elfondo delbanner:
3. Posesiona el cursor del mouse sobre la parte superior de la ventana y arrastrala hasta el medio del escritorio del Paint Shop Pro con el fin de que puedas 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 elcuadro 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.
D espués de presionarelbotón O K,elcursoradoptará la form a de una cruz y la frase escrita anteriorm ente se encontrará unida a uno de sus cuadrantes. Coloque el cursor en el medio del banner, con elpropósito de que eltexto quede centrado y después pre-sione elbotón izquierdo delm ouse para pegarlo sobre elfondo negro.
Elbannertendrá ahora esta apariencia:
5.Selecciona Im age,SpecialFilters y D ilate.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 seis veces 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 elbotón izquierdo para que escribas de nuevo la frase "PELIGRO !!!" sobre las letras verdes expandidas. Cuando elPaintShop Pro te presente elcuadro de diálogo,desactiva la m arca en la opción "Shadow s"en la casilla de "Efectos Especiales" (SpecialEffects)y presiona elbotón "O K". 10. Coloca el cursor en el medio del banner, de manera tal que el texto quede centrado,y después presiona elbotón izquierdo del mouse para pegarlo encima de las letras expandidas de color verde.
Elbannertendrá ahora esta apariencia:
11.Finalm ente,apunta con elcursordelm ouse alM enú de Archivos
(File) y selecciona la opción "Save as..". Barnnercon Fotografías 1. Selecciona los colores del fondo (background) y de la imagen (foreground). En este caso, los colores lila y blanco.
2.Apunta con elcursordelm ouse alM enú de Archivos (File)y luego a la opción N uevo (N ew ).O bservarás un cuadro de diálogo en el cual se especifican, entre otras características de la im agen,
su Ancho (width), Alto (height) y Tipo. Coloca en esas casillas los valores: 400 y 40, y selecciona como elTipo de im agen la opción "16.7 M illions color(24 bit)".Luego, presiona "O K"y aparecerá una ventana con el fondo del banner, la cual se denomina New-1.gif:
Adem ás,en este ejem plo se utilizán los elem entos gráficos:
- U na fotografía de Pam ela Anderson.
- U na fotografía de la agente D ana Scully. (El apellido de este personaje se pronuncia "escoli") 3. Abra los archivos pamela2.gif y scully.gif sobre el escritorio del Paint Shop Pro. 4. Apunte con el mouse y click sobre el recuadro punteado de Select Toolbox denominado "Rectangular". 5. Apunte con el mouse sobre la parte superior central de la ventana que contiene la fotografía de Pam ela Anderson con elfin de activar esa ventana. 6. Seleccione Magic Wand de la caja de herramientas "Select".
7.Apunte y click sobre la fotografía de Pam ela Anderson m ientras m antiene presionada la tecla shiftizquierda.D espués de hacerlo, podrá observarque la im agen esta rodeada de líneas punteadas.
8.Apunte sobre elm enú "Edit"y seleccione la opción "C opy"para
alm acenarla im agen en la m em oria.Tam bién,silo prefiere,puede presionar Ctrl+C con el fin de abreviar el procedimiento. 8. Apunte con el mouse sobre la parte superior de la ventana que sólam ente contiene elbannerbase con elpropósito de activarla.Y proceda a seleccionar"Edity Paste (pegar)".En esta ú ltim a opción se desplegará una ventana con varias alternativas,seleccione "As N ew Selection".Alhacerlo,elpuntero delm ouse tom ará la form a de una cruz con puntas de flechas y una silueta de la fotografía estará incrustada a su lado derecho. Coloque el puntero del mouse en el lado izquierdo del banner base, m uy pegado alborde y presione elbotón izquierdo delm ouse con el fin de pegarla fotogafía de Pam elar.Presione elbotón derecho y desaparecerá elrecuadro punteado alrededorde la fotografía.
Elresultado que obtendrá deberá serparecido alsiguiente:
9. Apunte con el mouse sobre la ventana que contiene la fotografía de la agente "D ana Scully"con elpropósito de activarla.
10.Apunte y click sobre la fotografía de "D ana"m ientras m antiene presionada la tecla shiftizquierda.D espués de hacerlo,observará que la imagen esta rodeada de líneas punteadas.
11.Apunte sobre elm enú "Edit"y seleccione la opción "C opy"para almacenar la imagen en la memoria. 12. Apunte con el mouse sobre la parte superior de la ventana que sólam ente contiene elbannerbase con elpropósito de activarla y seleccione "Edit y Paste".
En "Paste"se desplegarán varias alternativas,seleccione "As N ew Selection".D e inm ediato,elpuntero delm ouse tom ará la form a de
una cruz y una silueta de la fotografía de la "agente D ana"estará incrustada en su lado derecho.Adem ás,en form a autom ática,el puntero delm ouse se ubicará sobre la ventana delbannerque se seleccionó con anterioridad. 13. Coloque el puntero del mouse hacia el lado derecho del banner New-1.gif,m uy pegado alborde y presione elbotón izquierdo del m ouse con elfin de pegarla fotogafía de D ana Scully.
Ahora,haga click con elbotón derecho delm ouse y desaparecerá el recuadro punteado alrededorde la fotografía de D ana.
Elresultado que obtendrá deberá serparecido alsiguiente:
14. Ahora escriba algo de texto en el espacio central del banner, entre las dos fotografías:"Pam ela y D ana".
Elbannertendrá esta apariencia:
Letras en Fondo Blanco 1. Selecciona los colores del fondo (background) y de la imagen (foreground). En este caso, los colores blanco y negro.
2.Apunta con elcursordelm ouse alM enú de Archivos (File)y luego a la opción N uevo (N ew ).O bservarás un cuadro de diálogo en elcualse especifican,entre otras características de la im agen, su Ancho (width), Alto (height) y Tipo. Coloca en esas casillas los valores: 400 (width) y 40 (height), y selecciona como el Tipo
de im agen la opción "16.7 M illions color(24 bit)".Luego,apunta y click sobre elbotón "O K".Elresultado será un bannerparecido al siguiente, pero sin el borde que utilizo para destacarlo:
3. Apunta al icono que muestra la letra "T" (text) para activar el modo de escritura, y seguidamente, coloca el cursor sobre el medio de la ventana destinada al Banner "New-1.gif". Presiona dos veces elbotón izquierdo delm ouse para iralcuadro de diálogo denom inado "Add Text".Allí,selecciona el font Arial Rounded MT bold,elestilo Bold (FontStyle)y 24 de tam año (Size). En la casilla "Text" escribe la frase "The Carmelo´s Shop".
Presiona elbotón O K y coloca esa frase,centrada,en la ventana en la cual preparas elBanner.Este será elresultado que debes obtener:
4. 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 un color verde con estos valores: 181, 198, 57. 5. Apunta al icono que muestra la letra "T" (text) para activar el modo de escritura, y seguidamente, coloca el cursor sobre el medio de la ventana destinada al Banner "New-1.gif". Presiona dos veces elbotón izquierdo delm ouse para iralcuadro de diálogo denom inado "Add Text".Allí,selecciona elfontArialR ounded M T bold, el estilo Bold (FontStyle)y 24 de tam año (Size)."C lick" sobre elbotón O K.
D espués de esto,observarás que la frase "The C arm elo´s C offee" se encuentra unida alcursordelm ouse.U bícala encim a de la otra
frase de color negro, que ya se encuentra en la ventana en donde preparas elbanner,y presiona elbotón izquierdo delm ouse para fijar la frase sobre el banner.
Listo!Aquíesta elbanner:
Banner tipo Windows
Este tipo de banners no son difíciles de preparar,basta escogerun color de fondo, establecer las dimensiones apropiadas y retocar la im agen con elpropósito de lograrelefecto esperado.
Preparación básica 1. Selecciona gris claro (189, 189, 189) como el color del fondo (background) de la imagen y selecciona el color blanco (255,255, 255) como color superficial (foreground).
R ecuerda que cada uno de los valores colocados entre elparéntesis corresponden a una notación abreviada delm étodo de selección de colores conocido com o R G B.Este es un acrónim o de la prim era letra del nombre de los colores primarios: rojo (Red), verde (Green) y azul (Blue), respectivamente.
2.Apunta con elcursordelm ouse alM enú de Archivos (File)y a la opción N uevo (N ew ).O bservarás un cuadro de diálogo en elcual se especifican,entre otras características de la im agen,elAncho (width), Alto (height) y Tipo. Coloca en esas casillas los valores: 346 (width) y 36 (height), y selecciona como el Tipo de imagen la opción "16.7 M illions color(24 bit)".Presiona "O K"y observarás
una ventana con el color de fondo (background) del banner:
3. Coloca el cursor del mouse sobre la parte superior de la ventana y arrástrala hasta elm edio delescritorio delPaintShop Pro con el propósito de que puedas trabajarcon com odidad sobre elescritorio.
Bordes Superior e Izquierdo
4.Selecciona la opción "Add Borders"en elm enú Im age.
5.AlseleccionarAgregarbordes (Add Borders),observarás una ventana denom inada "Add borders"que contiene un cuadro de diálogo (Border size) en el cual debes prodecer de la manera siguiente: - No selecciones Symmetric. - Escribe un "1" en Top (borde superior) y Left (izquierdo). - Presiona elbotón "O K" Elbotón tendrá ahora esta apariencia cuando se observa con un navegador, como el Netscape:
6. Apunta y Click sobre el icono del color superficial (foreground) y selecciona el colorgris "227,227,236".Estos valores deberás introducirlos manualmente en las casillas Red, Green y Blue que se encuentran en la pantalla que aparece al presionar dos veces sobre la herram ienta de selección de colores de "Select".
7.Selecciona Add Borders (AgregarBordes)en elm enú Im age.Luego, prodece de la manera siguiente:
- No selecciones: Symmetric. - Escribe un "1" en Top y Left. - Presiona elbotón "O K" Elbotón tendrá ahora esta apariencia:
Bordes Inferior y Derecho 8. Apunta y Click sobre el icono del color superficial (foreground) y selecciona el color gis oscuro (104, 104, 104).
9.Selecciona Add Borders (AgregarBordes)en elm enú Im age.Ahora, desmarca "Symmetric" y coloca los valores siguientes: - Escribe un "1" en Top y Left. - Presiona elbotón "O K"
Elbotón deberá verse de la siguiente m anera:
10. Apunta y Click sobre el icono del color superficial (foreground) y selecciona el color negro "0, 0, 0".
11.Selecciona Add Borders (AgregarBordes)en elm enú Im age.Luego, coloca los valores siguientes: - No selecciones: Symmetric.
- Escribe un "1" en Top y Left. - Presiona el botón "O K"
Elbotón tendrá esta nueva apariencia:
12. Ahora, debes mejorar la apariencia de la esquina superior del lado derecho. Para ello, selecciona el color gris "227, 227, 236" y la herramienta denominada "Pen", la cual se parece a un marcador de punta fina. Procede entonces a colocar ese color en el recuadro situado al lado izquierdo del color negro. Es decir, Esquina Superior Derecha Cambia estos valores: Gris-C Gris-0 Negro
Por estos: Gris-C Gris-C Negro
Blanco Gris-O Negro
Blanco Gris-O Negro
Gris-M Gris-O Negro
Gris-M Gris-O Negro
13. Procede a mejorar la apariencia de la esquina inferior izquierda del banner. Para ello coloca el color "227, 227, 236" en lugar del color gris oscuro () que se encuentra encima del recuadro negro: Esquina Inferior Izquierda Cambia estos valores:
Por estos:
Gris-C Blanco Gris-M
Gris-C Blanco Gris-M
Gris-O Gris-O Gris-O
Gris-C Gris-O Gris-O
Negro Negro Negro
Negro Negro Negro
Elbannerestará casiterm inado:
Compara las esquinas superior derecha e inferior izquierda de este banner con las del banner anterior y observa las diferencias: Banner anterior:
Banner actual:
Agregando Franja Azul Selecciona el color azul oscuro "0, 0, 127" como color superficial (foreground) y traza un recuadro en la parte superior de la imagen. Para ello,realiza un acercam iento de 13:1 seleccionando la opción "Zoom In"delm enú "View ".Este recuadro debes iniciarlo a partir del cuarto recuadro, inclusive, contando desde arriba hacia abajo y desde la prim era línea e izquierda respectivam ente,de talm anera que éste pueda apreciarse com o en la siguiente figura:
Luego, procede a seleccionar la herramienta "Flood Fill", coloca el cursor del mouse dentro del recuadro azul y haz click para rellenar toda la figura:
Agregando Texto Selecciona el color blanco como el color superficial (foreground) y luego apunta y click sobre el icono con la letra "T" (text) para activar el modo de escritura. Seguidamente, apunta el cursor sobre elm edio de la ventana destinada alBotón.Presiona una vez (click) elbotón izquierdo delm ouse para iralcuadro de diálogo "Add Text" y allíselecciona elfontBookm an O ld Style,elestilo Italic (Font Style)y asigna ocho altam año (Size). En la casilla "Text" escribe la frase: "PC Maracay" y presiona OK. Apunta y dispara nuevamente sobre la ventana que contiene el banner y escribe la frase: "Venezuela". Selecciona el color negro y apunta y dispara sobre la ventana que contiene el banner, selecciona el estilo "bold" (Font Style) y asigna diez altam año (Size).Escribe la frase:
"U na R evista Electrónica Freew are".
Listo!Elbannertendrá ahora esta apariencia:
Eso es todo, Cybernauta!
Banner dorado tipo Windows Este es un banner que requiere un poco de trabajo pero que no es muy difícilde lograr.En realidad,siantes se estudian los detalles con detenimiento resultan "pan comido".
Preparación básica Con el objeto de elaborar este Banner utilizaremos los siguientes colores:
M arrón oro (M O ro) = 153,153,102 M arrón crem a (M C ) = 255,255,204 M arrón oscuro (M O )= 102, 102, 51 Gris Negro
= 192, 192, 192 = 0, 0, 0
Las letras entre paréntisis sólo tienen valordidáctico,ya que las utilizaré m ás adelante para ilustraralgunas m odificaciones que son necesarias en las esquinas del banner. 1. Selecciona el color oro "153, 153, 102" como el color del fondo de la imagen (background) y selecciona el color 256, 255, 206 como color superficial (foreground). Recuerda que cada uno de los valores colocados entre elparéntesis corresponden a una notación abreviada delm étodo de selección de colores conocido com o R G B.Este es un acrónim o de la prim era letra del nombre de los colores primarios: rojo (Red), verde (Green) y azul (Blue), respectivamente.
2.Apunta con elcursordelm ouse alM enú de Archivos (File)y a la opción N uevo (N ew ).O bservarás un cuadro de diálogo en elcual se especifican,entre otras características de la im agen, el Ancho (width), Alto (height) y Tipo. Coloca en esas casillas los valores: 394 (width) y 35 (height), y selecciona como el Tipo de imagen la opción "16.7 M illions color(24 bit)".Presiona "O K"y observarás una ventana con el color de fondo (background) del banner:
Coloca 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 propósito de que puedas trabajarcon com odidad sobre elescritorio.
Bordes Superior y Derecho 3. Selecciona el color crema "255, 255, 204 como color superficial. 4. Selecciona la opción "Add Borders"en elm enú Im age.D espués de seleccionarAgregarbordes,observarás elcuadro de diálogo que se denom inada "Bordersize".Allí,debes hacerlo siguiente: - N o selecciones Sym m etric (quítale la m arca). - Escribe un "1" en Top (borde superior) y Right (derecho). - Presiona elbotón "O K"
Elbotón tendrá ahora esta apariencia cuando se observa con un navegador, como el Netscape:
5. Apunta y Click sobre el icono del color superficial (foreground) y selecciona elcolorm arrón "153,153,102";es decir,es necesario colocar el mismo color del fondo de la imagen. Esos valores debes introducirlos manualmente en las casillas Red, Green y Blue que se encuentran en la pantalla que aparece al presionar dos veces sobre la herram ienta de selección de colores de "Select". 6. Selecciona Add Borders (AgregarBordes)en elm enú Im age.Luego, procede de la manera siguiente: - No selecciones: Symmetric.
- Escribe un "1" en Top y Right. - Presiona elbotón "O K"
Elbotón tendrá ahora esta apariencia:
Bordes Inferior e Izquierdo 8. Apunta y Click sobre el icono del color superficial (foreground) y selecciona el colorm arrón oscuro 102,102,51.
9.Selecciona Add Borders (AgregarBordes)en elm enú Im age.Luego, desm arca la opción Sym m etric y coloca los valores siguientes: - Escribe un "1" en Bottom y Left. - Presiona elbotón "O K"
Elbotón deberá verse de la siguiente m anera:
Bordes Inferior, derecho e Izquierdo 10. Apunta y Click sobre el icono del color superficial (foreground) y selecciona el color negro "0, 0, 0".
11.Selecciona Add Borders (AgregarBordes)en elm enú Im age.Luego, coloca los valores siguientes: - No selecciones: Symmetric.
- Escribe un "2" en Bottom. - Escribe un "1" en Left y Right. - Presiona elbotón "O K"
Elbotón tendrá esta nueva apariencia:
Mejorando las esquinas
Para realizartodos los retoques que se describen a continuación es necesario acercarla im agen.Para ello,selecciona em m enú "View ", Zoom In y 13:1. 12. Ahora, debes mejorar la apariencia de la esquina superior del lado derecho. Para ello, selecciona el color gris "192, 192, 192" y la herramienta denominada "Pen", la cual se parece a un marcador de punta fina. Procede entonces a colocar ese color en la esquina superior derecha en el lugar que ocupa el color negro. Es decir, Esquina Superior Derecha Cambia estos valores: MOro MOro MOro MC
MC
Negro
MC
MOro Negro
Por estos: MOro MOro Gris MC
MC
MC
Negro
MOro Negro
13. Selecciona el color negro como color superficial y coloca en el cuadro, al lado izquierdo del gris que acabas de crear, ese color: Esquina Superior Derecha
Cambia estos valores:
Por estos:
MOro MOro Gris
MOro Negro Gris
MC
MC
MC
MC
MOro Negro
Negro
MC
MC
Negro
MOro Negro
14.Selecciona ahora elcolorm arrón oro 153,153,102 y pinta el cuadro color crema (255, 255, 204) que forma la esquina superior derecha: Esquina Superior Derecha Cambia estos valores: MC
MC
MC
MOro MOro MC
Por estos: MC
MC
MOro
MOro MOro MC
Nota: Observa y estudia los cambios utilizando el siguiente banner:
Esquina Inferior Derecha 15. Procede a mejorar la apariencia de la esquina inferior derecha del banner. Para ello coloca el color gris "192, 192, 192" en lugar de los tres cuadros negros que forman esa esquina: Esquina Inferior Derecha Cambia estos valores: MO
MO
Negro
Negro Negro Negro
Por estos: MO
MO
Negro
Negro Negro Gris
Negro Negro Negro
Negro Gris Gris
Tam bién,en la línea verticalde colorcrem a (255,255,206)dellado derecho es necesario substituirelú ltim o cuadro de la parte inferior porun cuadro de colorm arrón oro (153,153,102). Esquina Inferior Derecha Cambia estos valores:
Por estos:
MC
MOro Negro
MC
MOro Negro
MO
MO
MO
MO
Negro
Negro Negro Gris Negro Gris Gris
Negro
Negro Negro Gris Negro Gris Gris
Elbannertendrá esta apariencia:
Esquina Superior Izquierda 23. Selecciona el color gris (192, 192, 192) y substituye el cuadro negro situado en la esquina superior izquierda. 24. Substituye el cuadro negro de la esquina inferior izquierda.
Elbannertendrá esta apariencia:
Agregando una Franja Azul Selecciona el color azul oscuro "0, 0, 127" como color superficial
(foreground) y traza un recuadro en la parte superior de la imagen. Para ello, realiza un acercamiento de 13:1 seleccionando la opción "Zoom In"delm enú "View ".Este recuadro debes iniciarlo a partir de la cuarta línea,inclusive,contando desde arriba hacia abajo, y hasta la décim o octava línea;es decir,abarcará un totalde 14 líneas.Adem ás,se debe dejaruna línea allado derecho y otra del lado izquierdo,de talm anera que éste pueda apreciarse taly com o se exhibe en la siguiente figura:
Luego, procede a seleccionar la herramienta "Flood Fill", coloca el cursor del mouse dentro del recuadro azul y haz click para rellenar toda la figura:
Agregando Texto Selecciona el color blanco como el color superficial (foreground) y luego apunta y dispara sobre el icono con la letra "T" (text) para activar el modo de escritura. Seguidamente, apunta el cursor sobre el medio de la ventana destinada al Banner. Presiona una vez (click) elbotón izquierdo delm ouse para iralcuadro de diálogo "Add Text" y allíselecciona elfontBookm an O ld Style,elestilo Italic (Font Style)y asigna ocho altam año (Size). En la casilla "Text" escribe la frase: "Banner" y presiona OK. Apunta y dispara nuevamente sobre la ventana que contiene el banner y escribe la frase: "Freeware". Listo!Elbannertendrá ahora esta apariencia:
Eso es todo!
