ساخت انیمیشن در illustrator. ساخت انیمیشن در ایلاستریتور وارد کردن فایل های Illustrator به یک برنامه فلش

بهینه سازی گرافیک وب

اطلاعات گرافیکیبسیار کندتر از متن است و زمان بارگذاری تصاویر متناسب با حجم فایل های گرافیکی آنها است. از همین رو بارگذاری سریعصفحات وب نیاز به اندازه کوچکی از تصاویر گرافیکی تعبیه شده در آنها دارند که از طریق بهینه سازی آنها حاصل می شود. بهینه سازی تصویر به عنوان تغییر شکل آن در نظر گرفته می شود که حداقل اندازه فایل را با حفظ کیفیت تصویر مورد نیاز در این مورد فراهم می کند، که در درجه اول با کاهش تعداد رنگ ها در تصاویر گرافیکی، استفاده از فرمت های فشرده و خاص فایل و بهینه سازی تنظیمات فشرده سازی برای افراد به دست می آید. تکه های تصویر

ایلاستریتور دارای ابزارهای داخلی بهینه سازی تصویر است که فرآیند بهینه سازی سریع و کارآمد را از طریق انواع روش های پیش نمایش ارائه می کند. پیش نمایشایده نسبتاً دقیقی از نحوه بهینه سازی تصویر در زمان واقعی ارائه می دهد که به ارزیابی نتیجه بهینه سازی و انتخاب مناسب کمک می کند. تنظیمات مورد نظر. و می توانید هم تصاویر ایجاد شده مستقیماً در Illustrator را بهینه کنید و هم سایر تصاویر را، مانند عکس هایی که قصد دارید در یک وب سایت قرار دهید.

پارامترهای بهینه سازی در پنجره تنظیم می شوند صرفه جویی برای وب (ذخیره برای وب)، با دستوری به همین نام از منو فراخوانی می شود فایل(فایل). این برنامه استفاده از یکی از چهار حالت پیش نمایش را پیشنهاد می کند، اما دو حالت برای ارزیابی کیفیت بهینه سازی بهترین هستند:

• 2-بالا(دو گزینه) مشاهده همزمان تصویر اصلی و بهینه شده مطابق با تنظیمات مشخص شده (شکل 1).
• 4-بالا(چهار گزینه) در این حالت، ناحیه دید به چهار پنجره (شکل 2) برای نمایش تصویر اصلی و سه نسخه از بهینه شده تقسیم می شود: نسخه اول بر اساس مقادیر بهینه سازی تنظیم شده ایجاد می شود و دو نسخه دیگر. گزینه هایی برای تنظیمات بهینه سازی فعلی هستند.

هر دو حالت به شما این امکان را می دهند که به میزان قابل توجهی در زمان برای یافتن بهترین گزینه بهینه سازی صرفه جویی کنید، زیرا نیاز به ذخیره تصاویر با تنظیمات مختلف بهینه سازی و پس از آن را از بین می برند. مقایسه بصری. علاوه بر این، می توان نه تنها کیفیت تصویر بهینه شده، بلکه اندازه و زمان بارگذاری آن را نیز ارزیابی کرد. گزینه های مختلفاتصالات برای مقایسه، راحت ترین حالت 4-Up (چهار گزینه) است که به شما امکان می دهد به صورت بصری تأثیر فشرده سازی یا کاهش پالت را بر کیفیت و اندازه تصویر ارزیابی کنید و در نهایت تعیین کنید. بهترین گزینه هابهينه سازي.

Illustrator به شما امکان می دهد گرافیک های وب را نه تنها در فرمت های GIF، JPG، PNG-8 و PNG-24، بلکه در SWF و SVG نیز بهینه کنید. تصاویر نمایه شده که دارای تعداد کمی رنگ هستند با فرمت GIF ذخیره می شوند. برای ذخیره تصاویر تمام رنگی و خاکستری عکس ها و گرافیک های غنی از رنگ مانند پرکردن گرادیان از فرمت JPG استفاده می شود. برای تصاویر تمام رنگی با مناطق شفاف، از فرمت PNG استفاده می شود که به شما امکان می دهد هم تصاویر فهرست شده و هم تصاویر تمام رنگی را ذخیره کنید، در حالی که در PNG-8 حداکثر تعداد رنگ ممکن برای یک تصویر بهینه شده 256 و در PNG- است. 24 تصویر می تواند میلیون ها رنگ داشته باشد، بنابراین به نظر می رسد فرمت jpeg. تفاوت بین PNG-24 و JPEG در این است که روش فشرده سازی مورد استفاده برای بهینه سازی تصاویر PNG-24 منجر به کاهش کیفیت نمی شود، اما اندازه فایل را افزایش می دهد. فرمت های SVG و SWF گرافیک، متن و اجزای تعاملی را با هم ترکیب می کنند و همچنین می توانند بهینه شوند.

در نظر گرفتن مثال خاصبهینه سازی تصویر فرض کنید، در برنامه Illustrator، یک نشان سایت توسعه داده شد (شکل 3)، که در ابتدا با فرمت AI ذخیره شده بود. تلاش برای بهینه سازی فوری آن برای وب به هیچ چیز خوبی منجر نمی شود، زیرا در این حالت تصویر به طور خودکار برش داده می شود، که موقعیت واقعی کتیبه به دست آمده در نتیجه تغییر شکل را در نظر نمی گیرد (شکل 4 و 5).

بنابراین، بیایید سعی کنیم با دستور نماد را به فرمت PSD صادر کنیم File=>Export(File=>Export) حجم تصویر تولید شده 143 کیلوبایت خواهد بود. فایل PSD به دست آمده را باز کرده و از دستور استفاده کنید File=>ذخیره برای وب(File=>Save for Web). با توجه به تعداد محدود رنگ های درگیر در تصویر، در این مورد، فرمت GIF بهینه است که با تنظیمات خاصی باید تصمیم بگیرید. با آزمایش تنظیمات، می توانید مطمئن شوید که بهترین کیفیت توسط الگوریتم فشرده سازی انتخاب شده توسط برنامه به طور پیش فرض ارائه می شود. انتخابی(انتخابی). در مورد هموارسازی، پس با توجه به وجود پر کردن گرادیان، بهتر است الگوریتمی با تولید نویز انتخاب کنید. سر و صدا(شکل 6). اندازه فایل بهینه سازی به دست آمده 6.729 کیلوبایت خواهد بود (شکل 7)، در حالی که شفافیت پس زمینه حفظ خواهد شد، که با ذخیره تصویر GIF همراه با فایل HTML به راحتی تأیید می شود (شکل 8). در نتیجه، در این مثالفایل های emblem.html و emblem.gif در پوشه Primer1 به دست آمدند.

دکمه ها

یکی از عناصر طراحی خاص ضروری هر صفحه وب، دکمه های کنترل گرافیکی هستند. تصور یک صفحه بدون آنها به سادگی غیرممکن است. طراحی دکمه‌ها امروزه به یک سبک خاص تبدیل شده است و Illustrator به شما امکان می‌دهد پیچیده‌ترین گزینه‌ها را ایجاد کنید. برای مثال، دکمه‌هایی که به‌عنوان اشیاء شبکه‌ای و (یا) با ماسک طراحی شده‌اند، بسیار مؤثرتر از موارد معمول به نظر می‌رسند.

