Como siempre, vamos paso a paso que es como mejor nos entendemos.

1.- Que es un banner.

Un banner es un gráfico dotado o no de movimiento utilizado para hacer propaganda de algo. En nuestro caso, de nuestra web. Podéis ver un ejemplo en esta misma página, en la parte superior izquierda. Sirven para llamar la atención del visitante e invitarle a que pinchen en él para llevarlos a alguna dirección en concreto o simplemente para informar de algo. Es un banner bastante simple. Abajo os muestro otro, como el que podréis hacer vosotros al terminar esta lección.

2.- Para que sirve un banner.

Lo más común será intercambiar nuestro banner con otro amigo, de forma que nosotros podemos poner en nuestra web el suyo (para hacerle propaganda) y nuestro amigo pondrá el nuestro en la suya. De este modo es muy posible que sus visitantes se pasen por nuestra web alguna que otra vez. Está demostrado que es más fácil que una persona pinché en un banner a que lo haga en una palabra con un hipervínculo. Y si el banner está dotado de movimiento, mejor que mejor.

3.- Pasos a seguir.

Como os acabo de contar, un banner puede ser animado o no. Un banner animado o dinámico consta de varios fotogramas, mientras que uno estático o fijo solo consta de uno. Los pasos a seguir para la construcción de nuestro banner, serán, decidir como queremos que sea, crear los fotogramas, formar el banner a partir de esos fotogramas si lo queremos hacer dinámico y al final, ponerle un hipervínculo a nuestra página. Veamos todo esto paso a paso.

4.- Y que pongo en mi banner?

Lo normal es poner el título de nuestra web (para eso, antes hemos tenido que pensar un poco para ponerle un título llamativo). También podemos poner alguna foto o dibujito que creamos que la hace más llamativa. Nosotros vamos a crear como primer ejemplo, un banner para una página llamada "Crea Tu Web" que seguro que os suena de algo.

5.- Preparando los fotogramas. (Para banners simples será solo uno!)

Imaginaos que un banner es como una cortísima película de cine. Pues bién, solo tenemos que crear una serie de fotogramas que luego se irán viendo de forma progresiva, creando sensación de movimiento (según el arte que tengamos, claro). Para ello usaremos un programa que creo que tendréis casi todos. Se trata del Word de Microsoft. Me da un poco de cosa hacer propaganda del Billy Gafe ese que me cae tan mal, pero creo que este programa lo tenéis casi todos y si no, es fácil encontrar a alguien que os lo pueda dejar. No obstante, si conocéis algún otro programa que pueda sustituir a este, en cuanto a posibilidades y facilidad de adquisición por parte de todos, no dudéis en decírmelo. En concreto me refiero a la opción que tiene el Word de escribir un título y darle cierta forma artística con el WordArt. Por supuesto, si queréis hacerlo con cualquier otro programa de dibujo, adelante, pero creo que el WordArt es facilito y rápido. A continuación veremos como hacer nuestros fotogramas con este programa.

a) Nos vamos al "Word", abrimos un nuevo documento y, en la opción "Insertar". Escogemos "Imagen" y dentro de esta, la opción "WordArt".

b) Elegid el aspecto que más os guste para vuestro título. Si no lo tenéis muy claro, elegid el que más se acerque a la idea que tengáis. Más tarde podremos retocarlo aún más, hasta que nos termine convenciendo. Elegid y pulsad en "Aceptar".

c) Aparece una pantalla como la siguiente, donde debemos introducir el título de nuestra web. (Suele quedar mejor si lo ponemos en Negrita pulsando sobre la "N")

d) Para retocar podéis hacer clic en "Ver" > "Barra de Herramientas" > "WordArt", con lo que aparecerá (si es que no se veía ya antes) el menú de opciones para retocar.

Pulsando una vez sobre el título recién creado, podemos ver unos rectángulos pequeñajos en las esquinas de color blanco, y a la derecha, uno amarillo, o verde según el diseño escogido en el paso anterior. Moviendo ese rectángulo amarillo o verde, podemos variar la forma de nuestro título. Esto es lo que utilizaremos para ir creando los distintos fotogramas y conseguir un efecto de movimiento. 

En el ejemplo que nos ocupa, vamos ha realizar tres fotogramas. En el primero situaremos el rectángulo de color cerca de la parte superior.

A continuación, pulsamos una vez sobre el título creado para seleccionarlo y después nos vamos al menú y hacemos clic sobre "Edición" > "Copiar". 

Seguidamente, pulsamos sobre "Pegar" y nos aparecerá el mismo título de nuevo. Ahora tenemos dos iguales. Como los fotogramas deben ser ligeramente distintos, cogemos el recién pegado, lo situamos debajo del anterior y movemos el rectángulo coloreado hacia el centro. De esta forma, ya tenemos dos imagenes ligeramente distintas.

