نحوه ساخت انیمیشن در ایلاستریتور نکات و ترفندها در Adobe illustrator: ترفندهایی در illustrator. امکان ایجاد گرافیک در Illustrator (در مقایسه با Adobe Flash). آماده سازی فایل SVG در Illustrator

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

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

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

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

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

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

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

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

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

دکمه ها

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

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

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

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

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

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

2. زیگزاگ

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

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

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

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

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

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

5. خشن کردن

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

اخیراً انواع انیمیشن های گرافیکی 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. هنگام اجرا ماشین محلیمی توان شروع انیمیشن را چند ثانیه به تاخیر انداخت.

امروز ما کاملا معمول نیست آموزش Adobeتصویرگر. زیرا این بار نه یک تصویر ثابت، بلکه یک انیمیشن واقعی می سازیم. تصور کنید معلوم می شود کمک از 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 به طور فزاینده ای برای ایجاد انیمیشن استفاده می شوند. این کد توسط مرورگرهای مدرن پشتیبانی می شود و نیازی به استفاده از فلش پلیر ندارد.

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

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