Banner Animado
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á:
Bienvenidos al Paraiso
de the danioner |
(FRAME1) |
* Tutoriales * Fechadores |
(FRAME2) |
* Consejos * Recursos |
(FRAME3) |
Y mucho mas!!... |
(FRAME4) |
Made in the danioner
ke esperas??.. unete ahora |
(FRAME5) |
** 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!!..