نحوه درج انیمیشن گیف در illustrator. ساخت گیف با پس زمینه شفاف در ایلاستریتور. وارد کردن فایل های Illustrator به یک برنامه فلش

فرمت فایل Flash (SWF) بر اساس گرافیک برداری است و برای گرافیک های مقیاس پذیر و فشرده برای وب در نظر گرفته شده است. از آنجایی که این فرمت فایل مبتنی بر گرافیک برداری است، شیء کیفیت تصویر را در هر وضوحی حفظ می کند و برای ایجاد فریم های انیمیشن ایده آل است. در Illustrator، می‌توانید فریم‌های انیمیشنی جداگانه روی لایه‌ها ایجاد کنید و سپس لایه‌های تصویر را به عنوان فریم جداگانه برای استفاده در وب‌سایت صادر کنید. شما هم می توانید تعریف کنید نمادهادر یک فایل Illustrator برای کاهش حجم انیمیشن. هنگام صادرات، هر نماد فقط یک بار در فایل SWF تعریف می شود.

فرمان صادرات (SWF)

بیشترین کنترل را بر روی انیمیشن و فشرده سازی بیت ارائه می دهد.

کنترل بیشتری را روی ترکیب فرمت‌های SWF و بیت مپ در یک طرح‌بندی تکه تکه فراهم می‌کند. این دستور گزینه های تصویر کمتری را نسبت به دستور Export (SWF) ارائه می دهد، اما از گزینه های فرمان Export اخیرا استفاده شده استفاده می کند (نگاه کنید به ).

هنگام تهیه یک شی برای ذخیره به عنوان SWF، دستورالعمل های زیر را در نظر داشته باشید.

با Device Central، می‌توانید ببینید که آثار هنری Illustrator در Flash Player در دستگاه‌های مختلف دستی چگونه به نظر می‌رسند.

درج یک گرافیک ایلوستریتور

یک شیء گرافیکی ایجاد شده در Illustrator را می توان به سرعت، به راحتی و به راحتی کپی و در یک برنامه فلش جایگذاری کرد.

هنگامی که یک گرافیک Illustrator را در یک برنامه فلش قرار می دهید، ویژگی های زیر حفظ می شوند.

خطوط و اشکال

• ضخامت ضربه

  تعاریف گرادیان

  متن (از جمله فونت های OpenType)

  تصاویر مرتبط

• حالت های ترکیبی

علاوه بر این، Illustrator و Flash هنگام چسباندن یک گرافیک از ویژگی های زیر پشتیبانی می کنند.

هنگام انتخاب لایه ها در یک اثر هنری Illustrator سطح بالابه طور کامل و چسباندن آنها در یک برنامه فلش، لایه ها و ویژگی های آنها (قابلیت مشاهده و مسدود کردن) حفظ می شود.

فرمت های رنگ ایلاستریتور غیر از RGB (CMYK، مقیاس خاکستری و فرمت های سفارشی) توسط Flash به RGB تبدیل می شوند. رنگ های RGBبه روش معمول درج شده است.

هنگامی که آثار هنری Illustrator را وارد یا جای‌گذاری می‌کنید، می‌توانید از گزینه‌های مختلف برای ذخیره جلوه‌های خاص (مانند سایه انداخته‌شده توسط متن) به عنوان فیلترهای Flash استفاده کنید.

فلش ماسک های Illustrator را ذخیره می کند.

فایل های SWF را از Illustrator صادر کنید

فایل های SWF صادر شده از Illustrator از کیفیت و فشرده سازی یکسانی با فایل های SWF صادر شده از Flash برخوردارند.

هنگام صادرات، می‌توانید از بین انواع سبک‌های از پیش تعریف‌شده برای خروجی بهینه انتخاب کنید، و نحوه استفاده از چند تابلوی هنری، نحوه تبدیل کاراکترها، لایه‌ها، متن و ماسک‌ها را مشخص کنید. برای مثال، می‌توانید نمادهای Illustrator را به عنوان فیلم یا گرافیک صادر کنید و نمادهای SWF را از لایه‌های Illustrator ایجاد کنید.

