> Manuales > Curso práctico de diseño web, parte II

Programas esenciales para diseño gráfico, descritos y enumerados en grandes grupos: Pintura o retoque, Programas de ilustración, creación de animaciones vectoriales.

Una vez digitalizadas las imágenes que necesitamos para nuestra composición gráfica (folleto, cartel, poster, tarjeta, página web, etc.), generalmente se hace preciso un tratamiento de retoque para configurarlas de acuerdo a nuestras necesidades de presentación (resolución, número de colores, dimensiones, peso del fichero, etc.) y darles el aspecto final deseado.

La clave del tratamiento de las imágenes digitales son los programas gráficos, que podemos dividir en tres categorías principales: programas de retoque fotográfico, programas de ilustración vectorial y programas de creación de animaciones.


Los programas gráficos son herramientas fundamentales para el diseñador, interviniendo en la mayor parte de las fases de creación gráfica, desde el escaneado de un documento o la creación directa de un nuevo gráfico hasta el almacenamiento de la imagen digital resultante en el formato gráfico más adecuado.

También nos van a permitir retocar imágenes ya existente, configurar sus propiedades, aplicarles filtros y efectos, incluirles contenidos textuales e incluso crear con ellas vistosas animaciones interactivas.


Existen en el mercado multitud de aplicaciones gráficas de todos los tipos y precios, aunque hay algunas de ellas que se han ganado a pulso su fama, como Adobe Photoshop y Adobe Ilustrator, Macromedia Flash y Macromedia Freehan, Corel Draw, Paint Shop Pro, etc.

Un factor importante a la hora de decidirse por un juego de programas gráficos concretos (generalmente uno de retoque y uno de ilustración) es conveniente sopesar a fondo la relación precio/calidad, ya que no siempre lo más caro es lo mejor, existiendo programas como Paint Shop Pro que son bastante económicos, resultan muy útiles y son muy fáciles de aprender y manejar.

Programas de pintura o retoque

Los programas de pintura o retoque, también denominados Paint, trabajan normalmente con imágenes de mapa de bits, permitiendo el cambio de resolución de las mismas, su redimensionamiento, la aplicación de filtros y efectos especiales y, los más potentes, el trabajo con capas y máscaras y la inclusión de textos y objetos vectoriales (aunque una vez definidos suelen convertirlos a mapa de bits).


Están especialmente indicados para el trabajo con fotografías y capturas mediante escáner o cámara digital, así como para la creación directa de imágenes de mapa de bits. También permiten, en mayor o menor grado, la optimización de imágenes para la web y la exportación a diferentes formatos de mapa de bits.

Entre los programas de retoque existentes en el mercado podemos citar:

Adobe Photoshop:

Número uno, tanto por sus amplio uso como por sus características técnicas, permite el uso de capas, máscaras, transparencias, contornos, efectos especiales, filtros, etc. Su principal inconveniente es el precio, bastante elevado.

Paint Shop Pro:

Una buena alternativa de la caja Jasc Software, ofreciendo funcionalidades avanzadas , filtros y manejo de capas a un precio mucho más asequible. Ideal para trabajos rápidos.

Paint de Windows:

Viene instalado por defecto con los sistemas operativos Windows, por lo que su principal ventaja es que no nos va a costar dinero. Resulta útil para gráficos simples, permitiendo la inclusión de textos en los mismos.

Picture Publisher:

otra buena herramienta para el diseñador, de la casa Micrografx, con asistentes interactivos y tutoriales en línea, exportación e importación de archivos en diferentes formatos gráficos y diversos efectos y macros.

Corel PhotoPaint:

Buena y económica alternativa de la casa Corel, que ofrece las herramientas habituales de este tipo de programas.