گزینه ایجاد یک دکمه برآمده گرد در Illustrator را در نظر بگیرید. یک شیء برداری پر از رنگ دلخواه را به شکل دایره رسم کنید (شکل 9) و با استفاده از دستور آن را به شبکه تبدیل کنید. Object=>ایجاد Gradient Mesh(Object=>Create Gradient Mesh) با تعیین چهار سطر و چهار ستون و در لیست ظاهر(مشاهده) با انتخاب یک گزینه به مرکز برجسته(نور پس زمینه) تا 60 (شکل 10). ابزاری را انتخاب کنید انتخاب مستقیمو در گوشه سمت چپ بالای جسم کلیک کنید و نقاط لنگر واقع در آنجا را انتخاب کنید (شکل 11). رنگ سلول مربوطه را با انتخاب آن در پالت به سفید تغییر دهید نمونه ها(شکل 12).

ابزاری بردارید بیضی(بیضی)، نشانگر ماوس را در مرکز دایره ایجاد شده قبل و در حالی که کلیدها را پایین نگه داشته اید قرار دهید. altو تغییر مکاندایره جدید را روی دایره قدیمی بکشید تا از هر طرف 1-2 پیکسل بزرگتر از دایره قبلی باشد. آن را یک حاشیه سیاه کنید سکته) 1-2 px عرض و آن را با یک گرادیان شعاعی از قرمز به سفید پر کنید (شکل 13). شی بردار ایجاد شده را 1-2 پیکسل به سمت راست و پایین بکشید، سپس بدون حذف قسمت انتخابی، روی آن کلیک راست کرده و از منوی زمینهیک تیم انتخاب کنید Arrange=>ارسال به عقب(Organize=>Send back). در نتیجه، یک جای خالی برای دکمه نشان داده شده در شکل دریافت می کنیم. چهارده.

به عنوان یک قاعده، در هر صفحه وب چندین دکمه از یک نوع وجود دارد، به عنوان مثال، فقط در جهت فلش های کشیده شده روی آنها، که جهت حرکت در سایت را نشان می دهد، متفاوت است. ساده ترین حالت داشتن دو دکمه را در نظر بگیرید که یکی از آنها با فلش رو به پایین به معنای حرکت به صفحه بعد و دکمه با فلش به سمت بالا به صفحه قبلی است. به عنوان یک جای خالی برای فلش، یک مثلث منظم را که با ابزار ترسیم شده است، در نظر می گیریم چند ضلعی(چند ضلعی) با رنگ مشکی پر شده و برای جلوه بیشتر به عنوان یک شی مشبک طراحی شده است. فلش را روی دکمه حرکت دهید و موقعیت همه اشیاء را نسبت به یکدیگر با استفاده از دکمه های پالت مربوطه تنظیم کنید. تراز کردن(هم ترازی). اولین دکمه دریافتی در شکل نشان داده شده است. 15. با انتخاب دستور یک کپی از لایه با دکمه ایجاد کنید لایه تکراری لایه های، در نتیجه دو لایه یکسان بدست می آوریم. سپس فلش روی کپی لایه را انتخاب کرده و با انتخاب دستور از منوی زمینه آن را 180 درجه بچرخانید. تبدیل => چرخشتبدیل=>چرخش. همان دکمه ای را دریافت می کنیم که در شکل نشان داده شده است. 16. لطفاً توجه داشته باشید که ذخیره همه دکمه‌های یکسان یک پروژه در یک فایل در لایه‌های مختلف بسیار راحت‌تر است، که در این مورد نشان داده شده است.

اکنون باید گزینه های بهینه شده را برای هر یک از دکمه ها ذخیره کنید. ابتدا لایه زیرین را نامرئی کنید در این صورت دکمه روی لایه بالایی باقی می ماند. یک تیم انتخاب کنید File=>ذخیره برای وب(File=>Save for Web)، پارامترهای بهینه سازی دکمه را پیکربندی کنید، برای مثال، همانطور که در شکل نشان داده شده است. 17، روی دکمه کلیک کنید صرفه جویی(ذخیره) و نام فایل را وارد کنید. دکمه ذخیره شده در نتیجه در شکل نشان داده شده است. 18. حالا لایه پایین را نمایان کنید، لایه بالایی را نامرئی کنید و دکمه دوم را به همین ترتیب ذخیره کنید و نام دیگری به آن بدهید. نتیجه در شکل نشان داده شده است. 19.

اکنون تنها چیزی که باقی می ماند این است که مطمئن شوید دکمه ها در صفحه وب خوب به نظر می رسند و آنها را در یک صفحه سفارشی قرار دهید (شکل 20). در نتیجه در این مثال فایل Primer2.html و دو تصویر گرافیکی در پوشه images (پوشه پرایمر 2).

در صورت تمایل، در طول فرآیند بهینه سازی، دکمه را می توان به راحتی به یک برش تبدیل کرد. در این صورت پس از انتخاب دستور File=>ذخیره برای وب(File => Save for Web) و تنظیمات بهینه سازی باید از ابزار پالت ابزار انتخاب شود برش را انتخاب کنید(انتخاب Slice) و روی تصویر دوبار کلیک کنید که به صورت خودکار به برشی با شماره سریال 1 تبدیل می شود (شکل 21). با دوبار کلیک مجدد، پنجره باز می شود گزینه های برش(Slice Options) که در آن باید یک لینک مشخص کنید و در صورت تمایل نام برش را تغییر دهید (شکل 22) و سپس تصویر بهینه شده را ذخیره کنید. نتیجه در این حالت فایل های Primer3.html (شکل 23) و Primer3.gif (پوشه Primer3) خواهد بود.

عناصر تعاملی

یکی از راه‌های جذاب‌تر کردن صفحه، معرفی عناصر طراحی است که آن‌ها را تغییر می‌دهند ظاهر(یا حالت) بسته به رفتار ماوس یا به ندرت در صورت هر موقعیت دیگری: بزرگنمایی، اسکرول، بارگذاری، خطاها و غیره.

در میان این عناصر، معروف ترین عناصر رول اور (از انگلیسی roll over to roll, roll over) هستند که تحت تأثیر ماوس ظاهر خود را تغییر می دهند. دکمه های متحرک نمونه هایی از چرخش های معمولی هستند. Rollovers اغلب هنگام ایجاد سایر عناصر ناوبری سایت استفاده می شود. در واقع، هر چرخشی یک تصویر نیست، بلکه چندین (حداکثر چهار) تصویر است که هر کدام مربوط به یک رویداد خاص است. رویدادهای اصلی به شرح زیر در نظر گرفته می شوند: حالت عادی عادی، بیش از نشان دادن نشانگر ماوس بر روی عنصر و فشار دادن دکمه سمت چپ ماوس به سمت پایین هنگام قرار گرفتن روی آن. از نظر تئوری، رویدادهایی مانند رها کردن کلیک چپ ماوس پس از کلیک کردن، بالا پس از رها کردن دکمه، خروج هنگام خروج از منطقه فعال می‌توانند دخیل باشند. با این حال، در عمل، اغلب به تغییر عنصر فقط برای سه یا حتی دو رویداد اول محدود می شود.

رول اورهای کلاسیک

در مفهوم کلاسیک، رول‌اور مجموعه‌ای از تصاویر گرافیکی با فرمت GIF و کد HTML مربوط به آن‌ها است که به لطف آن، بسته به رفتار ماوس، یک تصویر جایگزین تصویر دیگر در پنجره مرورگر می‌شود.

Illustrator برای ایجاد مستقیم rollover به معنای کلاسیک طراحی نشده است، اما می تواند به توسعه عناصر اولیه برای آنها کمک کند. ایده در این مورد ایجاد یک لایه با یک تصویر مربوط به اولین رویداد است. سپس یک کپی از لایه ایجاد کنید و تصویر را برای مطابقت با رویداد دوم تغییر دهید و به همین ترتیب. تصویر لایه‌ای حاصل به یک فایل PSD با لایه‌های حفظ شده صادر می‌شود، که بر اساس آن یک رول‌اور در ایجاد می‌شود. برنامه تصویرآماده. مزیت استفاده از ایلاستریتور، مانند بسیاری موارد دیگر، تعدادی از ویژگی های جالب آن است که در سایر موارد موجود نیست. ابزارهای نرم افزاری، همراه با راحتی تبدیل گرافیک برداری.