Repetimos la operación una vez más (si queréis podéis hacerlo varias veces más, cambiando siempre la inclinación del título) pulsando sobre "Pegar" y moviendo en este tercer caso, el rectángulo coloreado, hacia casi abajo del todo. Ya tenemos los tres dibujos que corresponderán a los tres fotogramas.

Pero como el programita que nos fabrica el banner, trabaja con archivos GIF y lo que tenemos es un documento de texto del Word, de tipo Doc, tenemos que transformarlo en tres archivos GIF. (Es necesario que sea .gif si lo queremos movil o dinámico).

Además, todos los fotogramas de mi banner, deberían ser del mismo tamaño, de modo que nos vendría muy bién poder dibujar una cuadrícula que nos marcara por donde recortar cada uno de mis fotogramas. Para ello utilizaremos la barra de dibujo del Word. Podéis verla haciendo clic en "Ver" > "Barras de Herramientas" > "Dibujo", si es que no la teníais visible ya.

A continuación, mediante el zoom del Word, preparamos la página para que se vean bien los tres títulos. Después, pulsamos sobre el icono de "Dibujar Línea" y trazamos una vertical a la derecha de los tres títulos. Con ayuda de esta línea que tomaremos como referencia, situaremos los tres títulos, a igual distancia de esta.

Después, dibujaremos una serie de líneas más, que nos ayuden a encuadrar bién los tres títulos. Puedes ir moviendo las líneas de arriba a abajo o hacia los lados sin más que arrastrarlas con el ratón, hasta hacer que los tres títulos y los tres recuadros formados por las líneas estén todos bién centrados. Fíjate en la figura de abajo.

Ya esta todo preparado para capturar los fotogramas. Ahora, por si acaso, guardaremos ese documento de Word.

6.- Creando los Fotogramas.

Como os dije antes, necesitaremos ahora un capturador de pantallas para poder convertir el documento de Word que hemos creado, en una, o mejor dicho, en tres imágenes con formato GIF, que es el tipo de archivo que nos permitirá después construir el banner.

En el menú de la izquierda, en la sección "Programas necesarios" puedes encontrar varios programas que capturan pantallas. Lo que hacen es transformar lo que se ve en tu monitor, en un archivo gráfico o foto. Esta es la forma que yo utilizo, por ejemplo, para incluir fotos de menús y de programas en las lecciones. Son una maravilla para todo esto.

Otra manera mucho más fácil, pues npo requiere bajarse ningún otro programa es capturar la pantalla mediante la tecla que hay casi al final de la fila de los f1 f2 f3... de tu teclado. Me refiero a la que pone "Print Screen/SysRq", La véis? Pues esa. Pero vamos paso a paso si no os importa.

Abrid el documento de Word que acabamos de crear. Que se vean bien todos los fotogramas. Ya? Pues ahora pulsad esa tecla "Print Screen". Os parecerá que no ha pasado nada después de pulsarla, pero lo que acabáis de hacer es copiar la foto de la pantalla en ese momento, en el portapapeles.

Ahora abrid un programa de dibujo que tengáis. Da igual cual sea. Cuando lo hayáis abierto pulsad en "Edición" y luego en "Pegar". Seguramente os dirá que el objeto es más grande que la foto. Si os da a elegir entre varias opciones probad cada una hasta conseguir ver la foto ed la pantalla tal y como la véis en el monitor.

Una vez que tengo la foto de la pantalla (a que ha estado bien eso? je je je) la guardaremos. Le pondremos el nombre, por ejemplo, "pantalla.gif". Es importante que el programa de dibujo que utilicéis os deje guardar con la extendión "GIF" pues es la que se usa para crear los banners. Si no os deja, probad con otro programa o bajaros otro de internet.

Bien, Si el banner no es para una empresa de Intercambio deBanners el tamaño que tenga el banner no es muy importante. Copiad cada fotograma siguiendo las líneas dibujadas con el word y guardarlos como fotogramas separados.

 Si en cambio lo vais a utilizar para intercambio de banners a través de una de las agencias que lo ofrecen, el tamaño si que importa (viejo dicho ese, no?), de modo que tendréis más tarde que variarlo mediante algún programa de dibujo que os lo permita.

El siguiente paso será ir recortando cada uno de los fotogramas ayudados por las líneas que les hemos dibujado antes. Intentad que todos los fotogramas tengan las mismas medidas. Como no es fácil conseguirlo, buscad después alguna opción en el programa de dibujo que uséis, que os permita cambiar el tamaño del dibujo y ponerle a todos el mismo.

Guardad cada uno de los fotogramas. Podéis nombrarlos por ejemplo, foto1.gif, foto2.gif etc,etc. Y acordaos donde los guardais. No los metáis en la carpeta de vuestra web pues lo único que hay que subir más tarde (si es que lo vais a inlcuir en vuestra página) es el archivo final.

