CREIX

AMB
INTERNET

APRENDE A CREAR BANNERS

Y GIFS ANIMADOS

NDICE:
Introduccin.............................................................................................................................................pg. 03
1. El banner...................................................................................................................................................pg:04
2. Programas para crear banners y gifs animados...............................................................pg: 06
3. Formatos..................................................................................................................................................pg: 08
4. Terminologa...........................................................................................................................................pg:11
5. Cmo hacer un buen banner..................................................................................................pg:12
6. Derechos de autor y licencias Creative Commons..........................................................pg: 18
7. Creacin de gifs animados con programas especficos:
Beneton Movie Gif................................................................................................................................pg: 20
Enlaces de inters.......................................................................................................................................pg. 24

Introduccin
Los banners son el ms usual formato publicitario de Internet. Cualquier pgina
web es susceptible de incluir toda clase de banners.
Los banners se crean con imgenes (GIF, JPEG o PNG) o con animaciones creadas
a partir de tecnologas como Photoshop, GIMP, Flash o Java. Estn diseados con
la intencin de llamar la atencin, resultar notorios y comunicar el mensaje
deseado.
El objetivo de este seminario es aprender a realizar buenos banners (gifs
animados), bien diseados y estructurados con programas como Photoshop o
GIMP (Software libre)

Descripcin del contenido del seminario:

Conoceremos qu es un banner.
Conocer el abanico de software que es necesario para realizarlos.
Los formatos del banner y su terminologa.
Aprender cmo hacer un buen banner.
Realizar y disear dos ejemplos de banners con Photoshop y Gimp.