بیایید سعی کنیم یک rollover به شکل یک کتیبه ایجاد کنیم که بسته به رفتار ماوس تغییر رنگ می دهد. ایلوستریتور را باز کنید و شکلی به شکل یک مستطیل گرد و پر شده با مشکی ایجاد کنید (شکل 24)، از آن کپی کنید و در قسمت آزاد صفحه قرار دهید. تبدیل اولین کپی از مستطیل به یک شی شبکه با برجسته در مرکز (فرمان Object=>ایجاد Gradient Mesh Object=>Create Gradient Mesh)، با مشخص کردن چهار سطر و ده ستون (شکل 25). کپی دوم مستطیل را فعال کنید و برای آن یک گرادیان پر کنید، مشابه آنچه در شکل نشان داده شده است. 26. شی gradient را روی مش قرار دهید، کدورت شی گرادیان را تا حدود 80% کاهش دهید و اندازه شی گرادیان را به حدود 1 پیکسل کاهش دهید تا در پایان یک اثر برآمدگی شبیه سازی شود. و سپس روی اشیاء کتیبه را چاپ کنید. در شکل اصلی خود، اجازه دهید یک رنگ سفید داشته باشد که با حالت عادی مطابقت دارد (شکل 27) و سپس هنگامی که حالت چرخش تغییر می کند، رنگ نوشته تغییر می کند، به عنوان مثال، زمانی که نشانگر ماوس به رنگ سبز است. روی آن (Over State) و با فشار دادن دکمه ماوس به رنگ آبی (حالت پایین).

به پالت توجه کنید لایه هایدر این مرحله فقط یک لایه دارد. با استفاده از دستور دو کپی از این لایه ایجاد کنید لایه تکراری(لایه تکراری) از منوی پالت لایه های، سه لایه در پالت وجود خواهد داشت (شکل 28). سپس در اولین کپی لایه، رنگ کتیبه را به سبز و در دومی به آبی تغییر دهید (شکل 29). در نتیجه، خالی لازم برای رول اور به دست می آید.

تصویر ایجاد شده را به فرمت PSD با لایه های حفظ شده با استفاده از دستور صادر کنید File=>Export(File=>Export) و انتخاب کنید مدل رنگ RGB (شکل 30). فایل PSD ایجاد شده را در ImageReady باز کنید (شکل های 31 و 32). با انتخاب دستور، فریم هایی را بر اساس لایه ها ایجاد کنید از لایه ها قاب بسازید(ایجاد فریم از لایه ها) از منوی پالت انیمیشن. پنجره انیمیشن مانند شکل خواهد بود. 33. در همان زمان در پالت رولورهادر ابتدا، یک حالت عادی ایجاد خواهد شد.

سپس در پنجره انیمیشندر حالی که در پالت هستید، فریم مربوط به حالت شناور را انتخاب کنید لایه هایلایه به طور خودکار انتخاب می شود لایه 1 کپی کنید(شکل 34). به پالت بروید رولورهاو روی دکمه کلیک کنید Rollover State را ایجاد کنید(ایجاد حالت rollover) شکل. 35 که باعث ظاهر شدن حالت می شود بیش از ایالتدر پالت رولورها(شکل 36). دولت را به همین ترتیب ایجاد کنید پایین ایالت. حالت را فعال کنید طبیعیدر پالت رولورهاو در پالت حذف کنید انیمیشنهمه فریم ها به جز فریمی که باید با حالت مطابقت داشته باشد طبیعی. در نتیجه، برای هر حالت rollover در پالت انیمیشنتنها یک قاب وجود خواهد داشت (شکل 37، 38 و 39).

برنج. 38. مشاهده تصویر، پنجره انیمیشن و پالت های لایه ها و رولورها برای حالت Over State

نتیجه را با کلیک بر روی دکمه بررسی کنید پیش نمایش در مرورگر پیش فرض(Browser Preview) در نوار ابزار و با رفتن به پنجره مرورگر (شکل 40). پس از آن، فایل را با استفاده از دستور ذخیره کنید File=>Save Optimized(File=>Save with optimization) و مشخص کردن گزینه HTML و تصاویر (*.html). در نتیجه در این مثال فایل Primer4.html و یک سری تصاویر گرافیکی در پوشه images بدست آمد.

برنج. 40. پنجره مرورگر با عنصر Rollover

جابجایی های SVG

مشهور شدن فرمت SVG(گرافیک برداری مقیاس پذیر مقیاس پذیر گرافیک برداری)، که بر اساس استاندارد XML ایجاد شده است، همچنین به شما امکان می دهد تا انواع عناصر تعاملی، به ویژه rollover ها را دریافت کنید، فقط در عمل این به روشی کاملاً متفاوت اجرا می شود. شایان ذکر است که ایجاد rollover های تعاملی SVG، بر خلاف موارد کلاسیک، زمانی که کد HTML مربوطه به طور کامل به طور خودکار تولید می شود، نیاز به دانش زبان جاوا اسکریپت و درک اصول اولیه برنامه نویسی شی گرا دارد.

یک پالت ویژه برای کار با اشیاء SVG طراحی شده است. تعامل SVG، که با دستور به راحتی باز می شود Window=>SVG Interactivity(Window=> تعامل SVG) شکل. 41.

بیایید این نوع ایجاد یک رول اور را با استفاده از مثال یک دکمه تعاملی در نظر بگیریم، رنگ برچسب روی آن از سیاه به آبی تغییر می کند وقتی ماوس روی آن قرار می گیرد و زمانی که ماوس از منطقه فعال خارج می شود به سیاه تبدیل می شود.

یک دکمه مستطیل شکل با لبه های گرد ایجاد کنید و یک شیب پرکننده مناسب برای آن انتخاب کنید، به عنوان مثال، همانطور که در شکل نشان داده شده است. 42. شفافیت دکمه را در پالت تنظیم کنید شفافیت(Transparency) در این مثال مقدار پارامتر کدورت(Opacity) روی 50% تنظیم شده است. یک کپی از دکمه ایجاد کنید، آن را با سبز تیره پر کنید (شکل 43) و سپس با دستور آن را به یک شی مش تبدیل کنید. Object=>ایجاد Gradient Mesh(Object=>Create Gradient Mesh) با تعیین چهار سطر و ده ستون و در لیست ظاهر(مشاهده) با انتخاب یک گزینه به مرکز(به سمت مرکز) و تنظیم مقدار برجسته(هایلایت) تا 100. کدورت لایه جسم مش را تا حدود 40 درصد کاهش دهید (شکل 44). شی مش را در بالای شی گرادینت قرار دهید و دکمه شبیه شکل نشان داده شده در شکل خواهد بود. 45.

برنج. 44. تبدیل یک کپی از یک دکمه به یک شی شبکه

دکمه را با کتیبه مورد نظر تکمیل کنید و موقعیت آن را با استفاده از دکمه های پالت مربوطه تنظیم کنید تراز کردن(هم ترازی). تصویر حاصل شامل یک لایه با سه شیء است که روی یکدیگر قرار گرفته اند (شکل 46). رویدادهای زمان‌بندی شده به یک شی متنی اشاره می‌کنند، بنابراین برای راحتی، نام آن را به تغییر دهید متنبا دوبار کلیک کردن روی شی و وارد کردن نام جدید. به طور مشابه، نام لایه را تغییر دهید لایه 1 به لایه(شکل 47).

