lunes, 26 de mayo de 2014

Aprende a usar los Icon Fonts

En este tutorial te enseñaremos cómo emplear Icon Fonts en tus mockups en Illustrator

En ocasiones mientras 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.

Fuente:enlace

No hay comentarios:

Publicar un comentario

Entradas populares