¿Te gustaría aprender a construirlos?
Nuestros botones luminosos han sido creados exclusivamente para ejecutar acciones, sobre todo para llamar a los enlaces en nuestras webs personales. Esto ya implica por sí mismo que deben tener la máxima calidad gráfica en el mínimo espacio de disco posible (para que la descarga de la página no se demore demasiado) , circunstancias que suelen estar reñidas habitualmente, ya que lo normal es tener que sacrificar la una por la otra, según situaciones.
Sin embargo en ocasiones es posible compatibilizarlas al máximo si se dispone de las herramientas necesarias y se experimenta con los distintos formatos de compresión de imágenes. Por otro lado, los degradados tienen el enorme inconveniente de consumir más espacio al manejar un mayor número de colores.
¿Cómo resolver todos estos problemas y conseguir efectos vistosos y de calidad para atraer la atención de los visitantes de nuestras páginas? Ya lo hemos mencionado antes : disponer de las aplicaciones que nos permitan las posibilidades necesarias, cuantas más, mejor. En nuestro caso hemos utilizado las siguientes herramientas gráficas :
-Un editor de texturas para el fondo del botón que permita redimensionarlas al tamaño necesario sin excesivos esfuerzos, modificar las capas necesarias y los efectos de degradado, iluminación, contraste y color (aunque estos últimos podrán cambiarse más adelante). COREL TEXTURE 9 ha sido el encargado de esto.
-Un editor fotográfico que trabaje con objetos o capas y que permita insertarlos a distintos niveles de profundidad, en distintos planos, y que se encargará de añadir el texto necesario, el relieve, los sombreados y los efectos de iluminación correspondientes, además de permitir la conversión al mínimo número de colores (que se llaman estilos en Corel) para que pueda ser soportado por los estándares de Internet, como es el formato GIF. De esta tarea y de otras más (crear animaciones fotograma a fotograma, permitir definir una velocidad independiente para cada uno de ellos, etc) se ha encargado COREL PHOTOPAINT 9.
-Un editor GIF que permita asignar características particulares a cada fotograma sin que sea necesaria ninguna repetición, y lo más importante, que optimice los resultados, en concreto el tamaño del archivo final, sin pérdida de calidad gráfica. Nosotros, para todo ello hemos usado GIF ANIMATOR de HOTMETAL PRO.
En resumen, se trata de crear un producto de la máxima calidad posible y que ocupe el mínimo espacio en disco.
¡Manos a la obra!
PRIMER PASO : CREAR EL FONDO DE LA ANIMACIÓN
El primer paso consiste en seleccionar la textura idónea para el fondo del botón. Si ya existe en nuestro catálogo, mejor, pues el simple hecho de crearlas supone manipular una larga serie de parámetros que harían el proceso mucho más largo. Revisando el catálogo de Corel encontramos una que cumplía con todos los requisitos que necesitábamos, atractivo y calidad. Se trata de la textura LIGHTB.TEX, que se encuentra alojada en la carpeta Texture\Goodies\Wizard, y que ocupa 40´3 KB. Esta misma textura, redimensionada es exactamente la misma que hemos utilizado para el fondo de nuestras páginas, aunque parezca sorprendente.
A la izquierda la textura LIGHTB.TEX de Corel, y a la derecha la misma, redimensionada y retocada.
Una vez redimensionada con COREL TEXTURE al tamaño adecuado, 80 x 25 pixels, y retocada en contraste, debemos guardarla en el formato de mayor calidad, es decir BMP, para su posterior utilización, y con esto damos por concluído el primer paso del proceso.
SEGUNDO PASO : INSERTAR EL TEXTO
El paso siguiente consiste en elegir la palabra adecuada para la acción que va a realizar nuestro botón, el tipo de letra y el tamaño necesarios. Aquí sobran muchos comentarios porque el proceso es muy similar en todas las aplicaciones destinadas al retoque fotográfico, pues la herramienta TEXTO es prácticamente igual en todas ellas. Una vez conseguido éste habrá que dotarlo del efecto RELIEVE correspondiente, sin excederse demasiado en los parámetros usados. Más adelante someteremos al texto al efecto SOMBREADO (herramienta SOMBRA en Corel) en negro, que realzará la palabra respecto al fondo.
Añadimos el texto, le damos relieve, lo sombreamos en negro, lo centramos y lo combinamos con el fondo.
Una vez conseguido el texto con relieve y después de haberlo sombreado en negro y centrado, habrá que fijarlo sobre la textura que habíamos creado antes, y lo haremos mediante la función de Corel "Combinar todos los objetos con el fondo". En este momento ya disponemos del primer fotograma de nuestra animación, y conviene guardarlo en el disco para su uso posterior.
TERCER PASO : CREAR LA ANIMACIÓN
Nuestra animación constará sólamente de dos fotogramas, con la única diferencia entre ellos de que el segundo tendrá la mínima duración de exposición y contendrá el destello luminoso característico.
Para tenerla bastará con coger el fotograma que habíamos elaborado en el paso anterior, abrirlo con Corel y crear una película mediante la función "Crear desde documento", del menú Película. Automáticamente ese fotograma se situará como el primero de la nueva animación. Añadiremos una copia del mismo pulsando el botón correspondiente y se situará el editor sobre él para que podamos continuar con nuestro trabajo.Nos iremos a Efectos\Representar\Mancha luminosa, elegiremos el color del destello (en este caso hemos cogido el naranja), y situándolo con precisión donde más nos convenga ajustaremos su intensidad manualmente, desplazando el indicador a derecha o izquierda, o introduciendo un valor numérico en la casilla correspondiente.
Seguidamente fijaremos al mínimo la velocidad de los dos fotogramas y convertiremos nuestra animación a color de 8 bits, es decir, a 256 colores, que son suficientes para el navegador y nos permitirá guardar el trabajo en formato GIF.
El primer fotograma, el segundo y la animación completa.
CUARTO PASO : DEPURAR Y OPTIMIZAR LA ANIMACIÓN
La rapidez con que se carga una página en Internet es una de las características que más tiene en cuenta el usuario que accede por primera vez a una dirección web. Salvo raras excepciones, por ejemplo, un interés especial por una información que buscamos, muchos internautas abandonan rápidamente aquellas páginas que tardan demasiado en cargarse en su ordenador. Este es el motivo principal por el que se hace necesario, si no imprescindible, optimizar al máximo nuestras animaciones para no provocar el abandono.
El animador GIF de HOTMETAL PRO dispone de las herramientas necesarias para llevar a cabo estas tareas. Fijamos con precisión la velocidad que queremos asignar a cada uno de los dos fotogramas de nuestra animación, de manera que el primero, que muestra sólo el texto del botón, tendrá una mayor duración. Podemos fijarlo a un valor de 75 centésimas. El segundo, que contiene el destello luminoso, lo mantendremos a la mínima expresión para que "pase más rápido".
Por último optimizaremos el tamaño del archivo final acudiendo al asistente que para ello tiene nuestro animador GIF. El programa analizará automáticamente cada fotograma para determinar sus paletas de colores locales y nos sugerirá el número de colores de la optimización, que siempre podremos aumentar o disminuir a voluntad, mostrándonos también el tamaño en bits del resultado final y el porcentaje de depuración. Lo guardaremos en el disco y comprobaremos si realmente responde nuestra animación a lo que esperábamos de ella en cuanto a calidad.
Llegados a este punto ya tenemos a nuestra disposición nuestro botón luminoso personalizado, optimizado y con la máxima calidad posible. Puede parecer un proceso demasiado largo, pero Corel permite automatizar muchas de estas tareas mediante macros y guiones, así como personalizar las barras de herramientas para que la mayoría puedan realizarse con un simple clic de ratón y sin necesidad de abrir los menús. Son alternativas a tener en cuenta en las tareas repetitivas o si te decides a editar juegos completos de botones.
El mismo botón luminoso optimizado a 256, 128, 64 y 32 colores.
CRB 2000, Febrero de 2001.
CRB 2000 -ESPAÑA-
Editor : [email protected] 
Nuestras páginas deben ser visualizadas con Internet Explorer y 1024 x 768 pixels de resolución.
