Descargar pdf - Ajuntament de Barcelona

CREIX
AMB
INTERNET
APRENDE A CREAR BANNERS
Y GIFS ANIMADOS
ÍNDICE:
Introducción…….............................................................................................................................................pág. 03
1. El banner...................................................................................................................................................pág:04
2. Programas para crear banners y gifs animados...............................................................pág: 06
3. Formatos..................................................................................................................................................pág: 08
4. Terminología...........................................................................................................................................pág:11
5. Cómo hacer un buen banner………..................................................................................................pág:12
6. Derechos de autor y licencias Creative Commons..........................................................pág: 18
7. Creación de gifs animados con programas específicos:
Beneton Movie Gif................................................................................................................................pág: 20
Enlaces de interés.......................................................................................................................................pág. 24
2
Introducción
Los banners son el más usual formato publicitario de Internet. Cualquier página
web es susceptible de incluir toda clase de banners.
Los banners se crean con imágenes (GIF, JPEG o PNG) o con animaciones creadas
a partir de tecnologías como Photoshop, GIMP, Flash o Java. Están diseñados con
la intención de llamar la atención, resultar notorios y comunicar el mensaje
deseado.
El objetivo de este seminario es aprender a realizar buenos banners (gifs
animados), bien diseñados y estructurados con programas como Photoshop o
GIMP (Software libre)
Descripción 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 terminología.
 Aprender cómo hacer un buen banner.
 Realizar y diseñar dos ejemplos de banners con Photoshop y Gimp.