پردازش رویداد شامل استفاده از رویه‌های جاوا اسکریپت است، بنابراین باید فایلی را با شرحی از این رویه‌ها اضافه کنید. Events.js نامیده می شود و پس از نصب در پوشه Sample Files\Sample Art\SVG\SVG در دیسک ذخیره می شود. نرم افزار Adobeتصویرگر. برای گنجاندن فایل Events.js از دستور استفاده کنید فایل های جاوا اسکریپت تعامل SVG(شکل 48). بعد، باید دکمه را فشار دهید اضافه کردن(افزودن) و پیدا کردن فایل مورد نظرروی هارد دیسک وقتی نام او در میدان ظاهر می شود URL(شکل 49)، روی دکمه کلیک کنید انجام شده(برو بیرون).

برنج. 48. انتخاب دستور JavaScript Files

پس از آن، باید واکنش به رویدادهای ماوس را برای شی تعریف کنید متن. شی Text را در فیلد انتخاب کنید رویدادپالت های (رویداد). تعامل SVGیک رویداد را انتخاب کنید روی موشواره elemColor(evt، "Text"، "#3333FF")این بدان معناست که وقتی ماوس روی شی قرار دارد متنرنگ آن به آبی تغییر خواهد کرد (شکل 50). برای اینکه بعد از خروج ماوس از منطقه فعال، رنگ متن به سیاه تبدیل شود، باید یک رویداد دیگر ایجاد کنید. سوار کردنآن را در فیلد انتخاب کنید رویدادپالت های (رویداد). تعامل SVG. سپس در خط عمل متن را وارد کنید elemColor(evt، "Text"، "#000000")این به رنگ سیاه باز می گردد (شکل 51).

برنج. 51. نمای نهایی پالت SVG Interactivity برای شی Text

