Cómo usar Icon Fonts en tus mockups en Illustrator

A veces cuando estamos en el proceso de diseñar interfaces y UX y ya sabemos de antemano que utilizaremos un Icon Font (fuente de íconos) para nuestra web, una manera sencilla y rápida de poder utilizar los mismos íconos que usaremos en la versión final y maquetada de nuestra web es usar también los Icon Fonts desde Illustrator, en vez de estar liándonos con archivos de íconos extras.

Usar Icon Fonts desde el Glyphs Panel

Sólo tenemos que bajar la fuente que iremos a utilizar, por ejemplo Font Awesome e instalarla. Luego en Illustrator, en el menú type > glyps seleccionas en el listado la fuente que elegiste, en este caso Font Awesome, y buscas el ícono que deseas insertar. Teniendo activada la herramienta texto en el artboard, le das doble click y ya está listo.



Podés cambiarle el color, y ubicarlo como desees con las opciones de la herramienta de texto.

Usar un Icon Font como símbolo de Illustrator

Si tenés que aplicar ese mismo ícono sobre muchas pantallas, lo podés convertir en curvas y luego en símbolo.

Para convertir el ícono en curvas le das click derecho > create outlines.



Con esto, nuestro ícono está en formato vector. Sólo resta convertirlo a símbolo arrastrándolo a la pestaña de símbolo y ya queda creado.



Ahora ya queda listo para utilizar el ícono como símbolo de Illustrator.

Porqué es útil usar símbolos de illustrator?

Porque cuando trabajamos en cantidad y de manera repetitiva, si tenés que cambiar algo en el ícono, lo cambiás dentro del símbolo y eso se aplica automáticamente a todas las instancias de ese símbolo en el artboard y evita que tengas que editar uno a uno los íconos.

Espero que este sencillo tutorial te ayude a trabajar de manera más rápida y práctica tus diseños en Illustrator.

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.