domingo, 11 de septiembre de 2016

Curso Diseño de fuente de iconos para web



Una de las técnicas más populares para incrustar iconos en nuestra web (redes sociales, sitios, carrito de compra...) es a través de una fuente de iconos. Con este método obtenemos dos ventajas claras: 1) todos nuestros iconos serán vectoriales y, por tanto, escalables sin pérdida de calidad; y 2) todos los iconos se encontrarán en un mismo archivo contenedor y, por tanto, reducimos las peticiones al servidor. En este curso aprenderemos a diseñar iconos de manera vectorial, a preparar la fuente con los mismos de la manera correcta y, por último, a utilizarla como webfont en nuestra página web.

Análisis y aproximación al estado del arte
Antes de comenzar a trabajar debemos comprender en qué punto nos encontramos para atacar este curso con las máximas garantías, por ello vamos a ver qué son los iconos web y qué formatos existen para entender las ventajas de hacer nuestra propia fuente de iconos.
Introducción a Diseño de fuente de iconos para web   01:19
Archivos base de Diseño de fuente de iconos para web   01:05
Iconos para la web, usando tipografía   04:24
Iconos para la web como imagen   03:29
Iconos para la web como SVG   02:32
Iconos para la web como fuente de iconos   06:41
Recursos y enlaces de iconos para la web   05:27
Por qué crear nuestra propia fuente de iconos   02:39

Teoría de pictogramas e iconos web
Vamos a ver la teoría que se esconde detrás de pictogramas e iconos web definiendo primeramente ambos conceptos para luego profundizar en las pautas gráficas y tipográficas que deberemos seguir a la hora de diseñarlos.
Qué son los pictogramas y los iconos   02:32
Pautas gráficas y tipográficas   04:28

Utilizar Adobe Illustrator para crear iconos
Adobe Illustrator es un programa de edición vectorial con el que podemos generar gráficos vectoriales y, en este caso, iconos. Vamos a ver cómo es la interfaz de este programa, las herramientas de las que dispone y la metodología de vectorización que vamos a seguir.
Adobe Illustrator como generador de gráficos vectoriales   04:24
Interfaz y herramientas de Adobe Illustrator   07:36
Metodología de vectorización con Adobe Illustrator   07:58

Diseño de iconos para la web
Ha llegado el momento de comenzar a trabajar en nuestra colección de iconos, y vamos a hacerlo a partir de una retícula base que nos ayudará a diseñar tres iconos distintos: uno genérico, otro para una aplicación web y un último de una marca.
Definición de retícula como paso previo a nuestro trabajo   04:51
Creación de un icono genérico: usuario   03:51
Creación de un icono de aplicación web: eliminar   04:04
Creación de un icono de marca: red social   05:04

Utilizar Glyphs para crear una fuente de iconos
Una vez que tenemos diseñados nuestros iconos, deberemos traspasarlos a un programa de edición de fuentes tipográficas. En este curso vamos a hacerlo a través de Glyphs, así que primero vamos a ver cómo es este programa y cómo podemos trabajar con él.
Introducción a Glyphs   02:35
Interfaz y herramientas de Glyphs   08:15
Extra: diseñar los iconos en Glyphs   07:43

Producción de fuente de iconos
Ahora sí llega lo interesante: vamos a producir nuestra propia fuente de iconos que, posteriormente, utilizaremos en nuestro sitio web. Vamos a hacerlo desde Glyphs importando los iconos vectoriales y generando una fuente tipográfica.
Trabajamos con tipografías: medidas tipográficas   07:49
Importar iconos a Glyphs desde Adobe Illustrator   08:19
Exportar nuestra fuente de iconos terminada   08:07
Extra: ligaduras tipográficas   04:33
Extra: mejorar a fuente semántica   06:38

Utilizar las fuentes de iconos en archivos CSS
Una vez exportadas nuestras fuentes de iconos, llega el momento de cargarlas correctamente en nuestro archivo CSS para, posteriormente, hacer uso de ellas y de todas sus propiedades en nuestra página HTML. Veamos cómo hacerlo.
Breve introducción a las hojas de estilo CSS   02:48
La regla CSS @font-face   03:22
Incrustar una fuente y utilizarla mediante @font-face   07:38
Utilizar una fuente semántica   05:45
Extra: trabajar con propiedades CSS   03:00
Resumen final de Diseño de fuente de iconos para web   01:16

TRAILER


IMAGENES




DATOS TECNICOS

Formato: .MP4
Resolución: 1280x720p
Tamaño: 329.4 MB
Idioma: Español
Formadores: Pedro Arilla
Contenido: 31 Videos
Duración: 2:30 horas
Archivos Base: Si incluye
Software: Illustrator, Illustrator CC, Glyphs, Glyphs 2
Fecha de publicación: 10-ago-2016
Empresa: Video2Brain

ENLACE DE DESCARGA


CONTRASEÑA: discoduroweb

0 comentarios

Publicar un comentario

¡Tu comentario es importante para mantener el blog!

Si quieres insertar una imagen usa este código:
[img]URL de la imagen[/img]

Si quieres insertar un video de YouTube o Vimeo usa este código:
[video]URL del video[/video]

No incluyas material para adultos, ni vulgar u ofensivo; tampoco contenido con odio, racismo o discriminación, de lo contrario tu comentario será eliminado.