SVG-Vektorgrafiken: Mit Code veranschaulichen und animieren
Ein Kurs von Javier Usobiaga Ferrer , Webdesigner
Erfahren Sie, wie Sie mit Vektorillustrationen auf Ihren Webseiten arbeiten, von der Linie bis zur interaktiven Animation

Erfahren Sie, wie Sie mit Vektorillustrationen auf Ihren Webseiten arbeiten, von der Linie bis zur interaktiven Animation
Javier Usobiaga - Webdesigner und Mitbegründer von Marta Armada vom Swwweet-Studio - zeigt Ihnen, wie Sie das SVG-Format (Scalable Vector Graphics) optimal nutzen können, eine Art Vektordatei zur Verwendung in Browsern, die als Alternative zu JPG, PNG und GIF und zeichnet sich durch Skalierbarkeit, Interaktivität und Reaktionsfähigkeit aus. Sie werden die Effekte, Filter und Animationen entdecken und Illustrationen und animierte Teile mit HTML-, CSS- und JavasScript-Code erstellen können.
Javier auch im Kurs erlernten Domestika „Einführung in die Responsive Web - Entwicklung mit HTML und CSS " , wo Sie die Grundlagen der Frontend-Webentwicklung erlernen können, Kenntnisse, die als Grundlage dienen, um das Beste aus diesem SVG-Vektorgrafikkurs herauszuholen.
Was lernst du in diesem Onlinekurs?
32 Lektionen & 28 Downloads
- 98% positive Bewertungen (270)
- 9,063 Lernende
- 32 Lektionen (2 Stdn. 2 Min.)
- 28 Zusatzmaterialien (6 Dateien)
- Online und in deinem Tempo
- Verfügbar via App
- Audiosprache: Spanisch
- Spanisch · Englisch · Portugiesisch
- Niveau: Anfänger
- Dauerhaft unbegrenzter Zugang
Was ist das Kursprojekt?
Sie erstellen eine Illustration mit animierten Vektorelementen. Das Thema ist kostenlos und Sie können ein Projekt so einfach oder komplex gestalten, wie Sie möchten, indem Sie die Werkzeuge, die Sie während des Kurses gesehen haben, in die Praxis umsetzen.

Projekte von Kursteilnehmenden
An wen richtet sich dieser Onlinekurs?
Für Programmierer, Designer, Illustratoren und alle, die Interesse an Design und Neugier bei der Entwicklung neuer Projekte mit HTML und CSS haben.
Anforderungen und benötigte Materialien
Vorkenntnisse in HTML und CSS sind erforderlich.
In Bezug auf die Materialien und Werkzeuge, die Sie für den Abschluss des Kurses benötigen, benötigen Sie einen Computer, einen Code-Editor und einen Vektorgrafik-Editor (z. B. Illustrator, Sketch, Inkscape oder ähnliches).

Bewertungen

