راهنما: نحوه ایجاد انیمیشن SVG با استفاده از After Effects CC. چگونه در Adobe Illustrator انیمیشن سازی کنیم و فایل های SWF را از Illustrator صادر کنیم

06.03.2022 اهن

Adobe Illustrator و After Effects
واردات و انیمیشن ساده

سلام. امروز به بررسی انیمیشن های ساده در After Effects می پردازیم.

منابع: Adobe Illustrator CC
Adobe After Effects CC

بیایید یادگیری را با طراحی در ایلاستریتور شروع کنیم.

بیایید قرعه کشی کنیم
1) یک مستطیل زرد به عنوان پس زمینه بکشید

شکل 1 - مستطیل

2) یک دایره رسم کنید و آن را با یک گرادیان پر کنید
بیایید کمی روی دایره کار کنیم:
- نقطه پایین روی کانتور را حذف کنید، یک قوس دریافت می کنیم.
- یک خط مستقیم بکشید، با بستن قسمت پایین قوس، یک نیم دایره می گیریم

شکل 2 - 1) رسم دایره؛ 2) گرادیان؛ 3) حذف نقطه

3) یک مستطیل بکشید و از آن کپی کنید
- یک مستطیل خاکستری؛
- مستطیل دیگر خاکستری تیره است
4) با قرار دادن تعداد پرتوها بر روی 3 یک مثلث از یک ستاره رسم کنید

شکل 3 - 1) نور مستقیم. 2) راست تاریکی؛ 3)مثلث

5) گربه را با قلم و اشکال ساده بکشید

شکل 4 - 1) سر; 2) گردن؛ 3) بدن؛ 4) پا؛ 5) دم

و اکنون بیشترین اصلیلحظه
بیایید تصاویر را در لایه ها توزیع کنیم (آنچه متحرک خواهد شد در یک لایه جداگانه است) مانند این:

شکل 5 - همه عکس‌ها (لایه‌های مهم را با رنگ قرمز مشخص می‌کنند)

همین، حالا بیایید پس انداز کنیم.
بیایید به تنظیمات ذخیره نگاه کنیم

شکل 6 - ذخیره

و حالا مرحله بعدی. بسته شدنAdobe Illustrator را باز کنید و After Effects را باز کنید.

وارد کردن به افتر افکت
فایل - واردات - فایل - فایل ذخیره شده ما را انتخاب کنیدتصویرگر.
بیایید انتخاب کنیم که لایه‌ها را از Illustrator وارد کنیم؛ اگر فوتیج قرار دهیم، تصویری با لایه‌های ادغام شده دریافت می‌کنیم، اما به آن نیازی نداریم.

شکل 7 - وارد کردن به عنوان ترکیب

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

شکل 8 - ترکیب باز

و اکنون چیزی که امروز اینجا هستیم انیمیشن است.

انیمیشن در پس از اثرات
نقطه چرخش را در بالای فلش با استفاده از ابزار Pan Behind Tool (میانبر - Y) تنظیم کنید. ما فقط یک نقطه را می گیریم و آن را به جایی که لازم است منتقل می کنیم. در نتیجه به این شکل خواهد شد..

شکل 9 - ابزار پان و لایه ها

همین، حالا بیایید به سراغ لایه های انیمیشن برویم.
ما به یک لایه Arrow و Head_cat نیاز داریم.
بیایید با فلش شروع کنیم.
بیایید لیست را گسترش دهیم، آن را پیدا کنیم و روی ساعت کلیک کنیم. بنابراین نقطه اول را روی صفر ثانیه قرار می دهیم. این انیمیشن در مجموع 2 ثانیه طول خواهد کشید.
بنابراین، اینها تنظیماتی هستند که باید انجام دهید (ما در مجموع 3 امتیاز قرار می دهیم):

دومین	0	1	2
	+66	- 70	+66

این چیزی است که به نظر خواهد رسید:

شکل 10 - فلش چرخشی

حالا بیایید سر گربه را متحرک کنیم.
بیایید head_cat را گسترش دهیم و پیدا کنیم موقعیت.
در اینجا 4 نقطه وجود خواهد داشت.
فقط آخرین مختصات بدون تاثیر روی بقیه تغییر می کند.

دومین	0.1	0.17	1.12	2.0
موقعیت	689.3	729.3	729.3	689.3

بیایید به تصویر نگاه کنیم.

شکل 11 - موقعیت سر

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

مرحله نهایی

تولید
شما باید یک محصول نهایی از کار خود ایجاد کنید.
بیا به منو برویم - به صف رندر اضافه کنید
پنل Render باز می شود و در ماژول خروجی (دو کلیک) فرمت خروجی را انتخاب کنید. *.mov را گرفتم

شکل 12 - رندر

