En esta oportunidad vamos a hablar un poquito de los iconos y también ver el proceso de su creación.
En primer lugar veamos una serie de imágenes en las que aparecen ejemplos de iconos realizados por empresas de un gran nivel, en las que se pueden ver resultados de trabajos extraordinarios.

Eico design

Icon Factory

Yellow Icons

Mi amigo el Mati (Matías Lima)

Vamos a dividir el desarrollo de un icono en 5 etapas:

• Idea o concepto
• Boceto o bosquejo
• Ilustración y diagramación
• Expresión (Incrementar el realismo)
• Crear los diferentes formatos de iconos

Idea o concepto

Lo primero y más importante es tener claro que un icono es el resultado de la representación de un concepto, por lo tanto el principal objetivo no pasa por hacer una ilustración despampanante sino por lograr que el concepto se vea bien representado y los usuarios entiendan rápido que funcionalidad o destino cumple dicho icono.

Boceto o bosquejo

Luego tener claro nuestra idea, procedemos a representarla haciendo un boceto, este se puede hacer con papel y lápiz pasando luego a escanearlo o sacarle una foto o si se quiere con una tabla digitalizadora estableciendo los trazos que van a definir a grandes rasgos nuestro concepto.

Ilustración y diagramación

Una vez hayamos realizado nuestro primer bosquejo, nuestra siguiente etapa es editar dicho dibujo para empezar a redibujar o copiar las formas básicas de forma digital, definiendo la sumatoria de elementos base que hacen a nuestro icono.

Para ello podemos utilizar programas como son Freehand, Illustrator, Corel, etc; estos son programas que me permiten una fácil resolución de ilustraciones de formas simples y vectoriales.

En este caso vamos a elegir uno de los que aparece en el dibujo de arriba (Lupa), para poder apreciar el proceso en imágenes. Si observamos el ejemplo de la lupa, está compuesta por una serie de formas básicas superpuestas.

Ya se está pareciendo a algo ¿Verdad?… bueno, lo que nos resta es empezar a darle un poco de realismo.

Expresión (Incrementar el realismo)

Una vez definidas todas las formas vectoriales de nuestro icono, lo que tenemos que hacer es importarlas a un programa de manejo de bitmap como puede ser el caso de Fireworks, Photoshop, Photo Paint, etc.

Es recomendable que cada una de las formas aparezca en una capa independiente, todas ellas superpuestas permitiéndome ocultarlas y mostrarlas de forma independiente, me permite trabajar con mayor comodidad sobre cada forma.

Estos programas manejan una serie de herramientas las cuales me permitirán expresar reflejos, sombras arrojadas, sombras propias, brillos, grandientes, saturaciones de colores, etc. La herramienta más importante es el pincel, este me permite afectar los colores de las formas a mano alzada modificando el color y tono con que estoy pintando.

¡Ya casi terminamos!, el último paso es crear los diferentes formatos de iconos para utilizar en nuestras aplicaciones.

Crear los diferentes formatos de iconos

Hasta este momento, lo que tenemos es una ilustración, como cualquier otra; lo que necesitamos es que esa ilustración este inscripta en los formatos estándar de iconos. Alguno de ellos son por ej: 256×256, 128×128, 64×64, 32×32, 24×24, 16×16, etc.

Pero… ¿a qué problema nos enfrentamos?… si escalamos nuestra ilustración perderá definición y será muy difícil lograr que en formatos pequeños como es el caso de 16×16 se pueda apreciar claramente nuestro concepto. Para solucionar este problema existen programas en los que importamos nuestra ilustración, definirnos los tamaños y posteriormente exportamos los formatos necesarios, dígase GIF o PNG.

Uno de esos programas, por lo menos el que yo uso y recomiendo, es el Axialis, es un soft bastante intuitivo y los resultados son de muy buena calidad. Por otra parte tiene una herramienta de dibujo que me permite hacer retoques y así ayudar a corregir zonas de la ilustración que se han deformado o perdido.

The End!.. Espero les haya sido de utilidad para la realización de sus propios iconos o que por lo menos puedan entender el proceso de la creación de un icono.

¡Hasta pronto!