چگونه یک انیمیشن ساده در illustrator بسازیم. آموزش مصور برای Adobe Illustrator CS. ایزومتریک با سبک های گرافیکی
امروز یک درس غیرمعمول 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یا سایر ویرایشگرهای فلش به عنوان مثال، من این گربه را در یک قدیمی درست کردم ماکرومدیا فلشکه در محل کار کشف کردم
همچنین اخیراً HTML5 و CSS3 به طور فزاینده ای برای ایجاد انیمیشن استفاده می شوند. کد داده شدهتوسط مرورگرهای مدرن پشتیبانی می شود و نیازی به استفاده از فلش پلیر ندارد.
رومی با نام مستعار dacascas مخصوصا برای وبلاگ
در خبرنامه ما مشترک شوید تا چیز جدیدی را از دست ندهید:
اخیراً بسیار محبوب شده است نوع متفاوتانیمیشن گرافیک های SVG (گرافیک برداری مقیاس پذیر) در وب سایت ها و برنامه ها. این به دلیل این واقعیت است که همه چیز آخرین مرورگرهادر حال حاضر از این فرمت پشتیبانی می کند. در اینجا اطلاعاتی در مورد پشتیبانی مرورگر برای SVG وجود دارد.
این مقاله بحث می کند ساده ترین مثالوکتورهای SVG را با آسان متحرک کنید پلاگین جی کوئرینقاش خط تنبل.
منبعبرای تکمیل و درک کامل این کار، دانش اولیه HTML، CSS، Jquery مطلوب است، اما اگر فقط می خواهید SVG را متحرک کنید، لازم نیست) بیایید شروع کنیم!
و بنابراین مراحلی که باید طی کنیم:
1. ساختار فایل صحیح را ایجاد کنید
سرویس Initializr در این امر به ما کمک می کند، جایی که باید پارامترها را مانند تصویر زیر انتخاب کنید.
- کلاسیک H5BP (HTML5 Boiler Plate)
- بدون الگو
- فقط HTML5 Shiv
- کوچک شده
- کلاس های IE
- قاب کروم
- سپس روی دانلود آن کلیک کنید!
2. افزونه را دانلود و وصل کنید
از آنجایی که initializr با جدیدترین نسخه ارائه می شود کتابخانه جی کوئری، از آرشیوی که باید از مخزن پروژه 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 بکشید
به عنوان مثال، می توانید از نمادهای موجود در پیوست استفاده کنید.
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. هنگام اجرا بر روی یک ماشین محلی، شروع انیمیشن ممکن است چند ثانیه به تاخیر بیفتد.
واردات و انیمیشن ساده سلام. امروز به بررسی یک انیمیشن ساده در افتر افکت می پردازیم.
منابع: 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 را باز کنید.
وارد کردن به افتر افکت
File - Import - File - فایل Illustrator ذخیره شده ما را انتخاب کنید.
بیایید انتخاب کنیم که لایه ها را از Illustrator وارد کنیم، اگر فوتیج قرار دهیم، یک تصویر با لایه های ادغام شده دریافت می کنیم، اما ما به این نیاز نداریم.
شکل 7 - وارد کردن به عنوان ترکیب
همه وارداتی
حالا ببینیم چی داریم. روی ترکیب دوبار کلیک کنید تا باز شود و لایه ها را ببینید (اگر همه چیز به درستی انجام شود چندین لایه وجود خواهد داشت). ما این را دریافت می کنیم، تصویر را ببینید
شکل 8 - ترکیب باز
و اکنون چیزی که ما امروز اینجا هستیم - انیمیشن.
انیمیشن در افتر افکت
نقطه محوری را در فلش بالای آن با ابزار Pan Behind Tool (میانبر - Y) تنظیم کنید. فقط یک نقطه بگیرید و آن را به جایی که می خواهید منتقل کنید. در نتیجه به این شکل خواهد بود.. 
شکل 9 - ابزار پان و لایه ها
تمام شد، حالا بیایید به سراغ لایه های انیمیشن برویم.
ما به یک لایه Arrow و یک Head_cat نیاز داریم.
بیایید با فلش شروع کنیم.
لیست را گسترش دهید، ساعت را پیدا کنید و روی آن کلیک کنید. بنابراین نقطه اول را در ثانیه صفر قرار می دهیم. در مجموع، انیمیشن 2 ثانیه طول خواهد کشید.
بنابراین، اینها تنظیماتی است که باید انجام دهید (در مجموع 3 امتیاز قرار می دهیم)
| دومین | 0 | 1 | 2 |
| +66 | - 70 | +66 |
شکل 10 - فلش چرخشی
حالا بیایید سر گربه را متحرک کنیم.
head_cat را باز کنید و Position را پیدا کنید.
4 امتیاز خواهد بود.
فقط آخرین مختصات را بدون دست زدن به بقیه تغییر می دهد.
| دومین | 0.1 | 0.17 | 1.12 | 2.0 |
| موقعیت | 689.3 | 729.3 | 729.3 | 689.3 |
شکل 11 - موقعیت سر
بنابراین، اصل انیمیشن اینگونه بود. فلش از این طرف به طرف دیگر می چرخد، به محض نزدیک شدن به بچه گربه، سرش را به داخل خود می کشد، کمی در این حالت درنگ می کند و سپس آن را به جای خود باز می گرداند.
مرحله نهایی
تولید
شما باید یک محصول نهایی از کار خود ایجاد کنید.
به منو بروید - افزودن به صف رندر
پنل Render باز می شود و در Output Module (دو کلیک) فرمت خروجی را انتخاب می کنیم. *.mov را گرفتم
شکل 12 - رندر
روی دکمه RENDER کلیک کنید و نتیجه را بگیرید (فراموش نکنید که مسیر را مشخص کنید).
همین.
سلام به همه! امروز سعی خواهم کرد در مورد احتمالات توضیحی ارائه کنم نرم افزار Adobe Illustrator، آن را با قابلیت های فلش مقایسه می کند. این یک تجزیه و تحلیل جهانی از برنامه استخوان نیست، بلکه شرحی از برخی از تراشه های جالبی است که من در این برنامه کشف کردم. من اطلاعات را تکه تکه در حین مطالعه جمع آوری کردم تا همه آنها را در یک پست قرار دهم. فوراً باید اعتراف کنم که من یک کاربر تصویرگر فوق تجربه نیستم، فقط در شش ماه گذشته از آن در طراحی استفاده کرده ام (قبل از آن همه چیز را در فلش می کشیدم). بسیاری شکایت دارند که تصویرگر پیچیده است، نه همیشه شهودی. تا حدودی قبول دارم بعد از فلش این برنامه سخته. اما نکته اصلی اینجا ترک کردن نیست، بلکه ادامه تحصیل است. و بعد از یکی دو هفته، این فکر به ذهنم خطور می کند که چگونه قبلاً بدون آن مدیریت می کردم!
بنابراین، آنچه در مورد illustrator دوست داشتم، و آنچه برای خودم یافتم که در فلش نیست.
1. من با ساده ترین، اما در عین حال ضروری شروع می کنم. سعی کنید اشیاء را در یک دایره به صورت فلش بچینید. قبلاً یک ابزار Deco وجود داشت، اما حذف شد، ظاهراً غیر ضروری در نظر گرفته شد. ما تصمیم گرفتیم که انجام آن با دست لذت بخش تر است. Illustrator این عملکرد را دارد: Effect - Distort&Transform - Transform.
همه چیز سریع و ساده است، ما مقادیر (فاصله بین اشیاء، تعداد کپی ها) را خودمان در تنظیمات تنظیم می کنیم.
2. زیگزاگ
حتی ساده تر، اما با این وجود مفید است. به نظر بی اهمیت می رسد، اما در فلش باید با دست نقاشی کنید، در illustrator این موضوع چند ثانیه است.
3. تغییر شکل اجسام (Warp)
چنین چیزی در فلش وجود ندارد. در مثال زیر فقط 2 راه برای تغییر شکل اشکال ساده (Effect - Warp - Arc / Fish) نشان دادم. در واقع 15 مورد از آنها وجود دارد. آخرین نسخهبرنامه ها.
4. گرد کردن خودکار گوشه ها (گوشه های گرد)
این کار را می توان به صورت دستی انجام داد: در یک شیء گرافیکی، هنگام انتخاب در یک گوشه (در همه گوشه ها)، یک نقطه سفید و یک علامت خط گرد ظاهر می شود. ماوس را بکشید، مطابق سلیقه خود تنظیم کنید.
اما این فقط در مورد اشکال صدق می کند، با یک خط مداد کمی متفاوت - جلوه گرد را اعمال کنید (Effect - Stylize - Round Corners). در خروجی همین نتیجه را می گیریم.
5. خشن کردن
این افکت روی اشکال ساده اعمال می شود (Effect - Distort&Transform - Roughen). در نتیجه، چیزی شبیه مدل های سه بعدی کم پلی به دست می آوریم. من فکر می کنم این عالی است :) و از همه مهمتر - بسیار ساده است.
6. Pucker&Bloat (Pucker & Bloat)
نمونه ای در تصویر زیر:
7. پسوند فرم (مسیر افست)
در فلش یک تابع Expand Fill (افزودن پر کردن) وجود دارد، بر خلاف illustrator به هیچ وجه با خطوط مداد کار نمی کند.
8. قلم مو (براش هنری، قلم موی الگو، برس پراکنده)
برای نمونه عکس زیر را ببینید:
9. برس بافت (براش بافت)
همچنین تعداد زیادی براش بافت در illustrator وجود دارد که من در مورد آنها و نحوه ظاهر آنها نوشتم نسخه جدیدفلاش - . مشاهده شده است که استفاده از براش ها در Adobe Animate به طرز وحشتناکی کند است. خودشه:(
10. من مطمئن نیستم که آیا این یک ترفند است، اما من می خواهم بر روی یک قلم مو با نام خنده دار Blob Brush تمرکز کنم. بر روی نوار ابزار قرار دارد، یک قلم مو بسیار زیبا برای استفاده. یه سری تنظیمات داره، من بیشتر از حد معمول دوستش دارم. توضیح مزایای آن با کلمات دشوار است، بهتر است یک بار آن را امتحان کنید.
10. تقسیم به شبکه
یکی دیگر از ویژگی های مفید، تابع تقسیم به گرید (Object-Path-Split to Grid) است که به شما امکان می دهد فرم را به قسمت های مساوی برش دهید. این ما را به یاد چه چیزی می اندازد؟ درست است - پنجره های یک ساختمان بلند. در مورد من، یک چیز جالب برای طراحی، به عنوان مثال، مناظر شهری؛)
یکی دیگه ابزار مفید، احتمالاً از اولین انتشار آن در illustrator ارائه شده است. با آن می توانید به عنوان مثال بافت های چوبی ایجاد کنید:
12. حرکت (راست - تبدیل - حرکت)
آفست شی توسط تعیین فاصله. در صورت تمایل، می توانید بلافاصله یک کپی ایجاد کنید که در فاصله دلخواه از شی انتخاب شده به صورت افقی / یا عمودی قرار می گیرد. نسخه قبلی فلش پلاگینی داشت که چنین بود این تابع. متاسفانه اسمش یادم نیست
ایجاد الگوهای بدون درز در illustrator (Object-Pattern-Make) بسیار راحت است. به یاد دارم که چگونه دیوانه وار در فلش با خلق . در نسخه illustrator CC 2015، همه چیز خودکار است، مجموعه ای از تنظیمات به شما کمک می کند تا یک الگو را در ده ها تنوع ایجاد کنید، تنها با چند عنصر گرافیکی در دست. در نسخه های قبلی این برنامه، مانند فلش تا کنون، همه چیز باید به صورت دستی انجام می شد.
(توجه داشته باشید - الگو را می توان با استفاده از تابع گسترش ( Object - Expand Appearence ) به یک شی قابل ویرایش برداری تبدیل کرد.
14. موزاییک شی (موزاییک)
یک پالت رنگی بر اساس تصویر موجود ایجاد کنید. تصویری را که دوست دارید به بیمار وارد کنید (Open)، سپس Object - Create Object Mosaic. در تنظیمات فرکانس تقسیم در ارتفاع و عرض را مشخص می کنیم.
و در خروجی دریافت می کنیم:
15. مخلوط کردن (مخلوط کردن)
برای ایجاد گرادیان استفاده می شود. شما می توانید انتقال های گام به گام را، به عنوان مثال، در تصویر ایجاد کنید. نمی توانم بگویم که اغلب از آن استفاده می کنم، اما ممکن است برای کسی مفید باشد. به نظر من می توان از آن در ایجاد تصاویر پس زمینه ساده استفاده کرد.
این ابزار همچنین می تواند برای شبیه سازی اشیاء استفاده شود. دو شی را با فاصله از یکدیگر قرار می دهیم و Blend Options را اعمال می کنیم، تعداد مراحل (تعداد اشیاء کلون شده) را انتخاب می کنیم.
16. Build Shape Tool. یک چیز بسیار مفید برای کار با بدوی. در یک فلش، همانطور که به نظر من می رسید، کمتر راحت است.
Alt را نگه دارید و روی بخش های انتخاب شده کلیک کنید - بخش ها را حذف کنید. اگر ما به سادگی ماوس را روی چندین ناحیه انتخاب شده - اتصالات بکشیم.
افزونه - ابزاری که به برش خودکار، اتصال و غیره کمک می کند. فرم های انتخاب شده در مورد من، خیلی راحت نیست، من بیشتر از ابزار Build Shape استفاده می کنم.
(تخته های هنری)
18. پنل ابزار سفارشی
توانایی ایجاد نوار ابزار خود، دور انداختن موارد غیر ضروری و انتخاب تنها مواردی که استفاده می کنید.
در فلش، آرتبوردها، یعنی صحنه ها (صحنه 1،2،3 ..) به طور جداگانه قرار دارند و باید بین آنها سوئیچ کنید (Shift + F2). در illustrator، همه آنها را می توان در مقابل چشمان شما قرار داد. هنگامی که چندین نسخه از یک نقاشی را ایجاد می کنید راحت است، به طوری که همه گزینه ها برای مقایسه در مقابل چشمان شما قرار می گیرند.
19. ایزومتریک با سبک های گرافیکی
و آخرین - ایجاد ایزومتریک بدون استفاده از 1 کلیک (یا بهتر است بگوییم، 3 کلیک، زیرا ما 3 طرف داریم؛) با استفاده از سبک های گرافیکی (Graphic Styles). چگونه این کار انجام می شود، دفعه بعد خواهم نوشت.
وجه اشتراک illustrator با فلش امکان ذخیره یک شی در یک نماد (سمبل) است و همچنین می توان این نماد را بدون مشکل به فلش منتقل کرد (فایل .ai را در فلش باز کنید، توسط Import - Import to stage ).
نماد در illustrator همان ویژگی های فلش را دارد.
و در پایان، آنچه را که در illustrator به نظر من از فلش پایین تر است، خواهم نوشت. بله، بله، و وجود دارد. و این ابزار پر (سطل رنگ) است. هرچقدر سعی کنم تو illa عادت کنم تو فلش راحت تره.
اگر یادداشت های من برای شما مفید شده اند یا اگر می خواهید چیزی به تنهایی اضافه کنید - در نظرات خوش آمدید! همگی موفق باشید؛)
بهینه سازی گرافیک وب
اطلاعات گرافیکیبسیار کندتر از متن است و زمان بارگذاری تصاویر متناسب با حجم فایل های گرافیکی آنها است. از همین رو بارگذاری سریعصفحات وب نیاز به اندازه کوچکی از تصاویر گرافیکی تعبیه شده در آنها دارند که از طریق بهینه سازی آنها حاصل می شود. بهینه سازی تصویر به عنوان تغییر شکل آن در نظر گرفته می شود که حداقل اندازه فایل را با حفظ کیفیت تصویر مورد نیاز در این مورد فراهم می کند، که در درجه اول با کاهش تعداد رنگ ها در تصاویر گرافیکی، استفاده از فرمت های فشرده و خاص فایل و بهینه سازی تنظیمات فشرده سازی برای افراد به دست می آید. تکه های تصویر
ایلاستریتور دارای ابزارهای داخلی بهینه سازی تصویر است که فرآیند بهینه سازی سریع و کارآمد را از طریق انواع روش های پیش نمایش ارائه می کند. پیش نمایشایده نسبتاً دقیقی از نحوه بهینه سازی تصویر در زمان واقعی ارائه می دهد که به ارزیابی نتیجه بهینه سازی و انتخاب مناسب کمک می کند. تنظیمات مورد نظر. و می توانید هم تصاویر ایجاد شده مستقیماً در Illustrator را بهینه کنید و هم سایر تصاویر را، مانند عکس هایی که قصد دارید در یک وب سایت قرار دهید.
پارامترهای بهینه سازی در پنجره ذخیره تنظیم می شوند برای وب(ذخیره برای وب)، با دستوری به همین نام از منوی File (File) فراخوانی می شود. این برنامه استفاده از یکی از چهار حالت پیش نمایش را پیشنهاد می کند، اما دو حالت برای ارزیابی کیفیت بهینه سازی بهترین هستند:
- 2-Up (دو گزینه) مشاهده همزمان تصویر اصلی و بهینه شده مطابق با تنظیمات مشخص شده (شکل 1).
- 4-Up (چهار گزینه) در این حالت، 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)، که در ابتدا با فرمت AI ذخیره شده بود. تلاش برای بهینه سازی فوری آن برای وب به هیچ چیز خوبی منجر نمی شود، زیرا در این حالت تصویر به طور خودکار برش داده می شود، که موقعیت واقعی کتیبه به دست آمده در نتیجه تغییر شکل را در نظر نمی گیرد (شکل 4 و 5).
بنابراین سعی می کنیم با دستور File=>Export (File => Export) نماد را به فرمت PSD صادر کنیم حجم تصویر ایجاد شده 143 کیلوبایت خواهد بود. فایل PSD به دست آمده را باز کنید و از دستور File=>Save for Web (File=>Save for Web) استفاده کنید. با توجه به تعداد محدود رنگ های درگیر در تصویر، در این مورد، فرمت GIF بهینه است که با تنظیمات خاصی باید تصمیم بگیرید. با آزمایش تنظیمات، می توانید مطمئن شوید که بهترین کیفیت توسط الگوریتم فشرده سازی پیش فرض Selective (Selective) انتخاب شده توسط برنامه ارائه می شود. در مورد صاف کردن، پس، با توجه به وجود پر کردن گرادیان، بهتر است الگوریتمی با نویز ایجاد نویز انتخاب کنید (شکل 6). اندازه فایل بهینه سازی به دست آمده 6.729 کیلوبایت خواهد بود (شکل 7)، در حالی که شفافیت پس زمینه حفظ خواهد شد، که با ذخیره تصویر GIF همراه با فایل HTML به راحتی تأیید می شود (شکل 8). در نتیجه، در این مثالفایل های emblem.html و emblem.gif در پوشه Primer1 به دست آمدند.
یکی از عناصر طراحی خاص ضروری هر صفحه وب، دکمه های کنترل گرافیکی هستند. تصور یک صفحه بدون آنها به سادگی غیرممکن است. طراحی دکمه‌ها امروزه به یک سبک خاص تبدیل شده است و Illustrator به شما امکان می‌دهد پیچیده‌ترین گزینه‌ها را ایجاد کنید. برای مثال، دکمه‌هایی که به‌عنوان اشیاء شبکه‌ای و (یا) با ماسک طراحی شده‌اند، بسیار مؤثرتر از موارد معمول به نظر می‌رسند.
گزینه ایجاد یک دکمه برآمده گرد در Illustrator را در نظر بگیرید. یک شی برداری که با رنگ دلخواه پر شده است به شکل دایره رسم کنید (شکل 9) و با دستور Object => Create Gradient Mesh (Object => Create a Gradient Mesh) به شبکه تبدیل کنید و چهار ردیف و چهار را مشخص کنید. ستون‌ها، و در لیست Appearance (View) گزینه To Center Highlight (Illumination) برابر با 60 را انتخاب کنید (شکل 10). ابزار Direct Selection را انتخاب کنید و در گوشه سمت چپ بالای جسم کلیک کنید و نقاط لنگر واقع در آنجا را انتخاب کنید (شکل 11). رنگ سلول مربوطه را با انتخاب آن در پالت Swatches به سفید تغییر دهید (شکل 12).
ابزار Ellipse (Ellipse) را بردارید، نشانگر ماوس را در مرکز دایره ایجاد شده قبل از این قرار دهید و در حالی که نگه دارید کلیدهای Altو Shift، دایره جدید را روی دایره قدیمی بکشید تا 1 تا 2 پیکسل از هر طرف بزرگتر از دایره قبلی باشد. آن را یک حاشیه سیاه ( Stroke ) به عرض 1-2 پیکسل قرار دهید و آن را با یک گرادیان شعاعی در جهت قرمز به سفید پر کنید (شکل 13). شی بردار ایجاد شده را 1-2 پیکسل به سمت راست و پایین بکشید، سپس بدون حذف قسمت انتخابی، روی آن کلیک راست کرده و از منوی زمینهدستور Arrange=>Send To Back را انتخاب کنید. در نتیجه، یک جای خالی برای دکمه نشان داده شده در شکل دریافت می کنیم. 14.
به عنوان یک قاعده، در هر صفحه وب چندین دکمه از یک نوع وجود دارد، به عنوان مثال، فقط در جهت فلش های کشیده شده روی آنها، که جهت حرکت در سایت را نشان می دهد، متفاوت است. ساده ترین حالت داشتن دو دکمه را در نظر بگیرید که یکی از آنها با فلش رو به پایین به معنای حرکت به صفحه بعد و دکمه با فلش به سمت بالا به صفحه قبلی است. به عنوان یک جای خالی برای فلش، بیایید یک مثلث منظم را که با ابزار Polygon (Polygon) ترسیم شده است، با رنگ مشکی رنگ آمیزی شده و برای جلوه بیشتر، به عنوان یک شی مشبک طراحی شده است. بیایید فلش را به دکمه منتقل کنیم و با استفاده از دکمه های مربوط به پالت Align (Alignment) موقعیت همه اشیاء را نسبت به یکدیگر تنظیم کنیم. اولین دکمه دریافتی در شکل نشان داده شده است. 15. با انتخاب دستور Duplicate Layer Layers یک کپی از لایه با دکمه ایجاد کنید در نتیجه دو لایه یکسان بدست می آوریم. سپس فلش روی کپی لایه را انتخاب کرده و با انتخاب دستور Transform=>Rotate Transformation=>Rotate از منوی زمینه آن را 180 درجه بچرخانید. همان دکمه ای را دریافت می کنیم که در شکل نشان داده شده است. 16. لطفاً توجه داشته باشید که ذخیره همه دکمه‌های یکسان یک پروژه در یک فایل در لایه‌های مختلف بسیار راحت‌تر است، که در این مورد نشان داده شده است.
اکنون باید گزینه های بهینه شده را برای هر یک از دکمه ها ذخیره کنید. ابتدا لایه زیرین را نامرئی کنید در این صورت دکمه روی لایه بالایی باقی می ماند. دستور File=>Save for Web (File=>Save for Web) را انتخاب کنید، پارامترهای بهینه سازی دکمه را پیکربندی کنید، برای مثال، همانطور که در شکل نشان داده شده است. 17، روی دکمه Save کلیک کنید و نام فایل را وارد کنید. دکمه ذخیره شده در نتیجه در شکل نشان داده شده است. 18. حالا لایه پایین را نمایان کنید، لایه بالایی را نامرئی کنید و دکمه دوم را به همین ترتیب ذخیره کنید و نام دیگری به آن بدهید. نتیجه در شکل نشان داده شده است. 19.
اکنون تنها چیزی که باقی می ماند این است که مطمئن شوید دکمه ها در صفحه وب خوب به نظر می رسند و آنها را در یک صفحه سفارشی قرار دهید (شکل 20). در نتیجه در این مثال فایل Primer2.html و دو تصویر گرافیکی در پوشه images (پوشه Primer2) به دست آمد.
در صورت تمایل، در طول فرآیند بهینه سازی، دکمه را می توان به راحتی به یک برش تبدیل کرد. در این حالت پس از انتخاب دستور File => Save for Web (File => Save for Web) و تنظیم پارامترهای بهینه سازی، ابزار Slice Select را از پالت ابزار انتخاب کرده و بر روی تصویر دوبار کلیک کنید که به طور خودکار به تصویر تبدیل می شود. یک برش با شماره سریال 1 (شکل 21). با دوبار کلیک مجدد، پنجره Slice Options باز می شود، که در آن باید یک پیوند را مشخص کنید و به صورت اختیاری نام برش را تغییر دهید (شکل 22)، و سپس تصویر بهینه شده را ذخیره کنید. نتیجه در این حالت فایل های Primer3.html (شکل 23) و Primer3.gif (پوشه Primer3) خواهد بود.
یکی از راه‌های جذاب‌تر کردن صفحه، معرفی عناصر طراحی است که آنها را تغییر می‌دهند ظاهر(یا حالت) بسته به رفتار ماوس یا به ندرت در صورت هر موقعیت دیگری: بزرگنمایی، اسکرول، بارگذاری، خطاها و غیره.
در میان این عناصر، معروف ترین عناصر رول اور (از انگلیسی roll over to roll, roll over) هستند که تحت تأثیر ماوس ظاهر خود را تغییر می دهند. دکمه های متحرک نمونه هایی از چرخش های معمولی هستند. Rollovers اغلب هنگام ایجاد سایر عناصر ناوبری سایت استفاده می شود. در واقع، هر چرخشی یک تصویر نیست، بلکه چندین (حداکثر چهار) تصویر است که هر کدام مربوط به یک رویداد خاص است. رویدادهای اصلی به شرح زیر در نظر گرفته می شوند: حالت عادی عادی، بیش از نشان دادن نشانگر ماوس بر روی عنصر و فشار دادن دکمه سمت چپ ماوس به سمت پایین هنگام قرار گرفتن روی آن. از نظر تئوری، رویدادهایی مانند رها کردن کلیک چپ ماوس پس از کلیک کردن، بالا پس از رها کردن دکمه، خروج هنگام خروج از منطقه فعال می‌توانند دخیل باشند. با این حال، در عمل، اغلب به تغییر عنصر فقط برای سه یا حتی دو رویداد اول محدود می شود.
رول اورهای کلاسیکدر مفهوم کلاسیک، رول‌اور مجموعه‌ای از تصاویر گرافیکی با فرمت GIF و کد HTML مربوط به آنها است که به لطف آن، بسته به رفتار ماوس، یک تصویر جایگزین تصویر دیگر در پنجره مرورگر می‌شود.
Illustrator برای ایجاد مستقیم rollover به معنای کلاسیک طراحی نشده است، اما می تواند به توسعه عناصر اولیه برای آنها کمک کند. ایده در این مورد ایجاد یک لایه با یک تصویر مربوط به اولین رویداد است. سپس یک کپی از لایه ایجاد کنید و تصویر را برای مطابقت با رویداد دوم تغییر دهید و به همین ترتیب. تصویر لایه‌ای حاصل به یک فایل PSD با لایه‌های حفظ شده صادر می‌شود، که بر اساس آن یک رول‌اور در ایجاد می‌شود. برنامه تصویرآماده. مزیت استفاده از ایلاستریتور، مانند بسیاری موارد دیگر، تعدادی از ویژگی های جالب آن است که در سایر موارد موجود نیست. ابزارهای نرم افزاری، همراه با راحتی تبدیل گرافیک برداری.
بیایید سعی کنیم یک rollover به شکل یک کتیبه ایجاد کنیم که بسته به رفتار ماوس تغییر رنگ می دهد. ایلوستریتور را باز کنید و شکلی به شکل یک مستطیل گرد و پر شده با مشکی ایجاد کنید (شکل 24)، از آن کپی کنید و در قسمت آزاد صفحه قرار دهید. اولین کپی از مستطیل را با مشخص کردن چهار سطر و ده ستون با مشخص کردن چهار سطر و ده ستون با یک برجسته در مرکز (Object=>Create Gradient Mesh Object=>Create Gradient Mesh) به یک شی مش تبدیل کنید (شکل 25). کپی دوم مستطیل را فعال کنید و برای آن یک گرادیان پر کنید، مشابه آنچه در شکل نشان داده شده است. 26. شی gradient را روی مش قرار دهید، کدورت شی گرادیان را تا حدود 80% کاهش دهید و اندازه شی گرادیان را به حدود 1 پیکسل کاهش دهید تا در پایان یک اثر برآمدگی شبیه سازی شود. و سپس روی اشیاء کتیبه را چاپ کنید. در شکل اصلی خود، اجازه دهید یک رنگ سفید داشته باشد که با حالت عادی مطابقت دارد (شکل 27) و سپس هنگامی که حالت چرخش تغییر می کند، رنگ نوشته تغییر می کند، به عنوان مثال، زمانی که نشانگر ماوس به رنگ سبز است. روی آن (Over State) و با فشار دادن دکمه ماوس به رنگ آبی (حالت پایین).
به پالت لایه ها توجه کنید در این مرحله فقط یک لایه در آن وجود دارد. با استفاده از دستور Duplicate Layer از منوی پالت لایه ها دو کپی از این لایه ایجاد کنید، سه لایه در پالت وجود خواهد داشت (شکل 28). سپس در اولین کپی لایه، رنگ کتیبه را به سبز و در دومی به آبی تغییر دهید (شکل 29). در نتیجه، خالی لازم برای رول اور به دست می آید.
با استفاده از دستور File=>Export (File=>Export) تصویر ایجاد شده را به فرمت PSD با لایه های حفظ شده صادر کنید و انتخاب کنید. مدل رنگ RGB (شکل 30). فایل PSD ایجاد شده را در ImageReady باز کنید (شکل های 31 و 32). با انتخاب دستور Make Frames From Layers (Create Frames from Layers) از منوی پالت انیمیشن، فریم هایی را بر اساس لایه ها ایجاد کنید. پنجره انیمیشن مانند شکل خواهد بود. 33. این در ابتدا یک حالت عادی در پالت Rollovers ایجاد می کند.
سپس در پنجره Animation، فریم مربوط به حالت شناور را انتخاب کنید و لایه Layer 1 Copy به طور خودکار در پالت Layers انتخاب می شود (شکل 34). به پالت Rollover بروید و روی دکمه Create Rollover State (Create a rollover state) کلیک کنید. 35، که باعث می شود حالت Over State در پالت Rollovers ظاهر شود (شکل 36). به همین ترتیب یک Down State ایجاد کنید. حالت Normal را در پالت Rollovers فعال کنید و تمام فریم های پالت Animation را حذف کنید، به جز فریمی که باید با حالت Normal مطابقت داشته باشد. در نتیجه، برای هر حالت رول اور در پالت Animation تنها یک فریم وجود خواهد داشت (شکل 37، 38 و 39).
برنج. 38. مشاهده تصویر، پنجره انیمیشن و پالت های لایه ها و رولورها برای حالت Over State
نتیجه را با کلیک بر روی دکمه Preview in Default Browser (پیش نمایش در مرورگر) در نوار ابزار و رفتن به پنجره مرورگر بررسی کنید (شکل 40). پس از آن با استفاده از دستور File=>Save Optimized (File=>Save with optimization) و تعیین گزینه HTML and Images (*.html) فایل را ذخیره کنید. در نتیجه در این مثال فایل Primer4.html و یک سری تصاویر گرافیکی در پوشه images بدست آمد.
برنج. 40. پنجره مرورگر با عنصر Rollover
جابجایی های SVGبه دست آوردن محبوبیت فرمت SVG(گرافیک برداری مقیاس پذیر مقیاس پذیر گرافیک برداری)، که بر اساس استاندارد XML ایجاد شده است، همچنین به شما امکان می دهد تا انواع عناصر تعاملی، به ویژه rollover ها را دریافت کنید، فقط در عمل این به روشی کاملاً متفاوت اجرا می شود. شایان ذکر است که ایجاد rollover های تعاملی SVG، بر خلاف موارد کلاسیک، زمانی که کد HTML مربوطه به طور کامل به طور خودکار تولید می شود، نیاز به دانش زبان جاوا اسکریپت و درک اصول اولیه برنامه نویسی شی گرا دارد.
برای کار با اشیاء SVG، یک پالت ویژه SVG Interactivity طراحی شده است که با استفاده از دستور Window => SVG Interactivity (Window => SVG Interactivity) به راحتی باز می شود. 41.
بیایید این نوع ایجاد یک رول اور را با استفاده از مثال یک دکمه تعاملی در نظر بگیریم، رنگ برچسب روی آن از سیاه به آبی تغییر می کند وقتی ماوس روی آن قرار می گیرد و زمانی که ماوس از منطقه فعال خارج می شود به سیاه تبدیل می شود.
یک دکمه مستطیل شکل با لبه های گرد ایجاد کنید و یک شیب پرکننده مناسب برای آن انتخاب کنید، به عنوان مثال، همانطور که در شکل نشان داده شده است. 42. تنظیم شفافیت دکمه در پالت Transparence (Transparency) در این مثال، مقدار پارامتر Opacity (Opacity) روی 50 درصد تنظیم شده است. یک کپی از دکمه ایجاد کنید، آن را با رنگ سبز تیره پر کنید (شکل 43)، و سپس آن را با دستور Object => Create Gradient Mesh (Object => Create Gradient Mesh) به یک شی مش تبدیل کنید و چهار سطر و ده ستون را مشخص کنید. و در لیست Appearance (View) با انتخاب گزینه To Center (To the center) و مقدار Highlight (Highlight) برابر با 100. کدورت لایه شی مش مش را حدود 40 درصد کاهش دهید (شکل 44). شی مش را در بالای شی گرادینت قرار دهید و دکمه شبیه شکل نشان داده شده در شکل خواهد بود. 45.
برنج. 44. تبدیل یک کپی از یک دکمه به یک شی شبکه
دکمه را با کتیبه مورد نظر تکمیل کنید و موقعیت آن را با استفاده از دکمه های مربوط به پالت Align (Alignment) تنظیم کنید. تصویر حاصل شامل یک لایه با سه شیء است که روی یکدیگر قرار گرفته اند (شکل 46). رویدادهای زمان‌بندی شده به یک شی متنی اشاره می‌کنند، بنابراین برای راحتی، با دوبار کلیک کردن روی شی و تایپ نام جدید، نام آن را به Text تغییر دهید. به همین ترتیب، نام لایه را از Layer 1 به Layer تغییر دهید (شکل 47).
پردازش رویداد شامل استفاده از رویه‌های جاوا اسکریپت است، بنابراین باید فایلی را با شرحی از این رویه‌ها اضافه کنید. Events.js نامیده می شود و در پوشه Sample Files\Sample Art\SVG\SVG در هنگام نصب Adobe Illustrator در دیسک ذخیره می شود. برای گنجاندن فایل Events.js، از دستور JavaScript Files SVG Interactivity استفاده کنید (شکل 48). در مرحله بعد، باید روی دکمه Add (Add) کلیک کنید و پیدا کنید فایل مورد نظرروی هارد دیسک هنگامی که نام او در قسمت URL ظاهر شد (شکل 49)، روی دکمه Done کلیک کنید.
برنج. 48. انتخاب دستور JavaScript Files
پس از آن، باید واکنش به رویدادهای ماوس را برای شی Text تعریف کنید. شی Text را انتخاب کنید، در قسمت Event پالت SVG Interactivity، رویداد onmouseover elemColor (evt, "Text", "#3333FF") را انتخاب کنید، این بدان معناست که وقتی ماوس روی شی Text قرار می گیرد، رنگ آن به تغییر می کند. آبی (شکل 50). برای اینکه رنگ متن پس از خروج ماوس از ناحیه فعال به سیاه تبدیل شود، باید رویداد onmouseout دیگری ایجاد کنید و آن را در قسمت Event پالت SVG Interactivity انتخاب کنید. سپس متن elemColor(evt, "Text", "#000000") را در خط عمل وارد کنید - این به رنگ سیاه باز می گردد (شکل 51).
برنج. 51. نمای نهایی پالت SVG Interactivity برای شی Text
با دستور File=>Save as (File=>File type format SVG rollover ایجاد شده را به عنوان یک فایل SVG ذخیره کنید و سپس گزینه های ذخیره فایل SVG را همانطور که در شکل 52 نشان داده شده است پیکربندی کنید. پس از ذخیره، تنها یک فایل منفرد انجام می شود. با پسوند SVG به دست می آید، و نه دو، مانند مورد رول اور کلاسیک، در این مورد، فایل Primer5.svg (پوشه Primer5) دریافت شد. اما برای اینکه رول اور واقعاً کار کند، باید علاوه بر آن فایل Events.js را در پوشه حاوی فایل SVG همراه با توضیحاتی در مورد رویه های جاوا اسکریپت کپی کنید. پس از آن، می توانید عملکرد رول اور را بررسی کنید، نتیجه مانند شکل 53 خواهد بود.
فرمت SVG همچنین می تواند برای انتقال انیمیشن استفاده شود. بیایید سعی کنیم یک عنصر انیمیشن ساده ایجاد کنیم (در این مورد، اطلاعات مربوط به شرکت خواهد بود) که وقتی ماوس روی شی گرافیکی مربوطه قرار می گیرد روی صفحه ظاهر می شود و وقتی ماوس از عنصر تعاملی حذف می شود ناپدید می شود.
بیایید تقریباً یک سری از اشیاء گرافیکی و متنی ایجاد کنیم، همانطور که در شکل نشان داده شده است. 54. بیایید با کلیک پی در پی بر روی نام شی بعدی در پالت لایه ها و وارد کردن نام مورد نظر، نام تمام اشیاء ایجاد شده را به روشی راحت تغییر دهیم (شکل 55). توجه داشته باشید که در شکل مشخص شده است. 56 شیء Text1، Text2، Text3 و Path1 همیشه قابل مشاهده خواهند بود و بقیه فقط زمانی که ماوس را روی شی Text1 نگه دارید.
برنج. 54. نمای اصلی تصویر
فایل Events.js را با توضیحات رویه های جاوا اسکریپت با استفاده از دستور JavaScript Files ( فایل های جاوا اسکریپت) از پالت SVG Interactivity با کلیک بر روی دکمه Add، انتخاب فایل مورد نظر در هارد دیسک و کلیک بر روی دکمه Done.
پاسخ رویداد ماوس را برای شی Text1 تعریف کنید. شی Text را انتخاب کنید، در قسمت Event پالت SVG Interactivity رویداد onmouseover را انتخاب کنید و در خط زیر متن elemShow(evt, "Text4") را وارد کنید. elemShow(evt، "Path2"). در نتیجه، زمانی که ماوس روی شی Text1 قرار دارد، اشیاء Text4 و Path2 قابل مشاهده خواهند بود. لطفاً توجه داشته باشید که اگر هنگام وقوع یک رویداد باید چندین عمل انجام شود، باید از طریق علامت ";" مشخص شوند. سپس همان عملیات را برای رویداد onmouseout انجام دهید و متنی را برای آن وارد کنید که به معنای پنهان کردن اشیا خواهد بود (شکل 57).
نتیجه را به عنوان یک فایل SVG با دستور File=>Save as (File => Save as) ذخیره کنید، نام فایل را مشخص کنید، فرمت SVG را در قسمت File type انتخاب کنید و سپس گزینه های ذخیره فایل SVG را مطابق با آن تنظیم کنید. با شکل 58. پس از ذخیره فایل Primer6.svg (پوشه Primer6) بدست می آید. فراموش نکنید که فایل Events.js را در پوشه ای با این فایل کپی کنید. اگر بعد از آن شما اجرا coz فایل داده شده، نتیجه را در شکل مشاهده خواهید کرد. 59. این تقریباً همان چیزی است که شما نیاز دارید. تنها چیزی که در برنامه های ما نبود، ظاهر اولیه آبجکت های Text 4 و Path 2 در بارگذاری بود. برای خلاص شدن از شر این نقص، هر دو شی را به طور همزمان انتخاب کنید و برای آنها یک اکشن ایجاد کنید elemHide(evt, "Text4"); elemHide(evt، "Path2") در رویداد onload (شکل 60). فایل را دوباره ذخیره کنید و بررسی کنید که اشیاء Text4 و Path2 اکنون فقط زمانی قابل مشاهده هستند که روی شی Text1 نگه دارید.
هر صفحه وب بدون انیمیشن وب غیرقابل تصور است، از جمله گیف های متحرک. یکی از راه های ایجاد آنها استفاده از برنامه Adobe ImageReady است که از جمله به شما امکان می دهد از لایه ها انیمیشن بسازید. در این مورد، خود تصویر چند لایه را می توان در آن آماده کرد برنامه های کاربردی مختلفاز جمله در Adobe Illustrator.
ایجاد یک انیمیشن بر اساس عناصر از پالت نمادها (Symbols) که با دستور Window => Symbols (Window => Symbols) باز می شود یا از یکی از کتابخانه های نماد که می تواند با استفاده از Window => باز شود بسیار آسان است. دستور Symbol Libraries (Window => Symbol Libraries).
به عنوان مثال، بیایید سعی کنیم اندازه هر شی-نماد را افزایش دهیم، مراحل کلیدی فرآیند افزایش شی باید در لایه های جداگانه تنظیم شوند. ابتدا به سادگی اشیاء نماد را یکی بالای دیگری قرار دهید و سپس اندازه هر شیء بعدی را افزایش دهید، به عنوان مثال، همانطور که در شکل نشان داده شده است. 61. در نتیجه یک لایه با اشیاء زیاد در پالت لایه ها ایجاد می شود (شکل 62). اگر مستقیماً این تصویر را به فرمت PSD صادر کنید ، این کار نمی کند ، زیرا فقط یک لایه وجود دارد و طبیعتاً وقتی فایل PSD را در ImageReady باز می کنید ، فقط یک لایه وجود دارد. بنابراین ابتدا باید اشیا را روی لایه های مختلف قرار دهید. این کار قابل انجام است راه های مختلفساده ترین راه این است که ابتدا لایه 1 را در پالت لایه ها انتخاب کنید و از دستور Release to Layer استفاده کنید. نتیجه انتقال هر یک از اشیاء به لایه خود خواهد بود، اما همه آنها در لایه 1 تودرتو خواهند بود. بنابراین، پس از آن باید تمام لایه های تو در تو را به صورت دستی به بالای پالت لایه ها بکشید تا بالای لایه لایه 1 قرار گیرند و سپس به سادگی لایه لایه 1 را که خالی شده است حذف کنید (شکل 63). با استفاده از دستور File=>Export (File => Export) تصویر را به فرمت PSD صادر کنید با تنظیماتی که در شکل. 64.
فایل PSD ایجاد شده را در برنامه ImageReady بارگذاری کنید (شکل 65 و 66). منوی پالت Animation Make Frames From Layers را باز کنید. در نتیجه، پنج فریم ایجاد می شود که هر یک با لایه خود مطابقت دارد و پنجره پالت انیمیشن مانند شکل 1 خواهد بود. 67.
پس از آن مدت زمان هر یک از فریم های ایجاد شده را در این حالت تنظیم کنید، مدت زمان تمام فریم ها 0.2 ثانیه تنظیم می شود. و سپس با استفاده از دستور File => Save Optimized (File => Save with optimization) انیمیشن را با بهینه سازی ذخیره کنید. نتیجه به دست آمده ممکن است شبیه شکل. 68.
حتی راحت‌تر از آن برای دریافت خالی‌هایی که می‌توانند به راحتی در ImageReady به انیمیشن تبدیل شوند، استفاده از عملکردهای Live Blends Illustrator است. این استفاده ترکیبی از Illustrator و ImageReady به طور قابل توجهی روند ایجاد انیمیشن های GIF را سرعت می بخشد.
به عنوان مثال، دو شی چند رنگ دلخواه را رسم کنید، و سپس آنها را با پارامترهای مناسب ترکیب کنید (شکل 69). استفاده مستقیم از این فایل برای ایجاد یک انیمیشن غیرممکن است، زیرا تصویر روی یک لایه قرار دارد (شکل 70). بنابراین، ابتدا باید هر عنصر از شی blend را در یک لایه جداگانه قرار دهید. برای انجام این کار، خط را در پنجره لایه ها انتخاب کنید، منوی پالت را با کلیک بر روی فلش سیاه در گوشه سمت راست بالای آن فعال کنید و دستور Release to Layers Sequence را انتخاب کنید (شکل 71). کلید Shift را نگه دارید، لایه های ایجاد شده را انتخاب کرده و بالای لایه 1 قرار دهید و سپس لایه 1 خود را با انتقال به سطل زباله حذف کنید، در نتیجه پالت لایه ها به شکل شکل ظاهر می شود. 72.
برنج. 70. وضعیت اولیه پنجره لایه ها
با دستور File=>Export (File => Export) فایل ایجاد شده را به فرمت PSD صادر کنید. فایل PSD ایجاد شده را در ImageReady باز کنید (شکل 73). لطفاً توجه داشته باشید که تمام لایه های ایجاد شده در برنامه Illustrator در پنجره لایه ها ظاهر می شوند (شکل 74) و در پنجره Animation تنها یک فریم تا کنون وجود خواهد داشت.
منوی پالت Animation را با کلیک بر روی فلش مشکی در گوشه سمت راست بالای پالت فعال کنید و دستور Make Frames From Layers را انتخاب کنید در نتیجه در این مثال پنج فریم ایجاد می شود و پنجره پالت Animation شکل می گیرد. مطابق با شکل 75. همه فریم ها را با نگه داشتن کلید Shift انتخاب کنید و مدت زمان فریم مناسب را در این مثال تنظیم کنید، برای هر یک از فریم ها همان زمان 0.2 ثانیه در نظر گرفته شده است. سپس با استفاده از دستور File=>Save Optimized (File => Save with optimization) فایل را با بهینه سازی ذخیره کنید و لیست نوع فایل را روی Images Only (*.gif) قرار دهید. این انیمیشن شبیه شکل 76.
خیلی جالب تر حرکت نیست، بلکه تغییر اندازه صاف اجسام ترکیبی است. به عنوان مثال، می توانید از انتقال ترکیبی که قبلا ایجاد شده است استفاده کنید. در این حالت، پس از ایجاد لایه‌های جداگانه برای هر عنصر انتقال ترکیبی، با استفاده از دکمه‌های Horizontal Align Center و Vertical Align Center در پالت Align، همه اشیا را روی هم قرار دهید (شکل 77).
فایل ایجاد شده را به فرمت PSD صادر کنید (File=>Export File=>Export) و فایل PSD ایجاد شده را در برنامه ImageReady باز کنید (شکل 78). فریم های انیمیشن را بر اساس لایه ها ایجاد کنید (Make Frames From Layers Create Frames from Layers) و مدت زمان مناسب را برای آنها انتخاب کنید (شکل 79). و سپس برای تاثیرگذاری بیشتر انیمیشن، فریم های موجود را کپی کنید، اما به ترتیب معکوس به طوری که تصویر ابتدا کم شود و سپس به صورت دایره ای ادامه دهید (شکل 80). سپس فایل بهینه شده را ذخیره کنید (File=>Save Optimized File=>Save Optimized). انیمیشن به دست آمده در شکل نشان داده شده است. 81.
برنج. 80. وضعیت پنجره انیمیشن پس از کپی کردن فریم ها
برنج. 81. انیمیشن تمام شده
