۰

آموزش فتوشاپ CS6 / آموزش های ویژه ی شهر گرافیک / مدرسه مجازی شهر گرافیک / نوشته های صفحه اصلی

آموزش ساخت تصاویر جاوا اسکریپت حساس

اردیبهشت ۳۰, ۱۳۹۳ در ۸:۴۷ ق.ظ توسط

3

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

 

ایجاد یک فایل جدید در Image Ready

13

در برنامه Image Ready گزینه File\New را انتخاب کنید تا کادر محاوره‌ای New Document نمایان شود بطوریکه بتوانیــد یک فایل جدید ایجاد کنید. در این کار عملی، سندی با نام Rollover Test ایجاد کرده و مقادیر عرض و ارتفاع آن را ۱۰۰ تعیین کنید. سپس دکمه رادیویی White را برای تعیین پس‌زمینه سفید انتخاب کرده و OK را کلیک نمائید.

ایجاد دکمه

14

رنگ پیش زمینه‌ای که می‌خواهید در تصویر دکمه از آن استفاده کنید را انتخاب نمائید. سپس ابزار Elliptical Marquee را انتخاب کنید و در حالیکه کلید Shift را پائین نگه داشته‌اید در داخل تصویر یک دایره ترسیم کنید. از ابزار سطل رنگ (Paint Bucket) برای پر کردن شکل دکمه با رنگ تعیین شده در قسمت پیش زمینه استفاده کنید.

افزودن افکت لایه

15

برای ایجاد حالت سه بعدی گزینه Layer\Layer Style\Bevel and Emboss را انتخاب کنید. پارامترهای مورد نظرتان را در پالت Bevel and Emboss ای که نمایان می‌شود تعیین کنید. در صورت تمایل می‌توانید برای ایجاد یک شکل طبیعی‌تر از دکمه، از افکت Outer Glow استفاده کنید. تنها کافی است بر روی گزینه Outer Glow که در سمت چپ کادر محاوره‌ای Layer Style قرار دارد کلیک کنید و گزینه‌ها را انتخاب کنید. همانند شکل زیر:

کپی از لایه موجود

16

از منوی پالت Layers گزینه Duplicate Layer را انتخاب کنید تا دکمه و افکت‌‌های آن در لایه جدیدی کپی شوند. گزینه Duplicate Layer را مجدداً انتخاب کنید بطوریکه سه لایه ایجاد شود که هر یک همان دکمه را نشان می‌‌دهند.

17

در پالت Layers، اولین لایه کپی شده را انتخاب کنید و سپس کادر محاوره‌ای Inner Glow Layer را باز کنید. رنگ سبز روشن را به آن اضافه کرده وOK را کلیک نمائید. به پالت Layers برگشته و دومین لایه کپی شده را انتخاب کنید. سپس مطابق شکل زیر تنظیمات مربوطه را در آن اعمال کنید.

18

برای باز کردن پالت Rollovers گزینه Window\Actions را انتخاب کنید. از منوی پالت Actions، گزینه New Rollover State را انتخاب کنیدو سپس  دکمه Play را در پالت Ations انتخاب کنید تا وضعیت های Over State و Down State ایجاد شود. در این مرحله شما باید سه وضعیت داشته باشید: Normal ، Over و Down (البته برنامه Image Ready بدون نیاز شما به کدنویسی کدهای جاوا اسکریپت مربوطه را ایجاد می‌کند).

19

در پالت Actions وضعیت Normal را انتخاب کنید. در پالت Layers، لایه‌ای را که مایلید در وضعیت عادی دکمه نشان داده شود، انتخاب کنید. این مرحله را برای وضعیت Over و Down نیز تکرار کنید. برای ذخیره فایل گزینه File\Save Optimized را انتخاب کنید. توجه داشته باشید که Format\HTML and Images انتخاب شده باشد.


شهر گرافیک

برچسب‌ها, , , , , , , , , , , , , , , , , , ,

پاسخ دهید