طراحی آیكون هایی با سبك ویندوز XP (قسمت 1)

یندوز XP (قسمت اول) تکنیک های ویندوز XP 21/9/1382 موسسه فرهنگی اطلاع رسانی تبیان خلاصه این مقاله نحوه طراحی و ایجاد آیکون هایتمام رنگی و دینامیک مورد استفاده در ویندوز XP را با استفاده از برنامه های گرافیکی مبتنی بر ...

شنبه ۲۲ آذر ۱۳۸۲ - ۰۰:۰۰

طراحی آیكون هایی با سبك ویندوز XP (قسمت 1)

عنوان : طراحی آیکون هایی با سبک ویندوز XP(قسمت اول)
تکنیک های ویندوز XP
21/9/1382
موسسه فرهنگی اطلاع رسانی تبیان

خلاصه
این مقاله نحوه طراحی و ایجاد آیکون هایتمام رنگی و دینامیک مورد استفاده در ویندوز XP را با استفاده از برنامه های گرافیکی مبتنی بر Vector ( بردار) ، همانند فری هند ، Illustrator یا فتوشاپ بررسی می کند .
عناوین :
1- مقدمه
2- مرورری بر طراحی آیکون
مرحله 1: اندیشه و تصور
مرحله 2: طراحی
مرحله 3: ایجاد تصاویر 24-Bit
مرحله 4: ایجاد تصاویر 8-Bit و 4-Bit
مرحله 5: ایجاد فایلهای .ico
3- ایجاد نوار ابزار
4- ایجاد AVI ها

1-مقدمه
سبک طراحی آیکون ها در ویندوز XP نسبت به نسخه های قبلی ویندوز تغییر یافته است .مقاله زیر گام به گام شما را با طراحی و ایجاد آیکون های مناسب این نسخه از ویندوز آشنا می کند .
سبک آیکون ها در ویندوز XP رنگی ، جالب و دارا ی انرژی است. در واقعآنهاآیکون های 32 بیتی با لبه های هموار و نرم است. هر آیکون در یکی از برنامه های گرافیکی برداری ایجاد می شود و سپس در برنامه فتوشاپ تغییرات لازم در آن ایجاد می شود تا زیبایی خود را کسب کند .
برای دستیابی به نتیجه بهتر به شما توصیه می کنیم تا از برنامه های گرافیکی که امکان ایجاد تصاویر برداری و سه بعدی را دارنداستفاده کنید .

طرح 1- نمونه آیکون های ویندوزXP

2-مروری بر طراحی آیکون ها
در این قسمت شما با طرح سبک های جدید ویندوز XP برای ایجاد آیکون ها آشنا می شوید:

مشخصه های آیکون ها
1- رنگ ها به وفور مورد استفاده قرار می گیرند .
2- زاویه ها و پرسپسکتیو موجود در تصاویر تحرک و پویایی خاصی را ایجاد می کند .
3- لبه ها و گوشه های عناصر نرم بوده و شفافیت و گردی کمی دارند .
4- منبع نور از گوشه چپ بالا که مقداری از قسمت های دیگر آیکون را روشن کرده است.
5- بکارگیری ابعاد دارای شیب.
6- استفاده از یک سیاه بیرونی که سبب تشکیل بعد و وضوح تصویر می شود .
7- خطوط خارجی که به شکل معنی می دهند .
8- آبجکت هایی همانند کامپیوتر و قطعات دید مصرفی بیشتری دارند .

ابعاد آیکون ها
در ویندوز XP چهار اندازه در ایجاد آیکون ها مورد استفاده قرار می گیرد که عبارتند از 48 × 48, 32 × 32, 24 × 24 و 16 × 16پیکسل .
توصیه ما به شما این است که از ابعاد زیر درایجاد آیکونها استفاده کنید:

48 × 48 پیکسل

32 × 32 پیکسل

16 × 16 پیکسل

طرح 2- تصاویر آیکون ها با ابعاد استاندارد

آیکون هایی که در سمت راست منوی شروع قرار دارند دارای ابعاد 24 × 24 پیکسل هستند. که البته اندازه مورد نیاز شما نیست .

طرح 3- نمایی از آیکونهای منوی شروع با ابعاد 24 × 24پیکسل

اگر قصد ایجاد آیکون هایی برای نوار ابزار دارید باید از اندازه های 24 × 24و 16 × 16پیکسل استفاده کنید.

طرح 4- اندازه های استاندارد برای آیکون ها ی نوار ابزار

عمق رنگ مورد پشتیبانی در آیکون ها

