Como hacer un banner

Simplemente es una pekeña explicación del uso del programa Selteco Bannershop Gif Animator ... ke en lo particular es un gran programa para principiantes debido a su funcionabilidad y facilidad de manejo ... ahora si .. ya no tendras pretextos para no contar con tu propio banner animado.

Para realizar un banner necesitas de 3 cosas primordiales: ** Un programa de edición y animación de imagenes ... ** Material (fotos.. iconos .. tipo de letra.. etc) ... ** y lo más importante ... mucha pero mucha IMAGINACION ...

ahora si ... vamonos a hacer este proyecto ... antes ke nada necesitas esta información pa ke te vayas dando una idea de lo ke estamos hablando ... cualkier animación está basada en FRAMES ... ke no es mas ke una secuencia de fotografías ke simula o da efecto de un cortometraje ... aunke pareciera una labor compleja elaborar un elemento grafico de este tipo ... lo cierto es ke es demasiado sencillo ...

para los ke kieran practicar con este ejemplo ... necesitarán guardar estas imagenes en su propia PC:

 

LO ESENCIAL QUE TIENES QUE HACER ES DESCARGARTE EL PROGRAMA LO PUEDES GUARDAR EN UN DISKET O EN TU PC SOLO AS CLICK AQUI PARA PODER DESCARGARTELO:

** PASO 1.- Abrimos el bannershop.. aparecerá una pekeña ventana la cual nos da la bienvenida .. como notarás ya viene seleccionada de manera predeterminada la opción BLANK ANIMATION ... asi ke nomas le damos en OK pa empezar a usar este programa..

como notarás ... ahi se encuentra la medida del banner standard (468x60 pixeles) .. y también aparecen 3 herramientas en ventanas independientes un tanto desordenadas ...

FRAME LIST = Esta herramienta elimina o inserta un Frame.

CURRENT COLOR = Sirve para modificar el color del texto ... asi como plasmarlo encima o por debajo de alguna imagen.

BACKGROUND = Esto es para darle el color de fondo a nuestro banner

** PASO 2.- dale click sobre ellas y arrastralas a los lados de la figura del banner ... el chiste es ke no te estorben ... y de una vez maximiza las ventanas..

** PASO 3.- pues ahora si ... a trabajar se ha dicho .. primeramente vamos a establecer nuestro color de fondo ... esto lo podemos hacer mediante la herramienta Background ... pero en este caso ... pondremos un fondo ke creamos nosotros mismos ... ... para eso vamos a la opción IMAGE ... y le damos click en IMPORT IMAGE ... ahi buscamos nuestro fondo ( FIG1 )... y le damos en ACEPTAR.. dentro de la figura del banner aparecerá esto:

colocamos nuestro cursor del mouse encima del recuadro ke aparece en la imagen ... hasta ke esta cambie por la figura de una mano:

le damos click izkierdo del raton .. y lo arrastramos o lo extendemos de tal manera ke nuestro fonfo cubra toda la figura del banner:

vientos ... ya tenemos el fondo deseado ... la cual se encuentra situado por defecto en nuestro primer frame ... recuerda pa ke se transforme en una animación ... rekerimos de una secuencia de varios de ellos.

** PASO 4.- Nos vamos a la herramienta FRAME LIST ... le damos click a NEW para crear un nuevo frame:

de una vez dale 4 clicks a esa opción ... pa crear los 4 frames restantes.. asi nos debe aparecer:

prueba dandole clicks a cada uno de los frames ... notaras ke del frame 2 al 5 aparece nuestro banner predeterminado (el de fondo negro) ... y cuando le das click al frame 1 .. aparece nuestro fondo ke sustituimos por el negro ...

** PASO 5.- Ahi mismo vamos a colocar nuestra segunda imagen (FIG2) .. para esto le damos click en IMAGE .. y escogemos la opción IMPORT IMAGE ... abrimos nuestro gráfico (FIG2) y la colocamos en la parte izkierda del banner ... recuerda ke no debemos pasarnos del limite de la figura del banner .. por lo ke debes acomodarla cuidadosamente ... y al tamaño ke te lata..

