Curso Diseño de fuente de iconos para web Descarga Gratis

CURS-09

Curso Diseño de fuente de iconos para web Descarga Gratis

Datos técnicos:Formato:MP4/ Resolución: 1280x720p/ Tamaño: 351 MB/ Idioma: Español/ Contenido: 31 Videos/ Duración: 2:30 horas/ Archivos Base: Si incluye/ Software: Illustrator, Illustrator CC, Glyphs, Glyphs 2

¿Te gusto este articulo? Compartelo con tus amigos y familiares

Descripcion


Información de: Diseño de fuente de iconos para web
Diseño de fuente de iconos para web. Crea tu propia fuente de iconos y aprende a utilizarla en 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

Ver Intro


Totalmente libre de virus y software malicioso, así que no esperes más en descargartelo ahora.

No olvides darnos una opinion acerca del programa, para mejorar el contenido.

Zona de descargas



Contraseña/Password: www.intarcesoft.com.ve

Archivos Base


Web del Autor


Pagina Principal

Si te gusta o te ayuda este artículo. Apoya a los desarrolladores comprando este material.

Grado 
27/10/2016

Excelente

Buen material que explica el Diseño de fuente de iconos para web

Escribe tu comentario

Escribe tu opinión

Curso Diseño de fuente de iconos para web Descarga Gratis

Curso Diseño de fuente de iconos para web Descarga Gratis

Curso Diseño de fuente de iconos para web Descarga Gratis

Datos técnicos:Formato:MP4/ Resolución: 1280x720p/ Tamaño: 351 MB/ Idioma: Español/ Contenido: 31 Videos/ Duración: 2:30 horas/ Archivos Base: Si incluye/ Software: Illustrator, Illustrator CC, Glyphs, Glyphs 2

¿Te gusto este articulo? Compartelo con tus amigos y familiares

Haz una pregunta

No se requiere registro

Si luego de leer nuestro articulo aun tiene dudas, puede hacer su pregunta utilizando el siguiente formulario.

(Opcional)
*(Requerido para ser notificado cuando la respuesta este disponible)

Si el enlace de descarga redirige a otro producto que no es el descrito en el artículo o está roto, reportarlo usando nuestro formulario de reporte

MásArtículos