Iconos para error 506


#1

He creado un repo en GitHub en con las herramientas para generar la tipografía de iconos. El repositorio está abierto a la participación pero hay que tener una aplicación propietaria para editar los iconos (sketch app) que, además sólo está para mac.

Hay un archivo de gulp que convierte el archivo de diseño (sketch) a SVG y después lo convierte a tipografía de iconos.

Para ver el archivo de sketch:
assets/sketch

Para ver los resultados se genera una plantilla html en
dist/sample.html


Una plataforma que no controlamos
Herramientas propietarias de diseño vectorial
#2

Caray, ¡estás hecho un crack de la automatización!

Entiendo que ese repo contiene todos los elementos para hacer todo el flujo de trabajo, ¿no? Modificar el sketch, generar el SVG y re-generar la tipografía resultante.

Mi duda es (adivina…) sobre Sketch. ¿Lo has usado porque con otro programa el proceso no funcionaría, o sencillamente porque es el programa que prefieres usar para diseñar?


#3

Pues por las dos razones. Es el que utilizo para esta tarea concreta, diseñar iconos, y tengo resuelto el flujo e trabajo con Gulp para esta herramienta. Supongo que habrá más opciones.


#4

Esto da para un buen hilo de debate en el foro :sunglasses:


#5

Seguro! Ya caerá :wink:


#6

Esto me interesa muchísimo, aunque he de confesar que he llegado a un punto en el que la tecnología me ha acabado por superar. ¿Será que desde que dejé de diseñar me he desconectado de las novedades y he acabado desactualizado?

Cuéntame más en un lenguaje más profano, por favor @Aitor. Esa tipografía de la que hablas ¿es un OTF, TTF o similar? ¿Se puede ver en algún lado?


#7

Claro. Está en TTF, entre otros formatos (sólo he elegido exportarla en formatos para web). Lo tienes todo en el repositorio de GitHub (ver el enlace en el primer post).

De lo que se trata es de automatizar el proceso de trabajo. Una vez diseñas los iconos en tu programa de diseño (Sketch) se generan automáticamente todos los archivos necesarios para el uso de la fuente (Fuentes en diferentes formatos, archivos CSS, plantillas de ejemplo para ver cómo queda) Es muy cómodo y ahorra mucho tiempo.

El los archivos pueden modificarse por cualquiera con GIT (para hacer nuevos iconos, por ejemplo) y solicitar un pull request que tengo que aprobar yo, que soy el dueño del repositorio :wink:

Si buceas en las carpetas puedes ver los archivos fuente de Sketch, aquí:

Las fuentes una vez compiladas:

Y también los iconos en formato SVG:

Sólo hay tres, poque son los que necesitamos por el momento, pero habrá más:


#8

Otra cosa que se me olvidaba, la automatización se consigue con un “task runner” que se llama Gulp:

http://gulpjs.com/

Y este es el archivo concreto que genera las tareas que yo necesito:


#9

Muchas gracias, pero veo que me he quedado más desactualizado que el gramófono. No tengo ni controlo Sketch ni Github ni nada en lo que haya que trastear código. Me pierdo por completo. Sin embargo, me interesa muchísimo el concepto de metatipografía (la tipografía como sistema en vez de como escritura) que se inventó mi colega Chema Ribagorda y veo que esto va por ese camino.


#10

Un tema que desconozco completamente, pero suena interesante. Te animo abrir un hilo con ese tema, para no caer en el off topic en este. Este es un hilo de gestión propiamente, por eso está en la categoría meta. El otro se puede abrir dentro de diseño si quieres :wink:


#11

Hecho. :+1: Me parece buena idea. En cuanto tenga un rato más largo para introducir el tema lo abro en la categoría de diseño. Gracias, Aitor.