SVG Vectorial Graphics: Illustrate and Animate with Code
Javier Usobiaga Ferrer tarafından verilen bir kurs , web tasarımcısı
Learn to create vector illustrations for your website, from basic lines to interactive animations
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.
Bu çevrimiçi kursta ne öğreneceksiniz?
1 ders & 1 indirme
- 98% olumlu yorumlar ( 273 )
- 1 öğrenci
- 1 ders ( 2h 2m )
- 1 ek kaynak (1 dosya)
- Çevrimiçi ve kendi hızınızda
- Uygulamada mevcut
- Ses: İspanyol, İngilizce, Fransızca, İtalyan, Portekizce, Türkçe
- İspanyol · İngilizce · Portekizce · Almanca · Fransızca · İtalyan · Lehçe · Flemenkçe · Türkçe · Romanian · Indonesian
- Seviye: Acemi
- Sonsuza kadar sınırsız erişim
Bu kurs için önerilen yazılım ve araçlar
Adobe Illustrator
SketchBu kursun projesi nedir?
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.
Kurs öğrencilerinin projeleri
Bu çevrimiçi kurs kimlere yöneliktir?
Programmers, designers, illustrators, and anyone who's interested in design and wants to tackle new projects with HTML and CSS.
Gereksinimler ve materyaller
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.
Yorumlar
Javier Usobiaga Ferrer
Javier Usobiaga Ferrer tarafından verilen bir kurs
Javier Usobiaga, 10 yılı aşkın bir süredir web tasarımcısı ve FrontEnd geliştiricisidir ve Swwweet stüdyosunun Marta Armada'nın kurucu ortağıdır ve ilk konseptten ön uç geliştirmeye kadar duyarlı web siteleri tasarlama konusunda uzmanlaşmıştır.
Ayrıca Elisava, IDEP gibi tanınmış atölyelerde ve okullarda Web Tasarımı öğretmeni olarak görevinden büyük keyif alıyor.
Usobiaga, web'in yalnızca bilgisayar ekranında ne kadar güzel görünebileceğini değil, aynı zamanda farklı cihazlar ve koşullardaki kullanılabilirliğini de bir bütün olarak anlıyor.
Onun sözleriyle, "Estetik kadar ne kadar hızlı yüklendiği veya ne kadar iyi tepki verdiğinin de önemli olduğunu düşünüyorum ve bana öyle geliyor ki endüstrimizde bunu sıklıkla unutuyoruz."
İçerik
-
U 1
Introduction
-
Presentation
-
Influences
-
-
U 2
SVG Basic
-
Labels and basic attributes
-
Styles in SVG
-
Line, polyline, and polygon labels
-
Stroke label (path)
-
The viewbox attribute
-
Text tags
-
-
U 3
Tools and optimization
-
Vector editors and export
-
Organization of SVG
-
SVG optimization
-
-
U 4
Incorporating SVG to the web
-
Ways to load an SVG on the web
-
Icons systems
-
SVG responsive
-
Accessibility in SVG
-
Support in browsers
-
-
U 5
Effects in SVG
-
Transformations
-
Gradients
-
Patterns
-
Masks and clipping paths
-
Filters
-
-
U 6
Animation in SVG
-
Types of animation in SVG
-
Animation with CSS
-
Sequence animation
-
Drawn animation
-
Interactive animation
-
-
U 7
Interaction and advanced animation
-
Animation with JavaScript
-
JavaScript libraries for animation
-
Animated checkbox
-
Mutation (morphing) in SVG
-
Animation along a stroke
-
Inspiration
-
-
FP
Bitirme projesi
-
SVG vector graphics: illustrate and animate with code
-
Bir Domestika kursundan neler beklenebilir?
-
Kendi hızınızda öğrenin
Belirli bir program olmadan ve takip edilmesi kolay bir yöntemle evden öğrenmenin tadını çıkarın. Kendi hızınızı kendiniz belirlersiniz.
-
En iyi profesyonellerden öğrenin
Yaratıcı sektörün en iyi uzmanlarının açıkladığı değerli yöntem ve teknikleri öğrenin.
-
Uzman öğretmenlerle tanışın
Her uzman, her derste açık yönergelerle, gerçek tutkuyla ve profesyonel anlayışla en iyi yaptıkları şeyi öğretir.
-
Sertifikalar
ArtıPlus üyesiyseniz her kurs için öğretmeninizden imzalı bir özel sertifika alın. Portföyünüzde, sosyal medyada veya istediğiniz yerde paylaşın.
-
Ön sıra koltukları alın
En yüksek kalitede videolar sayesinde tek bir ayrıntıyı kaçırmazsınız. Sınırsız erişim sayesinde tekniğinizi mükemmelleştirmek için bunları istediğiniz kadar izleyebilirsiniz.
-
Bilgi ve fikirleri paylaşın
Sorular sorun, geri bildirim isteyin veya çözümler sunun. Öğrenme deneyiminizi topluluktaki, yaratıcılığa sizin kadar tutkulu olan diğer öğrencilerle paylaşın.
-
Küresel bir yaratıcı toplulukla bağlantı kurun
Topluluk, dünyanın her yerinden meraklı ve yaratıcılıklarını keşfetme ve ifade etme konusunda tutkulu milyonlarca insana ev sahipliği yapıyor.
-
Profesyonelce hazırlanmış kursları izleyin
Domestika, yüksek kaliteli bir çevrimiçi öğrenme deneyimi sağlamak için öğretmen kadrosunu seçer ve her dersi kendi bünyesinde üretir.
SSS
Domestika'nın çevrimiçi kursları nelerdir?
Domestika kursları, yeni beceriler öğrenmenizi ve inanılmaz projeler yaratmanızı sağlayan online derslerdir. Tüm kurslarımız, çalışmanızı diğer öğrenciler ve/veya öğretmenlerle paylaşma fırsatı sunarak aktif bir öğrenme topluluğu yaratır. Farklı formatlar sunuyoruz:
Orijinal Kurslar: Belirli bir projeyi baştan sona gerçekleştirmek için videoları, metinleri ve eğitim malzemelerini birleştiren eksiksiz dersler.
Basics Kursları: Belirli yazılım araçlarını adım adım öğrendiğiniz uzmanlaşmış eğitimler.
Uzmanlaşma Kursları: Aynı konuda birden fazla uzman öğretmenle öğrenme yolları, farklı yaklaşımlardan öğrenerek uzman olmak için mükemmel.
Rehberli Kurslar: Belirli becerileri doğrudan edinmek için ideal pratik deneyimler.
Yoğun Kurslar (Deep Dives): Yapay zeka araçlarına dayalı yeni yaratıcı süreçler, derinlemesine ve dinamik bir anlayış için erişilebilir bir formatta.
Kurslar ne zaman başlıyor ve ne zaman bitiyor?
Tüm kurslar %100 çevrimiçi olduğundan, yayınlandıktan sonra kurslar istediğiniz zaman başlayıp bitebilir. Sınıfın temposunu siz belirlersiniz. Geri dönüp sizi en çok ilgilendiren konuları gözden geçirebilir ve zaten bildiklerinizi atlayabilir, sorular sorabilir, soruları yanıtlayabilir, projelerinizi paylaşabilir ve daha fazlasını yapabilirsiniz.
Domestika'nın kursları neler içeriyor?
Kurslar farklı birimlere ayrılmıştır. Her biri, ek tamamlayıcı kaynaklar ve indirmelerle birlikte projenizi adım adım gerçekleştirmenize yardımcı olacak dersler, bilgilendirici metinler, görevler ve pratik alıştırmalar içerir. Ayrıca öğretmenle ve diğer öğrencilerle etkileşime girebileceğiniz, çalışmalarınızı ve kurs projenizi paylaşabileceğiniz, kurs çevresinde bir topluluk oluşturabileceğiniz özel bir foruma da erişebileceksiniz.
Size kurs verildi mi?
kullanma sayfası erişip hediye kodunuzu girerek aldığınız kursu kullanabilirsiniz.
Adobe Illustrator
Sketch
Muy puntual, da la clase muy bien y es entendible, con ejercicios faciles y buenos.
EXCELENTE CURSO
Gostei muito
excellent course for beginners.
excelente curso lo recomiento explica muy bien y se entiende todo