08 septiembre 2016

Cómo usar los iconos de Font Awesome en Photoshop

como-usar-iconos-font-awesome-en-photoshop

Ya te he hablado en otras ocasiones de las ventajas de usar Font Awesome en tu blog, pero me faltaba mostrarte cómo usar esta fuente para diseñar tus propios iconos en Photoshop. Así que te lo cuento en vídeo y por escrito, para que tengas dónde elegir.






Buen jueves, ya ando de vuelta por aquí! la verdad es que no sé si contarte que se me ha pasado el mes de Agosto volando o se me ha hecho eterno, porque ha habido un poco de todo.

Estamos haciendo todo lo posible (próximamente seremos dos) por tener a punto la nueva web en breve y contarte todas las novedades. Algunas ya las sabrás si formas parte de la Comunidad Demo 2.0 y te has leído los correos que he ido enviando este mes pasado.

Pero bueno, no quiero enrollarme mucho con eso, ya te lo contaré todo con detalle cuando llegue el momento (que espero que sea muy prontito), ahora vengo a contarte cómo puedes usar Font Awesome en Photoshop, para crear tus propios iconos.

Y con esto puede que te preguntes ¿para qué quiero yo crear mis propios iconos? . Pues ahora mismito te doy razones, no te preocupes.




VENTAJAS DE CREAR TUS PROPIOS ICONOS



Existen muchos packs de iconos gratuitos en Internet que puedes usar para crear presentaciones o incluir en tus diseños, pero no siempre es fácil encontrar iconos que cumplan estas 3 condiciones:



 Que tengan una gran variedad de formas que cubran tus necesidades.


 Que los puedas usar sin atribución.


 Que los puedas redimensionar como quieras sin que pierdan calidad.



En mi tablero de Pinterest, puedes encontrar muchos packs de iconos gratuitos, pero puede ocurrir que el pack no contenga todos los tipos de iconos que necesitas en ese momento o que el tamaño que ofrecen es demasiado pequeño y al agrandar, pierdan calidad.





CÓMO ESCOGER TUS ICONOS PARA QUE RESULTEN ATRACTIVOS




Uno de los puntos fundamentales al usar iconos es que guarden la misma proporción y estilo. Mezclar iconos de distintos diseñadores, puede llevarte al desastre, porque perderán coherencia visual.

Observa como en esta imagen, a pesar de que he intentado aplicarles la misma tonalidad, se ve claramente la falta de sintonía en el grupo de iconos :


iconos-sin-coherencia-visual




Estos 4 iconos pertenecen a distintos diseñadores. 


 Si te fijas, de los 4, los que más se asemejan son el ordenador y el reloj, porque ambos tienen "casi" el mismo grosor de líneas y se encuentran completamente coloreados. Pero los tonos y el grosor, no coinciden al 100% . Además al reloj le faltaría la línea azul por todo el contorno para armonizar con el ordenador.


 El sobre es un icono lineal, con lo cual, en lo único que coincide con sus compañeros vecinos es en el color azul.


 El icono de comentarios, viene envuelto en un circulo y además incluye sombra en su interior.




¿Los incluirías en un mismo diseño? espero que no. Por eso es importante encontrar una buena cartera de iconos con los que poder diseñar unos iconos semejantes que aporten coherencia y atractivo visual a tu presentación.


Y ahí es donde Font Awesome te puede ayudar.



Descubre como usar Font Awesome en Photoshop y diseña tus propios iconos. Tuitéalo




QUÉ ES FONT AWESOME



Se trata de una fuente tipográfica de 634 iconos (por ahora) . Al ser una fuente, es escalable, se le puede asignar cualquier tamaño sin perder calidad.

La puedes usar tanto para web o blog, como en tus proyectos de diseño a través de Photoshop.


Aquí tienes algunos modelos de iconos que puedes diseñar con Font Awesome y en el videotutorial, te muestro otro ejemplo para usarla.



como-usar-iconos-font-awesome-en-photoshop


como-usar-iconos-font-awesome-en-photoshop



CÓMO USAR LOS ICONOS DE FONT AWESOME EN PHOTOSHOP




 Visita Font Awesome y descarga la cartera de iconos en tu ordenador a través del botón Download.


 Descomprime el archivo de descarga e instala las dos fuentes de la carpeta Fonts.


 Abre Photoshop (en caso de que lo tuvieras abierto, ciérralo y vuelve a abrirlo).


 Escoge la herramienta Texto, selecciona la tipografía Font Awesome y el color y el tamaño que prefieras.


 Haz clic dentro del lienzo y dirígete a Font Awesome Cheatsheet.


 Elige el icono que quieres usar, selecciónalo y cópialo.


 Vuelve a Photoshop y pégalo en el area de trabajo.




Mira el vídeo si tienes alguna duda:





Y eso es todo por hoy, ¿conocías la importancia de la coherencia visual en los iconos? ¿has tenido alguna vez problemas para encontrar un pack de iconos que se ajuste a tus necesidades? ¿te ha resultado útil este tutorial?


Cuéntamelo todo en comentarios que estoy deseando de charlar un rato contigo  


Que tengas un gran día!




¿Te gustaría seguirme en tu lector de feeds favorito?






Si quieres seguir aprendiendo, no olvides unirte a la Comunidad Demo 2.0, porque te esperan contenidos, guías, descargables y secretillos de gran valor exclusivos, que no verás en el blog, como esta super-guía para que aprendas a usar imágenes en la red (sin buscarte problemas) en la que además tendrás acceso a millones de imágenes gratuitas para usar en tu blog, sin ningún miedo.


¿Qué me dices? ¿te apuntas? si es así, encantada de contar contigo   


 Únete a la Comunidad Demo 2.0




2 comentarios:

  1. Buuuaaaaaaahhh!!! Qué chulada, nena!!
    Una cosita más que hacer y con la que trastear.
    Además, tal y como lo has explicado en el vídeo parece súper fácil.
    Graaaaciaas por estas cositas tan chulas!!
    Un besazo, hermosura 😘😘😘😘

    ResponderEliminar
    Respuestas
    1. Muchas gracias guapetona, con las infografias tan chulas que haces, seguro que te marcas unos diseños chulisimos. Y sí que es muy fácil, tanto que cuando te pongas al lío seguramente hagas un pack completo, jajja! Un abrazote!

      Eliminar

demo