Te enseñaremos paso a paso a crear una fuente de iconos para que las uses en tus proyectos web

Análisis y aproximación al estado del arte

• Introducción a Diseño de fuente de iconos para web
• Archivos base de Diseño de fuente de iconos para web
• Iconos para la web, usando tipografía
• Iconos para la web como imagen
• Iconos para la web como SVG
• Iconos para la web como fuente de iconos
• Recursos y enlaces de iconos para la web
• Por qué crear nuestra propia fuente de iconos

Teoría de pictogramas e iconos web

• Qué son los pictogramas y los iconos
• Pautas gráficas y tipográficas

Utilizar Adobe Illustrator para crear iconos

• Adobe Illustrator como generador de gráficos vectoriales
• Interfaz y herramientas de Adobe Illustrator
• Metodología de vectorización con Adobe Illustrator

Diseño de iconos para la web

• Definición de retícula como paso previo a nuestro trabajo
• Creación de un icono genérico: usuario
• Creación de un icono de aplicación web: eliminar
• Creación de un icono de marca: red social

Utilizar Glyphs para crear una fuente de iconos

• Introducción a Glyphs
• Interfaz y herramientas de Glyphs
• Extra: diseñar los iconos en Glyphs

Producción de fuente de iconos

• Trabajamos con tipografías: medidas tipográficas
• Importar iconos a Glyphs desde Adobe Illustrator
• Exportar nuestra fuente de iconos terminada
• Extra: ligaduras tipográficas
• Extra: mejorar a fuente semántica

Utilizar las fuentes de iconos en archivos CSS

• Breve introducción a las hojas de estilo CSS
• La regla CSS @font-face
• Incrustar una fuente y utilizarla mediante @font-face
• Utilizar una fuente semántica
• Extra: trabajar con propiedades CSS