وارد كردن فایل های ایلوستریتوربه برنامه فلش

برای ایجاد یک چیدمان کامل در Illustrator و سپس وارد کردن آن به Flash در یک مرحله، می‌توانید آثار هنری خود را با فرمت Illustrator (AI) ذخیره کنید و با استفاده از دستورات File > Import To Stage یا File > Import To Library، آن را با وفاداری بالا به Flash وارد کنید.

اگر فایل Illustrator حاوی چندین آرت بورد است، تابلوی هنری را برای وارد کردن از کادر محاوره‌ای Flash Import انتخاب کنید و تنظیمات هر لایه را در آن تخته هنری مشخص کنید. تمام اشیاء موجود در آرتبورد انتخاب شده به صورت یک لایه به Flash وارد می شوند. هنگامی که یک آرتبورد دیگر را از همان فایل AI وارد می کنید، اشیاء از آن تخته هنری به عنوان یک لایه جدید به Flash وارد می شوند.

وقتی آثار هنری Illustrator را به‌عنوان فایل‌های AI، EPS یا PDF وارد می‌کنید، Flash همان ویژگی‌هایی را حفظ می‌کند که وقتی اثر هنری Illustrator را جای‌گذاری می‌کنید. همچنین، اگر فایل Illustrator که وارد می‌کنید حاوی لایه‌هایی است، می‌توانید با استفاده از یکی از روش‌های زیر آن‌ها را وارد کنید.

لایه های Illustrator را به لایه های Flash تبدیل کنید.

لایه های Illustrator را به فریم های فلش تبدیل کنید.

تمام لایه های Illustrator را به یک لایه Flash تبدیل کنید.

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

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

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

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

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

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

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

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

یک پالت ویژه برای کار با اشیاء SVG طراحی شده است. تعامل SVG، که با دستور به راحتی باز می شود Window=>SVG Interactivity(Window=> تعامل SVG) شکل. 41.

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

یک دکمه مستطیل شکل با لبه های گرد ایجاد کنید و یک شیب پرکننده مناسب برای آن انتخاب کنید، به عنوان مثال، همانطور که در شکل نشان داده شده است. 42. شفافیت دکمه را در پالت تنظیم کنید شفافیت(Transparency) در این مثال مقدار پارامتر کدورت(Opacity) روی 50% تنظیم شده است. یک کپی از دکمه ایجاد کنید، آن را با سبز تیره پر کنید (شکل 43) و سپس با دستور آن را به یک شی مش تبدیل کنید. Object=>ایجاد Gradient Mesh(Object=>Create Gradient Mesh) با تعیین چهار سطر و ده ستون و در لیست ظاهر(مشاهده) با انتخاب یک گزینه به مرکز(به سمت مرکز) و تنظیم مقدار برجسته(هایلایت) تا 100. کدورت لایه جسم مش را تا حدود 40 درصد کاهش دهید (شکل 44). شی مش را در بالای شی گرادینت قرار دهید و دکمه شبیه شکل نشان داده شده در شکل خواهد بود. 45.

برنج. 44. تبدیل یک کپی از یک دکمه به یک شی شبکه

دکمه را با کتیبه مورد نظر تکمیل کنید و موقعیت آن را با استفاده از دکمه های پالت مربوطه تنظیم کنید تراز کردن(هم ترازی). تصویر حاصل شامل یک لایه با سه شیء است که روی یکدیگر قرار گرفته اند (شکل 46). رویدادهای زمان‌بندی شده به یک شی متنی اشاره می‌کنند، بنابراین برای راحتی، نام آن را به تغییر دهید متنبا دوبار کلیک کردن روی شی و وارد کردن نام جدید. به طور مشابه، نام لایه را تغییر دهید لایه 1 به لایه(شکل 47).