rollover تولید شده را به عنوان یک فایل SVG با دستور ذخیره کنید File=>ذخیره به عنوان(پرونده=> نوع فایلقالب SVGو سپس گزینه های ذخیره فایل SVG را همانطور که در شکل نشان داده شده است تنظیم کنید. 52. پس از ذخیره، تنها یک فایل با پسوند SVG به دست می آید و نه دو تا، مانند رول اور کلاسیک، در این حالت، فایل Primer5.svg (پوشه Primer5) به دست آمد. با این حال، برای اینکه rollover واقعاً کار کند، باید فایل Events.js را با توضیحات رویه‌های جاوا اسکریپت در پوشه حاوی فایل SVG کپی کنید. پس از آن، می توانید عملکرد رول اور را بررسی کنید، نتیجه مانند شکل نشان داده شده است. 53.

انیمیشن SVG

فرمت SVG همچنین می تواند برای انتقال انیمیشن استفاده شود. بیایید سعی کنیم یک عنصر انیمیشن ساده ایجاد کنیم (در این مورد، اطلاعات مربوط به شرکت خواهد بود) که وقتی ماوس روی شی گرافیکی مربوطه قرار می گیرد روی صفحه ظاهر می شود و وقتی ماوس از عنصر تعاملی حذف می شود ناپدید می شود.

بیایید تقریباً یک سری از اشیاء گرافیکی و متنی ایجاد کنیم، همانطور که در شکل نشان داده شده است. 54. با کلیک کردن متوالی بر روی نام شی بعدی در پالت، نام تمام اشیاء ایجاد شده را به روشی راحت تغییر دهید. لایه هایو نام مورد نظر را وارد کنید (شکل 55). توجه داشته باشید که در شکل مشخص شده است. 56 مورد Text1، Text2، Text3و مسیر 1همیشه قابل مشاهده خواهد بود و بقیه فقط زمانی که ماوس را بر روی شیء نگه دارید متن 1.

برنج. 54. نمای اصلی تصویر

با استفاده از دستور، فایل Events.js را با توضیحاتی از رویه های جاوا اسکریپت اضافه کنید فایل های جاوا اسکریپت (فایل های جاوا اسکریپت) از پالت تعامل SVGبا فشردن دکمه اضافه کردن(افزودن) با انتخاب فایل مورد نظر روی هارد و کلیک بر روی دکمه انجام شده(برو بیرون).

پاسخ رویداد ماوس را برای یک شی تعریف کنید متن 1. شی را انتخاب کنید متن، در زمینه رویدادپالت های (رویداد). تعامل SVGیک رویداد را انتخاب کنید روی موشوارهو در خط زیر متن را وارد کنید elemShow(evt، "Text4"); elemShow(evt، "Path2"). در نتیجه زمانی که ماوس روی شی قرار دارد متن 1اشیاء قابل مشاهده خواهند شد متن 4و مسیر 2. لطفاً توجه داشته باشید که اگر هنگام وقوع یک رویداد باید چندین عمل انجام شود، باید از طریق علامت ";" مشخص شوند. سپس همین کار را برای رویداد انجام دهید سوار کردن، وارد کردن متن برای آن، که به معنای پنهان کردن اشیا خواهد بود (شکل 57).

نتیجه را به عنوان یک فایل SVG با دستور ذخیره کنید File=>ذخیره به عنوان(File=>Save as)، با مشخص کردن نام فایل، در قسمت انتخاب کنید نوع فایلفرمت SVG و سپس تنظیم گزینه های ذخیره فایل SVG مطابق شکل 1. 58. پس از ذخیره فایل Primer6.svg (پوشه Primer6) بدست می آید. فراموش نکنید که فایل Events.js را در پوشه ای با این فایل کپی کنید. اگر بعد از آن شما اجرا coz فایل داده شده، نتیجه را در شکل مشاهده خواهید کرد. 59. این تقریباً همان چیزی است که شما نیاز دارید. تنها چیزی که در برنامه های ما لحاظ نشده بود ظاهر اولیه اشیا بود متن 4 و مسیر 2 هنگام بارگذاری برای خلاص شدن از شر این کاستی، هر دو این آبجکت ها را به یکباره انتخاب کنید و برای آنها یک اکشن ایجاد کنید elemHide(evt، "Text4"); elemHide(evt، "Path2")در رویداد در حال بارگذاری(شکل 60). فایل را دوباره ذخیره کنید و مطمئن شوید که اشیاء در حال حاضر هستند متن 4و مسیر 2تنها زمانی که ماوس را بر روی جسم قرار دهید قابل مشاهده است متن 1.

انیمیشن GIF

هر صفحه وب بدون انیمیشن وب غیرقابل تصور است، از جمله گیف های متحرک. یکی از راه های ایجاد آنها استفاده از برنامه Adobe ImageReady است که از جمله به شما امکان می دهد از لایه ها انیمیشن بسازید. در این مورد، خود تصویر چند لایه را می توان در آن آماده کرد برنامه های کاربردی مختلفاز جمله در Adobe Illustrator.

ایجاد یک انیمیشن بر اساس عناصر از پالت بسیار آسان است نمادها(نمادها) با دستور باز می شوند Window=>نمادها(Window=>Symbols) یا از یکی از کتابخانه های نماد که می توان با استفاده از دستور باز کرد Window=>کتابخانه های نماد(پنجره=>کتابخانه های نماد).

به عنوان مثال، بیایید سعی کنیم اندازه هر شی-نماد را افزایش دهیم، مراحل کلیدی فرآیند افزایش شی باید در لایه های جداگانه تنظیم شوند. ابتدا به سادگی اشیاء نماد را یکی بالای دیگری قرار دهید و سپس اندازه هر شیء بعدی را افزایش دهید، به عنوان مثال، همانطور که در شکل نشان داده شده است. 61. در نتیجه، در پالت لایه هاییک لایه با اشیاء زیاد ایجاد خواهد شد (شکل 62). اگر مستقیماً این تصویر را به فرمت PSD صادر کنید ، این کار نمی کند ، زیرا فقط یک لایه وجود دارد و طبیعتاً وقتی فایل PSD را در ImageReady باز می کنید ، فقط یک لایه وجود دارد. بنابراین ابتدا باید اشیا را روی لایه های مختلف قرار دهید. این کار قابل انجام است روش های مختلفساده ترین راه این است که ابتدا لایه را انتخاب کنید لایه 1در پالت لایه ها و از دستور استفاده کنید رها کردن به لایه(رها به صورت لایه ای). نتیجه حرکت هر یک از اشیاء به لایه خود خواهد بود، اما همه آنها در لایه قرار می گیرند لایه 1. بنابراین، باید تمام لایه‌های تودرتو را به‌طور دستی به بالای پالت لایه‌ها بکشید تا بالای لایه باشند. لایه 1و سپس لایه خالی لایه 1آسان برای حذف (شکل 63). با استفاده از دستور، تصویر را به فرمت PSD صادر کنید File=>Export(File=>Export) با تنظیماتی مانند شکل. 64.

فایل PSD ایجاد شده را در برنامه ImageReady بارگذاری کنید (شکل 65 و 66). منوی پالت را باز کنید انیمیشناز لایه ها قاب بسازید(فریم هایی را از لایه ها ایجاد کنید). در نتیجه، پنج فریم ایجاد می شود که هر کدام با لایه آن و پنجره پالت مطابقت دارد انیمیشنمانند شکل خواهد بود. 67.

پس از آن مدت زمان هر یک از فریم های ایجاد شده را در این حالت تنظیم کنید، مدت زمان تمام فریم ها 0.2 ثانیه تنظیم می شود. و سپس انیمیشن بهینه شده را با دستور ذخیره کنید File=>Save Optimized(File=>ذخیره با بهینه سازی). نتیجه به دست آمده ممکن است شبیه شکل. 68.

استفاده از توابع حتی راحت تر است ترکیبات زندهنرم افزار ایلوستریتور. این استفاده ترکیبی از Illustrator و ImageReady به طور قابل توجهی روند ایجاد انیمیشن های GIF را سرعت می بخشد.

به عنوان مثال، دو شی چند رنگ دلخواه را رسم کنید، و سپس آنها را با پارامترهای مناسب ترکیب کنید (شکل 69). استفاده مستقیم از این فایل برای ایجاد یک انیمیشن غیرممکن است، زیرا تصویر روی یک لایه قرار دارد (شکل 70). بنابراین، ابتدا باید هر عنصر از شی blend را در یک لایه جداگانه قرار دهید. برای انجام این کار، در پنجره لایه هایخط را برجسته کنید ، منوی پالت را با کلیک بر روی فلش سیاه در گوشه سمت راست بالای آن فعال کنید و دستور را انتخاب کنید. انتشار به دنباله لایه ها(به ترتیب به لایه ها تبدیل شوید) (شکل 71). نگه داشتن یک کلید تغییر مکانلایه های ایجاد شده را انتخاب کرده و بالای لایه قرار دهید لایه 1و سپس خود لایه را حذف کنید لایه 1در نتیجه، با انتقال آن به سطل زباله، پالت لایه ها همان شکلی را به خود می گیرد که در شکل. 72.

برنج. 70. وضعیت اولیه پنجره لایه ها

با دستور فایل ایجاد شده را به فرمت PSD Export کنید File=>Export(File=>Export). فایل PSD ایجاد شده را در ImageReady باز کنید (شکل 73). لطفا توجه داشته باشید که تمام لایه های ایجاد شده در برنامه Illustrator در پنجره لایه ها (شکل 74) و در پنجره ظاهر می شوند. انیمیشنتنها یک قاب وجود خواهد داشت.

منوی پالت را فعال کنید انیمیشن، با کلیک بر روی فلش سیاه رنگ در گوشه سمت راست بالای پالت، دستور را انتخاب کنید از لایه ها قاب بسازید(از لایه ها فریم بسازید) در پایان در این مثال پنج فریم ایجاد می شود و پنجره پالت انیمیشنمطابق شکل شکل خواهد گرفت. 75. همه فریم ها را با نگه داشتن کلید انتخاب کنید تغییر مکانو یک مدت زمان فریم مناسب را در این مثال تنظیم کنید، برای هر یک از فریم ها زمان 0.2 ثانیه در نظر گرفته شده است. سپس فایل را با دستور optimization ذخیره کنید File=>Save Optimizedتنظیمات (File=>Save with optimization) در لیست نوع فایلگزینه فقط تصاویر (*.gif). این انیمیشن شبیه شکل 76.

خیلی جالب تر حرکت نیست، بلکه تغییر اندازه صاف اجسام ترکیبی است. به عنوان مثال، می توانید از انتقال ترکیبی که قبلا ایجاد شده است استفاده کنید. در این حالت، پس از ایجاد لایه‌های جداگانه برای هر عنصر انتقال ترکیب، با استفاده از دکمه‌ها، تمام اشیاء را روی هم قرار دهید. مرکز تراز افقی(تراز نسبت به مرکز افقی) و مرکز تراز عمودیپالت های (تراز عمودی در مرکز). تراز کردن(شکل 77).

فایل ایجاد شده را به فرمت PSD صادر کنید ( File=>Export File=>Export) و فایل PSD ایجاد شده را در برنامه ImageReady باز کنید (شکل 78). ایجاد فریم های انیمیشن بر اساس لایه ها ( از لایه ها قاب بسازیدفریم هایی را از لایه ها ایجاد کنید) و مدت زمان مناسب را برای آنها انتخاب کنید (شکل 79). و سپس برای تاثیرگذاری بیشتر انیمیشن، فریم های موجود را کپی کنید، اما به ترتیب معکوس به طوری که تصویر ابتدا کم شود و سپس به صورت دایره ای ادامه دهید (شکل 80). سپس فایل بهینه سازی را ذخیره کنید ( File=>Save Optimized File=>ذخیره با بهینه سازی). انیمیشن به دست آمده در شکل نشان داده شده است. 81.

برنج. 80. وضعیت پنجره انیمیشن پس از کپی کردن فریم ها

برنج. 81. انیمیشن تمام شده

شما یک یا دو آیکون دارید که دوست دارید آنها را با انیمیشن زنده کنید. از کجا شروع می کنید؟ فرض کنید فایل‌های SVG، Illustrator CC و After Effects CC دارید، اما راه‌حل از شما دوری می‌کند.

در این مقاله، من قصد دارم به شما نشان دهم که چگونه به راحتی یک فایل SVG را متحرک کنید، از جمله تهیه فایل SVG در Illustrator و وارد کردن آن به After Effects CC. من همچنین توضیح خواهم داد که چگونه می توانید آن را به Shape Layers تبدیل کنید و حرکت اضافه کنید. و در نهایت اجازه دهید در مورد صادرات و رندر صحبت کنیم.

نتیجه نهایی کار.

حالا بیایید به جالب ترین قسمت برویم - یاد بگیرید که چگونه تصاویر را متحرک کنید.

آماده سازی فایل SVG در Illustrator

بیایید با باز کردن فایل SVG خود در Adobe Illustrator CC شروع کنیم. من یک نماد ماشین کوچک را متحرک خواهم کرد که به صورت رایگان در Week Of Icons در دسترس است.

پس از باز کردن فایل، باید همه اشیاء را از گروه خارج کرده و به لایه ها جدا کنیم. می توانید آن را به صورت دستی یا استفاده کنید انتشار به لایه ها (توالی)برای تسریع روند. قبل از اینکه فایل را به After Effects وارد کنیم، باید آن را در قالب فایل Illustrator ذخیره کنیم.

ما می توانیم اشیاء را با استفاده از Release to Layers (Sequence) دسته بندی کنیم تا زمان گرانبها را هدر ندهیم.

وارد کردن و سازماندهی یک فایل در After Effects CC

اکنون آماده وارد کردن به After Effects CC هستید. بیایید از میانبر صفحه کلید استفاده کنیم Ctrl+I (ویندوز)یا Command+I (مک)برای بارگیری کادر محاوره ای فایل وارداتی، یا رفتن به فایل > وارد کردن > فایل…در همان جا فایل Illustrator CC را که آماده کرده ایم انتخاب کرده و کلیک کنید وارد كردن.یک کادر محاوره ای کوچک باید با نام فایل انتخاب شده ظاهر شود. انتخاب کنید ترکیب بندیاز لیست کشویی به نام نوع واردات.

بیشتر راه سریعوارد کردن یک فایل - روی محل ستون در پانل پروژه دوبار کلیک کنید.

در پنل Timeline، ترکیب جدید را خواهیم دید. روی آن دوبار کلیک می کنیم. اکنون باید لایه‌های Illustrator CC را با نمادهای نارنجی در سمت چپ نامشان ببینیم.

قبل از شروع کار، باید تمام این لایه ها را به تبدیل کنیم لایه های شکل دادن. ما باید همه آنها را انتخاب کنیم Ctrl+A/Command+A، یا به صورت دستی استفاده کنید Shift + ماوس چپ. پس از آن روی لایه کلیک راست کرده و انتخاب کنید Create > Create Shapes from Vector Layer.

اکنون که لایه‌های جدید انتخاب شده‌اند، آن‌ها را به بالای پنل بالای لایه‌های Illustrator CC بکشید و سپس لایه‌های Illustrator CC را حذف کنید تا مانعی نشوند.

تبدیل لایه های Illustrator CC به لایه های شکل در After Effects CC

اگرچه لازم نیست، مهم است که به هر لایه یک نام و/یا رنگ مناسب بدهیم. این به ما امکان می دهد تا زمانی که روی فریم های کلیدی تمرکز می کنیم کارآمدتر کار کنیم. در مثال زیر، رنگ‌های برچسب کم و بیش با لایه‌های مربوطه مطابقت دارند.

برچسب زدن لایه های شکل با نام ها، رنگ ها، برچسب ها و موقعیت های مناسب بسیار کاربردی است.

از میانبر صفحه کلید برای پیکربندی تنظیمات استفاده کنید Ctrl+K/Command+Kیا ترکیب > تنظیمات ترکیب…از قسمت Composition Settings باید Width، Height، Frame Rate و Duration را برای Width، Height، Frame Rate و Duration انتخاب کنیم. برای این پروژه، من 60 فریم در ثانیه را برای صاف نگه داشتن انیمیشن انتخاب کردم.

در این لحظهبه نظر می رسد همه چیز آماده است، اما یک کار دیگر وجود دارد که باید انجام شود. ما باید لایه های خاصی را با هم گروه بندی کنیم تا حرکات آنها با لایه اصلی که می توانیم کنترل کنیم هماهنگ باشد. این روش نامیده می شود فرزندپروری.

از Pick Whip برای اختصاص یک لایه والد به چندین لایه استفاده کنید.

در مثال ما، لایه‌های کم‌اهمیت (لایه‌های کودک) مانند شیشه جلو، قطعات بدن، چوب و طناب‌ها را به لایه اولیه بدنه (لایه مادر) اختصاص دادم. این به من اجازه داد تا موقعیت و چرخش کل ماشین (به استثنای چرخ ها) را با استفاده از لایه مادر کنترل کنم.

ساخت انیمیشن

می خواستم ماشین به سنگ برخورد کند و کمی در هوا معلق بماند. من هم می خواستم درخت بالا و پایین برود و تنه را باز کند. من با ساختن سنگ، ماشین و چرخ شروع کردم. سپس وقت آن بود که از بزرگترین مانع عبور کنیم - قرار دادن عمل روی درخت. وقتی این کار انجام شد، مجبور شدم روی جزئیات کوچکی مانند قفسه و طناب ها کار کنم.

طرحی که انیمیشن را توصیف می کند

اولین قدم ساختن یک عنصر یا لایه سنگ بود، اما به جای بازگشت به Illustrator CC برای افزودن یک لایه دیگر، فقط از ابزار Pen Tool در After Effects CC استفاده کردم. این به من اجازه داد تا به سرعت یک سنگ کوچک طراحی کنم.

اوه، ابزار قدرتمند قلم!

صندوق عقب کار نسبتاً ساده ای بود. من آن را در پشت ماشین نصب کردم و یک نقطه لنگر در راس پایین سمت چپ ایجاد کردم. با استفاده از Pick Whip، آن را به لایه والد بدنه اختصاص دادم. مرحله ماقبل آخر ارائه اثر چرخش بود که به نوبه خود باعث واقعی تر شدن لحظه پرش خودرو شد. Bodymovin در ترکیب با کتابخانه سیار Lottie.

P.S.می توانید فایل های Illustrator CC و After Effects CC من را پیدا کنید.

مجموعه آیکون برای دانلود رایگان در دسترس است.

GIF شفاف در Adobe Illustrator به صورت زیر انجام می شود. به منوی File > Save for Web & Devices (Alt+Ctrl+Shift+S) بروید. در پنجره باز شده در قسمت Optimized file format ابتدا باید به تب بروید اندازه تصویر(اندازه تصویر). واقعیت این است که کل صفحه به طور پیش فرض وارد پنجره بهینه سازی می شود و این معمولاً ضروری نیست. بنابراین، در تب Image Size، چک باکس را از حالت انتخاب خارج کنید کلیپ در آرت بورد(برش به تناسب صفحه) و روی دکمه اعمال کلیک کنید.

سپس در لیست انتخاب فرمت، GIF را انتخاب کنید و کادر شفافیت را علامت بزنید.

پس از آن، ما تعیین می کنیم که کدام رنگ ها شفاف باشند. تمام رنگ های موجود در تصویر در برگه موجود است جدول رنگی(Color Chart) و به صورت مربع های رنگی نمایش داده می شوند. ابزاری را از نوار ابزار سمت چپ پنجره انتخاب کنید قطره چکان(پیپت).

رنگ ها را می توان به دو صورت تعریف کرد. ساده ترین راه این است که رنگ را با قطره چکان مستقیماً روی تصویر مشخص کنید - پس از آن رنگ با یک خط تیره روی جدول رنگ برجسته می شود. خوب، اگر دقیقاً می دانید کدام رنگ باید شفاف باشد، می توانید با کلیک روی کادر رنگی مربوطه، آن را مستقیماً در جدول رنگ انتخاب کنید. و در حالت اول و دوم، اگر نیاز به انتخاب چند رنگ دارید، باید با فشار دادن کلید Shift (یا Ctrl) کار کنید. پس از انتخاب رنگ، باید به برنامه دستور دهید تا آن را شفاف کند. برای انجام این کار، روی نماد کلیک کنید رنگ‌های انتخاب‌شده را به شفاف نشان می‌دهد(رنگ های انتخاب شده را به شفافیت اضافه کنید). در شکل، این دکمه دایره ای است و رنگ قرمز روی شفاف تنظیم شده است. یک ناحیه شفاف روی تصویر ظاهر می شود و مربع روی جدول رنگ ظاهر آن را تغییر می دهد - بخشی از آن به یک مثلث سفید تبدیل می شود. برای لغو رنگ انتخاب شده، باید آن را در جدول رنگ انتخاب کنید و سپس دوباره روی نماد Maps Selected Colors to Transparent کلیک کنید.

چند کلمه در مورد روش تنظیم شفافیت. منوی کشویی مسئول آن است. الگوریتم شفافیت Dither را مشخص کنید، به زبان روسی - الگوریتم شبیه سازی شفافیت (شکل زیر). چهار انتخاب وجود دارد: بدون شفافیت Dither - بدون الگوریتم، Diffusion Transparency Dither - Diffuse الگوریتم، الگوریتم شفافیت Dither - الگوریتم مبتنی بر الگو و Noise Transparency Dither - الگوریتم مبتنی بر نویز. در حالت الگوریتم پراکنده، نوار لغزنده فعال می شود میزان(مقدار) که به شما امکان می دهد مقدار انتشار را تغییر دهید. چه چیزی را در عمل اعمال کنیم؟ بسته به هدف و تصویر. من از این گزینه استفاده نمی‌کنم و همیشه پیش‌فرض را ترک می‌کنم - بدون شفافیت Dither.

ذخیره را فشار دهید - GIF شفاف آماده است. این کار در نسخه CS4 (نسخه 14) Adobe Illustrator انجام شد، اما همه عملکردها و میانبرهای صفحه کلید مربوط به نسخه قبلی CS3 (نسخه 13) هستند.

سلام به همه! امروز سعی می کنم ویژگی های برنامه را شرح دهم Adobe Illustrator، مقایسه آن با قابلیت های فلاش. این یک تجزیه و تحلیل جهانی از برنامه استخوان نیست، بلکه شرحی از برخی از تراشه های جالبی است که من در این برنامه کشف کردم. من اطلاعات را تکه تکه در حین مطالعه جمع آوری کردم تا همه آنها را در یک پست قرار دهم. فوراً باید اعتراف کنم که من یک کاربر تصویرگر فوق تجربه نیستم، فقط در شش ماه گذشته از آن در طراحی استفاده کرده ام (قبل از آن همه چیز را در فلش می کشیدم). بسیاری شکایت دارند که تصویرگر پیچیده است، نه همیشه شهودی. تا حدودی قبول دارم بعد از فلش این برنامه سخته. اما نکته اصلی اینجا ترک کردن نیست، بلکه ادامه تحصیل است. و بعد از یکی دو هفته، این فکر به ذهنم خطور می کند که چگونه قبلاً بدون آن مدیریت می کردم!

بنابراین، آنچه در مورد illustrator دوست داشتم، و آنچه برای خودم یافتم که در فلش نیست.
1. من با ساده ترین، اما در عین حال ضروری شروع می کنم. سعی کنید اشیاء را در یک دایره به صورت فلش بچینید. قبلا بود ابزار دکو، اما حذف شد، ظاهراً غیر ضروری تلقی شد. ما تصمیم گرفتیم که انجام آن با دست لذت بخش تر است. Illustrator این ویژگی را دارد: افکت - Distort&Transform - Transform.

همه چیز سریع و ساده است، ما مقادیر (فاصله بین اشیاء، تعداد کپی ها) را خودمان در تنظیمات تنظیم می کنیم.

2. زیگزاگ

حتی ساده تر، اما با این وجود مفید است. به نظر بی اهمیت می رسد، اما در فلش باید با دست نقاشی کنید، در illustrator این موضوع چند ثانیه است.

3. تغییر شکل اجسام (Warp)

چنین چیزی در فلش وجود ندارد. در مثال زیر فقط 2 راه برای تغییر شکل اشکال ساده (Effect - Warp - Arc / Fish) نشان دادم. در واقع 15 مورد از آنها وجود دارد. آخرین نسخهبرنامه ها.

4. گرد کردن خودکار گوشه ها (گوشه های گرد)

این کار را می توان به صورت دستی انجام داد: در یک شیء گرافیکی، هنگام انتخاب در یک گوشه (در همه گوشه ها)، یک نقطه سفید و یک علامت خط گرد ظاهر می شود. ماوس را بکشید، مطابق سلیقه خود تنظیم کنید.

اما این فقط در مورد اشکال صدق می کند، با خط مداد کمی متفاوت - جلوه گرد را اعمال کنید ( جلوه - سبک - گوشه های گرد). در خروجی همین نتیجه را می گیریم.

5. خشن کردن

این افکت روی اشکال ساده اعمال می شود ( افکت-تحریف و تبدیل-خشن). در نتیجه، چیزی شبیه مدل های سه بعدی کم پلی به دست می آوریم. من فکر می کنم این عالی است :) و از همه مهمتر - بسیار ساده است.

