En Kaleidos apostamos por el software libre. Las herramientas de diseño de código abierto no abundan pero existen alternativas válidas muy potentes. Una de estas herramientas es Inkscape, enfocada al diseño vectorial y similar a Illustrator.
En Kaleidos lo usamos a menudo para la creación de iconos e ilustraciones vectoriales a parte de otras tareas. Pese a sus limitaciones, Inkscape es realmente eficaz en el manejo de nodos y trazados lo cual lo hace ideal para el diseño de iconos.
Creando el set de iconos de Taiga
En este caso usamos Inkscape para crear el set de iconos de Taiga.io. Una vez analizadas las necesidades de diseño y estudiado la interfaz de Taiga nos ponemos manos a la obra con unos primeros bocetos rápidos en papel.
Trasladamos esas pruebas a Inkscape donde comenzamos a preparar la grid y testear tamaños. La grid es importante ya que nos va a guiar en todo el proceso de diseño ayudando a que mantengamos los estilos y tamaños de los iconos.
Tipo de grid y estilos
Una vez decidido el estilo visual de los iconos elegimos una grid cuadrada (128 x 128) para realizar las primeras pruebas con vectores. En este caso elegimos una grid cuadrada para asegurar el posicionamiento de los iconos. Es un quebradero de cabeza menos para nuestro “yo” futuro.
La base geométrica y el estilo de línea que le damos a los iconos es algo muy personal y reconocible. Lo conseguimos manteniendo los trazados con un borde de 8px. Tras validarlo con el equipo pasamos a trabajar en el set de iconos final.
Herramientas usadas
Gran parte de los iconos los realizamos con la herramienta BEZIERS y MANO ALZADA a base de unir nodos y jugar con los bordes. Otra manera que nos resulta útil es usar las operaciones booleanas con rectángulos y cuadrados siempre respetando el grid de fondo.
Una de las herramientas clave para este tipo de trabajos es ALINEAR. Lo usamos constantemente. Es algo incluso interiorizado por el diseñador ya que agiliza mucho el trabajo, por eso recomendamos aprenderse los atajos de teclado. Hay que mencionar también que es muy útil tener activado el AJUSTE A NODO para hacer snap entre nodos y mejorar las uniones de trazados.
Organización del set: sprite, nombres y archivos
Trabajar con un set de numerosos iconos puede ser todo un reto, sobre todo si queremos tenerlo organizado. Hay varias acciones que puedes realizar para ayudarte a tener todo controlado:
- Nombra los iconos del set con un prefijo que te ayude a identificarlos del resto de iconos que puedas tener. Por ejemplo “taiga-” o “icon-” a modo más general. En este caso usamos “taiga-” Ej: “taiga-edit.svg”
- Si el set de iconos es muy grande organizarlo en carpetas es de gran ayuda. Con estas subdivisiones será más fácil localizarlos. Por ejemplo iconos de “edición” “notificaciones” etc…
- A la hora de usarlos es interesante disponer del icono en varias versiones y tamaños para que su futura implementación sea más ágil. Por ejemplo, tener un mismo icono en SVG y PNG a parte de diferentes tamaños como 128x128, 64x64, 32x32, …
- Una buena práctica es crear un sprite del propio set de iconos. No sólo por si lo usamos directamente en código sino porque nos sirve a modo de “index” o “overview” para identificarlos rápidamente.
Enlaces de interés
El equipo de Inkscape.org siempre tiene actualizada su documentación. Resulta muy útil y una gran referencia. Cuenta con tutoriales y videotutoriales de todo tipo. Recomendamos sobre todo los tutoriales básicos.
Puedes descargar Inkscape para cualquier sistema operativo desde aqui.
Por otro lado os dejamos el enlace a Inkscape Open Symbols, realizado por Xaviju que nos facilita nuevos set de iconos para usar en nuestros diseños mediante el panel SÍMBOLOS de Inkscape.
A parte puedes crear los tuyos propios y colaborar con la comunidad!