2014
Tuts+
Gary Simon
2:18
English

In this course, Gary Simon will teach you how to use SVG (Scalable Vector Graphics) in your web design projects. You’ll learn how to design and animate various web elements including a loader, animated icons, and line animations. Alongside gaining skills in CSS, JavaScript and HTML, you’ll also learn how to use various design applications including Adobe Illustrator, Adobe Photoshop and also Adobe Edge Animate. And lastly, you’ll learn how to make all these SVG animations responsive.

1. Introduction
1.1 Introduction
2. Learn How to Create an Animated Loading SVG
2.1 Designing in Adobe Illustrator
2.2 Saving and Setting the SVG Settings
2.3 Animating the SVG with CSS
2.4 Making the SVG Responsive
3. Learn How to Create Responsive SVG Icons
3.1 Design in Adobe Illustrator
3.2 Making the SVG Icons Responsive
3.3 Adding Interactivity to Our Icons
4. How to Create a Website with Multiple SVG Elements
4.1 Mockup Design in Adobe Photoshop & Adobe Illustrator: Part 1
4.2 Mockup Design in Adobe Photoshop & Adobe Illustrator: Part 2
4.3 Mockup Design in Adobe Photoshop & Adobe Illustrator: Part 3
4.4 Writing the HTML
4.5 Writing the CSS
4.6 Animating the Top Pencil
4.7 Animating the Notepads in Edge Animate
4.8 Animating the Button
5. Conclusion
5.1 Course Overview

http://tutsplus.com/

Download File Size:727.78 MB

---