6 Pucker&Bloat(کشیدن و باد کردن)
نمونه ای در تصویر زیر:

7. پسوند فرم (مسیر افست)

در فلش یک تابع Expand Fill (افزودن پر کردن) وجود دارد، بر خلاف illustrator به هیچ وجه با خطوط مداد کار نمی کند.

8. قلم مو (براش هنری، قلم موی الگو، برس پراکنده)
برای نمونه عکس زیر را ببینید:

9. برس بافت (براش بافت)

همچنین تعداد زیادی براش بافت در illustrator وجود دارد که من در مورد آنها و نحوه ظاهر آنها نوشتم نسخه جدیدفلاش - . مشاهده شده است که استفاده از براش ها در Adobe Animate به طرز وحشتناکی کند است. خودشه:(

10. مطمئن نیستم که این یک ترفند است یا نه، اما می‌خواهم روی قلمویی با نامی خنده‌دار تمرکز کنم. لکهقلم مو. بر روی نوار ابزار قرار دارد، یک قلم مو بسیار زیبا برای استفاده. یه سری تنظیمات داره، من بیشتر از حد معمول دوستش دارم. توضیح مزایای آن با کلمات دشوار است، بهتر است یک بار آن را امتحان کنید.

10. تقسیم به شبکه

یکی دیگر از ویژگی های مفید، تابع تقسیم به گرید (Object-Path-Split to Grid) است که به شما امکان می دهد فرم را به قسمت های مساوی برش دهید. این ما را به یاد چه چیزی می اندازد؟ درست است - پنجره های یک ساختمان بلند. در مورد من، یک چیز جالب برای طراحی، به عنوان مثال، مناظر شهری؛)

