پیشنهاد فرادرس

 شروع کار با SVG برای طراحی وب

دسته بندی ها: سرویس های اینترنتی ، آموزش های TutsPlus ، آموزش طراحی وب

SVG زبانی برای توصیف گرافیک 2 بعدی و برنامه های گرافیکی در XML است. ​این تکنولوژی مخفف کلمات Scalable Vector Graphics میباشد. SVG برای ایجاد گرافیک های برداری در صفحات وب بکار میرود و با زوم روی عکس های SVG کیفیت آنها پایین نمی آید.

با استفاده از SVG می توانید در طراحی های مبتنی بر HTML5 خود عکس ها و انیمیشن هایی ایجاد کنید که حجم فوق العاده کمی دارند و با تغییر اندازه کیفیت آنها پایین نمی آید.

در این دوره آموزشی از موسسه TutsPlus نحوه ساخت عکس و انیمیشن های دو بعدی با استفاده از SVG را فرامیگیرید.

سرفصل های دوره آموزشی:

  • چگونه یک انیمیشن SVG4 بسازید
  • آموزش Adobe Illustrator
  • تنظیمات و ذخیره SVG
  • آموزش انیمیشن SVG با CSS
  • ساخت SVG واکنش گرا
  • ساخت آیکن های SVG واکنش گرا
  • طراحی Adobe Illustrator
  • افزودن تعاملی به آیکن ها
  • چگونه یک وب سایت چندگانه با SVG بسازید
  • آموزش طراحی Adobe Photoshop و Adobe Illustrator بخش اول
  • آموزش طراحی Adobe Photoshop و Adobe Illustrator بخش دوم
  • آموزش طراحی Adobe Photoshop و Adobe Illustrator بخش سوم
  • آموزش HTML
  • آموزش css

لیست سرفصل های دوره آموزشی:

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.Introduction1 lesson, 03:36 Free Preview 1.1Introduction03:36

2.Learn How to Create an Animated Loading SVG4 lessons, 25:58 Free Preview 2.1Designing in Adobe Illustrator05:09 2.2Saving and Setting the SVG Settings03:51 2.3Animating the SVG with CSS13:19 2.4Making the SVG Responsive03:39

3.Learn How to Create Responsive SVG Icons3 lessons, 29:13 3.1Design in Adobe Illustrator13:26 3.2Making the SVG Icons Responsive06:43 3.3Adding Interactivity to Our Icons09:04

4.How to Create a Website with Multiple SVG Elements8 lessons, 1:15:10 4.1Mockup Design in Adobe Photoshop & Adobe Illustrator: Part 114:32 4.2Mockup Design in Adobe Photoshop & Adobe Illustrator: Part 213:14 4.3Mockup Design in Adobe Photoshop & Adobe Illustrator: Part 307:40 4.4Writing the HTML10:10 4.5Writing the CSS09:42 4.6Animating the Top Pencil03:55 4.7Animating the Notepads in Edge Animate10:37 4.8Animating the Button05:20

5.Conclusion1 lesson, 01:23 5.1Course Overview01:23

عنوان دوره: Tutsplus - Getting started with SVG for Web Design حجم فایل: 666MB

آیا این نوشته را دوست داشتید؟
TutsPlus Getting started with SVG for Web Design

پیشنهاد فرادرس