یک GIF شفاف در Adobe Illustrator به شرح زیر انجام می شود. به منوی File\u003e Save for Web & Devices (Alt + Ctrl + Shift + S) بروید. در پنجره ای که باز می شود ، در قسمت Optimized format file ابتدا باید به برگه بروید اندازه تصویر (اندازه تصویر). واقعیت این است که بطور پیش فرض کل صفحه وارد پنجره بهینه سازی می شود و این معمولاً ضروری نیست. بنابراین ، در برگه Image Size کادر انتخاب را علامت بزنید کلیپ به Artboard (برش به اندازه صفحه) را بزنید و روی دکمه Apply کلیک کنید.
سپس GIF را از لیست انتخاب قالب انتخاب کنید و کادر شفافیت را انتخاب کنید.
پس از آن تعریف خواهیم کرد که کدام رنگ ها شفاف خواهند بود. تمام رنگهای موجود در تصویر در برگه موجود است جدول رنگی (جدول رنگی) و به صورت مربع های رنگی نمایش داده می شود. ابزار را در نوار ابزار در سمت چپ پنجره انتخاب کنید خط چشم (پیپت)
برای تعریف رنگ ها دو روش وجود دارد. ساده ترین راه این است که یک رنگ را با یک خط چشم به طور مستقیم بر روی تصویر مشخص کنید - پس از آن ، رنگ با یک ضربه تاریک در جدول رنگ برجسته می شود. خوب ، اگر دقیقاً می دانید چه رنگی باید شفاف باشد ، می توانید با کلیک بر روی مربع رنگی مربوطه ، آن را مستقیماً در جدول رنگ انتخاب کنید. و در موارد اول و دوم ، اگر شما نیاز به انتخاب چندین رنگ دارید ، باید با کلید Shift (یا Ctrl) فشرده شده کار کنید. پس از انتخاب رنگ ، باید برنامه را آموزش دهید تا شفاف شود. برای انجام این کار ، روی نماد کلیک کنید نقشه ها رنگ ها را به شفاف انتخاب کردند (رنگ های انتخاب شده را به شفافیت اضافه کنید). در تصویر ، این دکمه به صورت دایره ای قرار دارد و قرمز به عنوان شفاف انتخاب شده است. یک منطقه شفاف روی تصویر ظاهر می شود ، و مربع روی میز رنگ ظاهر آن را تغییر می دهد - بخشی از آن به یک مثلث سفید تبدیل می شود. برای لغو رنگ انتخاب شده ، باید آن را در جدول رنگ انتخاب کرده و دوباره روی نمادهای انتخاب شده رنگها روی نماد شفاف کلیک کنید.
چند کلمه در مورد نحوه تنظیم شفافیت. منوی کشویی مسئول آن است. الگوریتم شفافیت Dither را مشخص کنید، به روسی - الگوریتم شبیه سازی شفافیت (شکل زیر). می توان چهار گزینه را انتخاب کرد: بدون شفافیت - هیچ الگوریتمی ، شفافیت پخش شکاف - الگوریتم پراکندگی ، الگوریتم مبتنی بر الگوی و الگوریتم مبتنی بر سر و صدا و الگوریتم مبتنی بر نویز. در حالت الگوریتم پخش ، نوار لغزنده فعال می شود میزان (مقدار) که به شما امکان می دهد مقدار انتشار را تغییر دهید. چه عملی را عملی کنیم؟ بسته به هدف و تصویر. من از این گزینه استفاده نمی کنم و همیشه پیش فرض را ترک می کنم - بدون شفافیت Dither.
روی ذخیره کلیک کنید - GIF شفاف آماده است. کار در نسخه Adobe Illustrator CS4 (v. 14) انجام شده است ، اما کلیه اقدامات و میانبرهای صفحه کلید برای نسخه قبلی CS3 (نسخه 13) مرتبط هستند.
شما یک یا دو آیکون دارید که دوست دارید با انیمیشن متحرک شوید. از کجا شروع می کنید؟ بیایید بگوییم که شما فایلهای SVG ، Illustrator CC و After Effects CC دارید ، اما راه حل شما را ناپسند می کند.
در این مقاله ، من نشان خواهم داد که چگونه می توانید به راحتی فایل SVG را تحریک کنید ، از جمله تهیه پرونده SVG در Illustrator و وارد کردن آن به After Effects CC. من همچنین توضیح خواهم داد که چگونه می توانید آن را به شکل های لایه تبدیل کرده و حرکت را اضافه کنید. در آخر ، اجازه دهید در مورد صادرات و ارائه صحبت کنیم.
نتیجه نهایی کار.
حال بیایید به قسمت جالب سرگرم شویم - چگونه تصاویر را تحریک کنیم.
تهیه پرونده SVG در Illustrator
بیایید با باز کردن پرونده SVG خود در Adobe Illustrator CC شروع کنیم. من در حال متحرک کردن یک آیکون ماشین کوچک هستم که به صورت رایگان در Week Of Icons در دسترس است.
بعد از باز کردن پرونده ، ما باید گروه ها را جدا کرده و همه اشیاء را در لایه ها جدا کنیم. می توانید آن را به صورت دستی انجام دهید یا از آن استفاده کنید انتشار به لایه ها (دنباله) برای سرعت بخشیدن به روند. قبل از وارد کردن پرونده در After Effects ، باید آن را به عنوان پرونده Illustrator ذخیره کنیم.
ما می توانیم اشیاء را با استفاده از Release to Layers (دنباله) گروه سازگار کنیم تا وقت گرانبها را هدر ندهیم. وارد کردن و سازماندهی پرونده در After Effects CC
اکنون آماده وارد کردن CC After Effects CC هستید. بیایید از میانبر صفحه کلید استفاده کنیم Ctrl + I (ویندوز)یا فرمان + من (مک)بارگیری گفتگو وارد کردن پرونده، یا به پرونده\u003e واردات\u003e پرونده ... در همان مکان پرونده Illustrator CC را که آماده کردید انتخاب کنید و کلیک کنید وارد كردن.یک کادر گفتگوی کوچک باید با نام پرونده انتخاب شده ظاهر شود. لطفا انتخاب کنید ترکیب بندی از کشویی تحت عنوان نوع واردات.
یک راه سریعتر برای وارد کردن پرونده ، دوبار کلیک کردن روی ستون در قسمت پروژه است. در پانل Timeline ترکیب جدیدی را مشاهده خواهیم کرد. روی آن دوبار کلیک کنید. اکنون باید لایه های Illustrator CC را با نمادهای نارنجی در سمت چپ عناوین مشاهده کنیم.
قبل از اینکه به شغل خود بپردازیم ، باید تمام این لایه ها را به آن تبدیل کنیم لایه های شکل... باید همه آنها را انتخاب کنیم Ctrl + A / Command + Aیا به صورت دستی با ماوس Shift + سمت چپ... پس از آن بر روی لایه راست کلیک کرده و را انتخاب کنید از لایه بردار شکل ایجاد کنید.
اکنون که لایه های جدید انتخاب شده اند ، آنها را به بالای پانل در بالای لایه های Illustrator CC بکشید ، و سپس لایه های Illustrator CC را حذف کنید تا در این راه قرار نگیرند.
تبدیل لایه های Illustrator CC به لایه های شکل در After Effects CC در حالی که لازم نیست ، مهم است که به هر لایه یک نام مناسب بدهید و یا آن را رنگ آمیزی کنیم. این امر به ما امکان می دهد تا کارآمدتر کار کنیم زیرا در کانون های کلیدی متمرکز خواهیم شد. در مثال زیر ، رنگ لیبل ها کم و بیش با پر کردن لایه های مربوطه مطابقت دارند.
بسیار مناسب است که لایه های شکل را با نام ، رنگ ، برچسب و مکان های مناسب برچسب گذاری کنید. برای پیکربندی گزینه ها از میانبر صفحه کلید استفاده کنید Ctrl + K / Command + K یا ترکیب\u003e تنظیمات ترکیب ... از میان تنظیمات آهنگسازی ، باید عرض ، ارتفاع ، نرخ فریم و مدت زمان (عرض ، ارتفاع ، نرخ فریم و مدت زمان) را انتخاب کنیم. برای این پروژه ، 60 فریم در ثانیه را انتخاب کردم تا انیمیشن هموار باشد.
در این مرحله به نظر می رسد که همه چیز آماده است ، اما یک کار دیگر هم باید انجام شود. ما باید لایه های خاصی را با هم گروه بندی کنیم تا حرکات آنها با لایه اصلی که می توانیم کنترل کنیم همگام باشد. این روش نامیده می شود والدین.
برای تعیین لایه والد به چند لایه از Pick Whip استفاده کنید. در مثال ما ، لایه های کمتری (لایه های کودک) مانند شیشه جلوی شیشه ، قطعات بدن ، چوب و طناب را به لایه اولیه بدن (لایه والدین) اختصاص داده ام. این به من اجازه می دهد تا با استفاده از لایه والد ، موقعیت و چرخش کل خودرو (به استثنای چرخ ها) را کنترل کنم.
ایجاد انیمیشن
دلم می خواست ماشین به صخره برخورد کند و کمی در هوا معلق شود. من همچنین می خواستم درخت به بالا و پایین حرکت کند و تنه را باز کند. من با ایجاد سنگ ، ماشین و چرخ شروع کردم. سپس زمان آن بود که بر بزرگترین موانع غلبه کنیم - تحمیل عمل بر روی درخت. پس از اتمام این کار ، من با جزئیات کوچک مانند صندوق عقب و طناب مقابله کردم.
طرح با توضیحات انیمیشن اولین قدم این بود که عنصر یا لایه مانند سنگ به نظر برسد ، اما به جای بازگشت به Illustrator CC برای اضافه کردن یک لایه دیگر ، فقط از Pen Tool در After Effects CC استفاده کردم. این به من اجازه داد تا به سرعت یک سنگ کوچک را طراحی کنم.
اوه ، ابزار قلم توانا! تنه کار نسبتاً ساده بود. من آن را به پشت ماشین تنظیم کردم و یک نقطه لنگرگاه را در پایین راس سمت چپ قرار دادم. با استفاده از Pick Whip ، آن را به لایه بدن والدین اختصاص دادم. مرحله پیش فرض این بود که جلوی ریسمان را بگذارد ، که به نوبه خود لحظه ای تندرست اتومبیل را واقعی تر جلوه داد. بدیووین در ترکیب با کتابخانه موبایل Lottie.
P.S. می توانید پرونده های Illustrator CC و After Effects CC را پیدا کنید.
مجموعه آیکون ها برای بارگیری مجانی در اینجا موجود است.
به تازگی ، انواع مختلفی از گرافیک های SVG (Scalable Vector Graphics) در وب سایت ها و برنامه ها بسیار محبوب شده اند. این به این دلیل است که همه جدیدترین مرورگرها قبلاً از این قالب پشتیبانی می کنند. در اینجا اطلاعاتی درباره پشتیبانی مرورگر SVG ارائه شده است.
این مقاله ساده ترین مثال از متحرک سازی یک بردار SVG با استفاده از افزونه سبک جی کوئری Lazy Line Painter را در بر می گیرد.
منبعبرای تکمیل و درک کامل این کار ، دانش پایه HTML ، CSS ، Jquery مطلوب است ، اما اگر فقط می خواهید SVG را تحریک کنید ، لازم نیست) اجازه دهید شروع کنیم!
و مراحلی که باید دنبال کنیم نیز چنین است:
- ساختار صحیح فایل را ایجاد کنید
- افزونه را بارگیری و وصل کنید
- طراحی خلاقانه هنر را در Adobe Illustrator ترسیم کنید
- تصویر ما را به Lazy Line Converter تبدیل کنید
- کد نتیجه را در main.js قرار دهید
- مقداری CSS را به مزه اضافه کنید
1- ساختار صحیح فایل را ایجاد کنید
سرویس Initializr در این امر به ما کمک می کند ، جایی که شما نیاز دارید پارامترهایی را مانند تصویر زیر انتخاب کنید.
- کلاسیک H5BP کلاسیک (صفحه بویلر HTML5)
- بدون الگویی
- فقط HTML5 Shiv
- به حداقل رساند
- کلاسهای اینترنت اکسپلورر
- قاب Chrome
- سپس روی بارگیری آن کلیک کنید!
2. افزونه را بارگیری و وصل کنید
از آنجایی که firstizr با جدیدترین کتابخانه جی کوئری همراه است ، از بایگانی که باید آن را از مخزن پروژه Lazy Line Painter بارگیری کنیم ، فقط باید 2 پرونده را به پروژه خود انتقال دهیم. مورد اول "jquery.lazylinepainter-1.1.min.js" است (ممکن است نسخه این افزونه متفاوت باشد) و در ریشه پوشه حاصل شده قرار دارد. مورد دوم به عنوان مثال / js / vendor / raphael-min.js است.
این 2 پرونده را در پوشه js قرار دهید. و ما آنها را قبل از main.js مانند index.html خود متصل می کنیم:
3. یک تصویر کلیپ عالی را در Adobe Illustrator بکشید
- تصویر طرح کلی ما را در Illustrator ترسیم کنید (ساده ترین راه برای انجام این کار با ابزار قلم)
- لازم است که خطوط نقاشی ما بسته نشود زیرا برای تأثیر ما یک آغاز و یک پایان ضروری است
- نباید پر شود
- حداکثر اندازه پرونده - 1000 × 1000 px ، 40kb
- Crop to Object\u003e Artboards\u003e Fit To Artboards Bounds
- ذخیره با فرمت SVG (تنظیمات ذخیره استاندارد کار خواهد کرد)
به عنوان مثال ، می توانید از نمادهای موجود در پیوست استفاده کنید.
4. تصویر ما را به Lazy Line Converter تبدیل کنید
فقط نماد خود را به کادر زیر بکشید.
ضخامت ، رنگ طرح کلی و سرعت انیمیشن را می توان در خود کد تغییر داد که پس از تبدیل ظاهر می شود!
5- کد نتیجه را در main.js قرار دهید
اکنون فقط کد حاصل را در یک پرونده اصلی main.js می چسبانیم
مولفه های:
عرض عرض - ضخامت طرح
strokeColor - رنگ رئوس مطالب
همچنین می توانید با تغییر مقادیر پارامتر مدت (با پیش فرض 600) سرعت ترسیم هر وکتور را تغییر دهید.
6. مقداری CSS را به مزه اضافه کنید
پاراگراف را از index.html حذف کنید
سلام دنیا! این HTML Boilerplate است.
و به جای آن ، بلوکی را وارد می کنیم که انیمیشن ما در آن برگزار شود
سپس مقداری CSS را برای داشتن ظاهری زیبا به پرونده اصلی.Css اضافه کنید:
بدن (پس زمینه: # F3B71C؛) #icons (موقعیت: ثابت؛ بالای: 50٪؛ سمت چپ: 50٪؛ حاشیه: -300px 0 0 -400px؛)
همه پرونده ها را ذخیره کنید
اکنون ، فقط index.html را در یک مرورگر مدرن باز کنید و از جلوه آن لذت ببرید.
P.S. هنگام راه اندازی روی یک دستگاه محلی ، شروع انیمیشن ممکن است چند ثانیه به تعویق بیفتد.
قالب فایل Flash (SWF) بر پایه وکتور است و برای گرافیک های مقیاس پذیر و جمع و جور برای وب طراحی شده است. از آنجا که این قالب فایل بر اساس گرافیک های برداری استوار است ، این شیء کیفیت تصویر را در هر وضوح حفظ می کند و برای ایجاد فریم های انیمیشن ایده آل است. در Illustrator می توانید فریم های انیمیشن جداگانه را روی لایه ها ایجاد کرده و سپس لایه های تصویر را به عنوان فریم های جداگانه برای استفاده در وب سایت خود صادر کنید. شما همچنین می توانید تعریف کنید نمادها در پرونده Illustrator برای کاهش اندازه انیمیشن. هنگام صادرات ، هر نماد فقط یک بار در پرونده SWF تعریف می شود.
دستور صادرات (SWF)
بیشترین کنترل را در مورد انیمیشن و فشرده سازی بیت فراهم می کند.
کنترل بیشتری روی ترکیب قالبهای SWF و Bitmap در یک طرح تکه تکه شده فراهم می کند. این دستور گزینه های تصویر کمتری نسبت به دستور Export (SWF) ارائه می دهد ، اما آخرین تنظیمات استفاده شده را برای دستور Export (استفاده کنید) استفاده می کند.
هنگام تهیه شیء برای صرفه جویی در SWF ، دستورالعمل های زیر را در نظر داشته باشید.
می توانید از دستگاه مرکزی استفاده کنید تا ببینید چگونه آثار هنری Illustrator در Flash Player در انواع دستگاه های دستی به نظر می رسد.
درج آثار Illustrator
آثار هنری ایجاد شده در Illustrator را می توان به سرعت ، به راحتی و به راحتی در Flash کپی و چسباند.
هنگامی که هنر Illustrator را در Flash قرار می دهید ، ویژگیهای زیر حفظ می شوند.
ضخامت خط
تعریف شیب
متن (از جمله فونت های OpenType)
تصاویر مرتبط
حالت های ترکیبی
کانتورها و شکل ها
علاوه بر این ، Illustrator و Flash هنگام وارد کردن آثار هنری موارد زیر را پشتیبانی می کنند.
انتخاب کل لایه های سطح بالا در آثار هنری Illustrator و چسباندن آنها در Flash باعث حفظ لایه ها و خصوصیات آنها (دید و قفل) می شود.
قالب های رنگی Illustrator به غیر از RGB (CMYK ، مقیاس خاکستری و قالب های سفارشی) توسط Flash تبدیل به RGB می شوند. رنگ های RGB به روش معمول چسبانده می شوند.
هنگام وارد کردن یا چسباندن آثار هنری Illustrator ، می توانید از گزینه های مختلفی برای حفظ جلوه های خاص (مانند سایه بازیگران متن) به عنوان فیلترهای فلش استفاده کنید.
فلش ماسک های Illustrator را ذخیره می کند.
صادرات پرونده های SWF از Illustrator
پرونده های SWF صادر شده از Illustrator با کیفیت و نسبت فشرده سازی پرونده های SWF صادر شده از Flash مطابقت دارند.
هنگام صادرات ، می توانید انواع مختلفی از سبک های از پیش تعریف شده را برای خروجی بهینه انتخاب کنید و نحوه استفاده از چندین تابلوی مختلف ، نحوه تبدیل نمادها ، لایه ها ، متن و ماسک ها را مشخص کنید. به عنوان مثال ، می توانید نمادهای Illustrator را به عنوان فیلم یا گرافیک صادر کنید و نمادهای SWF را از لایه های Illustrator بسازید.
وارد کردن پرونده های Illustrator به Flash
برای ایجاد یک طرح کامل در Illustrator و سپس وارد کردن آن در Flash در یک مرحله ، می توانید با استفاده از دستورات File\u003e Import Into Desktop ، این اثر هنری را با فرمت بومی Illustrator (AI) ذخیره کنید و با وفاداری بالایی وارد Flash کنید. منطقه یا پرونده\u003e وارد کردن به کتابخانه.
اگر پرونده Illustrator شما حاوی چندین Artboard است ، کادر مورد نظر برای وارد کردن در جعبه گفتگوی Flash Import را انتخاب کنید و تنظیمات مربوط به هر لایه در آن را نشان دهید. کلیه اشیاء موجود در کارتن انتخابی به صورت یک لایه به Flash وارد می شوند. هنگام وارد کردن یک تابلوی مختلف از همان پرونده AI ، اشیاء از آن مقوا به عنوان یک لایه جدید به Flash وارد می شوند.
هنگامی که کارهای هنری Illustrator را به عنوان فایلهای AI ، EPS یا PDF وارد می کنید ، فلش همان ویژگی هایی را در هنگام چسباندن آثار هنری Illustrator حفظ می کند. همچنین اگر پرونده Illustrator که وارد می کنید حاوی لایه هایی باشد ، می توانید آنها را به یکی از روش های زیر وارد کنید.
لایه های Illustrator را به لایه های Flash تبدیل کنید.
لایه های Illustrator را به فریم های Flash تبدیل کنید.
همه لایه های Illustrator را به یک لایه Flash تبدیل کنید.
امروز یک آموزش غیرمعمول Adobe Illustrator داریم. زیرا این بار ما یک تصویر ایستا نخواهیم ساخت بلکه یک انیمیشن واقعی است. تصور کنید ، معلوم می شود که می توانید با استفاده از Adobe Illustrator کارتون نیز بکشید :)
و ما به هیچ وجه برای این کار احتیاج نداریم. سازمان شایسته ای از لایه ها و صادرات کار نهایی با فرمت swf ، که در آن هر لایه به یک قاب انیمیشن تبدیل می شود. در آموزش امروز ما یک انیمیشن شمارش معکوس سبک سبک یکپارچهسازی با سیستمعامل را ترسیم خواهیم کرد. خروجی باید یک فیلم فلش با این شمارش معکوس بسیار باشد.
اولین کاری که باید بکنید این است که تمام عناصر لازم را برای انیمیشن آینده ترسیم کنید. برای این کار ، در یک سند جداگانه ، من دو موقعیت از یک قاب فیلم ، یک دایره مرجع ، که به بخش های جداگانه ، یک بافت و یک خراش عمودی برش داده شده بود ، اضافه کردم تا اثر باستان را اضافه کنم ، و همچنین تمام اعداد و کتیبه ها را اضافه کنم.
هنگامی که تمام قسمت های کارتون ما آماده است ، می توانید خود انیمیشن را شروع کنید. برای راحتی ، این بهترین کار در یک سند جدید انجام می شود. در این حالت ، لایه ها نقش قاب های انیمیشن را بازی می کنند. و در همان لایه اول ، فقط باید قاب نوار فیلم را کپی کنید. آن را در وسط محل کار قرار دهید.
حالا یک لایه دوم ایجاد کنید و نوار فیلم را درون آن کپی کنید که سوراخ های کنار لبه ها جبران شوند. همچنین باید محور باشد.
از این دو لایه می توانید یک انیمیشن فیلم متحرک دریافت کنید. اما بعدا به لایه های خیلی بیشتری احتیاج داریم. بنابراین دو لایه اول را انتخاب کنید ، به گزینه های پانل بروید و یک کپی از لایه ها تهیه کنید.
به همین ترتیب ، ما باید 12 لایه از تصاویر متحرک فیلم را جمع کنیم.
اکنون ما یک لایه کامل داریم و همه آنها قابل مشاهده است. به این معنا که لایه های بالایی مانع از لایه های پایین می شوند که برای کار خیلی راحت نیست. بنابراین می توانید با کلیک بر روی آیکون با چشم به سمت چپ نام لایه ، چند لایه را خاموش کنید. برای خاموش یا روشن کردن همه لایه ها ، کلید Alt را در حالی که روی نماد چشم کلیک می کنید ، نگه دارید. روشن و خاموش کردن لایه ها ، می توانید دقیقاً آنچه را که در یک قاب مشخص از انیمیشن آینده ما قرار دارد ، ببینید. و اکنون ، برای اضافه کردن یک لرزش اندک به حرکت فیلم ، باید قاب های بدست آمده را کمی در جهت های مختلف تغییر دهیم. برای انجام این کار ، فقط لایه ای را که می خواهید در آن لحظه کار کنید ، روشن کنید و سپس قاب را به چند جهت تغییر دهید.
وقتی همه لایه ها را پشت سر گذاشتید و یک تغییر جزئی اضافه کردید ، می توانید شروع به ساخت انیمیشن دایره متحرک کنید. برای انجام این کار ، دایره ، متشکل از بخش ها ، را از سند با قطعات کارتونی کپی کرده و آن را روی اولین لایه روی قاب نوار فیلم قرار دهید.
اگر دایره را انتخاب نکنید ، مانند یک کل واحد خواهد بود. این دقیقاً همان چیزی است که ما نیاز داریم.
اما از آنجا که از بخش های جداگانه ای تشکیل شده است ، می توانید با تغییر رنگ آنها ، خیلی سریع و به راحتی انیمیشن بسازید. برای این کار ، این حلقه را به لایه دوم کپی کرده و بخش اول را سبک تر کنید. یادتان باشد که فیلم ما هنگام حرکت تکان می خورد ، بنابراین اصلاً لازم نیست که دایره را دقیقاً در مرکز قاب قرار دهیم. آن را با چشم قرار دهید.
به همین ترتیب ، شما باید دایره را در هر لایه بعدی کپی کنید ، در حالی که با یک رنگ روشن تر یک بخش بیشتر از زمان قبلی را نقاشی می کنید. با هم ، این 12 لایه یک فیلم سینمایی با یک دایره پر کننده تشکیل می دهند.
در مرحله بعد باید به لایه های خود بافت اضافه کنیم. لایه اول را روشن کنید و بافت را از پرونده اصلی با قطعات یدکی کپی کنید.
سپس لایه های بعدی را به نوبه خود روشن کنید و همان بافت را همانجا کپی کنید. برای اینکه در هر فریم متفاوت به نظر برسد ، فقط آن را 90 درجه بچرخانید. همانطور که ممکن است حدس زده باشید ، باید بافت را به هر 12 فریم اضافه کنیم.
اگر قبلاً از کپی کردن خسته شده اید ، پس می توانم شما را خوشحال کنم - خیلی کم باقی مانده است. سخت ترین قسمت تمام شد. باقی مانده است که خراشهای عمودی و تقریباً همه چیز را اضافه کنید. برای انجام این کار ، دوباره ابتدا خراش اصلی را کپی کرده و آن را در یک مکان دلخواه در چند لایه قرار دهید. در مورد من ، خراش فقط در دو لایه ظاهر می شود.
اکنون که حلقه اصلی با انیمیشن فیلم آماده است ، همچنان باید اعداد را اضافه کنیم. از آنجا که از 3 به 1 به علاوه کلمه Go !!! را حساب می کنیم ، به لایه های بیشتری هم نیاز داریم. نه 12 ، بلکه 48. برای این کار ، شما باید سه نسخه دیگر از لایه های آماده را با انیمیشن فیلم تهیه کنید.
و بعد همه چیز ساده است اولین لایه را روشن کنید و عدد سه را در آنجا قرار دهید.
سپس باید تا پایان انیمیشن دایره این عدد را در لایه های بعدی کپی کنید. وقتی به نسخه بعدی لایه ها رسیدید ، جایی که دایره دوباره کاملاً پر خواهد شد ، باید شماره دو را از قبل قرار دهید. به همین روش شماره یک را در لایه های مورد نظر کپی کنید. و هنگامی که به لایه های نهایی برای زیرنویس Go !!! رسیدید ، فقط قبل از کپی کردن عنوان به لایه مورد نظر ، دایره را پاک کنید.
این همه با انیمیشن است. نکته اصلی در اینجا سردرگمی نیست. می توانید نامهای مناسب را به لایه ها بدهید ، اما من به نوعی خیلی تنبل شده بودم :) و با این وجود ، هنگامی که کار خود را تمام کردید ، حتماً با کلیک کردن روی نماد چشم ، همه لایه ها را برگردانید.
با تنظیمات صادرات ، Export As: AI Layers را روی SWF Frames قرار دهید. این گزینه است که لایه های تصویرگر را به فریم های انیمیشن تبدیل می کند. سپس بر روی دکمه Advanced کلیک کنید.
تنظیمات اضافی باز خواهد شد. در اینجا باید نرخ فریم نرخ فریم را تنظیم کنید. من 12 فریم در ثانیه دارم. کادر انتخاب Looping مسئول حلقه انیمیشن است. با تشکر از او ، این فیلم به صورت حلقه پخش می شود. و گزینه Layer Order: Bottom Up لایه های تصویرگر را از پایین به بالا در پنل تولید می کند. این دقیقاً همان است که ما انیمیشن خود را ساختیم.
در خروجی ، ما با انیمیشن خود فیلم فلش می گیریم.
اکنون می توانید ببینید که انیمیشن ساده در Adobe Illustrator آنقدرها که در نگاه اول به نظر می رسد چندان دشوار نیست.
اما برای ایجاد فیلم های بلند یا برنامه های تعاملی هنوز هم بهتر است از Adobe Flash یا سایر ویرایشگرهای فلش استفاده کنید. به عنوان مثال ، من این گربه را در یک فلش قدیمی Macromedia ساختم که در کارم حفر شدم.
همچنین اخیراً از HTML5 و CSS3 بطور فزاینده ای برای ایجاد انیمیشن استفاده شده است. این کد توسط مرورگرهای مدرن پشتیبانی می شود و نیازی به استفاده از فلش پلیر ندارد.
رومی با نام مستعار به طور خاص برای وبلاگ
در خبرنامه ما مشترک شوید که چیز جدیدی را از دست ندهید:
