Cada vez que necesitamos iconos para algún proyecto, casi el mayor problema que nos encontramos es que repositorio online elegir. Existen multitud de ellos, como Icons8 o Noun Project, de diferentes estilos y temáticas, de pago y gratuitos, para trabajos personales y profesionales. El abanico es muy amplio. Pero nos encontraremos en muchas ocasiones en las que deberemos crear nuestros propios iconos, por diversos motivos: el proyecto en el que trabajamos es de un ámbito muy específico y es difícil encontrar iconos relacionados, o el cliente quiere que los iconos de su proyecto sean propios. O simplemente, queremos tener una biblioteca de iconos personal y que podamos usar en nuestros futuros trabajos. Tener assets propios, muy importante para cualquier diseñador. Y en la creación de nuestros propios iconos, y sus fundamentos básicos, es en lo que nos queremos centrar hoy.
Eso sí, aunque parezca una tarea sencilla, diseñar un icono puede convertirse en algo frustrante, ya que debemos aglutinar una idea en un dibujo que normalmente es muy simple, con pocos trazos, y que a veces debe mostrarse en diversos tamaños, estilos y/o colores. Tener presente desde la propia concepción del icono estos factores, y algunos más, es esencial para crear un diseño que nos resulte tan flexible que podamos usarlos en diferentes situaciones. O al menos, que con pequeños cambios, podamos reciclarlos.
Hoy veremos 5 puntos básicos a tratar, desde el tipo de archivo en el que guardar nuestros iconos, hasta normas de estilo o como trabajar dentro del software que utilicemos. Así que no tardemos más, y empecemos por el principio.
Formato rasterizado vs vectorizado
Puede resultar básico, pero es algo que a día de hoy nos lo seguimos encontrando. Querer un icono con fondo transparente, y ver que nos mandan un archivo en formato PNG. Y claro, en cuanto nos vamos a resoluciones altas, el icono vamos a verlo pixelado y con baja calidad.
A menos que tengamos algún buen motivo o sea una imposición, vamos a hacer nuestros iconos en formato vectorial. Van a ser escalables a cualquier tamaño sin problemas, siempre vamos a verlos a máxima calidad y van a ocupar menos tamaño. Y no, hacer una conversión directa de un icono en PNG (u otro formato ráster) a vectorial, simplemente cambiando la extensión, no va a solucionarnos nada, ya que un SVG puede albergar en su interior imágenes rasterizadas, que van a perder calidad según la resolución.
Por eso, intentemos trabajar siempre con nuestros iconos, desde el primer minuto, en formatos vectoriales. Y si tenemos iconos en formato ráster, merece la pena rehacerlos para convertirlos en vectores. Nuestro yo del futuro nos lo va a agradecer.
Piensa en la escalabilidad
De este tema ya hablamos cuando escribimos sobre logotipos, pero se puede aplicar los mismo principios a los iconos. Cuando diseñamos un icono, en algunas ocasiones sabemos cual va a ser su tamaño o resolución final, y empezamos a diseñar partiendo de ese punto. Pero hay muchas ocasiones que esto es desconocido o que no está definido aun en esa etapa del proyecto, por lo que los iconos que diseñemos deben poder adaptarse a cualquier situación. Y es aquí cuando entra la escalabilidad.
Con escabilidad nos referimos a que nuestros iconos se vean correctamente y sean legibles a cualquier tamaño. Para esto, disponemos de dos opciones:
- Diseño único para todo: es la solución más simple de usar, pero quizás la más compleja de diseñar. Y es que no podemos añadir demasiados detalles al iconos, porque no se verían bien si es muy pequeño. Pero tampoco que sea muy simple, ya que no quedaría bien a gran tamaño.
- Diseñar diferentes iconos según su tamaño: de esta forma vamos a tardar mas tiempo, porque literalmente estamos haciendo más iconos. Normalmente, los iconos a gran tamaño van a ser más complejos y van a estar compuesto por más elementos. Y conforme vamos reduciendo su tamaño, los vamos simplificando para que se vean correctamente pero no pierdan su significado.
¿Trazos o contornos?
Cuando dibujamos un icono sin relleno, solo con trazos, podemos tener un problema. Y es que si al exportar el archivo seguimos manteniendo el trazado en vez de convertir a contornos, nos veremos en una situación como esta:
De nuevo, nuestra amiga la escalabilidad. Si, por ejemplo, hemos diseñado un icono con un trazo de 2px, va a mantener ese ancho de línea sea cual sea su tamaño. Quizás si es icono se va a ver pequeño, se nos junte todos los trazos y apenas veamos nada. Y a gran tamaño, esa línea puede que sea demasiado fina. Es por ello que siempre, una vez tengamos nuestro diseño de icono finalizado, convirtamos los trazos en contornos. Así su aspecto va a ser siempre el mismo, sea cual sea su tamaño.
Un pequeño tip: antes de convertir a contorno nuestro icono en Illustrator, o el programa de dibujo vectorial que usemos, es conveniente crear una copia del icono y que sea esta la que convirtamos a contorno, manteniendo el original creado con trazos sin tocar. Esto nos va a permitir que, si en un futuro tenemos que realizar algún cambio sobre el icono, podamos hacer las modificaciones sobre aquel creado con trazos, ya que es bastante más complicado editar el que esta ya con contornos.
Dibuja sobre una rejilla
Tener una rejilla como base sobre la que empezar a diseñar no solo nos va a permitir centrar el icono, sino controlar la posición y tamaño de iconos de diferentes formatos. Esta rejilla también nos va a definir los límites del icono y el espacio que debe existir a su alrededor.
Esta rejilla puede ser tan simple como un cuadrado, con un una línea vertical y horizontal que nos marquen los puntos medios, y otras dos líneas que nos marquen las diagonales. También se puede incluir una circunferencia interior al cuadrado, que nos ayude si vamos a usar formas circulares. Desde aquí, podemos añadir otro cuadrado mayor al primero que nos marque el espacio en blanco que va a rodear a nuestro icono y que le va a permitir respirar a su alrededor.
Coherencia en el estilo
Si vamos a cualquier biblioteca online de iconos, no es extraño encontrar diversos estilos de iconos: de contorno, rellenos, de colores…Seguramente cuando diseñemos nuestros iconos nos decantemos por un estilo u otro según el proyecto. Eso sí, es muy importante crear una imagen homogénea y no mezclar estilos, ya que estaremos dando una imagen poco profesional. Y va a parecer que hemos cogido los primeros iconos que hemos visto y los hemos agregado sin ninguna coherencia.
Ahora tal y como hemos dicho antes de mezclar iconos de diferentes estilos, si que podemos diseñar iconos de diferentes estilos para un mismo proyecto. Eso si, se pueden usar para, por ejemplo, remarcar el icono dentro un menú porque estamos dentro de esa sección. O para que tenga un aspecto diferente al hacer hover sobre él.
Conclusiones
Tal como hemos podido ver, diseñar algo tan sencillo a primera vista como un icono lleva detrás ciertos conocimientos que debemos tener para lograr resultados aceptables para nuestros clientes. Desde mantener un estilo homogéneo a lo largo de todo un mismo proyecto, hasta tener en cuenta conceptos como la escalabilidad o el formato del archivo. Todo esto que pueden resultar cosas menores, son básicas para que nuestro trabajo se asiente sobre unas bases sólidas, y no tengamos problemas futuros.
Eperamos que os haya gustado esta pequeña guía básica sobre diseño de iconos. Y como siempre, tenéis disponibles los comentarios
