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. Porque 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 porque 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. Ya 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. Porque 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 todos 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 en 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.
Estas 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 texto3.- 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 navegadores5.- Efectos en SVG
· Transformaciones
· Degradados
· Patrones
· Máscaras y clipping paths
· Filtros6.- 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
Comparto unos ejemplos que se ven en el curso:
Para que se den una idea del tipo de animación o gráficos que se pueden hacer en SVG.
· Degradados de color en un texto.
· Texto con una foto de relleno.
· Una foto que se desenfoca cuando colocas el puntero sobre ella.
· Una rueda de la fortuna en movimiento.
· Animación del trazado de una firma.
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.
