Un completo curso de diseño gráfico, ilustración, diseño web y tipografía.

Programas de gráficos para Web

Analizamos aquí los principales programas que se emplean para crear gráficos para la web. Para preparar imágenes sirve cualquier programa de los que comentamos en la sección de diseño gráfico: unos tienen más prestaciones, otros no tantas. Las versiones más recientes de cualquier programa de dibujo o pintura tienden a incluir módulos específicos para la creación de gráficos web. Ahora bien, cabe decir que estos últimos años se han impuesto algunas soluciones específicamente enfocadas a la preparación de imágenes para la web. Destacan Fireworks (que ya está en su quinta (mx) versión), LiveMotion (antes Imagestyler), Imageready (incluido en Photoshop 5.5.) Y aparte de estos, no es muy conocido, pero quien lo ha probado dice que es el programa definitivo: Xara: una muy potente herramienta de dibujo vectorial y preparación de imágenes para la web. Existe una versión "menor" de Xara (llamada Webster), aún más específica para el trabajo de creación de gráficos para la web. Otra solución son los programas que crean contenido Flash (Flash y Director.)

Aunque casi todos los gráficos que utilizaremos para las páginas web son en mapa de bits, las ventajas de crearlos en un programa vectorial son múltiples. Puesto que las imágenes se pueden escalar sin pérdida alguna de calidad, nunca hay problemas para cambiar las dimensiones de una imagen. Esto es muy importante, puesto que con frecuencia necesitamos un nuevo gráfico para un icono, un menú, un botón; además el texto se mantiene editable indefinidamente, con lo que puede seguir modificándose una vez aplicados determinados efectos.

Las funciones avanzadas de manejo de formas geométricas, colocación de los elementos, etc. también son una gran ayuda para crear imágenes. Así, programas como Illustrator, Freehand, Corel Draw o Xara son magníficas herramientas para la preparación y conservación de originales para la web (a partir de ellos exportaremos los gif o jpg necesarios.) La idea que hay tras programas tales como Fireworks o Livemotion es precisamente crear las imágenes en un entorno de creación vectorial, que permita tener siempre disponible un original, listo para preparar nuevas variantes sin ningún impedimento. Estos son sin duda la elección más aconsejable para los profesionales del diseño gráfico aplicado a la web, puesto que las características de los programas cubren todas las necesidades que nos encontramos a la hora de crear los elementos visuales de una página web actual, sobre todo:

  • Preparación de miniaturas de imágenes y procesado por lotes de los ficheros,
  • Creación de mapas de imagen,
  • Recorte o despiece de imágenes grandes,
  • Generación de animaciones GIF,
  • Transparencias de GIFs,
  • Optimización de color y tamaño de los ficheros gráficos.
  • Aplicación de efectos para crear imágenes interactivas, como los mouseover.
  • procesamiento por lotes de conjuntos de imágenes, por ejemplo, para crear automáticamente miniaturas de carpetas completas de imágenes.

Este es el aspecto típico de una utilidad dedicada a la creación y optimización de gráficos para la web.  En estas páginas proporcionaremos algunos consejos referentes a la forma en que se pueden llevar a cabo estar tareas, muchas de ellas rutinarias dentro de la creación de gráficos para la web.

Fireworks destaca especialmente en tareas como el recorte de imágenes grandes en partes, para facilitar su descarga y para crear efectos especiales al ensamblar de nuevo la imagen en una tabla. Simplemente, se colocan unas líneas guía (arrastrando desde las reglas) y el programa se ocupa de cortar la imagen al largo de las guías y genera una tabla que las contiene colocadas correctamente. También destaca en el resto de funciones especiales para la creación de gifs o jpgs para la web. Fireworks incorpora toda una colección de efectos que se pueden aplicar a imágenes ya elaboradas o a las que se vayan dibujando con sus muchos útiles de dibujo y pintura, tanto en modo vectorial como de bitmaps.

Fireworks ofrece un control exhaustivo sobre la producción de gráficos para la web, con la comodidad y potencia de los entornos de dibujo vectorial combinado con los efectos de un programa de pintura.

Al manejar los gráficos en forma de vector, si cambiamos las dimensiones de cada objeto, no hay merma en la calidad y se puede rehacer cualquier cambio. Otras funciones muy provechosas para su manejo profesional son la librería de objetos (un panel donde se guardan los objetos que se usan repetidamente, para arrastrar y soltar en el dibujo), la aplicación de estilos a los gráficos o el texto, y la posibilidad de buscar y cambiar todos los objetos que tienen determinadas características... El programa está muy bien integrado con otros productos de su fabricante, Macromedia. En especial con el editor de web Dreamweaver. Sin embargo, es necesario decir que el programa es muy voraz en términos de memoria, y hace falta una buena máquina para sacarle partido. Fireworks puede obtenerse en versión de evaluación; podemos descargarlo de casi cualquier servidor de ficheros, o bien de Macromedia (www.macromedia.com.) También es frecuente que aparezca en cd-roms de obsequio con revistas de informática.  Xara X (antes Corel Xara) es, en contraste con la mayoría de programas actuales, un prodigio de buen diseño, eficiencia y rapidez; aunque es increíblemente pequeño, en comparación con lo que suelen ser las aplicaciones similares -¡cabe en tres diskettes! - incorpora casi todas las funciones de los mejores programas de ilustración vectorial y diseño para la web. Sus filtros de exportación de gif i jpg son excelentes. Permite crear rápida y sencillamente animaciones y mapas de imagen. Es, sobre todo, muy rápido, y necesita muy pocos recursos. La calidad de sus formas suavizadas y rapidez en la aplicación de efectos a las imágenes, no tienen competencia ni siquiera por parte de las aplicaciones como Fireworks.

Lo lamentable de Xara, siendo tan bueno, es que es una especie de secreto bien guardado por los profesionales que disfrutan de él. ¡La mayoría ignora su existencia! Su distribuidor, Corel, lo tuvo relegado a la venta online -si bien, en compensación, ha ido incorporando a CorelDraw las mejores funciones presentes en Xara.  Finalmente, Xara Webster (que, en su versión 1, se ofrece gratis con la revista PC Plus), es una utilidad sencilla, semejante a Imagestyler, pero mucho más potente, pequeña y rápida, y que incorpora algunas de la magníficas herramientas de Xara (insuperables transparencias de cualquier tipo, animaciones fáciles...) Todos los programas de Xara, incluido Webster, y el interesante Xara 3D tienen versiones de evaluación disponible en su sitio web (xara.com.)

Los programas para crear esquemas de colores, como Color Scheme Designer son muy útiles para planear el aspecto visual de un sitio web y crear paletas de colores armónicos.

Servicios online y gráficos pre-diseñados.

Si bien lo habitual es crear los gráficos en alguna de las aplicaciones comentadas, no olvidemos que una buena parte de nuestras necesidades de imagen quedan cubiertas con las colecciones de clipart y fotografía de que se puede disponer, bien en forma de disco, bien descargándolos de la web. Estas imágenes no siempre son exactamente lo que uno anda buscando, y puede ser preciso modificarlas en mayor o menor medida. En Diseño - Ilustración tenemos un artículo dedicado a esta cuestión.

Por otra parte en la web encontramos una serie de servicios muy interesantes que nos permiten descargar elementos para nuestras páginas y diseños, o incluso crearlos a medida. Estos son algunas direcciones que merece la pena visitar: