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