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

Introducción a los elementos gráficos que podemos encontrar en los diseños en general y el diseño web en particular: ilustraciones, textos, logotipos

Los elementos gráficos son una parte fundamental del diseño en todas sus modalidades, introduciendo en las composiciones información visual que complementa en gran medida el mensaje que se desea transmitir, y que a veces es tan importante en el diseño como los contenidos textuales del mismo.


Libros, folletos, carteles, revistas, tarjetas y páginas web incluyen elementos gráficos en mayor o menor medida, debiendo el diseñador conocer los diferentes objetos gráficos que puede utilizar en cada trabajo, su significado y sus utilidades, pues cada uno de ellos está orientado a unas tareas concretas.

Los elementos gráficos se usaron inicialmente poco en la web, sobre todo debido al peso de los ficheros gráficos necesarios, que con las conexiones a Internet que disponían los usuarios medios hacía que las páginas tardaran demasiado en descargarse desde el servidor.
Con el aumento de los anchos de banda y la aparición de avanzados algoritmos de compresión de las imágenes, los gráficos fueron introduciéndose cada vez más en las páginas web, siendo raro en la actualidad encontrar una que no los use en mayor o menor medida.


Existen diferentes objetos gráficos que podemos usar en nuestros diseños, entre los que podemos citar logotipos, banners, iconos, bullets, fotografías, ilustraciones, etc. Cada uno de ellos posee unas características de diseño y unas capacidades de comunicación propias, jugando un papel diferente en la composición.
Ya conocemos los tipos de ficheros gráficos, su naturaleza y sus propiedades. Vamos ahora a estudiar los diferentes elementos gráficos existentes y cómo podemos utilizarlos de forma adecuada en nuestros trabajos.

Ilustraciones

La ilustración es uno de los recursos más usados en diseño clásico, pues al no estar sometidas ferreamente a un modelo natural, permiten al ilustrador dibujar libremente el motivo que más se adapte a la composición.

Si se eligen de forma adecuada al sentido del diseño, las ilustraciones son bellas, adecuadas a cada contexto y muy explícitas, siendo pr tanto una de las misiones del diseñador encontrar un ilustrador cuyo estilo se adapte al del proyecto que tiene entre manos.


Hay muchas técnicas disponibles para crear bellas ilustraciones para imprenta a un solo color (grabado, linóleo, xilografía, rasqueta, siluetas, dibujos a la pluma y a trazos, etc.). En estas ilustraciones, con aspecto de grabado en madera o xilografía, hay una intrigante ambigüedad entre la técnica clásica del grabado en madera y el estilo ultramoderno de la ilustración.

La ilustración a todo color comprende una inmensa gama de estilos, desde al realismo a lo extraño y fantástico. Por lo tanto, le da al diseñador amplias posibilidades de presentar imágenes gráficas en formas frescas y originales. El color puede usarse en forma lisa, opaca, semitransparente o en degradados, pudiendo conseguirse con él un enlace visual entre la ilustración y otros elementos de la composición. También puede ser usado para recrear estilos de períodos concretos.


Las ilustraciones en blanco y negro se usan habitualmente en periódicos y revistas a tinta negra, mientas que las de color se usan para apoyar todo tipo de material editorial, carteles, folletos, etc, pudiendo utilizarse una ilustración de forma que el conjunto del diseño gire a su alrededor.

La ilustración que se realiza para cualquier diseño debe estar relacionada con los elementos de refuerzo del diseño y quedar reflejada en los mismos. El estilo y la técnica pueden usarse para hacerse eco de un período o imagen particulares, de una marca o de un estilo concreto, por lo que en estos casos la ilustración debe ser concebida con ese objetivo en mente.

A la hora de realizar una ilustración destinada a trabajos digitales, como presentaciones, interfaces de aplicaciones o páginas web, podemos optar bien por dibujarlas a mano, escanearlas y retocarlas si es preciso, bien por empezar el dibujo directamente en un programa gráfico adecuado.


Sea como sea, los programas gráficos son de gran ayuda a la hora de trabajar con ilustraciones, ya que en ellos se realizan fácilmente operaciones que en dibujo o pintura son muy laboriosas (tareas repetitivas, copiar una imagen entera o parte de ella, dibujar trazados geométricos prefectos, aplicar filtros o efectos, etc.).
Para crear una ilustración podemos, en principio, usar cualquier programa gráfico, aunque dependiendo del tipo de ilustración buscada habrá unos más adecuados que otros.
Así, si en nuestra ilustración van a predominar los trazos limpios y geométricos resultan especialmente indicados los programas de gráficos vectoriales, como Adobe Ilustrator o Macromedia Freehand. En cambio, si lo que buscamos es una ilustración que parezca más natural, con trazos difuminados, juegos de colores o luces, degradados o tonos concretos, serán más indicados programas de retoque, como Adobe Photoshop o Paint Shop Pro.