پردازش رویداد شامل استفاده از رویه‌های جاوا اسکریپت است، بنابراین باید فایلی را با شرحی از این رویه‌ها اضافه کنید. Events.js نامیده می شود و پس از نصب در پوشه Sample Files\Sample Art\SVG\SVG در دیسک ذخیره می شود. نرم افزار Adobeتصویرگر. برای گنجاندن فایل Events.js از دستور استفاده کنید فایل های جاوا اسکریپت تعامل SVG(شکل 48). بعد، باید دکمه را فشار دهید اضافه کردن(افزودن) و پیدا کردن فایل مورد نظرروی هارد دیسک وقتی نام او در میدان ظاهر می شود URL(شکل 49)، روی دکمه کلیک کنید انجام شده(برو بیرون).

برنج. 48. انتخاب دستور JavaScript Files

پس از آن، باید واکنش به رویدادهای ماوس را برای شی تعریف کنید متن. شی Text را در فیلد انتخاب کنید رویدادپالت های (رویداد). تعامل SVGیک رویداد را انتخاب کنید روی موشواره elemColor(evt، "Text"، "#3333FF")این بدان معناست که وقتی ماوس روی شی قرار دارد متنرنگ آن به آبی تغییر خواهد کرد (شکل 50). برای اینکه بعد از خروج ماوس از منطقه فعال، رنگ متن به سیاه تبدیل شود، باید یک رویداد دیگر ایجاد کنید. سوار کردنآن را در فیلد انتخاب کنید رویدادپالت های (رویداد). تعامل SVG. سپس در خط عمل متن را وارد کنید elemColor(evt، "Text"، "#000000")این به رنگ سیاه باز می گردد (شکل 51).

برنج. 51. نمای نهایی پالت SVG Interactivity برای شی Text