Una vez guardados todos los fotogramas, podemos borrar el archivo de la foto de la pantalla completa, pues ya no nos hace falta y seguro que ocupa algo de espacio. A la basura con él.

7.- Creando el banner.

Si el banner que vais a construir el estático o fijo (de un solo fotograma), entonces ya está terminado y podéis pasar al paso 8. En caso de que lo queráis dinámico o móvil seguid leyendo, que ya queda menos.

Bueno. Ya tenemos los dichosos fotogramas. Ahora lo que necesitamos es un programa que nos permita unirlos formando nuestro banner. Debe haber un montón de ellos pululando por la red, pero yo solo trabajo con uno. No se si es mejor o peor que otros, pero desde luego, funciona y se pueden conseguir banners muy buenos.

El programa en cuestión se llama Ulead Gif Animator 4.0. Podéis encontrarlo en la sección Programas  Necesarios, en el índice que hay a la izquierda de esta página (si es que funciona ese link, que me trae loco!) aunque seguro que lo podréis encontrar escribiendo su nombre en cualquier buscador.

Una vez puesto en marcha el Ulead Gif Animator pulsad en "Animator Wizard". Se abre entonces una ventanita y tendréis que hacer clic en "Add Image" (añadir imagenes o fotogramas). Buscad los fotogramas en la siguiente ventana que se abre. Elegidlos todos y pulsad en "Abrir" y luego en "Siguiente".

Otra ventana con dos opciones. Elegid la primera "Text-Oriented" si en vuestros fotogramas hay palabras escritas, o "Photo-Oriented" en caso contrario. Pulsad en "Siguiente".

Lo siguiente define lo rápido que se cambiará de un fotograma a otro. Haced varias pruebas con esos datos para ver cual os gusta más. Pulsad en "siguiente" y luego en "Finalizar".

A continuación haced clic en la lengueta donde pone "preview" para ver el aspecto de nuestro banner.

En la lengueta "Optimice", pulsando en "Optimice Now" el programa intentará disminuir el peso (tamaño del archivo gráfico en Kilobytes) para que sea más rápida su carga en internet. Al lado de "After" podréis ver el tamaño final del banner. Si estáis creando el banner para un sistema de intercambio de banners, tened en cuenta el no pasaros del tamaño máximo (en Kb) para el banner.

Si os gusta como ha quedado podéis guardarlo ("Files" + "Save As"). Si no os gusta el resultado seguid probando con distintas velocidades, más o menos fotogramas, cambiar el orden de los fotogramas, etc, etc. Si desesperáis siempre podéis hacer un banner simple, es decir, no móvil, de un solo fotograma. Ocupará mucho menos y es menos lioso, aunque a veces también algo menos vistoso.

Nota para los Intercambios de Banners: No olvidar guardar el banner en la carpeta de vuestra web y subirlo con el FTP, pues algunas compañías de Intercambio de Banners en lugar de pediros que les mandéis el Banner, lo que os piden es su ruta, es decir, en que lugar de la red se encuentra. Por ejemplo; si mi web es " http://creatuweb.triod.com " y subo el archivo directamente a la carpeta de mi web, su ruta será: " http://creatuweb.tripod.com/mibanner.gif." que es lo que tendré que decir a la compañía de Intercambio. Si tras hacer esto borrás el banner de tu espacio en la red, el intercambio de baners dejará de funcionar.

8.- Crear un hipervínculo a nuestro banner.

Esta parte no debería ponerla, pues se supone que os leísteis la sección "Crea tu propia Web", donde ya viene esto explicado, pero seré bueno con los más rezagados (o tipos flojillos diría yo) y os Recordaré como se hacía.

• Primero: Insertáis el banner en vuestra web o donde queráis.
• Segundo: Hacéis clic en él con el botón derecho del ratón.
• Tercero: Elegís la opción "Insertar">" Vínculo".
• Cuarto: Donde pone "Dirección URL" poned la dirección que queráis y pulsad en "Aceptar"
• Quinto: Actualizar esa página subiéndola a la red con el FTP.
• Sexto: Comprobar que funciona.
• Séptimo: Si no va bién, escribid las dudas en el Foro de CreaTuWeb o mandadme un E-milio y os intentaré ayudar (que remedio, je, je, je, es broma).

9.- Enséñanos tu banner.

Para que todos podamos ver de lo que has sido capaz, y para que los que aún no han hecho el suyo se hagan una idea de lo que se puede llegar a hacer, mándanos tu banner y lo publicaremos aquí. Si aún no sabes como mandar archivos mediante un E-milio, pincha aquí y te lo explico. Además del banner, deberías mandar también la dirección que quieres que sea incluida en su hipervínculo, si es que lo tiene.

10.- Quieres ver los banners creados por nuestros amigos?

Si quieres ver los banners que han diseñado ya nuestros seguidores, pincha aquí. No olvides mandarnos el tuyo cuando lo termines!