¿Cómo crear nuevos iconos para mistica icons?
Si queremos añadir iconos a Mistica icons podemos seguir estos tres sencillos pasos. Primero debemos de valorar la necesidad de un nuevo icono, después producirlo visualmente y por último dejarlo terminado en un archivo de .sketch. Este archivo lo adjuntamos a un ticket en GitHub y el proceso estará en marcha para ser integrado en Mistica Icons.
Antes de empezar, deberiamos de asegurarnos que realmente necesitamos un icono y como lo necesitamos. A continuación tenemos algunos puntos a tener en cuenta:
Si hacemos o usamos un componente nuevo que incluya un icono esto quizás hará que seamos dependientes de generar iconos nuevos cada vez que se repita este componente o tenga su equivalente por Marca. Multiplicaremos el trabajo y el mantenimiento.
Asegurarnos de que no tenemos ya un icono que tiene el mismo o similar significado.
Actualmente todos los iconos que tenemos en Mistica son representados a un tamaño de 24px. Lo ideal sería que los iconos funcionaran a este tamaño siempre que se pueda, para mantener cierta coherencia. Entonces es importante valorar la necesidad de representar iconos a otros tamaños. En todo caso, si necesitamos iconos a otros tamaños, lo que debemos de usar siempre son multiplos de 8 (40px, 48px, 56px ó 64px.).
Aunque no es obligatorio, lo ideal sería primero dibujar y bocetear el icono teniendo en cuenta las indicaciones y estilo del Brand Factory de Movistar.
Si es necesario en este punto podemos pedir ayuda y guía al equipo de diseño. También existe una plantilla imprimible que nos ayudará a dar los primero pasos para acercarnos al diseño del icono antes de digitalizarlo.
Una vez tenemos una idea clara del icono o hemos encontrado un editable que podemos modificar para cubrir lo que necesitamos, vamos a digitalizarlo. Para esto siempre utilizaremos Illustrator y después Sketch.
Atendiendo al estilo creado y definido desde Marca sería bueno tener en cuenta los pasos que se incluyen en el apartado para la Construcción de iconos definidos en el Brand Factory que nos ayudarán a trabajar en Illustrator.
Para facilitar la construcción de iconos tenemos una plantilla que ya tiene predefinido una rejilla y unas guías que nos facilitarán enormemente el trabajo en Illustrator. Es bueno mantener los editables en este documento para que puedan servir de referencia a la hora de crear otros iconos.
Aunque trabajemos muy al punto en este documento, tenemos que tener en cuenta que después puede no coincidir exactamente con el que trabajemos en Sketch. Esto es porque al pegarlo en Sketch, puede que haya que hacer pequeños retoques para ajustarlo al pixel perfect dentro del artboard final.
La plantilla de Illustrator se encuentra en el mismo repositorio de GitHub y se mantiene actualizado con este.
Plantilla de digitalización de iconos en Illustrator en:
.
└── mistica-icons
└── resources
└── illustrator-template.ai
- El archivo de Illustrator está planteado sobre una rejilla de 8x8 px ampliado por 4 (para trabajar más cómodo) y con 2 px de margen de cortesía (equivalente a lo definido por el Brand Factory).
- El documento tiene dos partes diferenciadas, Info/Resources e Iconos
Info/Resources Recursos en información básica dentro de la plantilla. Como grosor de lineas o ejemplos de construcción.
Iconos Aquí colocaremos los iconos digitalizados por artboards en su respectivo tamaño.
- En este documento trabajaremos en principio (depende del contexto final) en un lienzo de 40x40px con unas guías en una capa (capa Guías) que nos permitirá hacer tanto iconos (en la capa Contenido) para 40x40 con fondo, como para 24x24 sin fondo.
El artboard está compuesto de unas guías en rojo que nos permitiran orientarnos y mantener una coherencia con el resto de iconos. Debajo tenemos la rejilla de 8x8 como comentábamos antes.
Una vez tengamos el icono listo en Illustrator debemos de pasarlo a Sketch, dejarlo lo más ajustado posible y con el nombre correcto que debe llevar.
-
Abre el documento de intercambio y guarda una copia con un nombre que lo identifique bien.
El documento de intercambio en
.sketchestá en:
.
└── mistica-icons
└── resources
└── template-exchange.sketch
-
Copia el icono desde Illustrator y pégalo directamente en Sketch.
Ten en cuenta los siguientes puntos:
· Ajusta el icono a la rejilla y comprueba que todas las formas son correctas. Es muy posible que este se mueva o necesite ajustar su tamaño otra vez en Sketch. Ten en cuenta los grosores de línea y los requisitos que se detallan en el Brand Factory.
· Borra las capas nombradas como “Clips”.
· Expande la formas en una sola y asegúrate de que el polígono que quede después de expandir tenga el atributo “Non-Zero” en las propiedades de Fills.
Una vez tenemos el archivo de Sketch con el icono listo, debemos de abrir un tícket en GitHub para añadir el icono y adjuntar un enlace al archivo (que puede estar por ejemplo en Dropbox). Añadir toda la información que se nos pide ya en la plantilla del tícket y seguir el proceso.
El tipo de tícket que debemos de usar para añadir un icono nuevos es icon request.