La interfaz gráfica es similar en todos ellos, y está formada por una superficie rectangular, denominada lienzo, en la que se trabaja con la imagen, una barra superior de menús, similar a la de la mayoría de aplicaciones (menú Archivo, menú Edición, menú Herramientas, etc., y una serie de paletas de herramientas, flotantes o situadas en un lateral.


La paleta de herramienta principal incluye generalmente:




Las capas son una especie de láminas transparentes sobre las que se pueden dibujar cualquier tipo de elementos, de tal forma que se pueden colocar sucesivas capas unas encima de las otras visualizándose las partes dibujadas de cada una de ellas. Es algo semejante a las hojas de acetato superpuestas utilizadas en la producción clásica de dibujos animados.

La paleta de control de las capas muestra las capas existentes, permite cambiar su orden, añadir o eliminar capas, asignar el nombre que se quiera a cada capa, decidir si son o no visibles (símbolo del ojo), imprimibles, editables (símbolo del lápiz o pincel) o transparentes (en un grado configurable).


Debe quedar claro que las capas son una forma interna de trabajar del programa de retoque, ya que al exportar la imagen a un formato útil para el diseño el resultado es una imagen normal de mapa de bits, con todos sus elementos situados en una sola capa.

Los canales separan los diferentes valores cromáticos de la imagen. Por ejemplo, en modo CMYK hay cuatro canales, para los colores básicos sustractivos cián, magenta, amarillo y negro.


Cada canal se puede modificar por separado, se pueden crear canales artificiales que preserven una parte de la imagen de cualquier modificación de los colores, y se puede procesar el color por partes. Este procedimiento es muy útil para colorear ilustraciones de todo tipo.

Las máscaras o reservas realizan una selección de parte de la imagen que hace que sólo se pueda modificar ésta mientras que el resto queda protegido.


Photoshop por ejemplo tiene una excelente herramienta para ello, llamada máscara rápida, que esencialmente convierte al momento el pincel o cualquier otra herramienta en un aplicador de máscara. Al acabar, y pasar al modo normal, todo lo que hayamos seleccionado o pintado se convierte en un área seleccionada. Este sistema permite efectos especiales y retoques avanzados.


Los programas de retoque son muy útiles, aunque presentan una serie de limitaciones nacidas de su propia naturaleza de trabajo con mapas de bits. En primer lugar, la resolución de la imagen es fija, por lo que pierde calidad al modificarla (cambiando su tamaño). Cualquier modificación que apliquemos a una zona de la imagen puede afectar a los píxeles vecinos.

Programas de ilustración

Los programas de dibujo o ilustración han sido diseñados básicamente para la creación de nuevas imágenes, disponiendo de herramientas específicas para la creación de imágenes desde cero.


Trabajan de forma nativa con objetos vectoriales, generalmente formados por curvas de Bézier, aunque permiten la inclusión de imágenes de mapa de bits, como fotografías y texturas. Los objetos que forman el dibujo pueden ordenarse unos respecto de otros, agruparse o mantenerse independientes.


Entre los programas de dibujo vectorial existentes cabe destacar los siguientes:

Adobe Ilustrator:

Uno de los programas más utilizados por los diseñadores profesionales, que ofrece funcionalidades como trabajo con capas, pinceles, motivos, símbolos, operaciones diversas con objetos vectoriales (ordenación, corte, intersección, extrusión, agrupamiento, combinación, etc.) y exportación a los formatos PDF y SWF (Flash). Además, su interfaz gráfica es similar a la de Photoshop, programa al que complementa a la perfección. Su principal inconveniente es el mismo que Photoshop: su elevado precio.

Corel Draw:

Buen programa de gráficos vectoriales de la casa Corel, funcional y económico, que además de ofrecer las funcionalidades habituales en este tipo de aplicaciones viene con multitud de clipart (dibujos vectoriales) listos para su uso.

Macromedia Freehand:

Una de las alternativas más importantes a Ilustrator, con la ventaja adicional de trabajar perfectamente con Macromedia Flash.

Al igual que ocurre con las aplicaciones de retoque, los diferentes programas de ilustración ofrecen al usuario un conjunto de herramientas de dibujo similares, entre las que cabe destacar por su utilidad las siguientes:

Herramientas de selección:

Permiten seleccionar uno o más objetos vectoriales. Una variación son las herramientas de selección directa, que permiten seleccionar nodos específicos de un objeto.

Plumas:

Encargadas de crear nuevos nodos y modificar y eliminar los ya existentes.

Herramienta Texto:

Permite crear textos editables y escalables, que luego pueden ser convertidos en trazos, aunque entonces pierden su cualidad textual pasando a ser vectores.

Herramientas de dibujo geométrico:

Permiten dibujar figuras vectoriales de formas diversas, como cuadrados, rectángulos, círculos, elipses, estrellas, etc, todas ellas de carácter vectorial.

Lápices y pinceles:

Dibujan trazos lineales simples y complejos, definidos por vectores, que imitan incluso diferentes motivos predefinidos o creados por el usuario.

Paletas de color y degradados:

Definen los colores utilizados en cada objeto, tanto en su borde como en su relleno, permitiendo además crear diferentes tipos de degradados y mallas de degradado. Suelen admitir diferentes sistemas de color (Escala de grises, RGB, CMYK, HSB, Pantone, etc.).

Herramientas de manejo de objetos:

Permiten agrupar y desagrupar diferentes objetos del dibujo, fusionarlos, combinarlos, recortarlos, ordenarlos, alinearlos, etc.

Herramienta transparencia:

Ofrece la posibilidad de definir el grado de transparencia de cada objeto del dibujo, que puede oscilar entre un valor 0% (objeto opaco) y 100% (objeto totalmente transparente).

Capas:

Funcionalidad heredada de las aplicaciones de retoque, las capas permiten definir diferentes niveles de dibujo que se superponen, similares a papeles transparentes apilados, de tal forma que el usuario puede colocar objetos en cada uno de ellos, cambiar su posición relativa en el apilamiento, mostrarlos u ocultarlos, bloquearlos para que no se puedan modificar, agruparlos, etc.


Los gráficos obtenidos con los programas vectoriales de ilustración difícilmente pueden ser tan realistas como los mapas de bits (resultan demasiado perfectos, muy geométricos), pero pueden escalarse a cualquier tamaño sin perder calidad, resultando idóneos para creación gráfica de ilustraciones lineales y estilizadas, esquemas, texto, dibujo técnico, logotipos, iconos, etc.

Una de las principales aplicaciones de este tipo de programas es el diseño interfaces gráficas de usuario (IGU). En el caso de una interfaz web, por ejemplo, podemos ir construyendo cada uno de los elementos que la forman (logotipo, sistemas de navegación, iconos, contenidos textuales, etc.) y posicionándolos en el espacio de trabajo de diferentes formas, hasta encontrar aquella más equilibrada y funcional.


Una gran ventaja de diseñar con programas vectoriales de ilustración es que cambios posteriores de colores, tamaños y posicionamientos son fáciles de realizar.

Programas de creación de animaciones vectoriales

El tercer grupo de aplicaciones gráficas son aquellas destinadas fundamentalmente a crear animaciones de gráficos vectoriales, dentro del cual destaca con todo su esplendor Macromedia Flash (actualmente en su versión MX), completa aplicación que permite no sólo crear gráficos vectoriales avanzados, trabajar con capas, aplicar transparencias, implementar botones interactivos, definir símbolos, etc.

Una de las funcionalidades más avanzadas de Flash son los frames, especie de cuadros independientes, al estilo de los fotogramas de las películas de cine clásicas.


Cada frame es un contenedor de dibujo independiente en el que se pueden situar objetos, en una o varias capas. Posteriormente los frames son visualizados en sucesión, pudiendo ser mostrado cada frame un intervalo de tiempo determinado, con lo que se consigue crear complejas animaciones.


Las herramientas que ofrece Flash son las comunes de los programas de dibujo vectorial, a las que se que añaden las específicas para el manejo de frames. Entre ellas destaca la denominada línea de tiempo, en la que se visualizan y manejan los frames existentes en la película, de una forma similar a la herramienta del mismo nombre de las aplicaciones de edición de vídeo.


En las animaciones creadas con Flash es posible incluir imágenes de mapa de bits, sonidos y vídeos. También soporta conectividad persistente con datos XML, lo que le permite mostrar información en tiempo real.


La interactividad de la película se complementa con un lenguaje de script propio, ActionScript, similar a JavaScript pero orientado al manejo de frames y objetos propios de Flash. Mediante ActionScript se puede iniciar o detener la animación, saltar a un frame determinado, responder con acciones complejas a los eventos producidos por acción del usuario, crear contadores, etc.


Tanto ha sido el éxito de Flash que otras empresas han lanzado programas que lo imitan, aunque ninguno de ellos llega al nivel de la aplicación de Macromedia. Entre ellos podemos destacar a Swish, que permite la creación de animaciones de texto en formato SWF.

Luciano Moreno

Consultor, diseñador y desarrollador web en ParaRedeBJS. Especialista en usabill...

Manual