Javier Usobiaga Ferrer
Ein Kurs von Javier Usobiaga Ferrer
Javier Usobiaga ist seit 10 Jahren Webdesigner und Mitbegründer von Marta Armada vom Swwweet-Studio. Er hat sich auf die Gestaltung reaktionsschneller Websites von der ersten Konzeption bis zur Front-End-Entwicklung spezialisiert.
Er genießt auch seine Rolle als Professor für Webdesign in renommierten Workshops und Schulen wie Elisava, IDEP.
Usobiaga versteht das Web in seiner Gesamtheit, nicht nur wie schön es auf dem Computerbildschirm sein kann, sondern auch seine Verwendbarkeit unter verschiedenen Geräten und Umständen.
In seinen Worten "Ich denke, genauso wichtig wie die Ästhetik ist, wie schnell es geladen wird oder wie gut es reagiert, und es scheint mir, dass wir das in unserer Branche oft vergessen."
Inhalt
-
E1
Einführung
-
Präsentation
-
Einflüsse
-
-
E2
Grundlegende SVG
-
Beschriftungen und grundlegende Attribute
-
Stile in SVG
-
Linien-, Polylinien- und Polygonbeschriftungen
-
Strichbezeichnung (Pfad)
-
Das Viewbox-Attribut
-
Textbeschriftungen
-
-
E3
Werkzeuge und Optimierung
-
Vektoreditoren und Export
-
SVG Organisation
-
SVG-Optimierung
-
-
E4
Einbindung von SVG in das Web
-
Möglichkeiten zum Hochladen eines SVG ins Web
-
Icon-Sets
-
Responsive svg
-
Zugänglichkeit in SVG
-
Unterstützung in Browsern
-
-
E5
Effekte in SVG
-
Transformationen
-
Farbverläufe
-
Muster
-
Skins und Beschneidungspfade
-
Filter
-
-
E6
SVG-Animation
-
Animationstypen in SVG
-
Animation mit CSS
-
Sequenzanimation
-
Gezeichnete Animation
-
Interaktive Animation
-
-
E7
Erweiterte Interaktion und Animation
-
Animation mit JavaScript
-
JavaScript-Bibliotheken für Animationen
-
Animiertes Kontrollkästchen
-
SVG-Morphing
-
Animation entlang eines Strichs
-
Inspiration
-
-
AP
Abschlussprojekt
-
SVG-Vektorgrafiken: Mit Code veranschaulichen und animieren
-
Was erwartet dich in einem Domestika-Kurs?
-
Lerne in deinem Tempo
Lerne bequem von zuhause aus, in deinem eigenen Tempo und ohne festen Zeitplan. Du entscheidest, wann und wo.
-
Lerne mit den Profis
Lerne die nützlichsten Techniken und Methoden mit den Profis der Kreativbranche.
-
Tritt mit den erfahrendsten Experten in Kontakt
Jede Lehrperson übermittelt dir in jeder Lektion leidenschaftlich sein/ ihr Wissen mittels ausführlichen Erklärungen aus professioneller Sicht.
-
Zertifikate
PlusErhalte als Plus-Mitglied ein von deiner Lehrperson personalisiertes und unterzeichnetes Zertifikat. Füge es deinem Portfolio hinzu oder teile es online, um deine Teilnahme zu bestätigen.
-
Sei ganz vorne mit dabei
Dank hochwertig produzierter und gestochen scharfer Videos entgeht dir kein einziges Detail. Du hast uneingeschränkten Zugriff auf deinen Kurs und kannst dir so alle Videolektionen so oft ansehen, wie du möchtest.
-
Teile Wissen und Ideen
Stelle deine Fragen, bitte um Meinungen und biete Lösungsansätze. Teile deine Lernerfahrung mit anderen Schüler*innen in der Community, die genauso kreativ sind wie du.
-
Sei Teil einer globalen kreativen Community
Die Community umfasst Millionen wissbegierige Menschen weltweit, die Freude an kreativem Ausdruck finden.
-
Arbeite mit von Profis produzierten Kursen
Um eine einzigartige Online-Lernerfahrung zu garantieren, zählt Domestika auf eine sorgfältige Auswahl der Lehrpersonen und produziert jeden Kurs intern.
FAQ
Domestika-Kurse sind Onlinekurse, die dir Kenntnisse im Umgang mit bestimmten Werkzeugen oder Fähigkeiten vermitteln, mit deren Hilfe du ein eigenes Projekt realisieren kannst. Jeder Schritt ist so gestaltet, dass du mit einer Kombination aus Videolektionen und ergänzenden Lehrmaterialien praktisch lernst. Im Rahmen eines Domestika-Kurses hast du außerdem die Möglichkeit, dein eigenes Projekt mit der Lehrperson und anderen Teilnehmenden zu teilen, sodass eine dynamische Kursgemeinschaft entsteht.
Alle Kurse sind zu 100 % online verfügbar, das heißt, sobald ein Kurs veröffentlicht wurde, steht er dir zur Verfügung, wann immer du willst. Du bestimmst das Tempo, in dem du lernen willst. Du kannst jederzeit zu einem Teil zurückkehren, der dich besonders interessiert, oder überspringen, was du schon kennst. Genauso ist das Kursforum immer offen für neue Fragen, Kommentare, geteilte Projekte und mehr.
Die Kurse sind in mehrere Einheiten unterteilt. Jede Einheit enthält Lektionen, informative Begleittexte, Aufgaben und Übungen, mit denen du dein Projekt Schritt für Schritt vollendest, inklusive ergänzender Materialien und Downloads. Außerdem hast du Zugang zu einem exklusiven Forum, in dem du dich mit der Lehrperson und anderen Lernenden austauschen kannst und deine Arbeit und dein Kursprojekt teilen kannst, sodass eine Gemeinschaft rund um den Kurs entsteht.
Du kannst den geschenkten Kurs aktivieren, indem du den Gutscheincode hier Einlöseseite eingibst.
prdpkmark
excellent course for beginners.
Übersetzung anzeigen
Übersetzung ausblenden
camilo0024
excelente curso lo recomiento explica muy bien y se entiende todo
Übersetzung anzeigen
Übersetzung ausblenden
phoenixbrazil
Excelente curso!! Ótima didática do Instrutor!!! Parabéns!!! Recomendo a todos!!
Übersetzung anzeigen
Übersetzung ausblenden
chaparro_fran
(y)
Übersetzung anzeigen
Übersetzung ausblenden
claudio.lozano
PlusEs una buena introducción a SVG. Ayuda a tener una visión general y sobre la organización y uso de herramientas.
Übersetzung anzeigen
Übersetzung ausblenden