21
dic

Crear iconos

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

Eico icons 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!

Categoría: Tutoriales

Publicado por: negro

Entradas más populares

10 Respuestas para “Crear iconos”

  • Muy pero muy buen artículo Negro, cuando lo estaba leyendo ya pensaba en comentar que creía necesario al escalarlo a 16px x 16px realziar algún retoque para dotarlo de mayor definición, pero me contestaste a mi duda con lo del Axialis. :)

    Gracias por compartirlo, abrazo!

  • Muy buen artículo!!

    Gracias por lo de Axialis

  • essplota el axialis, gracias amigo por meterme ahi con esos monstruos, ja!

  • Muy buen articulo.
    Saludos

  • Hace tiempo que no pasaba por el blog, muy buen aporte negro!!
    Sigan asi!

    Abrazo

  • Lo que me quedo con duda es qué tamaño sería el ideal para los iconos principales, y si, por ejemplo, tenemos otros “sublinks” (o iconos secundarios) cómo serían éstos últimos para que sean congruentes con los “iconos principales”?? Por cierto, en las empresas donde he estado lo menos que ocupes la pluma (es decir, que tú hagas desde cero el diseño), mejor, ya que “time is money” y hay muchas páginas web donde puedes bajar vectores de iconos y modificarlos a tu gusto, para mayor velocidad =)

  • ¿Cómo estás Maga? Acerca de tus consultas, existen tamaños estándares de iconos, por ejemplo 128 x 128, 48 x 48, 32 x 32, 16 x 16, etc. Lo importante es que la ilustración no pierda definición a la hora construir los formatos pequeños.
    Sobre la existencia de librerías de iconos gratuitas, entiendo tu punto; creo que todo depende de para quién trabajes, un paquete de iconos que esta disponible de forma gratuita en Internet indudablemente será descargado por cientos de miles de diseñadores, esto hace que tu diseño pierda personalidad; más a un si trabajas para una empresa importante. A ti te parece que el diseñador de Apple utiliza iconos gratuitos de Internet?.. todo depende, si te contratan por un diseño exclusivo, el diseñádor deberá ser capáz de crear un icono, o bien tercerizar este trabajo. Saludos

  • [...] este artículo aprendimos a realizar nuestros propios iconos; ahora, si no dispones del tiempo suficiente o no te [...]

  • Muy bueno el post!
    Os quería pedir un consejo: como neófito en la materia me encuentro con el mencionado problema de pérdida de definición al reescalar. ¿Tenéis algún truco o consejo para dibujar pensando ya “en pequeño” (pocos detalles, líneas gruesas, no sé… La lupa del ejemplo me parece un dibujo “normal” pero que sin embargo se reescala muy bien!). O si no: ¿Qué tipo de retoques hacéis habitualmente al diseño de 16×16 para que gane definición?
    Gracias y un saludo!!

  • Hola Fingers, perdón por la tardanza en la respuesta :(
    Lo más importante es hacer una ilustración lo suficientemente representativa para que en un tamaño pequeño no se pierda la idea del concepto. Para la distribución de los pixels cuando reescalas el dibujo, te recomiendo utilizar Axialis, un programa que te servirá para exportar a los distintos formatos de iconos y que menciono en el artículo. Saludos

Dejar una respuesta

XHTML: Tu pudes usar estas etiquetas: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>