Cómo hacer tu propio icono Webfont
En este artículo, voy a examinar la ciencia que hay detrás de crear iconos de IU exitosos antes de enseñarte cómo crear tu propia fuente de íconos incrustados .
Desde diseñar los íconos individuales hasta convertirlos para @font-face Incrustar e incluso otorgar licencias para su distribución, solo utilizaremos software gratuito y servicios en línea. ¿Qué hay sobre eso? No necesitará confiar en ninguno de los conocimientos esotéricos necesarios para hacer tipos de letra alfanuméricos exitosos; solo un ojo para diseñar cosas que pueden parecer muy, muy pequeñas.
En última instancia, debe irse con un proceso para hacer elementos de diseño que se extiende más allá de la fabricación de iconos simples.
Antes de continuar, algo debe decirse acerca de qué es exactamente lo que estamos tratando de achieve al usar iconos en nuestros diseños en primer lugar, y lo que hace que un ícono sea más exitoso que el siguiente. Teoría antes de la aplicación. Para hacer esto, debemos considerar el papel del icono como parte de la semiología.
¿Qué hace un buen ícono?
Semiología , en el sentido más amplio, es el estudio de los sistemas de signos , cómo contribuimos a su formación y mantenimiento, y el impacto que tienen en nuestra comprensión del mundo dentro y fuera de nosotros.
Siempre que considere una parte de su trabajo de diseño desde la perspectiva de lo que significa - lo que le está diciendo a su audiencia o qué conceptos está recordando para ellos - está considerando su diseño como semiótico. Aunque la semiología, como la lingüística, cubre el lenguaje, hay muchas más cosas en un sitio web que "dicen" algo sin palabras, como colores, tipos de letra y las formas que llamamos íconos . Uno debe tener cuidado de que lo que estas cosas dicen tiene una fuerte dimensión cultural. En China , el color rojo puede significar buena fortuna, mientras que, en muchos países occidentales, se usa para denotar peligro.
(Basado en una imagen de ell marrón )
El término "icono" tiene un significado especial en el campo de la semiología. Un ícono es un artefacto que significa algo al parecerse a él. Tome, por ejemplo, un icono de pin de mapa . Como una forma que se asemeja a un pin de mapa "real", puede significarlo. A su vez, el pin del mapa real trae a la mente todo tipo de conceptos significativos . Entre estos se encuentran conceptos abstractos como la ubicación y conceptos menos abstractos, como el mapa al que podría pertenecer el pin.
Algunos de los llamados íconos no son verdaderamente icónicos. El omnipresente ícono RSS , con su punto y dos segmentos concéntricos, no se parece más a la sindicación que las palabras "Really Simple Syndication". La configuración de las formas que constituyen el icono de RSS significa RSS por convención solo; hemos acordado que esto es para lo que son. Un icono RSS se llama más correctamente un símbolo RSS .
Por ahora, espero que hayamos establecido que los iconos web exitosos deben cumplir con uno o ambos de los dos criterios siguientes:
- Un gran parecido con una cosa real, por ejemplo, un icono de impresión que se asemeja a una impresora real
- Establecimiento y, por lo tanto, familiaridad como un símbolo reconocible dentro del sistema de signos
Fuentes de icono ganando popularidad
Los íconos han sido considerados por mucho tiempo como una buena forma de mejorar los diseños de UI porque proporcionan una taquigrafía visual que ayuda a la comprensión de un mensaje que, por lo demás, es puramente textual. Las hojas de imágenes de los iconos circulan por toda la comunidad de diseño web como el contrabando, cada conjunto promete hacer que su diseño sea más brillante, más atractivo y más fácil de cliquear que el anterior.
En comparación con las imágenes, la idea de utilizar fuentes incrustadas para iconos es una idea relativamente nueva. Sin embargo, es uno que está ganando considerable tracción debido a las muchas ventajas inherentes sobre la imagen (o background-image ) método. yo escribi sobre algunas de estas ventajas en mi pequeño blog a principios de septiembre. Chris Coyier obviamente tenía una idea similar, presentando la idea a un público ( mucho, mucho ) más grande semanas más tarde. Basándome en las dos publicaciones y en otras, he compilado esta completa lista de características:
- Se cambian de tamaño fácilmente sin degradación (porque son esencialmente vectores)
- Volver a almacenar el icono es tan trivial como volver a colorear el texto. Por ejemplo,
color: orangepara un ícono de RSS - Muchos íconos están agrupados en un archivo, lo que requiere solo una solicitud HTTP
- Como señala Chris, son formas que tienen "knockouts" transparentes que funcionan en navegadores tan pronto como IE6 (a diferencia de los PNG alfa)
- Para los iconos que deben aparecer junto al texto, la alineación y el ajuste no son problemas (porque son texto)
- Puede aplicar efectos CSS3 a través de
text-shadowybackground-clip:textque respeta la forma del glifo - A diferencia de SVG, el soporte para navegadores cruzados es fácil de lograr
Problemas
En palabras de Chris, usar fuentes para íconos es una buena idea, te lo digo
. No obstante, el status quo con respecto al uso de fuentes de iconos no es ideal. En primer lugar, la mayoría de las fuentes de calidad disponibles, llamadas cosas como Pictos , Fico , Klepto, Cheetos, Ponyo y Marinero de la luna (Puedo haber obtenido algunos de estos errores), son fuentes pagas. En la práctica, esto significa que realmente hay dos problemas :
- Es posible que tenga que desprenderse del dinero
- Ya sea que tenga que desprenderse del dinero o no, tendrá que aceptar el trabajo sucio de diseño de otra persona
Además de los programas de rastreadores automáticos, supongo que son principalmente los diseñadores web quienes leerán este artículo. Yo mismo soy diseñador y no creo que esté solo porque me molesta la idea de tener que poner en peligro mi propio diseño confiando en la obra de otra persona. Naturalmente, estoy aún menos enamorado de la idea de pagar por el privilegio. Sé qué iconos quiero usar y sé exactamente cómo quiero adaptarlos a mi diseño general. Quiero ese control .
Después de algunas búsquedas, finalmente fui introducido a las posibilidades de Inkscape 's SVG Font Editor . Con un poco de práctica usando Inkscape y la ayuda de un convertidor en línea para transformar mi fuente SVG en TTF, pude hacer "Heydings". Esta fuente ahora está incluida en Lista de Simurai (según lo relacionado por el artículo de Coyier). No estoy tratando de venderle mi fuente (es gratis de todos modos) pero creo que es una buena prueba de concepto :
Hacer iconos glifos con Inkscape
Configurando Inkscape
Comencemos por descargando e instalando Inkscape. También debe usar mi plantilla de inicio de fuente de icono, que se encuentra en la carpeta de recursos de este repositorio de GitHub (más sobre este proyecto GitHub más adelante). Una vez que haya abierto este archivo en su nueva instalación de Inkscape, debe configurar su espacio de trabajo abriendo las siguientes ventanas desde el menú principal:
- OBJECT → FILL AND STROKE
- OBJETO → ALINEAR Y DISTRIBUIR
- TEXT → SVG FONT EDITOR
En el panel del Editor de fuentes SVG, haga clic en "Fuente 1" debajo de "Fuente". Su espacio de trabajo debería verse ahora como esta captura de pantalla:
Vale la pena señalar que base la guía no se encuentra por debajo del límite inferior del lienzo por error: por razones que otros conocen mejor, los iconos deberían sobresalir muy ligeramente del fondo del lienzo si desea que compartan la misma línea base que los tipos de letra adyacentes. He probado esto con Georgia, Arial y varias fuentes web.
Hacer tu primer glifo
Para definir el glifo, haga clic en la pestaña Glifos en el panel del Editor de fuentes SVG , luego haga clic en el botón Agregar Glifo en la parte inferior del panel. No está inmediatamente claro en la primera inspección, pero si haces clic en tu glifo ("Glifo 1"), aparecerá un campo que te permite ingresar el personaje al que deseas asignar tu ícono. Vamos a hacer una forma de estrella simple en primer lugar, así que te recomiendo que ingreses el carácter "s", "S" o "*":
Ahora que hemos definido el carácter correspondiente del glifo, necesitamos hacer el glifo en sí mismo. Como esta vez estamos haciendo una estrella, deberíamos seleccionar la útil herramienta Stars y Polygons de Inkscape desde la barra de herramientas izquierda y dibujar una estrella en el lienzo. Notará que esta herramienta viene con opciones que le permiten cambiar la apariencia de la estrella. En mi ejemplo, he elegido 5 esquinas, una relación de radios de 0.5 y un valor redondeado de 0.1.
Centre la estrella horizontalmente utilizando el panel Alinear y distribuir (que puede estar oculto debajo del Editor de fuentes SVG ) y arrastre la forma hacia abajo para encontrar la línea base. Con la cuadrícula desactivada, el lienzo debería verse más o menos así:
Los glifos en nuestra fuente de iconos son solo formas; formas sin colores, capas o degradados. Entonces, para hacer que nuestra estrella sea un candidato legítimo para nuestra fuente, debemos convertirla de un objeto en una forma basada en ruta. Para hacer esto, seleccione la estrella y elija RUTA → OBJETO A RUTA en el menú principal. Ahora, con la estrella seleccionada, podemos ir a nuestro Editor de fuentes SVG , resaltar el glifo "s" aplicable y presionar el botón Obtener curvas de selección :
Cuando ingrese "s" en el campo Texto de muestra , su estrella ahora debería aparecer como una vista previa, como esta:
Hacer iconos más complejos
Ya ha creado su primer glifo de fuente SVG escalable. Al utilizar las opciones del panel Relleno y Trazo , al editar nodos de ruta y combinar objetos y trazos, podrá hacer diseños de íconos mucho más ambiciosos. No quiero entrar en un tutorial completo de Inkscape porque tenemos mucho más que cubrir, pero seguir estas sencillas reglas te será de gran utilidad:
- Limítese a usar trazos y rellenos negros, aunque solo sea para recordarle que los iconos son solo formas, no gráficos vectoriales complejos. Colorear el icono es posible en el producto final usando CSS.
- Todos los objetos y trazos (líneas) se deben convertir en rutas usando PATH → OBJECT TO PATH o PATH → STROKE TO PATH
- Múltiples objetos y / o trazos utilizados para componer un ícono de glifo deben combinarse juntos usando PATH → COMBINE (o, en algunas circunstancias, PATH → UNION)
- Para cortar formas de formas (como el uso de un cortador de galletas) coloque la forma que creará el "golpe de gracia" sobre la forma principal, seleccione ambas y elija RUTA → DIFERENCIA. Las áreas blancas sobre negro que parecen "knockouts" no serán suficientes, ya que descubrirás cuando toques Obtener curvas de la selección Ver la regla 1.
Preparación de su fuente para incrustación
Imagine que ha creado varios iconos útiles para su fuente repitiendo el método de generación de glifos que acabo de describir y ha guardado el archivo como myicons.svg . Ahora, querrá preparar esta biblioteca de iconos para usar en páginas web.
Convirtiendo el SVG a TTF
La primera medida que debe tomar es convertir el @font-face requisitos. Los servicios en línea que le permiten convertir fuentes entre formatos incluyen http://onlinefontconverter.com/ , http://www.fontconverter.org/ y http://www.font2web.com/ . Mi favorito personal, sin embargo, es http://www.freefontconverter.com/ porque no me ponen en cola y nunca he sabido que me devuelva problemas técnicos.
No te patrocinaré al explicar cómo usar este recurso. El campo de carga de archivos sucesivos, el elemento de selección y el gigantesco botón Convert hablan por sí mismos, de verdad.
Editar la meta información de la fuente
Ahora que tiene el TTF en la mano, le recomiendo que edite los metadatos generados. Renombrar, atribuir y describir la fuente a su gusto la prepara para su instalación, inclusión y distribución . También es una forma de mostrar que la fuente es tu propio trabajo. Los lectores que ejecutan Windows tienen la opción de usar el sonido engañosamente grandioso Editor de propiedades de fuentes de Microsoft o los días libres por x Typograf . Para los usuarios de Apple y Linux, les imploro a los que están mejor informados que a mí que me ayuden en los comentarios.
El editor de propiedades de la fuente torpe pero útil
Nota importante: aunque el Editor de propiedades de fuentes de Microsoft le permite agregar información de autor, descripción e información de licencia, no parece que le permita editar datos básicos como el nombre de la fuente y el nombre de la publicación . Estos campos están deshabilitados. Si está utilizando esta pieza de software en particular, deberá localizar y editar los valores prohibidos en el código SVG antes de la conversión de TTF. Abra el SVG original en su editor de texto favorito (yo uso Notepad ++ ) y edite lo siguiente:
Nombre de la fuente: se encuentra en la etiqueta, font-family atributo
Nombre de Postscript: se encuentra en la etiqueta, id atributo
Descripción: debe agregar una descripción (autor, licencia, etc.) en la etiqueta. Tenga en cuenta que esto no es equivalente al texto descriptivo TTF y no se conservará a través de la conversión; tendrá que agregar la descripción TTF por separado.
Hacer la fuente incrustable
Una vez que haya instalado el TTF en su sistema local y lo haya previsualizado un poco para asegurarse de que nada haya salido mal, es hora de ejecutarlo a través de Font Squirrel. @ font-face generator . Para hacer que el código emitido sea lo más eficiente y efectivo posible, hay algunas opciones que vale la pena observar en el modo experto del generador:
Subconjunto: la opción de subconjunto le permite incluir solo los caracteres que ha delegado, reduciendo el tamaño del archivo.
Eliminar interletraje: sus íconos aparecerán casi siempre en forma aislada, por lo que no es necesario el interletraje (información adicional sobre la proximidad de los caracteres entre sí). Esto, supuestamente, también reducirá el tamaño del archivo.
WebOnly ™ : si eres evangélico sobre las personas que usan tu fuente como se pretendía, y no volviendo a hacer imágenes de los glifos en Photoshonk - puedes seleccionar esta opción. También puede adaptarse mejor a su plan de licencia. Cubriré las licencias ahora.
Distribuyendo tu fuente
Si está interesado en liberar su fuente, se considera una buena práctica darle una licencia. Muchos sitios web de fuentes no llevarán su fuente sin una. Como usamos software de código abierto para hacer íconos, es apropiado que los distribuyamos como tales.
Hay muchas opciones de licencia disponibles e investigarlas a veces es desconcertante. los Licencia pública general de GNU es perfectamente aceptable, pero es posible que desee considerar el Licencia de fuente abierta SIL . La principal ventaja de esta licencia es la provisión de un nombre de fuente reservado : a otros diseñadores se les permite modificar su fuente, siempre que lo nombren de manera diferente. En la práctica, esto significa que los crímenes contra el diseño de iconos no pueden llevarse a cabo "a tu nombre".
En el caso de cualquiera de las licencias, debe incluir una versión en un archivo de texto, así como insertar el aviso de copyright y un enlace a la URL completa de la licencia en el meta de la fuente. Visite las respectivas páginas de licencias (vinculadas arriba) para obtener instrucciones más específicas.
El final del spriting de CSS
¿Por qué parar a hacer iconos genéricos usando fuentes SVG? Con la capacidad de hacer íconos viene la capacidad de hacer más formas específicas de sitio, elementos de marca y decoraciones. Me gusta Sprites de CSS , todos estos elementos visuales se pueden mantener en un archivo, lo que reduce las llamadas al servidor a una solicitud http única . A diferencia de los sprites de CSS, los elementos se pueden cambiar de tamaño y no dependen de las coordenadas de posición (
background-position valores) para mostrar correctamente. Esto los hace eminentemente más adecuados para un diseño receptivo .
Vamos a pretender que elegí usar una fuente SVG para cubrir algunos elementos básicos de diseño en mi vagamente steampunk -me gusta Blog . Una representación simple de la tabla HTML de los diseños de componentes se vería así:
Una de las mejores cosas de este enfoque es la versatilidad. Por ejemplo, la forma de la segunda rueda dentada de la izquierda podría usarse como un pequeño diseño de punto de bala y una decoración de fondo gigante y abstraída. Colorear es tan fácil como usar color:maroon , pero no es necesario adherirse a los colores planos; se pueden emplear una multitud de efectos CSS3 para agregar textura y tactilidad. Para obtener un poco de inspiración para comenzar, examine esta excelente galería de webfonts mejorados con CSS3 .
Una nota rápida sobre lectores de pantalla
Un problema con el uso de fuentes para mostrar elementos visuales de esta manera es el impacto en lector de pantalla salida. Un visitante del sitio que lee visualmente verá engranajes, flechas y similares, pero un lector de pantalla insistirá en leer los caracteres que designan estos diseños. Para los usos de los elementos de fuente SVG que son decorativos, recomiendo seguir la sugerencia de Coyier: Asignar los vectores al Área de uso privado suplementario de Unicode. Tales personajes no deberían ser leídos por los lectores.
Un icono de colaboración webfuente
Como mi mentor de JavaScript, Rupert , me señaló el otro día, el uso de fuentes SVG para crear conjuntos de iconos ofrece una oportunidad interesante para la colaboración. Verá, el código SVG, que es una forma de XML , está altamente estandarizado y es fácilmente legible para los humanos. Es exactamente el tipo de código fuente adecuado para el desarrollo que utiliza un servicio de "codificación social" como GitHub .
La idea me resonó por sus implicaciones semióticas: si la aprehensibilidad de un ícono está determinada por consenso , entonces seguramente el consenso también debería jugar un papel en su formación. Al colaborar sobre nuestro icono "sistema de letreros", solo deberían surgir los diseños de iconos más arquetípicos. Deberíamos ser capaces de crear vocabularios de iconos que realmente pertenezcan a las comunidades para quienes deberían significar algo.
Creé un repositorio público de GitHub para ayudar a fomentar esta idea. Llamado Fuente de icono de comunidad , la base de código del repositorio no es compleja: una inspección minuciosa del tutorial anterior de Inkscape y una lectura rápida del página de proyecto debería darle todo lo que necesita para involucrarse. Si eres nuevo en GitHub, prueba mirar sus páginas de ayuda o preguntando a su técnico de barrio (eso es lo que hago).