Preparación y exportación de iconos SVG en croquis

Este artículo asumirá que ya comprende los fundamentos del diseño de iconos. Y concéntrese en cómo prepararlos y exportarlos para su uso en la Web, iOS y Android. Usaremos Sketch para organizar, administrar y exportar los íconos.

También nos centraremos en iconos monocromos que pueden teñirse dinámicamente en todas las plataformas.

Sketch 42

Comencé a escribir este artículo antes de que se lanzara Sketch 42. Parece que han hecho algunas mejoras significativas. Eso realmente ha cambiado mi flujo de trabajo.
1. Al pegar desde el ilustrador, se ajusta a la cuadrícula de píxeles de manera mucho más consistente.
2. Cambiar la regla de relleno es mucho más fácil ahora. (más sobre esto más adelante)

🖋 Comenzando con Illustrator

Antes de sumergirme en el bosquejo, quería comenzar con el ilustrador. He estado usando ilustrador durante 15 años y algunos hábitos son difíciles de romper. Soy mucho más rápido con la herramienta de lápiz en Illustrator que con el boceto. Normalmente diseño mis iconos en ilustrador y los muevo para dibujar.

Razones para NO usar Illustrator para todo el proceso:

1. Los archivos de Illustrator están limitados a 100 mesas de trabajo. Si tiene un conjunto de iconos grande, ni siquiera puede guardarlos en un archivo.

2. La exportación masiva es limitada.

3. Si su equipo usa bocetos para el diseño, de todos modos los querrá en boceto

Comencemos

Diseñaré los iconos a 24x24. Me gusta crear una mesa de trabajo 24x24 para cada icono.

Si eres como yo, tiendes a mezclar caminos y formas para crear el ícono. Al final, querremos convertir los trazos en trazados. Y simplifique los caminos a formas individuales.

Esquema de rutas

Querrás convertir cualquier ruta en formas.

Creé un acceso directo personalizado ⌥⌘O

Fusionar formas

Combina todas las formas en su forma más simple. Debería poder seleccionar todo el icono con un solo clic.

Pasar al boceto

Comencemos creando una mesa de trabajo 24x24 para nuestro icono. Y agregue un cuadrado de 24x24.

Si ha leído alguno de mis otros artículos, sabrá que me gusta agregar guías a mis símbolos. Esto también servirá como un cuadro delimitador para el símbolo.

Permite agrupar esta forma y nombrarla "Guías", luego agruparla nuevamente.

Esto creará la estructura de carpetas para nuestros Símbolos.

Ahora sería un buen momento para pensar en una convención de nomenclatura para todos sus íconos y símbolos.

Aquí hay un ejemplo de una convención de nombres que he usado en el pasado. Elegí mantener mis nombres de símbolos un poco más cortos que los archivos exportados. Podemos usar barras diagonales para crear jerarquía tanto en exportaciones como en símbolos.

Utilizaremos la mesa de trabajo para exportar y el grupo de capas se convertirá en nuestro símbolo.

Importando desde Illustrator

Ahora que tenemos nuestras convenciones de nomenclatura y estructura de documentos ordenados. Volvamos a importar los íconos de Illustrator. Comience copiando y pegando nuestro icono de ilustrador a boceto.

Ok, ese se ve bastante bien, pero echemos un vistazo a una forma más compleja

Bueno, eso no es exactamente lo que esperábamos, echemos un vistazo a la lista de capas.

Hay dos formas cuadradas que no deberían estar aquí. Estos son algunos artefactos del ilustrador, probablemente podríamos volver a arreglarlo allí. Pero es igual de fácil arreglarlo aquí en croquis. Simplemente elimine las capas.

Se ve mejor, pero el objetivo final es una sola forma combinada. Vamos a fusionar todas las capas. La forma más fácil de hacer esto es seleccionar todas las capas y presionar la herramienta de unión.

Una vez más rompimos nuestro ícono, así que ahora necesitamos reorganizar nuestras capas y tipos de unión. También tendremos que cambiar la regla de relleno si queremos usar estos iconos de svg en Android.

¿Qué demonios es la regla de relleno?

Pensé lo mismo cuando mi desarrollador de Android me dijo que mis iconos de svg no funcionaban. Mi primera reacción fue abrir el svg en un editor de texto y eliminar el atributo. Pero eso no funcionó, así que tuve que investigar un poco.