rollover تولید شده را به عنوان یک فایل SVG با دستور ذخیره کنید File=>ذخیره به عنوان(پرونده=> نوع فایلقالب SVGو سپس گزینه های ذخیره فایل SVG را همانطور که در شکل نشان داده شده است تنظیم کنید. 52. پس از ذخیره، تنها یک فایل با پسوند SVG به دست می آید و نه دو تا، مانند رول اور کلاسیک، در این حالت، فایل Primer5.svg (پوشه Primer5) به دست آمد. با این حال، برای اینکه rollover واقعاً کار کند، باید فایل Events.js را با توضیحات رویه‌های جاوا اسکریپت در پوشه حاوی فایل SVG کپی کنید. پس از آن، می توانید عملکرد رول اور را بررسی کنید، نتیجه مانند شکل نشان داده شده است. 53.

انیمیشن SVG

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

بیایید تقریباً یک سری از اشیاء گرافیکی و متنی ایجاد کنیم، همانطور که در شکل نشان داده شده است. 54. با کلیک کردن متوالی بر روی نام شی بعدی در پالت، نام تمام اشیاء ایجاد شده را به روشی راحت تغییر دهید. لایه هایو نام مورد نظر را وارد کنید (شکل 55). توجه داشته باشید که در شکل مشخص شده است. 56 مورد Text1، Text2، Text3و مسیر 1همیشه قابل مشاهده خواهد بود و بقیه فقط زمانی که ماوس را بر روی شیء نگه دارید متن 1.

برنج. 54. نمای اصلی تصویر

با استفاده از دستور، فایل Events.js را با توضیحاتی از رویه های جاوا اسکریپت اضافه کنید فایل های جاوا اسکریپت (فایل های جاوا اسکریپت) از پالت تعامل SVGبا فشردن دکمه اضافه کردن(افزودن) با انتخاب فایل مورد نظر روی هارد و کلیک بر روی دکمه انجام شده(برو بیرون).

پاسخ رویداد ماوس را برای یک شی تعریف کنید متن 1. شی را انتخاب کنید متن، در زمینه رویدادپالت های (رویداد). تعامل SVGیک رویداد را انتخاب کنید روی موشوارهو در خط زیر متن را وارد کنید elemShow(evt، "Text4"); elemShow(evt، "Path2"). در نتیجه زمانی که ماوس روی شی قرار دارد متن 1اشیاء قابل مشاهده خواهند شد متن 4و مسیر 2. لطفاً توجه داشته باشید که اگر هنگام وقوع یک رویداد باید چندین عمل انجام شود، باید از طریق علامت ";" مشخص شوند. سپس همین کار را برای رویداد انجام دهید سوار کردن، وارد کردن متن برای آن، که به معنای پنهان کردن اشیا خواهد بود (شکل 57).

نتیجه را به عنوان یک فایل SVG با دستور ذخیره کنید File=>ذخیره به عنوان(File=>Save as)، با مشخص کردن نام فایل، در قسمت انتخاب کنید نوع فایلفرمت SVG و سپس تنظیم گزینه های ذخیره فایل SVG مطابق شکل 1. 58. پس از ذخیره فایل Primer6.svg (پوشه Primer6) بدست می آید. فراموش نکنید که فایل Events.js را در پوشه ای با این فایل کپی کنید. اگر بعد از آن شما اجرا coz فایل داده شده، نتیجه را در شکل مشاهده خواهید کرد. 59. این تقریباً همان چیزی است که شما نیاز دارید. تنها چیزی که در برنامه های ما لحاظ نشده بود ظاهر اولیه اشیا بود متن 4 و مسیر 2 هنگام بارگذاری برای خلاص شدن از شر این کاستی، هر دو این آبجکت ها را به یکباره انتخاب کنید و برای آنها یک اکشن ایجاد کنید elemHide(evt، "Text4"); elemHide(evt، "Path2")در رویداد در حال بارگذاری(شکل 60). فایل را دوباره ذخیره کنید و مطمئن شوید که اشیاء در حال حاضر هستند متن 4و مسیر 2تنها زمانی که ماوس را بر روی جسم قرار دهید قابل مشاهده است متن 1.

انیمیشن GIF

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

ایجاد یک انیمیشن بر اساس عناصر از پالت بسیار آسان است نمادها(نمادها) با دستور باز می شوند Window=>نمادها(Window=>Symbols) یا از یکی از کتابخانه های نماد که می توان با استفاده از دستور باز کرد Window=>کتابخانه های نماد(پنجره=>کتابخانه های نماد).

به عنوان مثال، بیایید سعی کنیم اندازه هر شی - نماد را افزایش دهیم، مراحل کلیدی فرآیند افزایش شی باید در لایه های جداگانه تنظیم شوند. ابتدا به سادگی اشیاء نماد را یکی بالای دیگری قرار دهید و سپس اندازه هر شیء بعدی را افزایش دهید، به عنوان مثال، همانطور که در شکل نشان داده شده است. 61. در نتیجه، در پالت لایه هاییک لایه با اشیاء زیاد ایجاد خواهد شد (شکل 62). اگر مستقیماً این تصویر را به فرمت PSD صادر کنید ، این کار نمی کند ، زیرا فقط یک لایه وجود دارد و طبیعتاً وقتی فایل PSD را در ImageReady باز می کنید ، فقط یک لایه وجود دارد. بنابراین ابتدا باید اشیا را روی لایه های مختلف قرار دهید. این کار قابل انجام است راه های مختلفساده ترین راه این است که ابتدا لایه را انتخاب کنید لایه 1در پالت لایه ها و از دستور استفاده کنید رها کردن به لایه(رها به صورت لایه ای). نتیجه حرکت هر یک از اشیاء به لایه خود خواهد بود، اما همه آنها در لایه قرار می گیرند لایه 1. بنابراین، باید تمام لایه‌های تودرتو را به‌طور دستی به بالای پالت لایه‌ها بکشید تا بالای لایه باشند. لایه 1و سپس لایه خالی لایه 1آسان برای حذف (شکل 63). با استفاده از دستور، تصویر را به فرمت PSD صادر کنید File=>Export(File=>Export) با تنظیماتی مانند شکل. 64.

فایل PSD ایجاد شده را در برنامه ImageReady بارگذاری کنید (شکل 65 و 66). منوی پالت را باز کنید انیمیشناز لایه ها قاب بسازید(فریم هایی را از لایه ها ایجاد کنید). در نتیجه، پنج فریم ایجاد می شود که هر کدام با لایه آن و پنجره پالت مطابقت دارد انیمیشنمانند شکل خواهد بود. 67.

پس از آن مدت زمان هر یک از فریم های ایجاد شده را در این حالت تنظیم کنید، مدت زمان تمام فریم ها 0.2 ثانیه تنظیم می شود. و سپس انیمیشن بهینه شده را با دستور ذخیره کنید File=>Save Optimized(File=>ذخیره با بهینه سازی). نتیجه به دست آمده ممکن است شبیه شکل. 68.

استفاده از توابع حتی راحت تر است ترکیبات زندهنرم افزار ایلوستریتور. این استفاده ترکیبی از Illustrator و ImageReady به طور قابل توجهی روند ایجاد انیمیشن های GIF را سرعت می بخشد.

به عنوان مثال، دو شی چند رنگ دلخواه را رسم کنید، و سپس آنها را با پارامترهای مناسب ترکیب کنید (شکل 69). استفاده مستقیم از این فایل برای ایجاد یک انیمیشن غیرممکن است، زیرا تصویر روی یک لایه قرار دارد (شکل 70). بنابراین، ابتدا باید هر عنصر از شی blend را در یک لایه جداگانه قرار دهید. برای انجام این کار، در پنجره لایه هایخط را برجسته کنید ، منوی پالت را با کلیک بر روی فلش سیاه در گوشه سمت راست بالای آن فعال کنید و دستور را انتخاب کنید. انتشار به دنباله لایه ها(به ترتیب به لایه ها تبدیل شوید) (شکل 71). نگه داشتن یک کلید تغییر مکانلایه های ایجاد شده را انتخاب کرده و بالای لایه قرار دهید لایه 1و سپس خود لایه را حذف کنید لایه 1در نتیجه، با انتقال آن به سطل زباله، پالت لایه ها همان شکلی را به خود می گیرد که در شکل. 72.

برنج. 70. وضعیت اولیه پنجره لایه ها

با دستور فایل ایجاد شده را به فرمت PSD Export کنید File=>Export(File=>Export). فایل PSD ایجاد شده را در ImageReady باز کنید (شکل 73). لطفا توجه داشته باشید که تمام لایه های ایجاد شده در برنامه Illustrator در پنجره لایه ها (شکل 74) و در پنجره ظاهر می شوند. انیمیشنتنها یک قاب وجود خواهد داشت.

منوی پالت را فعال کنید انیمیشن، با کلیک بر روی فلش سیاه رنگ در گوشه سمت راست بالای پالت، دستور را انتخاب کنید از لایه ها قاب بسازید(از لایه ها فریم بسازید) در پایان در این مثال پنج فریم ایجاد می شود و پنجره پالت انیمیشنمطابق شکل شکل خواهد گرفت. 75. همه فریم ها را با نگه داشتن کلید انتخاب کنید تغییر مکانو یک مدت زمان فریم مناسب را در این مثال تنظیم کنید، برای هر یک از فریم ها زمان 0.2 ثانیه در نظر گرفته شده است. سپس فایل را با دستور optimization ذخیره کنید File=>Save Optimizedتنظیمات (File=>Save with optimization) در لیست نوع فایلگزینه فقط تصاویر (*.gif). این انیمیشن شبیه شکل 76.

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

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

برنج. 80. وضعیت پنجره انیمیشن پس از کپی کردن فریم ها

برنج. 81. انیمیشن تمام شده

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

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

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

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

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

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