Una buena alternativa es usar una combinación de ambos tipos, creando los objetos geométricos y las líneas puras con un programa vectorial y completando luego la ilustración en un programa de retoque.
Si no deseamos crear nosotros mismos las ilustraciones, siempre podemos encargarlas expresamente a un dibujante profesional o recurrir a Internet, donde existen sitios web especializados en este tipo de componentes gráficos. En este caso deberemos tener especial cuidado con los derechos de autor, sobre todo si decidimos usar ilustraciones capturadas de sitios dedicados a su venta, siendo conveniente asegurarse siempre de si el material que vamos a usar es de pago (en cuyo caso habrá que comprarlo) o de libre distribución y uso.
En las páginas web también pueden aportar estética e información, aunque este medio se decanta más por las figuras simples, como iconos o botones, y por las fotografías en caso de necesitar material gráfico más complejo.


No obstante, en ciertos casos pueden ser importantes elementos gráficos que complementan la información que aporta la página, como es el caso de gráficos financieros, gráficos estadísticos, mapas y planos, etc.

Textos como imágenes

La inclusión de textos en una composición se ve limitada muchas veces por las familias tipográficas disponibles, pues si bien es cierto que existen multitud de ellas para impresión, hay que tener en cuenta que para muchos trabajos podemos precisar de unos estilos de textos específicos que no se ven reflejados en ninguna de las fuentes existentes.
Esta limitación se hace más evidente en las composiciones destinadas a medios digitales, y mucho más en los textos destinados a la web, donde las familias tipográficas que se pueden usar son muy limitadas. Además, y como ya vimos en el tema sobre Tipografía, uno de los principales problemas que encontramos a la hora de incluir textos en trabajos destinados a pantallas de ordenador es al aumentar su tamaño se producen efectos de escalado indeseados, como el efecto de dientes de sierra, que pueden estropear el diseño final.


Una forma de solucionar estos problemas es introducir esos contenidos textuales como imágenes, no como textos normales, ya que con ello podremos beneficiarnos de todas las ventajas que ofrecen los gráficos.


A veces en una composición deseamos introducir una letra capitular (también llamada capital), que da un toque especial al inicio de un capítulo, párrafo o bloque de contenidos textuales. La mayoría de programas gráficos de ilustración permiten crear automáticamente este tipo de letras, que tienen normalmente una altura equivalente a tres líneas de texto, así como opciones de colocación de las mismas respecto al texto circundante.


Una vez creada con el color y características necesarias, basta con salvarla aisladamente como un gráfico e incluirla luego en la composición.
Si necesitamos un estilo especial para una palabra o frase, podemos utilizar un programa de ilustración vectorial y escribirlo en una familia disponible en el mismo que se parezca relativamente al estilo que buscamos, y luego pasar el texto a vectores (generalmente mediante la herramienta "Convertir a trazos"), con lo que podremos entonces modificar los nodos, trazos y curvas Bézier que forman las letras hasta conseguir el resultado deseado.
De esta forma se consiguen preciosas ilustraciones que utilizan los caracteres como elemento gráfico, mostrando un mensaje textual mediante letras con formas variadas (hojas, herramientas, personas, animales, etc.).


También podemos usar los gráficos como textos para solventar las fuertes limitaciones que presenta la web en lo que respecta a familias tipográficas, con tan solo escribir el texto en un programa gráfico y guardarlo como gráfico en formato de mapa de bits, generalmente GIF o PNG. Con ello tendremos disponibles para nuestras páginas la gran cantidad de fuentes que incorporan los programas gráficos, así como un elevado número de ellas descargables desde Internet, sin necesidad de que el usuario las tenga instaladas.
En caso de precisar textos de gran tamaño para ser visualizados en pantalla, podemos escribirlos en un programa vectorial, aplicarles un efecto de rastrillado, suavizado o antialiasing, y guardarlos como una imagen en formato de mapa de bits, con lo que se suavizarán los bordes de las letras visualizándose de forma correcta. Esta técnica, muy usada en las páginas web, es realizada muchas veces de forma automática con tan solo salvar la imagen en formato de mapa de bits.


