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

Iconos y logotipos

Los iconos: ¿cuántos vemos al día, trabajando con el ordenador, navegando por la web, indicándonos las funciones de los electrodomésticos, guiándonos en un espacio público...? Estas pequeñas imágenes son muy útiles para guiarnos en todas estas situaciones. Dirigen la vista a los puntos clave.

Se trata, por tanto, de imágenes con una función de discreta atracción visual. Sin distraer, y tampoco sin aumentar apenas el tamaño de los documentos, puesto que suele tratarse de pequeñas imágenes, suponen un acento visual que nos guía.

Dónde utilizar los iconos.

Los iconos se emplean para dos cometidos principales:

  1. En la interfaz de los programas, identifican las carpetas, aplicaciones, archivos o herramientas. Son los habituales iconos del escritorio o de los programas en Windows o en Mac.
  2. Como elementos gráficos en los documentos y en las páginas web. Los iconos aquí sirven para identificar secciones, para separar párrafos, como acento gráfico o como pequeña ilustración.

Cómo crear iconos.

Puesto que como iconos hablamos de cosas muy diferentes en el caso de los iconos del propio sistema y en el caso de los elementos gráficos, debemos separar ambos casos.

Iconos para los programas.

Un icono del sistema no tiene nada de especial; habitualmente se trata de una imagen en mapa de bits, aunque esté guardada en un formato concreto. Algunas aplicaciones utilizan fuentes de símbolos (dingbats) para generar sus propios iconos de tamaño variable. Los iconos individuales suelen ser ficheros con una extensión .ico, pero pueden estar contenidos dentro de ficheros .dll o .exe, a veces en gran cantidad . Por ejemplo, cuando queremos cambiar el icono que representa un documento o programa, y vemos que existen varios para elegir, se trata de un fichero de este tipo que los contiene en forma de biblioteca de iconos. (para cambiar el icono de un programa o un documento, basta hacer clic sobre su icono con el botón derecho, elegir Propiedades, y en el cuadro que surge vamos a Acceso Directo | Cambiar icono...)

La forma más fácil de crear un icono es crear la imagen en un programa cualquiera de pintura, tal como el propio Paint, y después recortar un cuadrado de 16 x 16 píxels (iconos pequeños) o de 32 x 32 (iconos grandes.) Si guardamos el fichero con la extensión .ICO ya tendremos un icono listo.

De todos modos, existen aplicaciones especiales para la creación de iconos para el sistema; veamos algunas de éstas.

MicroAngelo, o Icon Collector son conocidos editores shareware.

Icon Snatcher es un interesante programa --freeware-- capaz de extraer iconos de unas colecciones con la extensión .icl, además de los depósitos habituales de iconos (los ficheros .exe o .dll.) Puede guardar los iconos como bmp, ico, o como GIF, lo que lo hace muy útil para la creación de iconos para las páginas web. Incluso puede generar automáticamente una página html con los iconos seleccionados. Muy recomendado.

Los sistemas Mac utilizan iconos más vistosos; y además existe mucha más variedad de iconos disponibles, más sitios en la web donde descargar colecciones, etc. Sin embargo, su formato es diferente del de los iconos para PC. La solución está en una aplicación llamada MacIco, capaz de convertir los iconos de Mac en su equivalente para PC. Puede obtenerse de http://www.xemico.com/software.html.

Iconos para los favoritos.

Las nuevas versiones de Internet Explorer (5 o posterior) han supuesto una nueva aplicación para los iconos. Los favoritos pueden ser identificados con un icono que podemos elegir libremente. Pero eso no es todo. Si colocamos en el servidor un icono (nombre-icono.ico) éste aparecerá ya en los navegadores de todos los visitantes en la barra de dirección y en la lista de favoritos, en todas las páginas que incluyan dentro de las etiquetas de <head> lo siguiente: <LINK REL="SHORTCUT ICON" HREF="http://www.mipagina.com/nombre-icono.ico">

El icono puede crearse con cualquier aplicación, e incluso hay servicios online para crearlos, como en http://www.favicon.com/applet.html; lo aconsejable es crearlo pequeño --16 colores, 16 x 16 píxels-- y dejar que el navegador o el sistema lo amplíe si es preciso.

Otra variante del uso de los iconos, que no trataremos aquí, es la creación de iconos animados para el sistema: punteros de ratón, relojes...

Iconos como ilustraciones.

Una segunda acepción del término icono está en las pequeñas imágenes que acompañan los documentos y páginas web. Normalmente su función es señalizar, aunque también pueden funcionar como simple ilustración. Podemos utilizar imágenes monocromas o bien optar por iconos a todo color, en función de las necesidades del trabajo.

Estos iconos son normalmente imágenes corrientes. Por ejemplo, para una página web, se tratará de un fichero GIF. Dadas las pequeñas dimensiones de los iconos, incluso un tratamiento fotogràfico no supondrá un tamaño excesivo.

Para crear estas imágenes los programas de dibujo vectorial son perfectos: podemos trabajar a la escala que deseemos, o cambiar el tamaño de las imágenes sin pérdida alguna de calidad, y manipular libremente las formas. Al tener todo listo, exportamos la imagen en el formato que debamos.

La fuente de imágenes más versátil que hay para los iconos --y para tantos otros trabajos de diseño gráfico-- son los Dingbats o Tipografías de ilustraciones. Disponibles en cualquier programa, son una fuente variada y abundante de imágenes para crear los iconos. Una combinación perfecta: un programa de ilustración vectorial y los digbats. Nuestra aportación: las series de Deskspace, Fazzes y Antypepatics, disponibles gratis en nuestras páginas de tipografía.

En las barras de navegación de las páginas web, los pequeños iconos encuentran una aplicación muy importante. Pequeños gráficos, de 20 a 30 píxels de lado o incluso menos, pueden cumplir perfectamente esta misión. Por lo que respecta a iconos para cabeceras de páginas, pueden añadirse efectos de "rollover" y también utilizar diferentes colores para dar información adicional de dónde se encuentra el visitante. Por ejemplo, es frecuente que se utilice la convención de que la sección actual está resaltada de alguna manera, mientras que las secciones relacionadas aparecen en color más pálido, más oscuro o desenfocadas, tal como vemos, por ejemplo, en la parte superior de esta misma página.

Por último, los iconos no tienen por qué ser algo estático. Una discreta animación puede ser una solución ideal para señalar algo en una pantalla. Las animaciones no tienen demasiados secretos. Ya sabemos que podemos generarlas como GIF, o también utilizar Flash (según comentamos en nuestras páginas de gráficos para la web.) Para los iconos animados es preferible optar por un gif animado. Su tamaño será reducido y seguro que se verá en el navegador.