نحوه ایجاد انیمیشن گیف در illustrator. نحوه ساخت انیمیشن در Adobe Illustrator. فایل های SWF را از 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یا سایر ویرایشگرهای فلش به عنوان مثال، من این گربه را در یک قدیمی درست کردم ماکرومدیا فلشکه در محل کار کشف کردم

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

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

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

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

این مقاله ساده ترین مثال از متحرک سازی وکتور SVG با استفاده از پلاگین سبک Jquery Lazy Line Painter را شرح می دهد.

منبع

برای تکمیل و درک کامل این کار، دانش اولیه HTML، CSS، Jquery مطلوب است، اما اگر فقط می خواهید SVG را متحرک کنید، لازم نیست) بیایید شروع کنیم!

و بنابراین مراحلی که باید طی کنیم:

1. ساختار فایل صحیح را ایجاد کنید
2. افزونه را دانلود و وصل کنید
3. در Adobe Illustrator یک خط جالب طراحی کنید
4. تصویر ما را به Lazy Line Converter تبدیل کنید
5. کد به دست آمده را در main.js قرار دهید
6. مقداری CSS به سلیقه اضافه کنید

1. ساختار فایل صحیح را ایجاد کنید
سرویس Initializr در این امر به ما کمک می کند، جایی که باید پارامترها را مانند تصویر زیر انتخاب کنید.

• کلاسیک H5BP (HTML5 Boiler Plate)
• بدون الگو
• فقط HTML5 Shiv
• کوچک شده
• کلاس های IE
• قاب کروم
• سپس روی دانلود آن کلیک کنید!

2. افزونه را دانلود و وصل کنید

از آنجایی که initializr با جدیدترین کتابخانه Jquery همراه است، از آرشیوی که باید از مخزن پروژه Lazy Line Painter دانلود کنیم، تنها 2 فایل باید به پروژه ما منتقل شود. اولین مورد "jquery.lazylinepainter-1.1.min.js" است (نسخه افزونه ممکن است متفاوت باشد) که در ریشه پوشه به دست آمده قرار دارد. مورد دوم example/js/vendor/raphael-min.js است.

این 2 فایل در پوشه js قرار می گیرند. و ما آنها را قبل از main.js در index.html خود مانند این قرار می دهیم:

3. یک تصویر کلی جالب در Adobe Illustrator بکشید

1. تصویر طرح کلی ما را در Illustrator بکشید (ساده ترین راه برای انجام این کار با ابزار Pen است)
2. لازم است که خطوط نقاشی ما بسته نشود، زیرا برای اثر ما به یک شروع و یک پایان نیاز داریم.
3. نباید پر شده باشد
4. حداکثر اندازه فایل 1000×1000 پیکسل، 40 کیلوبایت است
5. بیایید به مرزهای شیء برش دهیم Object>Artboards>Fit To Artboards Bounds
6. ذخیره به عنوان SVG (تنظیمات ذخیره استاندارد خوب هستند)

به عنوان مثال، می توانید از نمادهای موجود در پیوست استفاده کنید.

4. تصویر ما را به Lazy Line Converter تبدیل کنید
فقط نماد خود را بکشید و در کادر زیر رها کنید.
ضخامت، رنگ طرح کلی و سرعت انیمیشن را می توان در خود کد که بعد از تبدیل ظاهر می شود تغییر داد!

5. کد به دست آمده را در main.js قرار دهید
اکنون فقط کد به دست آمده را در یک فایل main.js خالی قرار دهید
گزینه ها:
strokeWidth - ضخامت طرح کلی
strokeColor - رنگ طرح کلی
همچنین می توانید با تغییر مقدار پارامتر مدت زمان (پیش فرض 600) سرعت ترسیم هر بردار را تغییر دهید.

6. مقداری CSS به سلیقه اضافه کنید
پاراگراف را از index.html حذف کنید

سلام دنیا! این HTML5 Boilerplate است.

و به جای آن بلوکی را وارد می کنیم که انیمیشن ما در آن قرار می گیرد

سپس مقداری CSS به فایل main.css اضافه کنید تا ظاهری زیباتر داشته باشید:

بدنه ( پس‌زمینه:#F3B71C؛ ) نمادهای # ( موقعیت: ثابت؛ بالا: 50%؛ سمت چپ: 50%؛ حاشیه: -300 پیکسل 0 0 -400 پیکسل؛ )

تمام فایل ها را ذخیره کنید
اکنون فقط index.html را در یک مرورگر مدرن باز کنید و از افکت لذت ببرید.

P.S. هنگام اجرا ماشین محلیمی توان شروع انیمیشن را چند ثانیه به تاخیر انداخت.

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

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

ایلاستریتور دارای ابزارهای داخلی بهینه سازی تصویر است که فرآیند بهینه سازی سریع و کارآمد را از طریق انواع روش های پیش نمایش ارائه می کند. پیش نمایش ایده نسبتاً دقیقی از نحوه بهینه سازی تصویر در زمان واقعی ارائه می دهد که به ارزیابی نتیجه بهینه سازی و انتخاب تنظیمات مناسب کمک می کند. و می توانید هم تصاویر ایجاد شده مستقیماً در 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). در نتیجه، یک جای خالی برای دکمه نشان داده شده در شکل دریافت می کنیم. 14.

به عنوان یک قاعده، در هر صفحه وب چندین دکمه از یک نوع وجود دارد، به عنوان مثال، فقط در جهت فلش های کشیده شده روی آنها، که جهت حرکت در سایت را نشان می دهد، متفاوت است. ساده ترین حالت داشتن دو دکمه را در نظر بگیرید که یکی از آنها با فلش رو به پایین به معنای حرکت به صفحه بعد و دکمه با فلش به سمت بالا به صفحه قبلی است. به عنوان یک جای خالی برای فلش، یک مثلث منظم را که با ابزار ترسیم شده است، در نظر می گیریم چند ضلعی(چند ضلعی) با رنگ مشکی پر شده و برای جلوه بیشتر به عنوان یک شی مشبک طراحی شده است. فلش را روی دکمه حرکت دهید و موقعیت همه اشیاء را نسبت به یکدیگر با استفاده از دکمه های پالت مربوطه تنظیم کنید. تراز کردن(هم ترازی). اولین دکمه دریافتی در شکل نشان داده شده است. 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 با لایه‌های حفظ شده صادر می‌شود، که بر اساس آن یک رول‌اور در برنامه Image Ready ایجاد می‌شود. مزیت استفاده از ایلاستریتور، مانند بسیاری موارد دیگر، تعدادی از ویژگی های جالب آن است که در سایر موارد موجود نیست. ابزارهای نرم افزاری، همراه با راحتی تبدیل گرافیک برداری.

بیایید سعی کنیم یک 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 به طور فزاینده ای محبوب (Scalable Vector Graphics Scalable گرافیک برداری)، که بر اساس استاندارد 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. انیمیشن تمام شده

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 و 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 باز می شود و در Output Module (دو کلیک) فرمت خروجی را انتخاب می کنیم. *.mov را گرفتم

شکل 12 - رندر

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