SVG-vectorafbeeldingen: illustreren en animeren met code
Een cursus van Javier Usobiaga Ferrer , webdesigner
Lid geworden in april van 2015
Leer werken met vectorillustraties op webpagina's, van lijn tot interactieve animatie
Lid geworden in april van 2015
If you've ever wanted to combine the technical power of web programming and the creative freedom of graphic design, this course is for you. Javier Usobiaga, web designer and cofounder of Swwweet studio, teaches you how to get the most out of scalable vector graphics (SVG), an interactive and responsive vector file format designed for web browsers as an alternative to JPG, PNG, and GIF file types. In this online course, discover the effects, filters, and animations you can use to create your own interactive illustrations with HTML, CSS, and JavaScript code.
Javier also teaches Introduction to Responsive Web Development with HTML and CSS on Domestika, a course that walks you through the fundamentals of front-end web development and helps you build the foundations you need for this course on SVG.
Wat leer je tijdens deze online cursus?
32 lessen & 28 aanvullende bronnen
- 98% positieve beoordelingen (271)
- 9.099 studenten
- 32 lessen (2u 2m)
- 28 aanvullende bronnen (6 bestanden)
- Online en in je eigen tempo
- Beschikbaar in de app
- Audio: Spaans
- Spaans · Engels · Portugees
- Niveau: Beginner
- Onbeperkte toegang voor altijd
Aanbevolen software voor deze cursus
Adobe Illustrator
SketchWat is het cursusproject?
Create an illustration with animated vector images. You can choose any theme you like and make your project as simple or as complex as you want; the goal is for you to apply the tools explored throughout the course.
Projecten van studenten van de cursus
Voor wie is deze online cursus bedoeld?
Programmers, designers, illustrators, and anyone who's interested in design and wants to tackle new projects with HTML and CSS.
Vereisten en materialen
You need basic knowledge of HTML and CSS to take this course.
As for materials and tools, you need a computer, a code editor, and a vector-graphics editor like Illustrator, Sketch, Inkscape, or similar software.
Beoordelingen
Javier Usobiaga Ferrer
Een cursus van Javier Usobiaga Ferrer
Javier Usobiaga is een webdesigner en FrontEnd-ontwikkelaar, al meer dan 10 jaar en mede-oprichter samen met Marta Armada van de Swwweet-studio, gespecialiseerd in het ontwerpen van responsieve webs vanaf de eerste conceptie tot de front-end ontwikkeling.
Hij geniet ook van zijn rol als Web Design-leraar in gerenommeerde workshops en scholen zoals Elisava, IDEP.
Usobiaga begrijpt het web in zijn geheel, niet alleen hoe mooi het op het computerscherm kan zijn, maar ook de bruikbaarheid ervan in verschillende apparaten en omstandigheden.
In zijn woorden: "Ik denk dat net zo belangrijk als esthetiek is hoe snel het laadt of hoe goed het reageert, en het lijkt mij dat we dat in onze branche vaak vergeten".
Inhoud
-
U1
Introduction
-
Presentation
-
Influences
-
-
U2
SVG Basic
-
Labels and basic attributes
-
Styles in SVG
-
Line, polyline, and polygon labels
-
Stroke label (path)
-
The viewbox attribute
-
Text tags
-
-
U3
Tools and optimization
-
Vector editors and export
-
Organization of SVG
-
SVG optimization
-
-
U4
Incorporating SVG to the web
-
Ways to load an SVG on the web
-
Icons systems
-
SVG responsive
-
Accessibility in SVG
-
Support in browsers
-
-
U5
Effects in SVG
-
Transformations
-
Gradients
-
Patterns
-
Masks and clipping paths
-
Filters
-
-
U6
Animation in SVG
-
Types of animation in SVG
-
Animation with CSS
-
Sequence animation
-
Drawn animation
-
Interactive animation
-
-
U7
Interaction and advanced animation
-
Animation with JavaScript
-
JavaScript libraries for animation
-
Animated checkbox
-
Mutation (morphing) in SVG
-
Animation along a stroke
-
Inspiration
-
-
EP
Eindproject
-
SVG vector graphics: illustrate and animate with code
-
Wat kan je verwachten van een cursus van Domestika
-
Leer in je eigen tempo
Geniet van thuis leren, zonder lesroosters en in je eigen tempo. Jij beslist wanneer je verder gaat met het volgende onderdeel.
-
Leer met de beste professionals
Leer de meest bruikbare methoden en technieken van de beste professionals in de creatieve industrie.
-
Ontmoet deskundige docenten
Iedere docent brengt kennis met passie over, biedt duidelijke uitleg en een professioneel perspectief bij elke les.
-
Certificaten
PlusAls Plus-lid krijg je voor elke cursus een persoonlijk certificaat, ondertekend door je docent. Deel het in je portfolio, op social media of waar je maar wilt.
-
Zorg dat je op de voorste rij zit
Dankzij de hoge kwaliteit van de video's mis je geen enkel detail. Dankzij de onbeperkte toegang kun je de lessen zo vaak bekijken als nodig is om je vaardigheden te perfectioneren.
-
Deel kennis en ideeën
Stel vragen, krijg feedback en bied oplossingen aan. Deel je leerervaringen met andere studenten in de community die net als jij een passie hebben voor creativiteit.
-
Maak contact met een wereldwijde creatieve community
Deze community heeft miljoenen gebruikers van over de hele wereld, nieuwsgierig en enthousiast om hun creativiteit te verkennen en te uiten.
-
Geef cursussen op een professionele manier
Domestika selecteert zorgvuldig haar docenten en produceert iedere cursus in eigen huis om een uitstekende online leerervaring te garanderen.
Veelgestelde vragen
Cursussen van Domestika zijn online cursussen waarin je een reeks tools en vaardigheden leert om een specifiek project te voltooien. In elke fase van het project worden video's en teksten gecombineerd met aanvullend didactisch materiaal. De cursussen bieden ook de mogelijkheid om je eigen projecten te delen met andere gebruikers en de docent, zodat er een community rond de cursus wordt gecreëerd.
De cursussen zijn 100% online, dus zodra ze gepost zijn, beginnen en eindigen de cursussen wanneer jij dat wilt. Jij bepaalt het tempo van de les. Je kunt opnieuw bekijken wat je belangstelling heeft, overslaan wat je al weet, vragen stellen, twijfels wegnemen, je projecten delen en nog veel meer.
De cursussen zijn onderverdeeld in verschillende onderdelen, elk met lessen, verklarende teksten, taken en praktische oefeningen om je project stap voor stap uit te voeren, aanvullende bijgevoegde bronnen en documenten. Je krijgt ook toegang tot een exclusief forum waar je kunt communiceren met alle studenten van de cursus en de docent, en waar je ook je werk en het project waar je aan werkt kunt delen, om zo een community rond de cursus te creëren.
Je kunt een als cadeau gekregen cursus inwisselen door naar de inwisselpagina te gaan waar je de cadeaucode die je hebt gekregen kunt invoeren.
Adobe Illustrator
Sketch
daad1995
Gostei muito
Vertaling weergeven
Vertaling verbergen
prdpkmark
excellent course for beginners.
Vertaling weergeven
Vertaling verbergen
camilo0024
excelente curso lo recomiento explica muy bien y se entiende todo
Vertaling weergeven
Vertaling verbergen
phoenixbrazil
Excelente curso!! Ótima didática do Instrutor!!! Parabéns!!! Recomendo a todos!!
Vertaling weergeven
Vertaling verbergen
chaparro_fran
(y)
Vertaling weergeven
Vertaling verbergen