روی دکمه RENDER کلیک کنید و نتیجه را دریافت کنید (فقط فراموش نکنید که مسیر را مشخص کنید).
همین.

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

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

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

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

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

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

امروز یک درس غیرمعمول Adobe Illustrator داریم. زیرا این بار نه یک تصویر ثابت، بلکه یک انیمیشن واقعی می سازیم. تصور کنید، معلوم می شود که می توانید با استفاده از Adobe Illustrator نیز کارتون بکشید :)

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

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

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

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

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

به روشی مشابه، ما باید 12 لایه فریم فیلم را جمع آوری کنیم که حرکت آن را مشخص می کند.

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

هنگامی که تمام لایه ها را مرور کردید و کمی جابجایی اضافه کردید، می توانید شروع به ایجاد انیمیشن دایره متحرک کنید. برای این کار دایره متشکل از بخش هایی از سند را با قسمت های کارتونی کپی کنید و روی لایه اول بالای قاب فیلم قرار دهید.

اگر دایره را لغو انتخاب کنید، مانند یک کل واحد به نظر می رسد. این دقیقا همان چیزی است که ما نیاز داریم.

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

به روشی مشابه، باید دایره را در هر لایه بعدی کپی کنید، در حالی که یک بخش بیشتر با رنگ روشن تر از بار قبلی رنگ آمیزی کنید. این 12 لایه با هم انیمیشنی از فیلم را تشکیل می دهند که با دایره ای پرکننده حرکت می کند.

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

سپس لایه های بعدی را یکی یکی روشن کنید و همان تکسچر را در آنجا کپی کنید. برای اینکه در هر فریم متفاوت به نظر برسد، کافی است آن را 90 درجه بچرخانید. همانطور که ممکن است حدس زده باشید، باید به هر ۱۲ فریم بافت اضافه کنیم.

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

اکنون که چرخه اصلی با انیمیشن فیلم آماده است، تنها چیزی که باقی می ماند اضافه کردن اعداد است. از آنجایی که شمارش معکوس ما از 3 به 1 به اضافه کلمه Go!!! می رود، حتی به لایه های بیشتری نیاز داریم. نه 12 تا 48. برای این کار باید سه کپی دیگر از لایه های آماده با انیمیشن فیلم تهیه کنید.

و سپس همه چیز ساده است. همان لایه اول را روشن کرده و عدد سه را در آنجا قرار دهید.

سپس باید این شکل را در لایه های بعدی کپی کنید تا انیمیشن دایره به پایان برسد. وقتی به کپی بعدی لایه ها رسیدید، جایی که دایره دوباره به طور کامل پر می شود، باید عدد دو را قرار دهید. به همین ترتیب عدد یک را در لایه های مورد نظر کپی کنید. و هنگامی که به لایه های نهایی برای کتیبه Go!!! رسیدید، قبل از کپی کردن کتیبه در لایه مورد نظر، دایره را حذف کنید.

این همه برای انیمیشن است. نکته اصلی در اینجا این است که گیج نشوید. می توانید نام های مناسبی برای لایه ها بگذارید، اما من یک جورهایی تنبل بودم :) و همچنین، وقتی کار خود را تمام کردید، حتماً با کلیک روی نماد چشم، همه لایه ها را دوباره روشن کنید.

در پنجره تنظیمات صادرات، حتما Export As: AI Layers را روی SWF Frames قرار دهید. این گزینه است که لایه های Illustrator را به فریم های انیمیشن تبدیل می کند. بعد روی دکمه Advanced کلیک کنید.

تنظیمات اضافی باز خواهد شد. در اینجا باید نرخ فریم را تنظیم کنید. من 12 فریم در ثانیه دارم. چک باکس Looping مسئول انیمیشن چرخه ای است. با تشکر از آن، ویدئو در یک دایره پخش خواهد شد. و گزینه Layer Order: Bottom Up لایه های illustrator را از پایین به بالا در پانل بازتولید می کند. این دقیقاً همان روشی است که ما انیمیشن خود را ساختیم.

خروجی یک فیلم فلش با انیمیشن ما است.

اکنون می بینید که ساخت انیمیشن ساده در Adobe Illustrator آنقدرها هم که در نگاه اول به نظر می رسد دشوار نیست.

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

همچنین اخیراً HTML5 و CSS3 به طور فزاینده ای برای ایجاد انیمیشن استفاده می شوند. این کد توسط مرورگرهای مدرن پشتیبانی می شود و نیازی به استفاده از فلش پلیر ندارد.

رومی با نام مستعار داکاسکابه ویژه برای وبلاگ یادداشت هایی از تصویرگر Microstock

در خبرنامه ما مشترک شوید تا چیز جدیدی را از دست ندهید:

به روشی مشابه، ما باید 12 لایه فریم فیلم را جمع آوری کنیم که حرکت آن را مشخص می کند.