1. El banner
En la Wikipedia (http://es.wikipedia.org/wiki/Banner) se define banner como un
formato publicitario de Internet. Esta forma de publicidad en lnea consiste en
incluir una pieza publicitaria dentro de una pgina Web. Prcticamente en la
totalidad de los casos su objetivo es atraer trfico hacia el lugar Web del
anunciante que paga por su inclusin.
Los banners se crean con imgenes (GIF, JPEG o PNG) o con animaciones creadas
a partir de tecnologas como Flash o Java. Estn diseados con la intencin de
llamar la atencin, resultar notorios y comunicar el mensaje deseado. Por lo tanto,
estos banners no necesariamente mantienen la lnea grfica del lugar web.
Cualquier lugar Web es susceptible de incluir toda clase de banners y otros
formatos publicitarios, aunque en la mayora de los casos, son los lugares con
contenidos de mayor inters o con grandes volmenes de trfico, los cuales
atraen las mayores inversiones de los anunciantes.
Los banners se crearon para dirigir pblico entre diferentes lugares Web. Tambin
se usan dentro de un sitio web para anunciar algn producto, servicio,
acontecimiento o novedad, es decir, para dirigir pblico a pantallas determinadas
de una misma web, como sera el caso de este banner que aparece en la pantalla
de inicio de lAjuntament de Barcelona (http://www.bcn.cat/):

Banner de este producto de Danone para nios que despliega ms informacin del producto
Acticards en esta misma pantalla.

En el siguiente ejemplo de Vilaweb, el portal de noticias en cataln ms conocido,

se emplean las dos opciones. En la parte superior de la cabecera hay dos banners
que dirigen el pblico a otras webs, y debajo encontramos destacados (algunos
patrocinados) que llevan a diferentes pantallas del portal.

2. Programas para crear banners y gifs

animados
Existen tres tipos de software para crear banners y gifs animados:

2.1. Programas especficos

Software especfico para crear banners con el que nicamente podemos crear
estas pequeas piezas publicitarias. Tenis todo un listado de software especfico
de
escritorio
para
crear
banners
en
la
siguiente
direccin:
http://www.softonic.com/s/banners. La otra opcin es usar software en lnea
especfico (uno de los mejores es Bannersnack (http://www.bannersnack.com/),
pero mejor buscar la frase crear banners online en Google para disponer de un
listado siempre actualizado de este tipo de herramientas).
Este tipo de software especfico es fcil de utilizar pero las funciones de las que
dispone suelen ser muy bsicas, en la mayora los de casos no permiten editar las
imgenes, sino que slo permiten generar una animacin en funcin de las
imgenes preexistentes que se van aadiendo.

2.2. Programas de diseo grfico

Programas de diseo grfico como GIMP, Photoshop que permiten exportar en
el formato gif animado. Los diseadores usan estos programas de diseo grfico
para materializar la animacin que tienen en la cabeza, pues este software les
proporciona las herramientas necesarias para crear las diferentes imgenes que
componen la animacin.

Diferentes gifs animados creados por el Departamento de Cultura de la Generalitat de Catalunya

El gif animado es un tipo de archivo que permite visualizar pequeas animaciones

en la Web. Este formato es uno de los primeros en Internet y se utiliza para
generar banners y pequeas animaciones. Tambin es posible generar
animaciones con otros formatos, el ms conocido para la generacin de
animaciones es el formato .swf (formato de exportacin del programa Adobe
Flash).
Un gif animado es una secuencia de imgenes estticas que se reproducen a una
velocidad normalmente de 12 cuadros por segundo (en el cine son 24 cuadros por
segundo) para dar la sensacin de imagen en movimiento.

Este formato es un estndar que todos los navegadores pueden leer y que todos
los portales que venden espacios publicitarios aceptan.

2.3. Programas de animacin

Software de animacin como Adobe Flash. Con este software de animacin 2D se
generan muchos de los banners que existen hoy en da. El tipo de archivo
resultante al exportar desde Adobe Flash es un shockwave (.swf)
Un banner hecho con Flash permite hacer animaciones complejas, aadir sonido o
video (este tipo de banners ricos se los denomina rich media banners) y programar
la interactividad para el usuario.
A pesar de que la tecnologa Adobe Flash permite comprimir fuerza a la hora de
exportar, se tiene que vigilar el peso final del banner para no exceder los lmites
permitidos en la Web donde se publicar.

Banner hecho con Flash para Caixa Terrassa con motivo del lanzamiento el da de Sant Jordi, su
portal nuevo.

3. Formatos
La wikipedia (http://es.wikipedia.org/wiki/Banner) nos ofrece un listado de los
formatos de banners ms populares. El formato clsico de banner es horizontal y
mide 46860 pxeles, aunque existen muchos otros formatos en funcin del
apoyo al lugar Web que los acoge.
7

De hecho, el trmino banner se emplea para referirse a todo tipo de formatos

publicitarios en lnea, aunque existen piezas de muy diferentes caractersticas.
Las ms conocidas son las siguientes:
Robapginas, de formato cuadrado o rectangular. Los formatos ms
frecuentes son: 200x200, 250x250, 250x350 y 350x250. Este ltimo es el
ms empleado.
Rascacielos o Banner skyscraper es su nombre cuando el formato es
vertical; sus medidas suelen ser 120x600 y 160x600. Puede ser tambin
flotante desplazndose de arriba hacia abajo segn el usuario baje o suba
dentro de la web.
Botn, en formatos pequeos.
Banner layer, cuando la publicidad aparece sobreimpresionada en el
contenido del lugar web.
Interstitial, para formatos grandes que aparecen momentneamente antes
de la carga de una pgina.
Megabanner, es un formato horizontal grande (normalmente 72890)
Corner aparece en el lado superior derecho o izquierdo del sitio
desplegndose hacia el interior del mismo. Las medidas son: plegado
100x100 px y desplegado 350x350 px.
Reveal, formato publicitario cono apariencia de megabanner que al
desplegarse desplaza el contenido de la web hacia abajo.

3.1. Localizacin del banner

Uno de los aspectos clave es la localizacin del banner dentro de la pgina Web
que lo alojar (el apoyo).
La mejor localizacin para un banner es la pantalla de inicio. Estos banners son
los que ms se clican.
En cualquier pgina Web el mejor sitio es el comienzo de la pgina, en el tercio
superior de la pgina o en el lateral izquierdo, por este orden. Y en el caso de
poner dos banners se tiene que poner contenido interesante entre los dos.

3.2. Contexto
Uno de los aspectos clave es la localizacin del banner dentro de la pgina Web
Los banners se tienen que colocar en aquellas pginas de temtica similar a
nuestro banner, de este modo la pieza publicitaria apunta a nuestro potencial
cliente, adems de estar en el mismo idioma que la pgina donde se coloca.

Escoged bien dnde publicis vuestros banners y mirad de evitar pginas donde
haya mucha publicidad. Para tomar esta decisin tenis que saber cul es vuestro
pblico, qu temas le interesan y cules son las pginas que visita.

3.3. Qu formatos de banner funcionan mejor?

Si analizamos el siguiente grfico podemos concluir que los banners rich media
son los que mejor funcionan y, en este caso, el formato no sigue una pauta clara,
a pesar de que parece que los formatos ms pequeos son los ms exitosos.
En el caso de banners con menos profusin de recursos multimedia, los formatos
grandes funcionan mejor que los pequeos, a pesar de que se tiene que tener
siempre presente donde estn ubicados dentro de la pgina y en qu pgina (a
ms visitas de una pgina web ms posibilidades de ser clicado el banner).

Font: Eyeblaster Research Global Benchmark Report 2009

(http://www.mediamind.com/Content.aspx?page=resource&id=80)

Para aquellas personas que no tengan claro quines son los actores en el mundo
de la publicidad en lnea y cmo funciona habitualmente una campaa de
banners, puede consultar la siguiente direccin donde encontrar una interesante
presentacin en ingls:
http://www.bannersnack.com/blog/how-banner-advertising-works/#more-1485

4. Terminologa
Impresin
Trmino que sirve para medir las veces que un banner se muestra en la pgina
web donde est prevista su inclusin.
CTR (Clic Through Ratio)
9

El concepto clic through hace referencia al sitio Web donde es redirigido el

usuario al hacer clic sobre un banner.
El ratio de clic through mide el nmero de veces que alguien ha hecho clic sobre
un banner respecto al nmero de veces que se ha mostrado el banner
(impresiones). Este ratio se calcula dividiendo el nmero de impresiones por el
nmero de veces que es clicado el banner. Por ejemplo, un CTR de 20:1 significa
que cada 20 impresiones se clica un golpe, es decir un 5%.
Este ratio puede variar muchsimo en funcin de la campaa de publicidad pero
se puede considerar aceptable si ronda entre el 0,1% y el 1%. Habitualmente, el
CTR es el principal indicador que se emplea para medir la eficacia de una
campaa de publicidad en lnea.
CPM
Coste por mil impresiones. Es la manera ms habitual de medir el precio de un
anuncio de banners. Por ejemplo, un CPM de 1.500 euros quiere decir que por
esta cantidad el banner ser mostrado 1.000 veces.
CPC
Coste por clic. Esta medida hace referencia a la cantidad de dinero que el
anunciante paga por cada clic de un usuario. Si el usuario visualiza el banner pero
no lo clica no paga nada. El servicio de Adwords de Google funciona de este modo.
Soporte
Se llama soporte al Web que aloja la publicidad en formato banner, es decir, la
pgina Web donde los banners son mostrados.

10

5. Como hacer un buen banner

Lo ms complicado a la hora de hacer un banner es tener la idea. Analizar el
material disponible puede ayudar mucho a encontrar una buena manera de
transmitir la idea. Una vez la idea est clara, tenemos que empezar a crear o
tratar las imgenes que servirn para crear el banner. Para editar las imgenes
(recortar, escalar...) o para generarlas, tendremos que usar un programa de diseo
grfico como el GIMP, Photoshop o cualquier otro que disponga de herramientas
suficientes para editar imgenes.

Los banners son piezas publicitarias que la mayora de usuarios ignora, a no ser
que el mensaje del banner sea de inters para el usuario.
Esta afirmacin es una realidad, por este motivo es muy importante crear buenos
banners, que no sean intrusivos ni molestos para que el usuario pueda leer el
contenido que le interesa de la pgina Web.
A continuacin vamos a dar algunos consejos para conseguir hacer banners
relevantes que puedan ser de inters para el pblico objetivo de esta pieza
publicitaria. Habitualmente los banners se usan para promocionar una marca o
para vender un producto o servicio.

5.1. Medidas y formas requeridos por el lugar Web que

alojar el banner
A la hora de hacer un banner, lo primero que se tiene que saber es donde se
publicar (soporte) y qu medidas y formato tiene que tener la pieza publicitaria.
El peso del banner as como el formato que tiene que tener (las medidas) es lo
primero que se le tiene que pedir al cliente (que tiene que pedirlo, a su vez, al
lugar Web donde se mostrar el banner). En la mayora de casos se admiten
shockwaves, pero adems se suele pedir un gif animado, y aqu se tiene que tener
presente que al exportar un gif animado desde Flash el resultado puede ser
deficiente, as que a veces se tiene que rehacer con un programa de edicin
grfica o uno de especfico para hacer gifs animados.

11

5.2. Crear un mensaje claro, corto y comprensible para el

pblico objetivo
El copy (texto de un anuncio) define el mensaje, mientras que el diseo capta la
atencin del usuario y refuerza el mensaje.
Lo primero que se tiene que pensar es un buen texto que responda al objetivo que
tiene el anunciante (vender, hacer marca...). El texto tiene que ser corto porque el
formato es limitado y disponemos de pocos segundos para captar la atencin del
usuario: se tiene que prescindir de aquella informacin no esencial que ya se dar
en el lugar Web donde redirecciona el banner.
Quin es el pblico objetivo del anuncio es una informacin que el anunciante
tiene que proporcionar y tener muy clara, pues, el mensaje tiene que sintonizar
con este tipo de usuario (vocabulario, imaginario...). Si existe ms de un grupo de
usuarios claramente diferenciados el consejo es crear un mensaje para cada uno
de los grupos.
El texto del banner se tiene que centrar en los beneficios que el producto, servicio
o marca pueda ofrecer al pblico objetivo, no en las caractersticas (que ya se
explicarn en la Web destino):
En qu puede beneficiar mi producto/servicio al usuario?
Cmo le puede ayudar a resolver X problema o hacerle la vida ms
agradable?
Por qu es interesante nuestro producto o servicio?
Qu le diferencia del de la competencia?
Esta es la parte ms importante del mensaje porque es la que capta la atencin
del usuario.

5.3. Usar palabras y estrategias que despierten el inters del

usuario
La palabra gratis est comprobado que es la ms efectiva, pero no se tiene que
engaar nunca al usuario y le tenemos que poder ofrecer algo interesante de
manera gratuita.
Otras palabras que funcionan son: nuevo, oferta limitada, cmo hacer..., trucos
para... o secreto.
En cuanto a las estrategias, la de generar expectacin, despertar la curiosidad, el
humor o el miedo funcionan muy bien y sern el leitmotiv del banner. Se plantear
en la primera escena del banner y sern el hilo argumental que se ir desplegando
y explicando en el resto del banner.

5.4. Apelar a la accin por parte del usuario

12

Est comprobado que usar un texto que invite el usuario a clicar el banner
incrementa la cantidad de clics sobre la pieza publicitaria: clique aqu, download,
premio para continuar, etc.

Banner hecho para Caixa Terrassa con motivo del lanzamiento de su nuevo portal donde se invita
el usuario a interactuar y se apela a su curiosidad.

5.5. No engaar al usuario

Es muy importante no hacer promesas que no se pueden cumplir ni dar a
entender cosas que no son verdad. La nica cosa que se conseguir ser tener
usuarios enfadados que hablarn mal de nuestro producto o servicio.

5.6. Utilizar colores que destaquen

Es muy importante analizar el lugar donde se publicar el banner para ver los
colores ms adecuados para disearlo (los que ms pueden destacar, o los ms
corporativos, dependen de la intencin con la que se haga el banner).
El color es un elemento fundamental de cualquier diseo y sirve para comunicar
emociones y reforzar el mensaje:
Si usamos colores con fuerza como el rojo, el naranja... captaremos la atencin
del usuario y haremos que nuestro banner destaque.
Si usamos colores ms neutros el banner transmitir elegancia, estilo y
profesionalidad.
Usad colores brillantes (con luz) porque se complementan ms al soporte Web y
est demostrado que obtienen mejor resultado que los colores oscuros como el
negro.
No hagis un abuso del color, es decir, no usis muchos colores diferentes porque
la pieza publicitaria es corta y el resultado final sera un banner de feria.
En Internet existen generadores de colores en lnea que son gratuitos y nos
pueden ayudar en esta tarea.
Uno de los ms conocidos es el Kuler de Adobe (http://kuler.adobe.com) o el Color
Schemer (http://www.colorschemer.com/online.html).

13

5.7. Tipografas legibles y bien contrastadas

Las tipografas como serif permiten un reconocimiento rpido de los caracteres y
por este motivo se usan cuando hay bastante texto, pero en el caso de los
banners, donde nos vemos obligados a usar tamaos pequeos para el texto, lo
mejor es utilizar familias tipogrficas sans serif que funcionan mejor en tamaos
pequeos.
En el mundo del papel las fuentes como serif se usan mucho, al contrario que en
la web, donde las fuentes sans serif son las ms abundantes. Las fuentes sans
serif ms populares son Verdana, Arial, Helvtica, Trebuchet, Franklin Gothic,
Myriad Pro, Calibre, Lucida y Tahoma.

El contraste entre el texto y el fondo tiene que ser suficiente porque facilite la
lectura.

5.8. Las imgenes son un recurso atractivo

Las imgenes son un elemento que atrae el usuario. Disponer de imgenes
impactantes o guapas nos facilita mucho el diseo de la pieza publicitaria.
Encontrar una imagen que refuerce el mensaje que se quiere transmitir ayuda al
usuario a comprender ms rpidamente aquello que le queremos comunicar.
Existen lugares en Internet donde podemos buscar imgenes libres de derechos
bajo licencias Creative Commons cmo The Morgue Hilo
http://www.morguefile.com/), o otros lugares donde las imgenes son muy
baratas: Istockphoto (http://espanol.istockphoto.com/index.php).

Recordad que la resolucin por Web

son 72 pxeles por pulgada (ppp), y que
el material del que parts tiene que
tener una resolucin mayor para poder
trabajar con l, o una resolucin de 72
ppp pero con un tamao superior al del
14

archivo final para que pueda ser

manipulado.
Para ms informacin sobre las
licencias Creative Commons consultad
al final de este documento.

5.9. La animacin es efectiva

A las personas el movimiento nos atrae, y los banners que tienen movimiento
captan mejor la atencin del usuario que los banners estticos, el resultado final
es que los banners con movimiento obtienen ms clics que los banners estticos.
Podemos hacer banners animados desde los programas de diseo exportando en
formato gif animado, o usando herramientas especficas para crear gifs animados
o banners en formato flash.
En caso de animar un banner con tecnologa Flash se dispone de una herramienta
para poder generar animaciones ms complejas mediante las cuales podemos
explicar una historia o empezar a explicarla y continuarla en la Web de destino. Lo
que se tiene que vigilar en estos casos es el peso final del banner y no abusar de
la animacin de forma que pueda acabar confundiendo o molestando al usuario.

5.10. Las reproducciones de un banner han de limitarse

de 1 a 3
El IAB (Interactive Advertising Bureau) recomienda que la duracin mxima de una
animacin en un banner sean 15 segundos incluidas las reproducciones.
Hacer un loop infinito en un banner significa tener un trozo de pantalla que
siempre est en movimiento y acaba molestando a los usuarios. Lo mejor es
programarlo para que se reproduzca de una a tres veces y despus permanezca
esttico.

5.11. Los banners rich media son el formato ms efectivo

Este tipo de banners hechos con Flash que combinan imgenes, texto, sonido y
video tienen un ratio de clic through muy superior al resto de banners y hoy en da
son la tendencia dentro del mundo de la publicidad en lnea.
15

En la mayora de casos son interactivos. Un buen ejemplo es la campaa de

Tippex en http://www.youtube.com/watch?v=4ba1BqJ4S2M
Este tipo de banners pueden usar otro tipo de tecnologas que se combinan con la
tecnologa Flash: Java, Javascript, DHTML....

5.12. Invita al usuario a interactuar

Al usuario actual de Internet le gusta participar, y est comprobado que los
banners interactivos tienen ratios de clic through ms altos. Invita al usuario a
jugar, navegar, participar, contestar una pregunta, activar o desactivar el sonido...

5.13. Es recomendable identificar la marca o empresa que

hay detrs del banner
El logo ha de mostrar la identidad corporativa de la marca o empresa que hay
detrs de la campaa. Por lo que tienen que ser visibles en el banner. Es una
manera de hacer branding, aunque los usuarios no cliquen el banner, pero s lo
visualizan y a la gente le gusta saber quin est detrs de una determinada
campaa.

5.14. Crear diferentes banners con distintos conceptos

La creacin de diferentes banners con distintos conceptos permite mejorar la
accin de la promocin, as como evaluar cules son los ms efectivos.

5.15. Trabaja bien tu pgina de destino

No tiene sentido poner en marcha una campaa de banners si la pgina destino
del banner no est muy trabajada para que el usuario encuentre aquello que ha
ido a buscar. No descuidemos esta pantalla porque los usuarios clicarn vuestro
banner pero no se convertirn en clientes de vuestros productos o servicios.

5.16. Mide el xito de tu campaa

Existen herramientas estadsticas gratuitas en Internet que te permitirn medir de
una manera muy esmerada el xito de tu campaa de banners. Una de las ms
populares es Google Analytics (http://www.google.com/analytics/).

6. Derechos de autor y licencias

Creative Commons
Copyright vs Copyleft
16

Los derechos de autor sobre una obra creada son automticamente propiedad del
autor que la ha generado, con independencia de que el autor lo indicase con el
smbolo del copyright: .
Todo lo que hay en Internet tiene derechos de autor, se indique o no con el
smbolo del copyright. nicamente se pueden usar aquellas obras por las cuales
se ha pedido autorizacin al autor, o aquellas amparadas bajo el conjunto de
licencias copyleft. En este ltimo caso siempre encontraris un icono identificativo
de la licencia bajo la que se ampara la obra, y se tiene que consultar haciendo un
clic sobre el icono para saber qu nos permite y qu no.
(http://cat.creativecommons.org/).

Pensad que la mayora de autores estarn encantados de permitir que publiquis

una muestra de su obra Web al Departamento de Cultura por la proyeccin que
esto implica. As que pedidles permiso.
Los Derechos de autor (copyright, de smbolo ) son una forma de proteccin
proporcionada por las leyes vigentes en la mayora de pases para los autores de
"obras originales" incluyendo obras literarias, dramticas, musicales, artsticas e
intelectuales.
La proteccin de los derechos de autor se da a partir que la obra est creada de
una forma fijada. Los derechos de autor sobre una obra creada acontecen
inmediatamente propiedad del autor que la ha creado. Slo el autor o aquellos
que derivan sus derechos a travs del autor pueden reclamar la propiedad.
Como copyleft se conoce a todo un conjunto de licencias que pueden aplicarse a
creaciones informticas, artsticas, etc. Los defensores del copyleft consideran las
leyes de derechos de autor (copyright) como una forma de restringir el derecho de
hacer y redistribuir copias de un trabajo. Una licencia copyleft, de hecho, utiliza la
legislacin propia de los derechos de autor para asegurar que cada persona que
recibe una copia u obra derivada pueda usar, modificar, y tambin redistribuir
tanto el trabajo, como sus versiones derivadas. As pues, en un sentido
estrictamente no legal, el copyleft es el contrario que el copyright.
El concepto, no el trmino, fu concebido originalmente por Richard Stallman
(http://ca.wikipedia.org/wiki/Richard_Stallman).
Como un ejemplo de licencias del tipo copyleft, destacaramos la GPL
(http://ca.wikipedia.org/wiki/GPL) para software o algunas de las licencias de
Creative Commons (http://ca.wikipedia.org/wiki/Creative_Commons) para un
amplio abanico de contenidos y obras.

17

Con la combinacin de diferentes principios y restricciones, las licencias autorizan

ciertos usos libremente definidos por los autores. Las combinaciones se generan
alrededor de cuatro condiciones bsicas:
Reconocimiento, o Attribution (by): siempre que se reconozca la
autora de la obra, esta puede ser reproducida, distribuida y comunicada
pblicamente.
No comercial, o Non Commercial (nc): no se puede utilizar la obra ni los
trabajos derivados para finalidades comerciales.
Sin obras derivadas, o No derivative works (nd): no se puede alterar,
transformar o generar una obra derivada de la obra original.
Compartir igual, o Share alike (sa): si se altera o transforma la obra, o se
generan obras derivadas, han de quedar sujetas a la misma licencia que la
obra original.
Combinando las condiciones obtenemos las siguientes seis licencias:
Reconocimiento (cc-by): Se permite el uso comercial de la obra y de las
posibles obras derivadas. La generacin y distribucin tambin est
permitida sin ninguna restriccin.
Reconocimiento NoComercial (cc-by-nc): Se permite la generacin
de obras derivadas siempre que no se haya hecho un uso comercial.
Tampoco se puede utilizar la obra original con finalidades comerciales.
Reconocimiento - NoComercial - CompartirIgual (by-nc-sa): No
est permitido un uso comercial de la obra original ni de las posibles obras
derivadas, la distribucin de las cuales se ha de hacer con una licencia
igual a la que regula la obra original.
Reconocimiento - NoComercial - SinObraDerivada (by-nc-nd): No
est permitido un uso comercial de la obra original ni la generacin de
obras derivadas.
Reconocimiento - CompartirIgual (by-sa): Se permite el uso
comercial de la obra y de las posibles obras derivadas, la distribucin de las
cuales se ha de hacer con una licencia igual a la que regula la obra original.
Reconocimiento- SinObraDerivada (by-nd): Se permite el uso
comercial de la obra pero no la generacin de obras derivadas.
Fuente: Wikipedia

7. Creacin de gifs animados con

programas especficos: Beneton Movie
Gif
Programa especfico para crear gifs animados que permite crear animaciones as
como editar animaciones ya existentes. Se pueden hacer banners con l siempre y
18

cuando dispongamos de las imgenes ya retocadas con otro software, pues el

editor propio de imgenes es muy pobre.
Soporta diferentes formatos (gif, bmp, jpg, png, avi...) y dispone de 20 efectos que
podemos combinar.
Para descargar el programa:
http://www.benetonsoftware.com/Beneton_Movie_GIF.php
A continuacin vamos a explicar cmo funciona este programa, pero recordad que
la creacin de la imagen o imgenes que sern la base de vuestra animacin, las
tendris que generar en un programa de retoque fotogrfico o de diseo porque
disponen de editores de imgenes muy completos que os permitirn hacer
aquello que necesitis: recortar, escalar, retocar, componer, etc.
La interfaz del programa se divide en las cuatro reas marcadas en la siguiente
imagen:

En la barra de herramientas podemos encontrar algunas herramientas propias del

programa: Revert (revertir todo lo que se ha hecho desde que se ha abierto el
archivo), el grupo de herramientas que permiten aadir o insertar cuadros
(frames) en la lnea de tiempo, la herramienta que permite redimensionar la
animacin y la que permite cambiar la configuracin de algunos parmetros del
programa.
La herramienta de redimensionar tiene diferentes posibilidades a la hora de
escalar el archivo:
19

Escalar nicamente el contenido (seleccionar nicamente keep aspect

ratio as possible)
Escalar el lienzo y el contenido (keep aspect ratio as possible + Resize
canvas + Stretch)
Escalar nicamente el lienzo (keep aspect ratio as possible + Resize
canvas + Place to center).

En la barra de herramientas encontramos la opcin de exportar cada cuadro de la

animacin como una imagen en formato BMP o GIF. Si en algn momento
queremos exportar un cuadro porque no nos interesa un gif animado sino uno fijo,
pensad que con el men contextual que sale con el botn derecho al ponernos
sobre un cuadro podemos exportar aquel cuadro en concreto.
El men contextual muestra las opciones ms comunes de la zona donde nos
encontramos, es decir, es interactivo y permite aplicar funciones de manera
rpida.
El escenario nos informa en la parte superior de las caractersticas del archivo y
permite visualizarlo con diferentes niveles de zoom, cambiar el color de fondo de
la pantalla, la transparencia y la posibilidad de hacer un loop del mismo
(reproduccin infinita).
La zona de la lnea de tiempo nos permite visualizar todos los cuadros de la
animacin, movernos entre ellos, editarlos de manera muy simple haciendo doble
clic en el frame que queramos editar, exportar un determinado cuadro y cambiarle
las propiedades.
Vamos a practicar: crearemos un gif animado desde una nica imagen llamada
Subvenciones que encontraris en la carpeta prcticas. La abrimos e iremos a
20

jugar con la progresiva visualizacin del texto que contiene, de manera que la
imagen que ahora vemos sea la ltima de la animacin.
Trabajaremos en la lnea de tiempo: La animacin ser: amarillo, ayudas, y,
subvenciones, 2009 ir apareciendo poco a poco y despus le invertiremos los
colores.
1. Copiar la imagen 5 veces y aadir un fotograma en blanco al inicio de la
animacin.
2. Editaremos el segundo fotograma para conseguir la composicin del
amarillo de fondo del banner y pintaremos el primer fotograma slo con
amarillo.
3. El texto que no queramos lo haremos desaparecer detrs de un recuadro
de color amarillo en todos los fotogramas sacados de los dos ltimos, que
tendrn todo el texto.
4. Una vez hecha la secuencia del texto, iremos a hacer aparecer el ao. Nos
pondremos delante del primer fotograma que tiene el ao. Iremos a
efectos animados y elegiremos Transitions: Haremos un fundido del frame
4 al 5 y aadiremos 3 frames para la transicin.
5. El ltimo fotograma de todos, al 8, le haremos un efecto de inversin de
colores.
6. Ahora hemos de ajustar el tiempos, y para hacerlo lo mejor es poner un
Delay de 20 centsimas de segundo a todo y despus ya ajustaremos
manualmente el tiempo de cada fotograma y otros aspectos del banner.
7. Para configurar el banner iremos a la herramienta correspondiente en la
barra de herramientas superior. Aqu podremos elegir las veces que
queramos reproducirlo.

Ahora haremos un gif animado con el material que hay en la carpeta

Agenda_cultural dentro del directorio Prcticas. Hemos de jugar con la C.
Los efectos normales se aplican a una imagen determinada de la animacin,
mientras que los efectos animados se aplican a todas las imgenes o a una parte
de ellas. Sirven para animar la secuencia de imgenes.
Entre los efectos animados, los que nos darn ms juego son:
Transition, que permite hacer fundidos, descubrir objetos y desparecerlos.
Moving Path, mueve el objeto dentro del banner.
Change HSB que nos permite cambiar parmetros de brillo y color.
Rotate = voltear.

21

Gua de Recursos
RECURSOS
Nombre
Maestros del web:
Diseando
banners efectivos.

URL
(http://www.maestrosdelweb.com/editorial/b
anners/)

Observaciones
Artculo de la publicacin
maestros del web:
Diseando Banners
Efectivos para publicitar
nuestros sitios web.

Prcticas para
hacer banners.

http://www.bannersnack.com/blog/25-bestpractices-in-banner-advertising/

EBook de la empresa
BannerSnack sobre las 25
mejores prcticas para
hacer banners: 25 BEST
PRACTICES IN BANNER
ADVERTISING.

BannerSnack

http://www.bannersnack.com/

BannerSnack es un editor
online gratuito para generar
banners en Flash.

Kuler de Adobe

(http://kuler.adobe.com)

Generadores de colores en
lnea gratuitos: Kuler de
Adobe

The Morgue File

(http://www.morguefile.com/)

The Morgue File es un lugar

donde podemos buscar
imgenes libres de derechos
bajo licencias Creative
Commons.

Istockphoto

(http://espanol.istockphoto.com/index.php)

Istockphoto ofrece todo tipo

de imgenes a precios muy
bajos.

22