آموزش SVG Graphics for the Web with Illustrator

سرفصل ها و درس ها

مقدمه Introduction

• SVG — از Illustrator به صفحه نمایش SVG—from Illustrator to screen

• آنچه باید بدانید What you should know

1. SVG: Underrated for Graphics Web 1. SVG: Underrated for Web Graphics

• پرونده های SVG چیست؟ What are SVG files?

• پرونده های SVG در همه جا هستند SVG files are everywhere

• قرار دادن پرونده های SVG در یک صفحه وب Embedding SVG files in a webpage

2. ایجاد یک محیط SVG در Illustrator 2. Creating an SVG Environment in Illustrator

• تنظیم یک محیط کار SVG Setting up an SVG work environment

• دستگاه های اندازه گیری و رنگی SVG-Friendly SVG-friendly units of measure and color modes

• به حداقل رساندن سکته ها Minimizing strokes

• ایجاد مقادیر آرشیو SVG Creating SVG-friendly artboards

3. شفافیت و شیب 3. Transparency and Gradients

• آشنایی با شفافیت و شیب Introduction to transparency and gradients

• صادرات با پس زمینه های شفاف Exporting with transparent backgrounds

• اعمال اثرات شفافیت Applying transparency effects

• اعمال شیب Applying gradients

4- اعمال فیلترهای SVG 4. Applying SVG Filters

• فیلترهای SVG در مقابل جلوه های شطرنجی SVG filters vs. raster effects

• نقشه برداری و استفاده از فیلترهای SVG Surveying and applying SVG filters

• واردات و استفاده از فیلترهای SVG Importing and applying SVG filters

5. نقشه های تصویر برای SVG 5. Image Maps for SVG

• نقشه های تصویر و SVG Image maps and SVG

• ایجاد لینک های نقشه تصویر Creating image map links

• با استفاده از پنل تعاملی SVG Using the SVG Interactivity panel

6. بهینه سازی تایپوگرافی برای SVG 6. Optimizing Typography for SVG

• نوع ذخیره سازی به عنوان متن SVG Saving type as SVG text

• متن در یک مسیر Text on a path

• ادغام متن و فایل های SVG با کد تولید شده Integrating SVG text and files with generated code

7. صرفه جویی در SVG 7. Saving as SVG

• همگام سازی آثار هنری SVG با اسکریپت ها Syncing SVG artwork with scripts

• صرفه جویی در گزینه های اساسی SVG Saving as SVG basic options

• ذخیره فایلهای SVG با تصاویر شطرنجی Saving SVG files with raster images

• گزینه های ذخیره پیشرفته Advanced Save Options

8. صادرات SVG برای صفحات 8. Exporting SVG for Screens

• چه زمانی برای صادرات When to export

• با استفاده از گزینه صادرات SVG Using the SVG export option

• ویژگی های پیشرفته صادرات SVG Advanced features of SVG export

9. صادرات به SVG از Photoshop 9. Exporting to SVG from Photoshop

• چرا از فتوشاپ استفاده می کنیم؟ Why use Photoshop?

• صادرات از Photoshop در مقابل صرفه جویی در Illustrator Exporting from Photoshop vs. saving in Illustrator

• گردش بهینه کار Optimal workflow

10. از Illustrator تا وب 10. From Illustrator to the Web

• قرار دادن پرونده های SVG در صفحات وب Embedding SVG files in webpages

• درج SVG با استفاده از عناصر بومی HTML Inserting SVG using HTML's native elements

• Meshing SVG با سبک های CSS Meshing SVG with CSS styles

• درج و ویرایش کد SVG Inserting and editing SVG code

نتیجه Conclusion

• مراحل بعدی Next steps