miércoles, 18 de abril de 2007

Genración automática de botones

GIMP puede diseñar botones para páginas web de forma rápida, gracias a un guión. Hay dos guiones que crean su modelo de botón respectivo a partir de unos pocos parámetros, como texto, tamaño y colores.
  • Botón redondo: este guión crea un botón con forma de rectángulo con sus bordes redondeados. Al usarlo, puede sorprender que aparezcan tres imágenes en pantalla, pero no es ni más ni menos, que el mismo botón dibujado para tres estados: normal, con el ratón por encima y pulsado. Luego, en la página web se programa todo, y se crea el efecto de pulsar el botón con un javascript.
    En las opciones del guión se puede modificar los colores, tipografía, tamaño de letra, el redondeo, tamaño del bisel...Aquí se puede ver abajo el botón cuando tendría el ratón por encima, en el medio, el estado normal, y arriba, el aspecto mientras se encuentra pulsado.
  • Botón simple biselado: este guión crea un botón con aspecto 3D, con un bisel (remate en la arista) y relleno con un degradado, como se ven en la imagen.
    Estos botones tienen el ancho que de de si el texto, por lo tanto, son más adecuados para crear botones dispuestos en horizontal. El relleno (padding) es la distancia entre el borde del texto y el borde del botón. La opción pulsado permite dibujar el mismo botón, pero con apariencia de estar pulsado, esto permite crear el efecto típico de las páginas web, que cuando se pulsa en un botón, este se hunde. El efecto que se produce al pasar el ratón por encima, puede ser logrado fácilmente alterando ligéramente los colores del degradado. Antes de guardarlos, hay que aplanar la imagen, opción que aparece en el menú imagen.
Una vez con la imagen creada, llega el momento de guardarla. Yo, personalmente recomiendo guardarlos en formato PNG, que es el más adecuado en este caso. El formato JPEG mataría en exceso los colores y contornos, sin lograr a cambio una gran compresión. El procedimiento sería convertir la imagen en indexado (Imagen-->modo-->indexado), usar una paleta óptima, poner ninguno en difuminado y finalmente, guardar en formato PNG. Esto genera ficheros de tamaños muy reducidos.
También se puede probar a poner un número máximo de colores inferior a 256, pero si el número es muy bajo, puede perderse calidad, noramalmente 63 para imágenes con alguna transparencia y 64 para imágenes sin ningún área transparente, suelen ir bien. Este último detalle, es prescindible, aunque puede reducir el tamaño de fichero.

NOTA IMPORTANTE: si en tu página web vas a poner un enlace como un botón, no olvides poner un texto alternativo (etiqueta alt o bien la opción del editor HTML). Este texto alternativo, debería contener lo que pone en el botón, y es de gran ayuda a las personas que no puedan ver el botón, ya sea porque sean ciegas, porque su navegador no visualice imágenes o si símplemente, la carga del botón falló. Este último caso, es bastante frecuente.

No hay comentarios: