Aprender a ilustrar y animar con código, gráficos vectoriales SVG

curso para aprender a trabajar con archivos vectoriales SVG


Un curso con el cual puedes aprender a hacer ilustraciones vectoriales en formato SVG (Scalable Vector Graphics) y con ellas, hacer animaciones, utilizando únicamente código. Estas animaciones o ilustraciones, las puedes utilizar en páginas web, reemplazando los formatos JPG, PNG o GIF.


El formato SVG es mejor que los formatos gráficos tradicionales utilizados en la web. Por que el formato vectorial SVG, se caracteriza por ser escalaba, iterativo y responsive. Además de que al ser vectorial, los gráficos se verán bien en cualquier tamaño de pantalla.


Y por que estos archivos pueden a llegar a pesar menos kilobytes. Lo que es bueno tanto para los visitantes, como para los dueños de las páginas. Por que las páginas tardarán menos tiempos en cargar y consumirán menos recursos.





Curso para aprender a hacer ilustraciones y animaciones SVG con códigos



El curso es impartido por Javier Usobiaga. Él es un diseñador web y cofundador de un estudio que lleva por nombre Swwweet. Al principio del curso, yo pensaba que sería complicado entender todos los términos. Por que yo no estoy acostumbrado a trabajar con códigos.


Lo único que necesitar para tomar el curso para aprender a ilustrar y animar gráficos vectoriales SVG, es una computadora y un programa donde se puede trabajar con código. En el curso se utiliza la página codepen.io Es una plataforma en donde puedes escribir código y ver en tiempo real, el resultado de ese código.


La manera en que explica Javier todo los contenidos, hace que el curso, pueda ser tomado por un diseñador gráfico o un diseñador web, sin mucha experiencia. Todos los ejemplos que se ven el las lecciones, se pueden consultar o descargar. Para ver como están hechos, inclusive se pueden editar y ver en tiempo real, directamente en el navegador.


El curso tiene una duración de poco más de dos horas. Está dividido en 32 lecciones. Las cuales puedes ir tomando a tu tiempo. Cada que tengas un rato libre o puedes tomar el curso de una sola vez.



Estás son las unidades en el cual está dividido el curso:



1.- Introducción
· Presentación — Aquí Javier Usobiaga habla un poco sobre su experiencia laboral.
· Influencias — Algunos libros y páginas relacionadas con temas de SVG.

2.- SVG Básico
· Etiquetas y atributos básicos — Aquí se comienza a escribir con código.
· Estilos en SVG
· Etiquetas de línea, polilínea y polígono
· Etiqueta de trazo (path)
· El atributo viewbox
· Etiqueta de texto

3.- Herramientas y optimización
· Editores vectoriales y exportación — Te enseñan a exportar vectores en Illustrator.
· Organización de SVG
· Optimización de SVG — Para que tus archivos y códigos pesen menos kilobytes.

4.- Incorporación de SVG a la web
· Formas de cargar un SVG en la web — Mediante códigos o por archivos.
· Sistemas de iconos
· SVG responsive — Para que tus gráficos se vean bien en dispositivos móviles.
· Accesibilidad en SVG
· Soporte en navegadores

5.- Efectos en SVG
· Transformaciones
· Degradados
· Patrones
· Máscaras y clipping paths
· Filtros

6.- Animaciones en SVG
· Tipos de animaciones en SVG
· Animaciones con CSS
· Animaciones de secuencia
· Animación de efecto dibujo — El gráfico se dibuja poco a poco.
· Animación interactiva — Efectos cuando pasas el puntero del ratón sobre el gráfico.

7.- Interacción y animación avanzada
· Animación con JavaScript
· Librerías de JavaScript para animación
· Checkbox animado
· Mutación en SVG
· Animación a lo largo de un trazo
· Inspiración





curso para aprender a trabajar con archivos vectoriales SVG



Para que se den una idea del tipo de animación o gráficos que se pueden hacer en SVG.



Comparto unos ejemplos que se ven en el curso:




Degradados de color en un texto.


Texto con una foto de relleno.


Una foto que se desenfoca cuando colocas el puntero sobre ella.


Animación de una estrella.


Una rueda de la fortuna en movimiento.


Animación con secuencias.


Animación del trazado de una firma.


Animaciones de iconos.


Y esta animación más avanzada de una ilustración en donde el agua tiene efecto de movimiento.


Acá dejo la dirección para que vean todos los contenidos del curso para aprender a ilustrar y animar con código, gráficos vectoriales SVG.