در ویندزوXP از آیکون های 32 بیتی که متشکل از تصاویر24 بیت و 8 بیت کانال آلفا هستند مورد پشتیبانی قرار می گیرند. این ویژگی امکان مشاهده آیکون ها با لبه های نرم را می دهد که با هر رنگ و شکل پس زمینه ای ترکیب می شوند.

هر آیکون ویندوزXP باید شامل این سه عمق رنگ باشد تا در مانیتور های مختلف امکان مشاهده آنها وجود داشته باشد:

24-bit با 8-bit alphaکه همان32-bit است .

8-bit با 1-bit transparency که همان256 colors است .

4-bitبا 1-bit transparencyکه همان16 colorsاست .

طرح 5 – نسخه های مختلف آیکون ها با سه عمق رنگ 8-bit , 4-bit و 32-bit

پالت رنگ
رنگهای اصلی که در ایجاد آیکون ها مورد استفاده قرار می گیرند عبارتند از :

طرح 6- پالت رنگ آیکون ها در ویندوز XP

زاویه و پرسپکتیو آیکون ها
طرح شبکه ای مورد استفاده در پرسپکتیو آیکون هایی با سبک ویندزو XP به شکل زیر است :

طرح 7 – پرسپکتیو در آیکون ها

البته همه آیکون ها در زاویه 16 × 16 به خوبی دیده نمی شوند . نمونه آبجکت های زیر فاقد زاویه بوده و از شیوه مستقیم استفاده می کنند:

-آیکونهای مورد استفاده برای اسناد
-آیکون های بیان کننده نشان و سمبل ( همانند آیکون های نشان دهنده پیام یا اطلاعات )
-آیکون هایی که آبجت های واحدی هستند ( همانند آِکون مئرد استفاده برای ذره بین )

طرح 8 - نمایی از آیکون های بدون زاویه ( اسنادJpeg، آیکون جستجو یاSearch و آیکون برگزیده ها یا Favorites)

آبجت های ثانوی را با همان زاویه آبجکت اصلی ایجاد کنید مگر آنکه قصد ایجاد حس بیشتری را داشته باشید ، تا خوانایی بیشتری را ایجاد کنید.

طرح 9- نمونه مثال هایی از آیکون های متشکل از دو آبجکت (Add or RemovePrograms, Print Pictures, Recent Documents)

استفاده از سایه پشت سر آبجکت

آیکون های ویندوزXP از یک سایه در پشت سر آبجکت ها استفاده می کند که به آیکون بُعد می دهد . این افکت را می توانید در برنامه های گرافیکی همانند فتوشاپ ایجاد کنید که در مباحث بعدی به ان می پردازیم .

برای افزودن سایه پشت سر به تصویر در برنامه فتوشاپ و در لایه تصویر دوبار سریع کلیک کرده و گزینهDrop Shadow را انتخاب کنید. سپس مقدار زوایه را در فیلدAnfle به 135 افزایش دهید و مقدارDistanceیا بُعد را در 2 قرار دهید وSize را نیز 2 وارد کنید. مقدارOpacity مربوط به سایه را 75% تعیین کرده و رنگ سیاه را انتخاب کنید .

طرح 10 – تصویر آیکون در قبل و بعد از افزودن سایه

خطوط خارجی

با افزودن خطوط خارجی به تصاویر تناسبی ایجاد کنید تا تصویر در رنگ ها یا تصاویر زمینه مختلف به خوبی دیده شود .

مرحله 1 : اندیشه و تصور
قبل از طراحی و پیاده سازی یک آیکون جدید بهتر است مداد و کاغذی برداشته و طرح نمونه ای از ایده و نظرتان را بر روی آن پیاده کنید
در شکل زیر تصویری از آیکونMy Pictures که بر روی کاغذ طراحی شده است را مشاهده می کنید:

شکل 11- طرح مدادی از آیکونMy Pictures

دقت و توجه در هنگام طراحی آیکون ها :

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

توجه و بررسی در اینکه آیکون چگونه در زمینه رباط گرافیکی کاربر دیده می شود و چگونه در کنار سایر آیکون ها قرار می گیرد .

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

اگر می خواهید چندین آبجکت را دریک آیکون با یکدیگرترکیب کنید ، به ابعاد و زاویه آنها توجه کنید . توصیه ای که در این خصوص می توانیم به شما بکنیم این است که بیش از 3 تصویر در آیکون استفاده نکنید. برای آیکونهای 16 × 16پیسکل بهنر است از تصاویر ساده استفاده کرده و آبجکت های اضافی را از آنها حذف کنید تا تشخیص آیکون به راحتی امکان پذیر باشد.

1- آیکون های عمومی