اگر دایره را لغو انتخاب کنید، مانند یک کل واحد به نظر می رسد. این دقیقا همان چیزی است که ما نیاز داریم.

و سپس همه چیز ساده است. همان لایه اول را روشن کرده و عدد سه را در آنجا قرار دهید.

خروجی یک فیلم فلش با انیمیشن ما است.

اکنون می بینید که ساخت انیمیشن ساده در Adobe Illustrator آنقدرها هم که در نگاه اول به نظر می رسد دشوار نیست.

رومی با نام مستعار داکاسکامخصوصا برای وبلاگ

در خبرنامه ما مشترک شوید تا چیز جدیدی را از دست ندهید:

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

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

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

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

2-بالا(دو گزینه) مشاهده همزمان تصویر اصلی و بهینه شده مطابق با تنظیمات مشخص شده (شکل 1).
4-بالا(چهار گزینه) در این حالت، Viewport به چهار پنجره (شکل 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) که ابتدا در قالب هوش مصنوعی ذخیره شده است. تلاش برای بهینه سازی فوری آن برای وب به هیچ چیز خوبی منجر نمی شود، زیرا در این حالت تصویر به طور خودکار برش داده می شود، که موقعیت واقعی کتیبه حاصل را در نتیجه تغییر شکل در نظر نمی گیرد (شکل 4 و 5).

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

دکمه ها

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

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

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

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

اکنون باید نسخه های بهینه شده هر دکمه را ذخیره کنید. ابتدا لایه زیرین را نامرئی کنید در این صورت دکمه روی لایه بالایی حفظ خواهد شد. یک تیم انتخاب کنید File=>ذخیره برای وب(File=>Save for Web)، پارامترهای بهینه سازی دکمه را پیکربندی کنید، برای مثال، همانطور که در شکل نشان داده شده است. 17، روی دکمه کلیک کنید صرفه جویی(ذخیره) و نام فایل را وارد کنید. دکمه ذخیره شده نهایی در شکل نشان داده شده است. 18. حالا visibility را به لایه پایین برگردانید، لایه بالایی را نامرئی کنید و دکمه دوم را به همین ترتیب ذخیره کنید و نام دیگری به آن بدهید. نتیجه در شکل نشان داده شده است. 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 roll over, turn over) هستند که تحت تأثیر ماوس ظاهر تغییر می کنند. نمونه هایی از چرخش های معمولی دکمه های متحرک هستند. Rollovers اغلب هنگام ایجاد سایر عناصر ناوبری وب سایت استفاده می شود. در واقع، هر چرخشی یک تصویر نیست، بلکه چندین (حداکثر چهار) تصویر است که هر کدام مربوط به یک رویداد خاص است. رویدادهای اصلی به شرح زیر در نظر گرفته می شوند: حالت عادی عادی، بیش از نشان دادن نشانگر ماوس بر روی یک عنصر، و پایین فشار دادن دکمه سمت چپ ماوس هنگام نگه داشتن مکان نما روی آن. از نظر تئوری، رویدادهایی مانند رها کردن کلیک چپ ماوس پس از کلیک کردن، بالا پس از رها کردن دکمه، خروج هنگام خروج از منطقه فعال می‌توانند دخیل باشند. با این حال، در عمل، آنها اغلب به تغییر عنصر فقط برای سه یا حتی دو رویداد اول محدود می شوند.

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

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

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

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

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

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

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

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

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

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

جابجایی های SVG

فرمت محبوب SVG (گرافیک برداری مقیاس پذیر) که بر اساس استاندارد XML ایجاد شده است، همچنین به شما امکان می دهد تا انواع عناصر تعاملی، به ویژه رول اورها را دریافت کنید، اما در عمل این کار کاملاً متفاوت اجرا می شود. شایان ذکر است که ایجاد 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 نامیده می شود و هنگام نصب Adobe Illustrator در پوشه Sample Files\Sample Art\SVG\SVG روی دیسک ذخیره می شود. برای گنجاندن فایل 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 را در پوشه ای که این فایل دارد کپی کنید. اگر فایل ایجاد شده را اجرا کنید، نتیجه را در شکل مشاهده خواهید کرد. 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.

برای استفاده از توابع، حتی راحت تر به دست آوردن موارد خالی، که می توانند به راحتی در ImageReady به انیمیشن تبدیل شوند، راحت تر است. ترکیبات زندهبرنامه های ایلاستریتور این استفاده ترکیبی از 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 ثانیه در نظر گرفته شده است. سپس فایل بهینه سازی را با دستور ذخیره کنید File=>Save Optimized(File=>ذخیره با بهینه سازی)، تنظیم در لیست نوع فایلگزینه فقط تصاویر (*.gif). این انیمیشن شبیه شکل 76.

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

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