Grafika wektorowa SVG: ilustrowanie i animowanie za pomocą kodu
Kurs prowadzi Javier Usobiaga Ferrer , projektant stron internetowych
Dowiedz się, jak pracować z ilustracjami wektorowymi na swoich stronach internetowych, od prostej linii do interaktywnej animacji
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.
Czego nauczysz się na tym kursie online?
liczba lekcji: 32 & liczba dodatkowych zasobów: 28
- 98% pozytywnych ocen (271)
- Liczba uczestników: 9.110
- 32 lekcje (2 h 2 min)
- Dodatkowe zasoby: 28 (liczba plików: 6)
- Online i we własnym tempie
- Dostępne w aplikacji
- Audio: Hiszpański
- Hiszpański · Angielski · Portugalski
- Poziom: Podstawowy
- Dostęp nielimitowany na zawsze
Oprogramowanie zalecane do tego kursu
Adobe Illustrator
SketchJaki jest projekt kursu?
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.
Projekty uczestników kursu
Do kogo jest skierowany ten kurs online?
Programmers, designers, illustrators, and anyone who's interested in design and wants to tackle new projects with HTML and CSS.
Wymagania i materiały
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.
Oceny
Javier Usobiaga Ferrer
Kurs prowadzi Javier Usobiaga Ferrer
Javier Usobiaga jest projektantem stron internetowych i FrontEnd developerem, od ponad 10 lat i współzałożycielem wraz z Martą Armadą studia Swwweet, specjalizującego się w projektowaniu responsywnych stron internetowych od wstępnej koncepcji do front-end developmentu.
Lubi również swoją rolę nauczyciela projektowania stron internetowych w renomowanych warsztatach i szkołach, takich jak Elisava, IDEP.
Usobiaga rozumie sieć w całości, nie tylko to, jak piękna może być na ekranie komputera, ale także jej użyteczność w różnych urządzeniach i okolicznościach.
W jego słowach „Myślę, że równie ważne jak estetyka jest to, jak szybko się ładuje lub jak dobrze reaguje i wydaje mi się, że w naszej branży często o tym zapominamy”.
Zawartość
-
Cz.1
Introduction
-
Presentation
-
Influences
-
-
Cz.2
SVG Basic
-
Labels and basic attributes
-
Styles in SVG
-
Line, polyline, and polygon labels
-
Stroke label (path)
-
The viewbox attribute
-
Text tags
-
-
Cz.3
Tools and optimization
-
Vector editors and export
-
Organization of SVG
-
SVG optimization
-
-
Cz.4
Incorporating SVG to the web
-
Ways to load an SVG on the web
-
Icons systems
-
SVG responsive
-
Accessibility in SVG
-
Support in browsers
-
-
Cz.5
Effects in SVG
-
Transformations
-
Gradients
-
Patterns
-
Masks and clipping paths
-
Filters
-
-
Cz.6
Animation in SVG
-
Types of animation in SVG
-
Animation with CSS
-
Sequence animation
-
Drawn animation
-
Interactive animation
-
-
Cz.7
Interaction and advanced animation
-
Animation with JavaScript
-
JavaScript libraries for animation
-
Animated checkbox
-
Mutation (morphing) in SVG
-
Animation along a stroke
-
Inspiration
-
-
PK
Projekt końcowy
-
SVG vector graphics: illustrate and animate with code
-
Kurs Domestika - czego możesz się spodziewać?
-
Nauka we własnym tempie
Radość z nauki w domu, bez wyznaczonych terminów. Szybko przyswajasz wiedzę, a swój plan zajęć układasz wedle uznania.
-
Nauka z najlepszymi ekspertami
Przydatne metody oraz ciekawe techniki przedstawione i wyjaśnione przez najlepszych specjalistów z branży kreatywnej.
-
Doświadczeni prowadzący
Wszyscy prowadzący są specjalistami w swojej dziedzinie. Przekazują wiedzę z pasją, tłumaczą zagadnienia w jasny sposób, a podczas zajęć kładą nacisk na praktyczne zastosowanie zdobytej wiedzy.
-
Certyfikaty
PlusJeśli posiadasz subskrypcję Plus, otrzymasz spersonalizowany certyfikat ukończenia kursu podpisany przez instruktora. Możesz go dołączyć do swojego portfolio lub udostępnić w sieciach społecznościowyc
-
Miejsca w pierwszym rzędzie
Wysoka jakość wideo sprawia, że nie umknie Ci żaden szczegół. Dzięki nieograniczonemu dostępowi możesz obejrzeć nagrania tyle razy, ile potrzebujesz, aby przyswoić nowe umiejętności.
-
Dzielenie się wiedzą i pomysłami
Zadawaj pytania, nie wahaj się poprosić o opinię czy poszukać rozwiązania. Podziel się swoimi wrażeniami z nauki z pozostałymi członkami społeczności, którzy tak jak Ty uwielbiają tworzyć.
-
Łączność z kreatywną społecznością z całego świata
Społeczność kilku milionów użytkowników z całego świata, pełnych ciekawości oraz chęci odkrywania i wyrażania swojej kreatywności.
-
Profesjonalna realizacja kursów
Domestika starannie dobiera prowadzących i produkuje wszystkie kursy we własnym zakresie, aby zapewnić wysoką jakość nauki online.
Często zadawane pytania
Kursy Domestika oferują lekcje online, dzięki którym poznasz różne ciekawe i kreatywne narzędzia oraz zdobędziesz umiejętności do wykonania własnego projektu. Lekcje zawierają treści wideo i pisane, a także inne dodatkowe materiały dydaktyczne, które umożliwią Ci realizację Twojego projektu krok po kroku. Podczas kursu istnieje również możliwość podzielenia się całym procesem tworzenia z innymi uczestnikami i prowadzącym, czyli osobami, które tworzą społeczność kursu.
Wszystkie kursy są realizowane wyłącznie online - po ich opublikowaniu na platformie Domestika to Ty wyznaczasz termin rozpoczęcia i ukończenia kursu zgodnie z własnym tempem nauki. Lekcję, która najbardziej Cię interesuje, możesz obejrzeć kilka razy, lub przeskoczyć tę, która jest dla Ciebie oczywista. Oprócz tego masz możliwość zadawania pytań, otrzymywania dodatkowych wyjaśnień, dzielenia się Twoimi projektami i wiele więcej.
Wszystkie kursy podzielone są na części, które zawierają lekcje wideo, teksty wyjaśniające, zadania i ćwiczenia do realizacji projektu krok po kroku, a oprócz tego dodatkowe materiały i dokumenty. Otrzymasz również dostęp do prywatnego forum, gdzie możesz wymieniać poglądy z innymi uczestnikami kursu i prowadzącym, a także dzielić się swoimi pracami i projektem. W ten sposób staniesz się częścią wyjątkowej społeczności kursu.
Możesz wymienić podarunek na kurs wchodząc na strona wymiany, gdzie wprowadzisz otrzymany kod prezentowy.
Adobe Illustrator
Sketch
daad1995
Gostei muito
Zobacz tłumaczenie
Ukryj tłumaczenie
prdpkmark
excellent course for beginners.
Zobacz tłumaczenie
Ukryj tłumaczenie
camilo0024
excelente curso lo recomiento explica muy bien y se entiende todo
Zobacz tłumaczenie
Ukryj tłumaczenie
phoenixbrazil
Excelente curso!! Ótima didática do Instrutor!!! Parabéns!!! Recomendo a todos!!
Zobacz tłumaczenie
Ukryj tłumaczenie
chaparro_fran
(y)
Zobacz tłumaczenie
Ukryj tłumaczenie