3
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 línea consiste en
incluir una pieza publicitaria dentro de una página Web. Prácticamente en la
totalidad de los casos su objetivo es atraer tráfico hacia el lugar Web del
anunciante que paga por su inclusión.
Los banners se crean con imágenes (GIF, JPEG o PNG) o con animaciones creadas
a partir de tecnologías como Flash o Java. Están diseñados con la intención de
llamar la atención, resultar notorios y comunicar el mensaje deseado. Por lo tanto,
estos banners no necesariamente mantienen la línea gráfica del lugar web.
Cualquier lugar Web es susceptible de incluir toda clase de banners y otros
formatos publicitarios, aunque en la mayoría de los casos, son los lugares con
contenidos de mayor interés o con grandes volúmenes de tráfico, los cuales
atraen las mayores inversiones de los anunciantes.
Los banners se crearon para dirigir público entre diferentes lugares Web. También
se usan dentro de un sitio web para anunciar algún producto, servicio,
acontecimiento o novedad, es decir, para dirigir público a pantallas determinadas
de una misma web, como sería el caso de este banner que aparece en la pantalla
de inicio de l’Ajuntament de Barcelona (http://www.bcn.cat/):
4
Banner de este producto de Danone para niños que despliega más información del producto
Acticards en esta misma pantalla.
En el siguiente ejemplo de Vilaweb, el portal de noticias en catalán más conocido,
se emplean las dos opciones. En la parte superior de la cabecera hay dos banners
que dirigen el público a otras webs, y debajo encontramos destacados (algunos
patrocinados) que llevan a diferentes pantallas del portal.
5
2. Programas para crear banners y gifs
animados
Existen tres tipos de software para crear banners y gifs animados:
2.1. Programas específicos
Software específico para crear banners con el que únicamente podemos crear
estas pequeñas piezas publicitarias. Tenéis todo un listado de software específico
de
escritorio
para
crear
banners
en
la
siguiente
dirección:
http://www.softonic.com/s/banners. La otra opción es usar software en línea
específico (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 específico es fácil de utilizar pero las funciones de las que
dispone suelen ser muy básicas, en la mayoría los de casos no permiten editar las
imágenes, sino que sólo permiten generar una animación en función de las
imágenes preexistentes que se van añadiendo.
2.2. Programas de diseño gráfico
Programas de diseño gráfico como GIMP, Photoshop… que permiten exportar en
el formato gif animado. Los diseñadores usan estos programas de diseño gráfico
para materializar la animación que tienen en la cabeza, pues este software les
proporciona las herramientas necesarias para crear las diferentes imágenes que
componen la animación.
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 pequeñas animaciones
en la Web. Este formato es uno de los primeros en Internet y se utiliza para
generar banners y pequeñas animaciones. También es posible generar
animaciones con otros formatos, el más conocido para la generación de
animaciones es el formato .swf (formato de exportación del programa Adobe
Flash).
Un gif animado es una secuencia de imágenes estáticas que se reproducen a una
velocidad normalmente de 12 cuadros por segundo (en el cine son 24 cuadros por
segundo) para dar la sensación de imagen en movimiento.
6
Este formato es un estándar que todos los navegadores pueden leer y que todos
los portales que venden espacios publicitarios aceptan.
2.3. Programas de animación
Software de animación como Adobe Flash. Con este software de animación 2D se
generan muchos de los banners que existen hoy en día. El tipo de archivo
resultante al exportar desde Adobe Flash es un shockwave (.swf)
Un banner hecho con Flash permite hacer animaciones complejas, añadir 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 tecnología Adobe Flash permite comprimir fuerza a la hora de
exportar, se tiene que vigilar el peso final del banner para no exceder los límites
permitidos en la Web donde se publicará.
Banner hecho con Flash para Caixa Terrassa con motivo del lanzamiento el día 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 más populares. El formato clásico de banner es horizontal y
mide 468×60 píxeles, aunque existen muchos otros formatos en función del
apoyo al lugar Web que los acoge.
7
De hecho, el término banner se emplea para referirse a todo tipo de formatos
publicitarios en línea, aunque existen piezas de muy diferentes características.
Las más conocidas son las siguientes:








“Robapáginas”, de formato cuadrado o rectangular. Los formatos más
frecuentes son: 200x200, 250x250, 250x350 y 350x250. Este último es el
más empleado.
Rascacielos o Banner skyscraper es su nombre cuando el formato es
vertical; sus medidas suelen ser 120x600 y 160x600. Puede ser también
flotante desplazándose de arriba hacia abajo según el usuario baje o suba
dentro de la web.
Botón, en formatos pequeños.
Banner layer, cuando la publicidad aparece sobreimpresionada en el
contenido del lugar web.
Interstitial, para formatos grandes que aparecen momentáneamente antes
de la carga de una página.
Megabanner, es un formato horizontal grande (normalmente 728×90)
Corner aparece en el lado superior derecho o izquierdo del sitio
desplegándose 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. Localización del banner
Uno de los aspectos clave es la localización del banner dentro de la página Web
que lo alojará (el apoyo).
La mejor localización para un banner es la pantalla de inicio. Estos banners son
los que más se clican.
En cualquier página Web el mejor sitio es el comienzo de la página, en el tercio
superior de la página 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 localización del banner dentro de la página Web
Los banners se tienen que colocar en aquellas páginas de temática similar a
nuestro banner, de este modo la pieza publicitaria apunta a nuestro potencial
cliente, además de estar en el mismo idioma que la página donde se coloca.
8
Escoged bien dónde publicáis vuestros banners y mirad de evitar páginas donde
haya mucha publicidad. Para tomar esta decisión tenéis que saber cuál es vuestro
público, qué temas le interesan y cuáles son las páginas que visita.
3.3. ¿Qué formatos de banner funcionan mejor?
Si analizamos el siguiente gráfico 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 más pequeños son los más exitosos.
En el caso de banners con menos profusión de recursos multimedia, los formatos
grandes funcionan mejor que los pequeños, a pesar de que se tiene que tener
siempre presente donde están ubicados dentro de la página y en qué página (a
más visitas de una página web más 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 quiénes son los actores en el mundo
de la publicidad en línea y cómo funciona habitualmente una campaña de
banners, puede consultar la siguiente dirección donde encontrará una interesante
presentación en inglés:
http://www.bannersnack.com/blog/how-banner-advertising-works/#more-1485
4. Terminología
Impresión
Término que sirve para medir las veces que un banner se muestra en la página
web donde está prevista su inclusión.
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 número de veces que alguien ha hecho clic sobre
un banner respecto al número de veces que se ha mostrado el banner
(impresiones). Este ratio se calcula dividiendo el número de impresiones por el
número 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 muchísimo en función de la campaña 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
campaña de publicidad en línea.
CPM
Coste por mil impresiones. Es la manera más 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
página Web donde los banners son mostrados.
10
5. Como hacer un buen banner
Lo más 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 imágenes que servirán para crear el banner. Para editar las imágenes
(recortar, escalar...) o para generarlas, tendremos que usar un programa de diseño
gráfico como el GIMP, Photoshop o cualquier otro que disponga de herramientas
suficientes para editar imágenes.
Los banners son piezas publicitarias que la mayoría de usuarios ignora, a no ser
que el mensaje del banner sea de interés para el usuario.
Esta afirmación 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 página Web.
A continuación vamos a dar algunos consejos para conseguir hacer banners
relevantes que puedan ser de interés para el público 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 mayoría de casos se admiten
shockwaves, pero además 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 edición
gráfica o uno de específico para hacer gifs animados.
11
5.2. Crear un mensaje claro, corto y comprensible para el
público objetivo
El copy (texto de un anuncio) define el mensaje, mientras que el diseño capta la
atención 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 atención del
usuario: se tiene que prescindir de aquella información no esencial que ya se dará
en el lugar Web donde redirecciona el banner.
Quién es el público objetivo del anuncio es una información 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 más 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 público objetivo, no en las características (que ya se
explicarán en la Web destino):




¿En qué puede beneficiar mi producto/servicio al usuario?
¿Cómo le puede ayudar a resolver X problema o hacerle la vida más
agradable?
¿Por qué es interesante nuestro producto o servicio?
¿Qué le diferencia del de la competencia?
Esta es la parte más importante del mensaje porque es la que capta la atención
del usuario.
5.3. Usar palabras y estrategias que despierten el interés del
usuario
La palabra gratis está comprobado que es la más efectiva, pero no se tiene que
engañar nunca al usuario y le tenemos que poder ofrecer algo interesante de
manera gratuita.
Otras palabras que funcionan son: nuevo, oferta limitada, cómo hacer..., trucos
para... o secreto.
En cuanto a las estrategias, la de generar expectación, despertar la curiosidad, el
humor o el miedo funcionan muy bien y serán el leitmotiv del banner. Se planteará
en la primera escena del banner y serán el hilo argumental que se irá desplegando
y explicando en el resto del banner.
5.4. Apelar a la acción 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 engañar 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 hablarán 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 más adecuados para diseñarlo (los que más pueden destacar, o los más
corporativos, dependen de la intención con la que se haga el banner).
El color es un elemento fundamental de cualquier diseño y sirve para comunicar
emociones y reforzar el mensaje:
• Si usamos colores con fuerza como el rojo, el naranja... captaremos la atención
del usuario y haremos que nuestro banner destaque.
• Si usamos colores más neutros el banner transmitirá elegancia, estilo y
profesionalidad.
Usad colores brillantes (con luz) porque se complementan más al soporte Web y
está demostrado que obtienen mejor resultado que los colores oscuros como el
negro.
No hagáis un abuso del color, es decir, no uséis muchos colores diferentes porque
la pieza publicitaria es corta y el resultado final sería un banner “de feria”.
En Internet existen generadores de colores en línea que son gratuitos y nos
pueden ayudar en esta tarea.
Uno de los más conocidos es el Kuler de Adobe (http://kuler.adobe.com) o el Color
Schemer (http://www.colorschemer.com/online.html).
13
5.7. Tipografías legibles y bien contrastadas
Las tipografías como serif permiten un reconocimiento rápido 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 tamaños pequeños para el texto, lo
mejor es utilizar familias tipográficas sans serif que funcionan mejor en tamaños
pequeños.
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 más abundantes. Las fuentes sans
serif más populares son Verdana, Arial, Helvética, 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 imágenes son un recurso atractivo
Las imágenes son un elemento que atrae el usuario. Disponer de imágenes
impactantes o guapas nos facilita mucho el diseño de la pieza publicitaria.
Encontrar una imagen que refuerce el mensaje que se quiere transmitir ayuda al
usuario a comprender más rápidamente aquello que le queremos comunicar.
Existen lugares en Internet donde podemos buscar imágenes libres de derechos
bajo licencias Creative Commons cómo The Morgue Hilo
http://www.morguefile.com/), o otros lugares donde las imágenes son muy
baratas: Istockphoto (http://espanol.istockphoto.com/index.php).
Recordad que la resolución por Web
son 72 píxeles por pulgada (ppp), y que
el material del que partís tiene que
tener una resolución mayor para poder
trabajar con él, o una resolución de 72
ppp pero con un tamaño superior al del
14
archivo final para que pueda ser
manipulado.
Para más información sobre las
licencias Creative Commons consultad
al final de este documento.
5.9. La animación es efectiva
A las personas el movimiento nos atrae, y los banners que tienen movimiento
captan mejor la atención del usuario que los banners estáticos, el resultado final
es que los banners con movimiento obtienen más clics que los banners estáticos.
Podemos hacer banners animados desde los programas de diseño exportando en
formato gif animado, o usando herramientas específicas para crear gifs animados
o banners en formato flash.
En caso de animar un banner con tecnología Flash se dispone de una herramienta
para poder generar animaciones más 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 animación 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 duración máxima de una
animación 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 después permanezca
estático.
5.11. Los banners rich media son el formato más efectivo
Este tipo de banners hechos con Flash que combinan imágenes, texto, sonido y
video tienen un ratio de clic through muy superior al resto de banners y hoy en día
son la tendencia dentro del mundo de la publicidad en línea.
15
En la mayoría de casos son interactivos. Un buen ejemplo es la campaña de
Tippex en http://www.youtube.com/watch?v=4ba1BqJ4S2M
Este tipo de banners pueden usar otro tipo de tecnologías que se combinan con la
tecnología 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 más 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 detrás del banner
El logo ha de mostrar la identidad corporativa de la marca o empresa que hay
detrás de la campaña. 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 quién está detrás de una determinada
campaña.
5.14. Crear diferentes banners con distintos conceptos
La creación de diferentes banners con distintos conceptos permite mejorar la
acción de la promoción, así como evaluar cuáles son los más efectivos.
5.15. Trabaja bien tu página de destino
No tiene sentido poner en marcha una campaña de banners si la página 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 clicarán vuestro
banner pero no se convertirán en clientes de vuestros productos o servicios.
5.16. Mide el éxito de tu campaña
Existen herramientas estadísticas gratuitas en Internet que te permitirán medir de
una manera muy esmerada el éxito de tu campaña de banners. Una de las más
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 automáticamente propiedad del
autor que la ha generado, con independencia de que el autor lo indicase con el
símbolo del copyright: ©.
Todo lo que hay en Internet tiene derechos de autor, se indique o no con el
símbolo del copyright. Únicamente se pueden usar aquellas obras por las cuales
se ha pedido autorización al autor, o aquellas amparadas bajo el conjunto de
licencias copyleft. En este último caso siempre encontraréis 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 mayoría de autores estarán encantados de permitir que publiquéis
una muestra de su obra Web al Departamento de Cultura por la proyección que
esto implica. Así que pedidles permiso.
Los Derechos de autor (copyright, de símbolo ©) son una forma de protección
proporcionada por las leyes vigentes en la mayoría de países para los autores de
"obras originales" incluyendo obras literarias, dramáticas, musicales, artísticas e
intelectuales.
La protección 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. Sólo el autor o aquellos
que derivan sus derechos a través del autor pueden reclamar la propiedad.
Como copyleft se conoce a todo un conjunto de licencias que pueden aplicarse a
creaciones informáticas, artísticas, 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
legislación propia de los derechos de autor para asegurar que cada persona que
recibe una copia u obra derivada pueda usar, modificar, y también 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 término, fué concebido originalmente por Richard Stallman
(http://ca.wikipedia.org/wiki/Richard_Stallman).
Como un ejemplo de licencias del tipo copyleft, destacaríamos 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 combinación de diferentes principios y restricciones, las licencias autorizan
ciertos usos libremente definidos por los autores. Las combinaciones se generan
alrededor de cuatro condiciones básicas:

Reconocimiento, o Attribution (by): siempre que se reconozca la
autoría de la obra, esta puede ser reproducida, distribuida y comunicada
públicamente.

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 generación y distribución también está
permitida sin ninguna restricción.

Reconocimiento – NoComercial (cc-by-nc): Se permite la generación
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 distribución 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 generación de
obras derivadas.

Reconocimiento - CompartirIgual (by-sa): Se permite el uso
comercial de la obra y de las posibles obras derivadas, la distribución 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 generación de obras derivadas.
Fuente: Wikipedia
7. Creación de gifs animados con
programas específicos: Beneton Movie
Gif
Programa específico 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 imágenes ya retocadas con otro software, pues el
editor propio de imágenes 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 continuación vamos a explicar cómo funciona este programa, pero recordad que
la creación de la imagen o imágenes que serán la base de vuestra animación, las
tendréis que generar en un programa de retoque fotográfico o de diseño porque
disponen de editores de imágenes muy completos que os permitirán hacer
aquello que necesitéis: 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 añadir o insertar “cuadros”
(frames) en la línea de tiempo, la herramienta que permite redimensionar la
animación y la que permite cambiar la configuración de algunos parámetros 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 opción de exportar cada cuadro de la
animación como una imagen en formato BMP o GIF. Si en algún 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 botón derecho al ponernos
sobre un cuadro podemos exportar aquel cuadro en concreto.
El menú contextual muestra las opciones más comunes de la zona donde nos
encontramos, es decir, es interactivo y permite aplicar funciones de manera
rápida.
El escenario nos informa en la parte superior de las características 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
(reproducción infinita).
La zona de la línea de tiempo nos permite visualizar todos los cuadros de la
animación, 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 encontraréis en la carpeta “prácticas”. La abrimos e iremos a
20
jugar con la progresiva visualización del texto que contiene, de manera que la
imagen que ahora vemos sea la última de la animación.
Trabajaremos en la línea de tiempo: La animación será: amarillo, ayudas, y,
subvenciones, 2009 irá apareciendo poco a poco y después le invertiremos los
colores.
1. Copiar la imagen 5 veces y añadir un fotograma en blanco al inicio de la
animación.
2. Editaremos el segundo fotograma para conseguir la composición del
amarillo de fondo del banner y pintaremos el primer fotograma sólo con
amarillo.
3. El texto que no queramos lo haremos desaparecer detrás de un recuadro
de color amarillo en todos los fotogramas sacados de los dos últimos, que
tendrán todo el texto.
4. Una vez hecha la secuencia del texto, iremos a hacer aparecer el año. Nos
pondremos delante del primer fotograma que tiene el año. Iremos a
efectos animados y elegiremos Transitions: Haremos un fundido del frame
4 al 5 y añadiremos 3 frames para la transición.
5. El último fotograma de todos, al 8, le haremos un efecto de inversión de
colores.
6. Ahora hemos de ajustar el tiempos, y para hacerlo lo mejor es poner un
Delay de 20 centésimas de segundo a todo y después 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 “Prácticas”. Hemos de jugar con la “C”.
Los efectos normales se aplican a una imagen determinada de la animación,
mientras que los efectos animados se aplican a todas las imágenes o a una parte
de ellas. Sirven para animar la secuencia de imágenes.
Entre los efectos animados, los que nos darán más 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 parámetros de brillo y color.
 Rotate = voltear.
21
Guía de Recursos
RECURSOS
Nombre
Maestros del web:
Diseñando
banners efectivos.
URL
(http://www.maestrosdelweb.com/editorial/b
anners/)
Observaciones
Artículo de la publicación
maestros del web:
“Diseñando Banners
Efectivos para publicitar
nuestros sitios web.”
Prácticas para
hacer banners.
http://www.bannersnack.com/blog/25-bestpractices-in-banner-advertising/
EBook de la empresa
BannerSnack sobre las 25
mejores prácticas 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
línea gratuitos: Kuler de
Adobe
The Morgue File
(http://www.morguefile.com/)
The Morgue File es un lugar
donde podemos buscar
imágenes libres de derechos
bajo licencias Creative
Commons.
Istockphoto
(http://espanol.istockphoto.com/index.php)
Istockphoto ofrece todo tipo
de imágenes a precios muy
bajos.
22