Si estás interesado en crear un banner en Illustrator, existen algunos factores importantes que debes conocer para decidir si quieres continuar con este sistema o elegir otro procedimiento diferente para diseñar el banner.
Antes de entrar de lleno en el proceso, tienes que saber que el archivo obtenido podría no ser visible en todos los dispositivos, dependerá del tipo de banner que queramos hacer y del formato del archivo que utilicemos, a continuación te explico por qué.
Cuándo debemos hacer un banner con Illustrator
Queramos o no, los banner están presentes en la gran mayoría de páginas y aplicaciones web. Cualquier espacio destinado a promocionar o anunciar algo de forma recurrente, es susceptible de ser un banner.
Antes de ponernos a diseñar con el programa, tenemos que analizar el tipo de trabajo que queremos obtener. Ya que como se suele decir: "no podemos pedir peras al olmo", y hay cosas que no se pueden hacer en Illustrator.
Una de las mayores limitaciones que tiene Adobe Illustrator, es la posibilidad de crear banners animados para todos los dispositivos.
Esto se debe a que la única posibilidad de exportar el archivo con movimiento es en formato ".swf", o lo que es lo mismo, en formato Flash. Lo que limita la posibilidad de mostrarlo en los móviles o tablets que no permiten este sistema de reproducción.
No hace falta recordar que Adobe Illustrator es un programa que trabaja con vectores y no con pixeles, y por tanto tiene limitado el modo de exportación, en mapa de bips, de las imágenes en movimiento, como ".gif" o el nuevo formato "webP".
Crear banners en movimiento con Illustrator
Puede que si buscamos una integración global que pueda verse en todos los dispositivos, Illustrator no es la mejor forma de crear un banner en movimiento o dinámico.
Pero existen muchas páginas webs, portales de juegos o aplicaciones online que están creadas en Flash, dirigidas a un público que accede a ellas de forma habitual desde ordenadores de escritorio, y por tanto, con la posibilidad de reproducir el formato flash.
Para concluir esta introducción, y como orientación para crear banners, mi recomendación a nivel general es crear diseños estáticos en formato ".png" o ".jpg" que sí podemos generar desde Adobe Illustrator.
Si nos vemos en la necesidad de crear un banner en movimiento, utilizar ".swf", si es sólo para escritorio, o recurrir a otro tipo de programa para generar imágenes ".gif" o ".webP" en movimiento, como Photoshop,
Pasos para crear un banner
Como hemos visto antes, lo primero es decidir si tendrá movimiento o no, después elegir el tamaño adecuado y diseñarlo pensando en que puede que tengamos que adaptarlo a otros formatos. Si es un encargo, es posible que el cliente quiera utilizarlo en distintos medios.
Un banner tiene que ser sencillo, sin demasiados elementos que confundan a quien lo ve y que consiga transmitir lo que quiere de un sólo golpe de vista, y sobre todo, sin mensajes engañosos.
Tamaños de banners más utilizados
Hay que diferenciar entre el tamaño de archivo y las dimensiones del banner.
El peso del archivo nunca debería pasar de los 150 Kb como máximo, ya que es un elemento que podría ralentizar la carga de la web al ser un elemento más a mostrar cuando se visita nuestro sitio.
Respecto a las dimensiones a la hora de crear un banner con Illustrator o cualquier programa, no existe una obligación estricta, pero si unas medidas estipuladas para la inserción de banners en diferentes medios, que tendremos que cumplir.
Existen otros formatos que también podemos utilizar, y dependiendo del espacio asignado podrían sernos útiles.
Creando un banner con Illustrator
Es hora de abrir el programa y ponernos a crear el banner en Illustrator. Para el ejemplo utilizaré un tamaño "standar" de 728x90 px, llamado "Leaderboard".
En esta primera parte diseñaremos un banner estático, para al final, explicar cómo podemos darle movimiento.
Propiedades del documento
Hay que prestar atención a la configuración inicial del nuevo documento y seleccionar los siguiente parámetros:
- Formato: Web
- Tamaño: 728x90 px
- Modo de color: RGB
- Resolución: 72 ppp
- Modo de previsualización: Píxel
Puesto que es un producto para visualizar en pantallas, es importante respetar los colores RGB, la resolución, y sobre todo el modo de previsualización para evitar que los elementos queden en medio de los píxeles y provoquen efectos raros.
Diseño el Banner
El banner que voy a diseñar va a ser algo sencillo para que todo el mundo lo pueda reproducir, adaptándolo a sus necesidades, y para que sirva como punto de partida para crear diseños más complejos.
El método de trabajo utilizado, y que recomiendo para realizar un proceso sin problemas, es el siguiente:
- Para evitar bordes blancos en los extremos del banner, es recomendable no obsesionarse con que todo lo que hagamos quede dentro del recuadro del documento. A la hora de exportarlo, todo lo sobrante se recortará al tamaño del documento.
- Es importante trabajar con el panel de las capas y colocar cada elemento en una capa independiente. Esto nos servirá sobre todo si queremos asignar algún movimiento al final.
- Utilizar fuentes de un tamaño adecuado y fáciles de leer si queremos incluir algún tipo de mensaje o añadir algún pequeño párrafo.
- Colocar los elementos de forma lógica que no confunda ni engañe a quien lo visualiza.
No voy a desarrollar aquí todo el proceso de este banner en particular, ya que lo componen elementos muy sencillo fáciles de reproducir.
Utilización de guías en Illustrator
Para colocar las guías hay que activar las reglas presionando "ctrl+R" en Windows o "cmd+R" en Mac.
Presionando sobre las reglas con el ratón podemos arrastrar tanto guías verticales como horizontales, para colocarlas en los límites del borde del documento.
De esta forma tendremos visibles los límites que tendrá el banner en Illustrator y tener constancia de los elementos que quedan dentro y fuera del resultado final.
Utilización del panel de capas de Ilustrator
Para mostrar el panel de capas hay que presionar la tecla "F7" o activarlo desde el menú superior "Ventana - Capas".
Según vayamos añadiendo elementos, estos deben ir colocándose en capas independientes a los que podemos asignar un nombre para poderlos identificar rápidamente.
Nos ayudará a mostrar y ocultar elementos en determinados momentos, bloquearlos para evitar cambios accidentales o cambiarlos de orden y posición respecto al resto de elementos del diseño.
En la parte inferior del panel tenemos los iconos que nos permiten añadir o eliminar las capas.
Para mover un elemento a una capa podemos hacerlo de dos formas:
- Seleccionamos el elemento que queremos mover y lo cortamos con "ctrl+X" en Windows o "cmd+X" en Mac. Creamos la nueva capa, la seleccionamos y presionamos "mayúsculas+ctrl+V" en Windows o "mayúsculas+cmd+V" en Mac, para que se coloque en la misma posición en la que se encontraba.
- Creamos una nueva capa vacía, seleccionamos el elemento, y en el panel de la capas arrastramos con el ratón el indicador de color que aparece en la capa origen hasta la capa destino.
Exportar el banner para publicarlo
Aunque existen varias formas de obtener el archivo, voy a centrarme en la última aportación que ha añadido Adobe Illustrator para exportar archivos para pantallas.
Desde el menú principal accedemos a "Archivo - Exportar - Exportar para pantallas", o utilizamos los atajos de teclado "ctrl+alt+E" en Windows o "cmd+función+E" en Mac.
En la ventana que aparece marcamos las opciones siguientes:
- Seleccionamos la opción "Todo" para que sólo incorpore los elementos que hay dentro de los límites del documento.
- Elegimos la carpeta destino donde se guardará el banner en nuestro ordenador.
- En el tipo de formato seleccionamos "PNG", que comprime el archivo mejor, consiguiendo un tamaño de archivo menor y escasa pérdida de calidad. Podemos seleccionar el formato "JPG" si estamos más interesados en él, pero nunca "SVG" o "PDF", los cuales no tienen plena compatibilidad con los navegadores.
- Para terminar picamos en "Exportar mesas de trabajo"
El resultado es el archivo terminado para poder insertarlo en el lugar que corresponda.
Aplicar movimiento al Banner con Illustrator
El movimiento o efecto que podemos aplicar, sólo puede realizarse a un objeto del banner, ya que el proceso que utiliza Illustrator es un sistema fluido que ocultaría la capa del primer elemento para poder mostrar el segundo que tuviera movimiento.
Para aplicar movimiento tenemos que crear una fusión entre varios elementos.
Para la demostración voy a añadir una línea blanca en la mitad del banner que aparecerá y desaparecerá.
Crear los elementos a fusionar
En esta ocasión utilizaré el mismo elemento copiado tres veces pero con diferentes propiedades, los elementos de los extremos tendrán una opacidad del 0% y en el elemento central aplicaré una opacidad del 100%.
Estos tres elementos estarán en una nueva capa que luego animaremos a la hora de exportar el archivo.
Ahora elegimos la herramienta fusión y vamos picando de izquierda a derecha en cada una de las líneas, creando un proceso de fusión entre ellas.
Para controlar el número de pasos que habrá en la fusión, podemos abrir el panel "Objeto - Fusión - Opciones de fusión" y cambiar el número de pasos que vienen por defecto. Así conseguiremos una mejor transición.
Sólo queda exportar el archivo como "Flash (swf)" y comprobar el resultado.
La exportación se realiza desde el menú "Archivo - Exportar - Exportar como", y en la ventana de configuración del archivo tenemos que seleccionar lo siguiente:
1. Apartado "Básico": Elegir la opción de "Capas AI a fotogramas SWF".
2. Apartado "Avanzado": Aquí lo más importante es marcar la opción "Animar funciones (En secuencia)" y marcar todas las capas estáticas para que se muestren a la vez que la capa de movimiento.
Para poder visualizar el archivo antes de exportarlo, podemos picar en el icono del globo terráqueo para que se ejecute una previsualización en el navegador.
Por qué no deberíamos hacer banners en movimiento con Illustrator
Este tipo de banners sólo se pueden mostrar en pantallas de escritorio, y si tienen activado el complemento adecuado, ya que como dije al principio, no será posible reproducirlos en los móviles o tablets.
Flash tubo su momento de gloria hace unos años, pero las nuevas tecnologías lo han dejado obsoleto, pudiendo hacer lo mismo y con mayor seguridad que la que ofrece flash.
Está prevista la eliminación de contenido flash en internet para el año 2020, por lo que no tiene ningún sentido seguir utilizando esta tecnología.
Los efectos que podemos aplicar son muy limitados y no se pueden usar más de uno a la vez, teniendo que preocuparnos si el resto de capas se verán o no.
Siento deciros que este formato no es compatible con WordPress, y que para insertarlo necesitamos añadir un código adicional o algún plugin que permita la reproducción de Flash.
La solución pasaría por exportar el archivo resultante a un formato compatible, pero es muy probable que surjan errores durante la transformación y no consigamos el resultado deseado.
Mi consejo es que utilicéis Illustrator para hacer banners atractivos y llamativos, pero olvidaros de las animaciones.
0 comentarios