Iconos gratis para hacer tours virtuales con Font Awesome

Intercambio Recursos útiles
, , ,
1

Muchos de los iconos que he utilizado para cambiar las horrorosas herramientas de Panotour, se deben justamente a la gran idea de “Font Awesome”

##Qué es Font Awesome
Es un proyecto de licencia libre que recopila más de 600 iconos de gran calidad, que pueden ser utilizados a través del poder del CSS, un lenguaje que los diseñadores web utilizan en las páginas.

Lo interesante es que se puede instalar como una “fuente tipográfica” en la computadora. Esto significa que es totalmente escalable (en tamaño) al ser en cierta medida un vector.

Según mi experiencia, son iconos que se dejan ver muy bien en tamaños pequeños… están muy bien diseñados y son muy útiles para los fotógrafos que hacemos visitas virtuales. Yo los he usado en muchos proyectos para modificar la barra de controles de Panotour.

##Dónde descargar
En la página oficial de Font Awesome:

Importante, al hacer clic en “Download” saldrá un aviso para descargar FORT ASESOME (que tiene costo), hagan clic en el botón de abajo “No thanks, just download Font Aswesome”

blob.jpg1214×1208 127 KB

##Cómo usarlo
En el archivo de descarga tendrás una carpeta llamada “fonts”. Instálala como una fuente en tu computadora. Nota que no se trata de archivos png o gif, es tan solo una fuente.

Luego, entra a http://fontawesome.io/cheatsheet/ y busca el icono que mejor se adapte a lo que necesitas, hay montones:

blob.jpg2304×1674 553 KB

Selecciona el icono y cópialo (CMD + C) ó (CTRL + C)

blob.jpg594×580 34 KB

Luego, en tu programa favorito de diseño (Photoshop, Illustrator, etc.) con la herramienta texto, PEGA (CMD + V) ó (CTRL + V) y cámbiale la fuente por “Font Awesome”.

blob.jpg2574×1446 198 KB

Ahora ya podrás cambiar color, escalarla, etc…

Así, podrás hacer tu nuevo diseño y luego exportarlo como un PNG y hacer el reemplazo de los elementos que desees en la barra de control de Panotour.

##Ejemplos

Algunos ejemplos de cómo he utilizado Font Awesome en visitas virtuales:

En la pantalla de entrada de la visita virtual:

blob.jpg2454×1472 399 KB

En la barra de controles, en los hotspots, etc…

blob.jpg2274×1418 509 KB

Mirar ejemplo.

Bien, espero les haya gustado este recurso y les sea de utilidad, si es así… dejen un like, se les agradece. Pero se agradece más que lo compartan en sus redes sociales en 3, 2, 1…

¡Hasta la próxima.!

34 Me gusta
2

Gracias @Mario-Carvajal tengo que estudiarlo con detenimiento!

1 me gusta
3

Muchas gracias, Mario :slight_smile:
Había usado esas fuentes desde que las descubrí por casualidad en una de mis páginas donde me di cuenta que los iconos de enlace a las redes sociales estaban hechos con esa tipografía.
El caso es que la he venido usando pero mal :slight_smile: Una vez localizado el icono que me interesaba, tomaba nota de su nombre (por ejemplo fa-facebook-square) y buscaba la imagen Google.
Este sistema que tú propones es el correcto porque, como dices, así la imagen es vectorial.

Captura de pantalla 2016-12-30 a las 11.59.19.png1002×858 38.9 KB

Thank you!

3 Me gusta
4

Muy bueno, nunca lo había usado así. Muchas gracias.

5

Hola, este set de iconos están muy bien. Yo los he utilizado alguna vez para algún trabajo web que he hecho.
Para utilizarlos en Photoshop hay aún una opción más sencilla, o mejor dicho más directa, que la clásica de copiar y pegar.

La gente de Creative Do se han currado un panel de extensión que se integra directamente en Photoshop y te salen todos los iconos mediante un panel en el mismo Photoshop. Sólo tienes que seleccionar el que quieres en el panel y aparece en el documento de Photoshop que tengas abierto. Una vez ahí ya puedes manipularlo como quieras. Además, como los pone en formato vectorial, se pueden escalar y cambiar todo sabiendo que no perderán calidad.

La extensión es gratís y la instalación sencillísima. Funciona perfectamente con la última versión de Photoshop y es compatible con varias de las versiones anteriores.

Os dejo la dirección desde donde la podéis descargar.
La descarga incluye la extensión para Mac y PC y PDF con un enlace a las instrucciones de instalación.

Un saludo

14 Me gusta
6

Saludos IÑaki , serias tan amable de indicar en que parte puedo ubicar las fuentes una vez instaladas en photoshop .

Mil gracias

1 me gusta
7

Wow @Dig gracias Iñaki por el dato!!! ya lo instalé y funciona a la perfección!!!

1 me gusta
8

Hola @mariscalmodel pues lo acabo de instalar y cuando abres psd, vas a ventana, extensiones y te da la opción de fontawesomeps y listo!!!

Captura de pantalla 2016-12-31 a las 10.18.48 a.m..png1174×202 52 KB

2 Me gusta
9

Listo , ya lo vi todo .

Gracias mil por el mensaje y por compartir la informacion

Saludos

2 Me gusta
10

Muy bien!!

Esta muy bueno el dato.

Saludos

2 Me gusta
11

gracias @Dig, descargado.

saludos

1 me gusta
12

Absolutamente útil Mario. Gracias.

3 Me gusta
13

Una excelente herramienta @Mario-Carvajal. Gracias por compartir!

14

Genial Mario. Muchas gracias :slightly_smiling_face::slightly_smiling_face::slightly_smiling_face:

15

No se si estoy haciendo algo mal.
Cuando copio el ícono de la página http://fontawesome.io/cheatsheet/
y lo pego en el documento, tiene mucha mas calidad que cuando lo señalo y lo
abro de la pestaña extensiones de photoshop. este se pixela al primer golpe de zoom.
Por favor me indican si estoy haciendo algo como no se debe

16

Hola @ramirox33 Los procedimientos son diferentes en función de que método utilizas.
Cuando utilizas la extensión y agregas un icono, este aparece pequeño pero lo que tienes que hacer no es hacer zoom, sino seleccionar la herramienta escalado de PS (Crtl+T) y escalarlo al tamaño que quieras. Cuando lo tengas al tamaño que desees pulsa Intro para confirmar y verás que el icono tiene máxima calidad. Puedes escarlarlo todo lo que quieras, ya que está en formato vectorial. Es más, al estar en formato vectorial puedes incluso modificarlo a tu gusto con las herramientas vectoriales de PS sin miedo a perder calidad. Puedes cambiarle el color o hacer las modificaciones que quieras que quieras, que siempre mantendrá la máxima calidad.
Espero que ahora te quede más claro.

Un saludo

4 Me gusta
17

Ya, ese era ni error, gracias por hacerme claridad

1 me gusta
18

muchas gracias , excelentes

19

@Dig muy bueno lo pruebo muchas gracias. Ya usaba estas fuentes gracias a @Mario-Carvajal

2 Me gusta
20

Probandooooo :smiley: