Gráficos vectoriales SVG: ilustrar y animar con código

Un curso de Javier Usobiaga Ferrer
Diseñador web. Barcelona, España.
En Domestika desde 10/04/2015
, Diseñador web

Aprende a trabajar con ilustraciones vectoriales en tus páginas web, de la línea a la animación interactiva

  • 97% Valoraciones positivas (91)
  • 1904 alumnos
  • Audio: Español
  • Español, Inglés, Portugués, Alemán

Aprende a trabajar con ilustraciones vectoriales en tus páginas web, de la línea a la animación interactiva


  • 97% Valoraciones positivas (91)
  • 1904 alumnos
  • Online y a tu ritmo
  • Audio: Español
  • Nivel: Iniciación
  • 32 Lecciones (2h 2m)
  • Disponible desde la app
  • Español, Inglés, Portugués, Alemán
  • Acceso ilimitado


Javier Usobiaga –Diseñador Web y cofundador junto a Marta Armada del estudio Swwweet– te enseñará a sacarle el máximo partido al formato SVG (Scalable Vector Graphics) un tipo de archivo vectorial para uso en navegadores que surge como alternativa a los archivos JPG, PNG y GIF y que se caracteriza por ser escalable, interactivo y responsive. Descubrirás sus efectos, filtros y animaciones y lograrás crear ilustraciones y piezas animadas con código HTML, CSS y JavasScript.

Javier también imparte en Domestika el curso "Introducción al Desarrollo Web Responsive con HTML y CSS", en el que podrás aprender los fundamentos del Desarrollo Web Frontend, conocimientos que te vendrán muy bien como base para aprovechar al máximo este curso de gráficos vectoriales SVG.

¿Qué incluye este curso?

Tabla de contenidos del curso

  • U1
    U1. Introducción
  • U2
    U2. SVG Básico
  • U3
    U3. Herramientas y optimización
  • U4
    U4. Incorporando SVG a la web
  • U5
    U5. Efectos en SVG
  • U6
    U6. Animación en SVG
  • U7
    U7. Interacción y animación avanzada
  • PF
    PF Proyecto final
Ver detalle

Comenzarás conociendo el trabajo y las influencias en el mundo del SVG de Javier Usobiaga.

A continuación entenderás cómo funciona el formato SVG en su forma más básica para poder alterarlo y optimizarlo. Para ello, empezarás escribiendo un gráfico básico sin editores visuales solo con el editor de código, descubrirás cómo aplicar estilos a través de atributos y CSS, sabrás cómo funcionan las etiquetas de línea, polilínea y polígono y las etiquetas de trazo que permiten crear infinidad de curvas, rectas y puntos. También verás los atributos viewbox que permiten realizar ventanas virtuales (delimitar la parte visible de un gráfico y hacer zoom) y las etiquetas de texto.

Una vez que conozcas las herramientas básicas será el momento de aprender a usar otras herramientas de optimización como los editores vectoriales y herramientas de código con las que lograrás agrupar, definir y reutilizar elementos SVG con el fin de ahorrarte muchas líneas de código.

La siguiente fase será incorporar SVG a la web, para ello, Javier te explicará formas de cargar un SVG (imagen de contenido, imagen de fondo, con JavaScript…), su aplicación respecto a los sistemas de iconos, su papel en la web responsive, consejos para mejorar la experiencia en lectores de pantalla y cómo optimizar el formato SVG en todos los navegadores.

Seguidamente descubrirás los efectos en SVG (transformaciones, degradados, patrones, máscaras y filtros) y los tipos de animación (con CSS, de secuencia, de dibujado e interactiva) incluyendo algunas animaciones avanzadas como las realizadas con JavasScript, las aplicadas a checkbox animados, las mutaciones o morphings y las animaciones a lo largo de un trazo.

¿Cuál es el proyecto del curso?

Realizarás una ilustración con elementos vectoriales animados. El tema es libre y puedes hacer un proyecto tan simple o complejo como quieras poniendo en prácticas las herramientas que has visto durante el curso.

Proyectos de alumnos del curso

¿A quién está dirigido?

A programadores, diseñadores, ilustradores y cualquier persona que tenga interés por el diseño y curiosidad a la hora de desarrollar nuevos proyectos con HTML y CSS.

Requisitos

Se requieren conocimientos básicos previos de HTML y CSS.

Respecto a los materiales y herramientas que necesitarás para realizar el curso, deberás contar con un ordenador, un editor de código y un editor de gráficos vectoriales (como Illustrator, Sketch, Inkscape o similares).


Valoraciones

1904 Alumnos
91 Valoraciones
97% Valoraciones positivas

Javier Usobiaga Ferrer

ProfesorPro
Diseñador web

Javier Usobiaga es Diseñador Web desde hace 10 años y cofundador junto a Marta Armada del estudio Swwweet, especializado en diseñar webs responsive desde la concepción inicial hasta el desarrollo front-end.

También disfruta mucho en su faceta como profesor de Diseño Web en workshops y escuelas de renombre como Elisava, IDEP.

Usobiaga entiende la web en su globalidad, no solo lo bonita que puede quedar en la pantalla del ordenador, sino su usabilidad en diferentes dispositivos y circunstancias.

En sus palabras “creo que tan importante como lo estética es lo rápido que cargue o lo bien que responda, y me parece que en nuestra industria nos olvidamos a menudo de eso”.


Contenidos

  • U1

    Introducción

    • Presentación
    • Influencias
  • U2

    SVG Básico

    • Etiquetas y atributos básicos
    • Estilos en SVG
    • Etiquetas de línea, polilínea y polígono
    • Etiqueta de trazo (path)
    • El atributo viewbox
    • Etiquetas de texto
  • U3

    Herramientas y optimización

    • Editores vectoriales y exportación
    • Organización de SVG
    • Optimización de SVG
  • U4

    Incorporando SVG a la web

    • Formas de cargar un SVG en la web
    • Sistemas de iconos
    • SVG responsive
    • Accesibilidad en SVG
    • Soporte en navegadores
  • U5

    Efectos en SVG

    • Transformaciones
    • Degradados
    • Patrones
    • Máscaras y clipping paths
    • Filtros
  • U6

    Animación en SVG

    • Tipos de animación en SVG
    • Animación con CSS
    • Animación de secuencia
    • Animación de dibujado
    • Animación interactiva
  • U7

    Interacción y animación avanzada

    • Animación con JavaScript
    • Librerías de JavaScript para animación
    • Checkbox animado
    • Mutación (morphing) en SVG
    • Animación a lo largo de un trazo
    • Inspiración
  • PF

    Proyecto final

    • Gráficos vectoriales SVG: ilustrar y animar con código

Así son los cursos de Domestika

  • Aprende a tu ritmo

    Disfruta de los cursos desde casa, sin horarios ni entregas. Tú marcas tu propia agenda.

  • De la mano del profesor

    Aprende técnicas y métodos de gran valor explicados por los grandes expertos del sector creativo.

  • Profesores expertos

    Cada profesor imparte solo lo que mejor sabe hacer, asegurando transmitir la pasión y la excelencia en cada lección.

  • Certificado Pro

    Acredita tu asistencia al curso con un certificado firmado por el profesor. Consíguelo con tu suscripción a Domestika PRO.

  • En primera fila

    Vídeos de máxima calidad para que no pierdas detalle. Y como el acceso es ilimitado, puedes verlos una y otra vez.

  • Comparte conocimiento

    Expón tus dudas, pide feedback, aporta soluciones. Comparte el aprendizaje con el resto de los alumnos de la comunidad.

  • Comunidad creativa

    Más de 1M creativos y creciendo. Domestika es el entorno ideal para compartir y aprender lo que te apasiona.

  • Cursos producidos profesionalmente

    Seleccionamos a los mejores creativos y un equipo profesional produce el curso con ellos. El resultado: sentirás que trabajas mano a mano con los mejores.


Preguntas frecuentes

  • Los cursos de Domestika son unas clases online que te permiten aprender una serie de herramientas y habilidades para realizar un proyecto concreto. Cada paso del proyecto combina vídeos y textos junto a materiales didácticos complementarios. Los cursos también te ofrecen la oportunidad de compartir tus propios proyectos con otros usuarios y con el profesor, creando así una comunidad en torno al curso.

  • La modalidad de los cursos es 100% online, por tanto una vez estén publicados, los cursos empiezan y acaban cuando tú quieras. Tú marcas el ritmo de la clase. Puedes volver a ver lo que te interese, pasar lo que ya te sepas, hacer preguntas, resolver dudas, compartir tus proyectos y mucho más.

  • Los cursos se dividen en diferentes Unidades, cada una de ellas incluyen lecciones, textos explicativos, tareas y prácticas para llevar a cabo tu proyecto paso a paso, recursos y documentos adjuntos complementarios. También tendrás acceso a un Foro exclusivo donde puedes interactuar con todos los alumnos del curso y el profesor, así como compartir tus trabajos y el proyecto que realices, creándose de esta manera una comunidad en torno al curso.

  • Puedes canjear un curso que te han regalado accediendo a la página de canjeo donde podrás introducir el código de regalo que te han proporcionado.

Gráficos vectoriales SVG: ilustrar y animar con código. Un curso de Tecnología de Javier Usobiaga Ferrer

Gráficos vectoriales SVG: ilustrar y animar con código

Un curso de Javier Usobiaga Ferrer
Diseñador web. Barcelona, España.
En Domestika desde 10/04/2015
  • 97% Valoraciones positivas (91)
  • 1904 alumnos