NOTA: Si no te gustó o te akivocaste de figura ... pues solo dale click derecho del mouse sobre la imagen a eliminar ... y pulsa sobre la opción CUT

LISTO ... hemos creado nuestra base o plantilla de nuestro banner ... ya nomas es cuestión de copiar esta misma imagen a nuestros demas frames ... para esto .. ahi mismo en FRAME1 ... le damos click a EDIT ... y pulsamos la opción SELECT ALL .. volvemos a darle click a EDIT ... pero esta vez pulsamos la opción COPY .. con esta acción colocamos nuestra base o plantilla en nuestro portapapeles.. ahora nomas le damos click a FRAME2:

nos vamos otra vez a EDIT ... y pulsamos en PASTE .. para colocar nuestra base o plantilla en ese frame.. volvemos a repetir este mismo paso para los frames 3 .. 4 y 5...
Vamos a empezar a introducir el mensaje de nuestro banner ... para los ke están haciendo esta práctica ... nuestro ejemplo será:

** PASO 6.- Vamos al FRAME1 .. para introducir nuestra primera frase ... buscamos y le damos click en la opción DRAW TEXT (A)

checa ke el cursor del mouse se transforma mas o menos en este simbolo I .. ya nomas situate dentro de la figura del banner y dale un clik izkierdo..

verás ke te aparece una nueva ventana .. teclea la frase a introducir ... ahi mismo tienes la opción de modificar el texto a cualkier otro tipo de letra o fuente (true type) ke tengas en tu popia PC... asi como modificar el tamaño de la letra.. una vez terminado de hacerle los cambios le das en OK..

no te preocupes si el texto es muy grande ... o no se encuentra en el lugar ke tu deseas ... lo puedes manipular igual ke como lo hicimos con las imagenes (PASO 3).. para darle color al texto nos vamos a la herramienta CURRENT COLOR .. y le damos click a la primera figura (FOREGROUND COLORS) .. ahi le damos la tonalidad NEGRA..

NOTA: No hay problema si te akivocaste al introducir el texto nomas dale doble click sobre la frase o imagen a modificar ... y te volverá abrir esta misma ventana.. ya nomas la corrijes y listo .. como nueva caon ..

** PASO 7.- Ahora juyamónos al FRAME2 ... volvemos a escojer la opción DRAW TEXT ... le damos clik izkierdo del mouse dentro de la figura del banner y tecleamos la frase * TUTORIALES .. escogemos otro tipo de fuente de letra ... y le damos en OK ... arrastramos ese texto y lo colocamos a la izkierda y arriba ....

hacemos la misma operación pero tecleando la frase *FECHADORES .. lo arrastramos y lo colocamos a la derecha y abajo.. asi debe de kedar:

** PASO 8.- Nos situamos en el FRAME3 ... repetimos el PASO 7 ... pero ahora el texto (*CONSEJOS *RECURSOS) debe ser colocado a la inversa ... esto es para evitar ke a la hora de animarlas .. las frases salgan encimadas:

** PASO 9- En el FRAME 4 ... solo nos resta introducir el texto Y MUCHO MAS!!.. trata de ke la frase nos kede centrada..

** PASO 10.- E n el FRAME 5 vamos a colocar nuestra FIG3 .. digo .. pa ke se vea mas bonito ... repetimos el PASO3 ... damos click en IMAGE .. y escogemos la opción IMPORT IMAGE ... la arrastramos y la colocamos en la parte derecha y arriba de la figura del banner..

damosle clik en DRAW TEXT y tecleamos la frase MADE IN THE DANIONER y la colocamos centrada en la parte superior.. a un lado de la imagen ka acabamos de insertar (FIG3)..

viene lo bueno ... a la frase KE ESPERAS?? .. UNETE HOY!! ... vamos a insertarle un pekeño efecto ... pero nomas a la palabra HOY .. digo .. pa ke resalte

para eso le damos click en DRAW TEXT ... y tecleamos solo la frase KE ESPERAS?? .. UNETE ... le damos en OK ... y la colocamos en la parte inferior ... volvemos a darle click en DRAW TEXT y tecleamos la palabra HOY!! le damos en OK .. y la arrastramos de tal manera ke se vea como una continuación de la anterior frase...