Presentando los textos como imágenes también podemos conseguir vistosos efectos imposibles de aplicar a los textos simples, como degradados, filtros, transparencias, etc.
El principal inconveniente de usar gráficos como textos en las páginas web es que el peso en Kb. de la página aumentará proporcionalmente al número de gráficos usados, al tamaño de los mismos, a su número de colores y a su complejidad. Además, puede haber usuarios que tengan desactivada la carga de imágenes, con lo que la información contenida en ellas quedará inaccesible.
Por estos motivos debemos ser cuidadosos a la hora de aplicar esta técnica, introduciendo pocos gráficos y procurando que la información que contienen no sea esencial, y en los que usemos introducir siempre la etiqueta ALT con una descripción de su contenido.

Logotipos

Un logotipo es un distintivo o emblema formado por letras, abreviaturas, objetos gráficos, etc., peculiar de una empresa, marca o producto, a los que representa e identifica de forma unívoca.


Los logotipos, también conocidos como logos, son uno de los trabajos más importantes y difíciles que puede realizar un diseñador gráfico, y representan un ejemplo perfecto de la esencia misma del diseño, pues en un objeto único se concentran todas las consideraciones de comunicación, estilo y técnica que se manejan para proyectos de mayor envergadura.
Para una empresa, producto o institución, el logotipo es una pieza clave de su identidad pública, ya que la representa en todos y cada uno de los elementos comunicativos de la misma (sobres, tarjetas de los empleados, publicaciones, publicidad, etc.). Es por lo tanto muy importante que el logotipo simbolice lo más acertadamente la esencia e identidad propia de la empresa o producto.


Los logotipos no son elementos de diseño estáticos, fijos, sino que evolucionan con el tiempo para adaptarse a las tendencias sociales, comerciales, culturales y técnicas de cada época concreta. Estos cambios deben ser siempre muy sutiles, modificando apenas pequeños elementos del diseño del logotipo (pequeños cambios en las formas o en la tipografía), ya que la personalidad propia del mismo debe mantenerse siempre.

Un logotipo debe reunir una serie de características generales para ser funcional y efectivo. Entre ellas podemos citar las siguientes:
La forma habitual de crear un nuevo logotipo es partir de algún elemento que caracteriza la empresa, marca o producto que va a representar. En el caso de empresas personales es común partir de la firma del propietario, de su nombre o del nombre de la empresa, y en el caso de productos, del nombre o marca del mismo.


Este elemento básico se refuerza luego semánticamente con algún elemento de diseño, bien sea mediante la utilización de tipografía específica (preexistente o creada expresamente para el logotipo), bien usando algún gráfico que represente o simbolice la empresa, marca o producto, directamente o por analogía.
El diseño de logotipos requiere unas técnicas de diseño especiales, que suponen un compendio del manejo de formas geométricas más o menos simples y de formas más ingeniosas. Junto con esto, la sobriedad en el uso del color, normalmente en forma de tintas planas, y el uso intensivo de modificaciones de la tipografía.


Como procedimiento de diseño, en primer lugar es necesario conocer la imagen que se quiere proyectar con el logotipo, la forma en que se verá por parte del público y la relación que debe tener con otros productos o empresas.
Es conveniente luego acudir a Internet y dedicarnos a observar logotipos de otras empresas o productos relacionados con el que vamos a diseñar, analizando detalladamente cómo están realizados y qué representan.
La siguiente fase es la del trabajo en forma de bocetos. Al principio no se ha de cerrar ninguna posibilidad, dibujando formas con total desinhibición, asociando imágenes y letras de las formas más insospechadas. Con este proceso obtendremos un conjunto de posibles logotipos, entre los que tendremos que elegir cuidadosamente dos o tres, que presentaremos a nuestro cliente como alternativas, pues al fin y al cabo es el que paga y el que tiene en la mayoría de los casos la última palabra.


De esta presentación al cliente saldrá la forma genérica del futuro logotipo, que seguramente variará en diferentes aspectos de los propuestos, pero que tendrá suficientes elementos definidos como para afrontar el diseño final del mismo.
El último paso será dibujar el logotipo en un programa de ilustración, en formato vectorial, lo que nos permitirá realizar posteriormente cualquier modificación necesaria y dar al logotipo el tamaño o tamaños necesarios.


Si tenemos que usar en un trabajo un logotipo ya existente, será la empresa cliente la que nos lo tenga que facilitar, idealmente en formato vectorial, ya que así podremos redimensionarlo al tamaño necesario. En caso de que nos lo den en formato de mapa de bits y el tamaño no coincida con el que necesitamos, habrá que realizar un calcado del mismo en un programa de ilustración (básicamente, con la herramienta pluma), para pasarlo a formato vectorial, y luego redimensionarlo.
Si necesitáis el logotipo vectorial de alguna empresa o marca existentes, podéis acudir a http://www.logotypes.ru/, sitio web desde el que se pueden descargar en formato AI, con alta calidad y de forma gratuita.

Luciano Moreno

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

Manual