یکی دیگه ابزار مفید، احتمالاً از اولین انتشار آن در illustrator ارائه شده است. با آن می توانید به عنوان مثال بافت های چوبی ایجاد کنید:

12. حرکت (راست - تبدیل - حرکت)

آفست شی توسط تعیین فاصله. در صورت تمایل، می توانید بلافاصله یک کپی ایجاد کنید که در فاصله دلخواه از شی انتخاب شده به صورت افقی / یا عمودی قرار می گیرد. نسخه قبلی فلش پلاگینی داشت که چنین بود این تابع. متاسفانه اسمش یادم نیست

ایجاد الگوهای بدون درز در illustrator بسیار راحت است ( شی-الگو-ساخت). به یاد دارم که چگونه دیوانه وار در فلش با خلق . در نسخه illustrator CC 2015، همه چیز خودکار است، مجموعه ای از تنظیمات به شما کمک می کند تا یک الگو را در ده ها تنوع ایجاد کنید، تنها با چند عنصر گرافیکی در دست. در بیشتر نسخه های اولیهبرنامه ها باید به صورت دستی انجام می شد، همانطور که در فلش تا کنون بود.

(توجه - الگو را می توان با استفاده از تابع تجزیه یک شیء قابل ویرایش برداری ساخت ( Object-Expand Appearance).

14. موزاییک شی (موزاییک)

یک پالت رنگی بر اساس تصویر موجود ایجاد کنید. سپس تصویری را که دوست دارید وارد تصویر کنید (باز کنید). شی - موزاییک شی ایجاد کنید. در تنظیمات فرکانس تقسیم در ارتفاع و عرض را مشخص می کنیم.

و در خروجی دریافت می کنیم:

15. مخلوط کردن (مخلوط کردن)

برای ایجاد گرادیان استفاده می شود. شما می توانید انتقال های گام به گام را، به عنوان مثال، در تصویر ایجاد کنید. نمی توانم بگویم که اغلب از آن استفاده می کنم، اما ممکن است برای کسی مفید باشد. به نظر من می توان از آن در ایجاد تصاویر پس زمینه ساده استفاده کرد.

این ابزار همچنین می تواند برای شبیه سازی اشیاء استفاده شود. دو شی را با فاصله از یکدیگر قرار می دهیم و Blend Options را اعمال می کنیم، تعداد مراحل (تعداد اشیاء کلون شده) را انتخاب می کنیم.

16. Build Shape Tool.یک چیز بسیار مفید برای کار با بدوی. در یک فلش، همانطور که به نظر من می رسید، کمتر راحت است.

Alt را نگه دارید و روی بخش های انتخاب شده کلیک کنید - بخش ها را حذف کنید. اگر ما به سادگی ماوس را روی چندین ناحیه انتخاب شده - اتصالات بکشیم.

افزونه - ابزاری که به برش خودکار، اتصال و غیره کمک می کند. فرم های انتخاب شده در مورد من، خیلی راحت نیست، من بیشتر از آن استفاده می کنم ساختنشکلابزار

(تخته های هنری)

18. پنل ابزار سفارشی

توانایی ایجاد نوار ابزار خود، دور انداختن موارد غیر ضروری و انتخاب تنها مواردی که استفاده می کنید.

در فلش، آرت بوردها، یعنی صحنه ها ( صحنه 1،2،3..) به طور جداگانه قرار دارند و باید بین آنها سوئیچ کنید (Shift + F2). در illustrator، همه آنها را می توان در مقابل چشمان شما قرار داد. هنگامی که چندین نسخه از یک نقاشی را ایجاد می کنید راحت است، به طوری که همه گزینه ها برای مقایسه در مقابل چشمان شما قرار می گیرند.

19. ایزومتریک با سبک های گرافیکی

و آخرین مورد ایجاد ایزومتریک بدون استفاده از 1 کلیک (یا بهتر است بگوییم، 3 کلیک، زیرا ما 3 طرف داریم؛) با استفاده از سبک های گرافیکی ( سبک های گرافیکی). چگونه این کار انجام می شود، دفعه بعد خواهم نوشت.

وجه اشتراک illustrator با فلش، قابلیت ذخیره یک شی در یک نماد (سمبل) است و همچنین می توان این نماد را بدون مشکل به فلش منتقل کرد (فایل .ai را در فلش باز کنید، توسط واردات - وارد کردن به مرحله).
نماد در illustrator همان ویژگی های فلش را دارد.
و در پایان، آنچه را که در illustrator به نظر من از فلش پایین تر است، خواهم نوشت. بله، بله، و وجود دارد. و این ابزار پر است ( سطل رنگ). هرچقدر سعی کنم تو illa عادت کنم تو فلش راحت تره.
اگر یادداشت های من برای شما مفید شده اند یا اگر می خواهید چیزی به تنهایی اضافه کنید - در نظرات خوش آمدید! همگی موفق باشید؛)