** PASO 11.- Nos situamos encima de la palabra HOY y le damos click derecho del mouse ..

con esto haremos aparecer un submenú ... como notarás ahi se resumen todas las acciones ke hemos descrito y experimentado en los pasos anteiores (copiar.. pegar ... tamaño de la imagen.. color de texto .. etc) ... pero tambie´n aparecen 3 opciones ke aún no hemos revizado ... la animación .. animación de entrada y la animación de salida ... esto es mas ke nada para darle un tipo de efecto de animación ya sea al texto o imagen ... y pos este efecto actuará al comienzo o termino del frame ..

asi ke dale click a la opción ANIMATION (ustedes podrán escoger el tipo de efecto ke mas les lata)

se abrirá una nueva ventana ... de entre la lista escoge el efecto BLINK ... dale click en PREVIEW para checar como es esa animación ... dale click en X u oprime la tecla ESC para salirte de la vista previa del efecto y dale en OK..

NOTA: Existen mas efectos en las animaciones de entrada y salida ... nomas es cuestión de ke le vayas dando vista previa a cada efecto y escojas la ke mas te agrade ... incluso puedes ahi mismo modificar la velocidad de visualización de ese tipo de efecto de animación..

** PASO 12.- Procedemos finalmente a checar nuestro trabajo.. le damos click a ANIMATION ... y pulsamos la opción PLAY ANIMATION .. asi visualizaremos como ha kedado nuestro banner.. no necesariamente podemos hacer este paso al final dl trabajo ... lo podemos hacer en cualkier momento ... chance y asi tengamos nuevas ideas de como irlo creando ...

** PASO 13.- Bueno ... si el trabajo fue satisfactorio .. pos es hora de ponerle velocidad a los frames .. como checaste en PLAY ANIMATION .. los frames pasan de a volada ... por lo ke a veces no da chance ni de leerlo ... por lo ke las personas ke vean este banner ... pos les dará flojera de mirarlos .. o peor aún ... ni los pelaran!! por lo ke perderás visitas potenciales...

nos situamos en nuestro frame de bienvenida (FRAME1) ... como esta parte es la dirección de nuestra Comunidad ... pos debe ser mas duradera ... para ke así kede grabada en la mente del visitante (err .. err .. pos resulta ser ke en mi ejemplo no puse la dirección www.thedanye.tk ... asi ke espero ke ustedes no cometan la misma estupidez .. ok??)..

una vez situados en el FRAME1 .. checamos ahi mismo en la herramienta FRAME LIST ke hay una opción denominada DELAY... ahi mero dale la duración ke tenga ese frame..

dale en ANIMATION ... y pulsa la opción PLAY ANIMATION para checar como va kedando nuestro banner .. ya nomas repite este mismo paso para los demas frames ...

** PASO 14 .- Una vez ke hayas realizado el trabajo .. solo nos resta guardar nuestro banner .. para esto dale click en FILE .. y pulsa la opción SAVE GIF AS

nomas "bautiza" tu banner ... súbelo a la red e insertale un HIPERVINCULO para empezar a atraer visitas a tu Comunidad o Web!!

IMPORTANTE: NO .. NO .. NOOO .. abuses de los efectos de animación (PASO 11) .. ya ke con esto haces ke el banner sea de mayor peso .. por lo ke tardará en visualizarse!!

para ke te des una idea cuando insertas un efecto de animación .. es como colocarles mas frames sólo para ese movimiento en específico ... esto lo podemos comprobar de la siguiente manera.. dale click al icono NEW ... y dale click a OPEN EXISTING DOCUMENT ... abre el banner ke acabas de hacer .. y checa en el FRAME LIST ...

recuerdas ke al comenzar nuestro trabajo el banner sólo constaba de 5 frames?? .. pos resulta ser ke como le metimos un efecto de animación (PASO 11) ... está nos genero un aumento a 14 frames!! .. aún así nuestro banner cuenta con una excelente calidad en color ... y lo más importante .. se visualiza en infinitum

pues ... regularmente este tipo de tutoriales acerca de como crear un banner .. pos difícilmente los encuentras en la red ... ya ke para crear un BANNER o animación solo es necesario un rekisito fundamental: nuestra IMAGINACION!!..