Fill-Rule es una propiedad SVG que básicamente define cómo determinar qué formas se rellenan o restan de la forma. El valor de svg predeterminado es "distinto de cero", y esto es lo que requiere Android. Desafortunadamente Sketch usa "evenodd". Afortunadamente, Sketch proporciona todas las características que necesitamos para convertir nuestras formas de "evenodd" a "non-zero". Y ahora es aún más fácil en Sketch 42

Dediquemos un minuto a comprender cómo funciona la regla de relleno.

Fill-rule = "evenodd" comienza desde el exterior de la forma y cuenta cada ruta hacia el centro, las rutas pares se llenan y las rutas impares se restan.

Fill-rule = "non-zero" significa que se rellenará cualquier ruta dibujada en el sentido de las agujas del reloj y se restará todo lo dibujado en el sentido contrario a las agujas del reloj.

Y cuando digo dibujado en una dirección específica, literalmente me refiero a la dirección en la que se dibujaron los puntos.

Ahora, por lo general, no dibujamos a mano todos los puntos de nuestras formas, pero es importante comprender cómo funciona para que podamos arreglar nuestras formas cuando se rompen.

Afortunadamente, Sketch incluyó una función para cambiar la regla de relleno. Hay un icono de engranaje al lado del relleno en el inspector.

Volvamos a nuestro icono de "noticias" y cambiemos la regla de relleno a cero.

Genial, todavía roto! Ahora, este es otro cambio que noté en 42. Necesitamos asegurarnos de que las capas estén en el orden correcto. Así que moví la capa más externa al fondo. Y cambió los tipos booleanos. Asegurarse de que las áreas restadas estén configuradas para restar y que las áreas rellenas estén unidas.

🗒 Como nota al margen, parece que Sketch 42 corrige la dirección del camino para nosotros. En el pasado este no era el caso, habríamos tenido que usar la herramienta de volteo horizontal, en objetos simétricos. O en realidad hay una opción de ruta inversa en Capa> Rutas> Orden inverso.

Así que ese es nuestro ícono completo, tengo dos pasos finales antes de exportar.

Debido a que el negro predeterminado no es # 000000 en Illustrator y siempre me olvido de cambiarlo. Me gusta aplicar un estilo de capa negra que denominé ‘icon black.

Y finalmente, creemos un símbolo

Deberá seleccionar la mesa de trabajo al exportar. Recuerde que los nombramos de acuerdo con nuestra estructura de archivos deseada.

Ahora puede simplemente exportar PDF para iOS y SVG para Web y Android a 1x para evitar todas las variaciones de densidad de pantalla.

Espere antes de exportar cualquier SVG

Asegúrese de instalar el complemento SVGO Compressor de Bohemian Coding. Este es un paso muy importante y solucionará el 90% de sus problemas de SVG.

https://github.com/BohemianCoding/svgo-compressor

Ok, eso es todo

¡Así que ahí lo tenemos! Un hermoso conjunto de iconos SVG equipado con píxeles con cuadros delimitadores 24x24. Monocromo con transparencia para que puedan teñirse dinámicamente en Web, iOS, Android e incluso Sketch (tipo de ).

Consejo profesional: puede teñir iconos negros, pero colocando una forma de color sobre ellos y cambiando el modo de fusión a la pantalla. Tu fondo debe ser blanco.

Un par de notas finales sobre la implementación de sus íconos

Web

Como no tenemos trazos en nuestros iconos, podemos teñirlos simplemente cambiando el relleno en CSS. Esto también funciona muy bien con los sprites svg.

Androide

Puede usar esta herramienta para probar sus iconos de svg http://inloop.github.io/svg2android/

iOS

Mientras que los PDF exportados son vectoriales y xcode generará los activos 2x y 3x para su uso. Si desea usar sus iconos en diferentes tamaños, deberá exportarlos como archivos PDF separados.

En este ejemplo, el boceto generaría 3 archivos PDF.

1x = 24x24, 2x = 48x48, 64w = 64x64. Estos serían sus tamaños 1x, y xcode crearía sus variaciones @ 2x y @ 3x.

También hay una biblioteca que le permite usar un solo pdf 1x.

https://github.com/mindbrix/UIImage-PDF

Gracias por leer

Como siempre, como yo, sé lo que piensas o comparte tu flujo de trabajo. También puedes encontrarme en Twitter @CheckYourVector