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 escalable, 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 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 tiempo en cargar y consumirán menos recursos.
Ventajas y desventajas del curso “Gráficos vectoriales SVG: ilustrar y animar con código”
| Ventajas | Desventajas |
| Profesor del área. Javier Usobiaga es diseñador web y cofundador del estudio Swwweet, así que enseña SVG desde la práctica en proyectos web reales. | Aunque está marcado como nivel de iniciación, trabajas con código (HTML, CSS y JavaScript). Si nunca has visto código, puede costarte al principio. Esto lo deduzco del temario, ningún alumno lo menciona como problema. |
| 98% de valoraciones positivas, con 273 opiniones y más de 9,400 estudiantes. Una alumna principiante comenta que la explicación no le pareció complicada. | Es un curso de 2017. Las bases de SVG cambian poco, pero los detalles de soporte en navegadores y herramientas pueden haberse movido desde entonces. |
| Temario amplio para 2 horas: 32 lecciones en 7 unidades, desde etiquetas básicas hasta animación e interacción avanzada. | Lecciones muy cortas. 32 lecciones en poco más de 2 horas dan un promedio de unos 4 minutos por lección, así que algunos temas se ven de forma rápida. |
| Mucho material extra: 28 recursos adicionales (6 archivos), bastante más que el promedio de otros cursos de Domestika. | Solo cubre SVG. No enseña Illustrator ni Sketch a fondo, solo cómo exportar desde ahí. Si no sabes usar un editor vectorial, necesitas aprenderlo aparte. |
| Cubre temas que muchos cursos omiten: optimización de archivos, accesibilidad en SVG, SVG responsive y sistemas de iconos. | Proyecto final enfocado en web. Si tu interés es ilustración vectorial para impresión, la parte de animación y código no te va a servir de mucho. |
| Audio en varios idiomas (español, inglés, francés, italiano, portugués y turco) y acceso ilimitado para siempre. | Sin acompañamiento en vivo. Como en todos los cursos de Domestika, las dudas se resuelven en el foro. |
¿Para quién sí y para quién no es este curso?
Este curso sí es para ti si: eres diseñador gráfico o web y quieres que tus ilustraciones se vean nítidas en cualquier pantalla, con archivos ligeros. También es para ti si quieres animar tus ilustraciones directamente en la página, sin depender de GIFs ni videos. Y si ya sabes algo de HTML y CSS, aunque sea poquito, y quieres dar el siguiente paso hacia la animación con código.
Este curso no es para ti si: buscas hacer ilustración vectorial para imprimir, porque el enfoque es la web. Tampoco es para ti si nunca has visto una línea de código y no tienes ganas de aprender lo básico, ya que tendrás que ir y venir entre el editor y las lecciones. Y si ya dominas SVG y animación con CSS o JavaScript, es probable que el curso se quede en un nivel que ya conoces.
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 necesitas 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 cómo 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 las cuales 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:
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.
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.