حالا بیایید کار را کمی پیچیده کنیم - بیایید یک بنر متحرک فلش بسازیم. البته در این مورد لازم نیست در مورد یک انیمیشن فلش کامل صحبت کنیم - بسته های تخصصی برای این کار وجود دارد. اما شما همچنین می توانید از Illustrator برای ایجاد یک ویدیوی ساده و آماتور استفاده کنید.

در Adobe Illustrator هیچ ابزار و ابزار رابط خاصی مانند جدول زمانی که برای برنامه های توسعه انیمیشن معمولی باشد وجود ندارد. اما یک نکته ظریف وجود دارد - لایه ها را می توان به عنوان قاب استفاده کرد.

یک بنر فقط با متن ایجاد کنید.

1. نمادها را با دستور گروه بندی کنید شی › گروه(شیء › گروه).
2. کار بعدی ساختن اشیاء کانتور از کاراکترهای فونت است، در غیر این صورت تشکیل صحیح لایه ها کارساز نخواهد بود. برای انجام این کار، یک گروه را انتخاب کنید و انتخاب کنید نوع › ایجاد خطوط کلی(قلم › Trace).
3. پس از آن منوی پالت را باز کنید لایه های(لایه ها) با کلیک بر روی دکمه به شکل فلش در پالت (شکل 8.11).

برنج. 8.11. منوی پالت لایه ها

ما به دستور در این منو علاقه مند هستیم انتشار به لایه (توالی)(تبدیل به لایه ها (به ترتیب)) که هر شی جداگانه را به یک لایه جدید ترجمه می کند. لطفا توجه داشته باشید که هنگام اعمال دستور، گروه باید انتخاب شود گروه، نه یک لایه لایه 1.

پالت چگونه باید باشد لایه های(لایه ها) پس از اجرا انتشار به لایه (توالی)(تبدیل به لایه ها (متوالی))، نشان داده شده در شکل. 8.12.

برنج. 8.12. پالت لایه ها پس از انتشار به لایه (توالی)

این کار آماده سازی را کامل می کند، می توانید با استفاده از آن صرفه جویی کنید ذخیره برای وب(ذخیره برای وب) به SWF. SWFفرمت گرافیکی اصلی مبتنی بر فناوری های فلش است. درست تر است که بگوییم این فرمت فلش است (شکل 8.13).

احتمالا امروزه همه کاربران کم و بیش با فلش آشنایی دارند. در حال حاضر رایج ترین فرمت انیمیشن در اینترنت است و برای ساخت اکثر صفحات وب چند رسانه ای استفاده می شود.

البته حتی یک دهم از قابلیت های فلش در Adobe Illustrator پیاده سازی نشده است، زیرا برنامه برای این کار طراحی نشده است. با این حال، در آن می توانید یک تصویر ثابت یا یک انیمیشن ساده بسازید.

برنج. 8.13. تنظیمات بهینه سازی برای فرمت SWF

تنظیمات زیر وجود دارد.

• فقط خواندنی(فقط خواندن). اگر کادر را علامت بزنید، فایل به گونه ای نوشته می شود که دیگر نمی توان آن را برای ویرایش در هیچ برنامه ای باز کرد. این کار از یک طرف حجم فایل ها را کاهش می دهد و از طرف دیگر از حق چاپ شما محافظت می کند.
• تنظیم با برچسب 1. پارامتری که نوع ذخیره - تصویر یا انیمیشن را مشخص می کند.
• اگر گزینه را انتخاب کنید فایل AI به فایل SWF(فایل Illustrator در فایل SWF)، تصویر به عنوان یک تصویر ثابت دقیقاً مشابه چیزی که هنگام کار در Illustrator روی صفحه می بینید ذخیره می شود.
• لایه ها به فریم های SWF(لایه‌ها به فریم‌های SWF) به شما امکان می‌دهد لایه‌های موجود را متحرک کنید، که به صورت فریم ارائه می‌شوند. ما باید این گزینه را انتخاب کنیم.
• کیفیت منحنی(کیفیت منحنی ها). دقت منحنی ها تکرار فایل منحنی تصویر اصلی. کاهش این تنظیم به طور قابل توجهی کیفیت را به خصوص در قسمت جزئیات کوچک کاهش می دهد، اما حجم فایل را کاهش می دهد. برای مورد ما، مقدار بهینه "7" است.
• نرخ فریم(تاخیر فریم). نرخ فریم و در نتیجه سرعت انیمیشن. برای اینکه افکت درست باشد، بیش از 4 فریم در ثانیه تنظیم نکنید.
• حلقه(تکرار). چندین بار انیمیشن را پخش کنید. مناسب برای انیمیشن هایی که یک حلقه تکراری مهم است. بنر متعلق به این نوع است.