ويندوز xp يك شيوه (style) جديد در طراحي آيكون مطرح كرده است. راهنمايي‏اي كه در پي خواهد آمد شما را مرحله به مرحله با طراحي و خلق آيكون‏هاي ويندوز xp آشنا مي‏كند.
شيوه آيكون‏هاي ويندوز xp همه در رابطه با جذابيت، رنگ و حرارت مي‏باشد و همگي داراي نسخه 32 بيتي آيكونها و لبه‏هاي نرم هستند. هر آيكون در نرم‏افزارهاي وكتوري (مانند FreeHand و Illustrator) خلق مي‏شوند و با ظرافت در برنامه فتوشاپ دستكاري مي‏شوند تا يك تصوير زيبا خلق شود.
توصيه مي‏شود كه شما با برنامه‏هاي مناسب گرافيكي بخصوص برنامه‏هاي وكتوري و سه‏بعدي، براي خلق تصاويرتان كار كنيد.

تصوير 1: نمونه آيكون‏ها

نگاهي به طراحي آيكون

اين بخش شما را با شيوه جديد ويندوز xp براي خلق آيكون‏ها آشنا مي‏كند.

مشخصات آيكونها
1. رنگها همگي غني هستند و متممي براي جلوه ويندوز xp به حساب مي‏آيند.
2. زاويه و پرسپكتيو، يك حرارت پويا را براي تصاوير به وجود مي‏آورد.
3. لبه‏ها و گوشه‏هاي اشياء، نرم و تا حدودي گرد(round) هستند.
4. منبع نور از گوشه دست چپ بالاي تصوير مي‏باشد با نور محدود اضافي‏اي كه بقيه قسمت‏هاي آيكون را روشن مي‏كند.
5. استفاده از شيب، ايجاد بُعد مي‏كند و به آيكون، غناي تصويري مي‏بخشد.
6. سايه‏ها (drop shadow) تباين(كنتراست) و بعد(عمق) را ايجاد مي‏كنند.
7. خط‏هاي دور، تفاوت را تأمين مي‏كنند.
8. همه روزه اشياء جديد مانند كامپيوترها و دستگاه‏ها، منظره مدرن‏تري خواهند داشت.

اندازه آيكون‏ها
چهار اندازه براي آيكون‏هاي ويندوز وجود دارد:
48 * 48 ـ 32 * 32 ـ 24 * 24 و 16 * 16 پيكسل
پيشنهاد مي‏شود آيكون‏هاي شما اين سه اندازه را داشته باشد:
48 × 48 pixels
32 × 32 pixels
16 × 16 pixels

تصوير 2 : اندازه‏هاي عمومي آيكون

آيكون‏هايي كه در قسمت راست منوي شروع ويندوز xp وجود دارند، در اندازه 24 * 24 پيكسل به نمايش در مي‏آيند. اين اندازه‏اي است كه شما احتياجي به طراحي آن نداريد.

تصوير 3 : اندازه 24 * 24 پيكسل در start menu

اگر شما آيكون‏ها را براي منوي ابزار (toolbar) طراحي مي‏كنيد، اندازه‏هاي استاندارد ويندوز، 32 * 32 و 16 * 16 پيكسل هستند.

تصوير 4 : اندازه‏هاي استاندارد آيكون منوي ابزار

پشتيباني وضوح رنگ آيكون
ويندوز xp آيكون‏هاي 32 بيتي را كه تصاويري 24 بيتي با يك كانال رنگ آلفاي 8 بيتي هستند، پشتيباني مي‏كند. اين به آيكون‏ها اجازه مي‏دهد تا با لبه‏هاي نرمي كه با پس‏زمينه درآميخته‏اند، به نمايش در بيايند.

هر آيكون ويندوز xp بايد شامل اين سه وضوح رنگ باشد تا از طرف تنظيمات مختلف نمايش مونيتور پشتيباني شود.
24 بيت با كانال رنگ آلفاي 8 بيت
8 بيت (256 رنگ) با 1 بيت شفافيت (transparency)
4 بيت (16 رنگ) با 1 بيت شفافيت (transparency)

تصوير 5 : نسخه‏هاي 4 بيتي، 8 بيتي و 24 بيتي آيكون My Picture

پالت رنگ

اينها رنگ‏هاي اوليه‏اي هستند كه در آيكون‏ها استفاده مي‏شوند:

تصوير 6 : پالت رنگ آيكون ويندوز xp

زاويه و دسته‏بندي اشياء

اين شبكه پرسپكتيوي‏اي است كه آيكون ويندوز xp از آن استفاده مي‏كند:

تصوير 7 : پالت رنگ آيكون ويندوز xp

همه اشياء، در اندازه 16 * 16 و با پرسپكتيو، خوب نمايش داده نمي‏شوند. اشياء زير، عموماً در يك خط افقي نمايش داده مي‏شوند:
1. آيكون‏هاي اسناد (Document)
2. آيكون‏هايي كه نشانه هستند (مانند آيكون‏هاي اخطار يا اطلاع)
3. آيكون‏هايي كه تكي هستند (مانند ذره‏بين)

تصوير 8 : نمونه آيكون‏هاي مستقيم (آيكون‏هاي Search ، Favorites و اسناد Jpg)

آيكون‏هاي دوتايي روي هم را در يك زاويه طراحي كنيد تا اينكه حس بهتري را ايجاد كنند. همچنين ملاحظه مي‏كنيد كه چگونه آيكون شما ممكن است به عنوان يك مجموعه براي كمك به تعيين چگونگي اشياي گروهي به نظر برسد.

تصوير 9 : نمونه آيكون‏هاي روي هم (Print Pictures ، Recent Documents و Add or Remove Programs)

سايه

آيكون ويندوز xp از يك سايه براي ايجاد معني و ايجاد بعد استفاده مي‏كند. اين افكت در فتوشاپ اضافه مي‏شود كه بعداً توضيح داده مي‏شود.

براي اضافه كردن سايه به تصوير خود، بر روي لايه تصوير خود در فتوشاپ، دوبار كليك كنيد و Drop Shadow را انتخاب كنيد. سپس angle را به 135 و Distance را به 2 و Size را به 2 تغيير دهيد. تاري(opacity) سايه را نيز بر روي 75% تنظيم كنيد.

تصوير 10 : قبل و بعد از اضافه كردن سايه به يك آيكون

خط دور

وقتي كه آيكون‏هاي ويندوز xp را طراحي مي‏كنيد، به منظور ايجاد تفاوت و اينكه مطمئين باشيد كه آيكون در رنگ‏هاي مختلف پس‏زمينه‏ها (Background) خوب كار مي‏كند، يك خط دور (outline) به تصوير اضافه كنيد.

مرحله 1 ـ تصور

وقتي يك آيكون جديد طراحي مي‏كنيد، توصيه مي‏شود از قلم و كاغذ استفاده كنيد و ايده خود را به صورت خلاصه، طراحي كنيد.
اينجا يك مثال از طرح ابتدايي براي آيكون My Pictures مشاهده مي‏كنيد:

تصوير 11 : طرح ابتدايي آيكون My Pictures

نكاتي كه هنگام طراحي بايد توجه كنيد:
تا آنجايي كه ممكن است از يك فكر تأييد شده استفاده كنيد تا از سازگاري مفهوم ايده خود براي كاربرها مطمئن باشيد.
ملاحظه كنيد كه آيكون چگونه در نظر كاربر ظاهر مي‏شود و چگونه ممكن است به عنوان يك جزء از ست آيكون‏ها كار كند.
به فرهنگ گرافيك خود توجه كنيد. از استفاده از حروف، كلمات، دست، يا صورت در آيكون‏ها اجتناب كنيد. وقتي شما مجبوريد مردم يا كاربران را نشان دهيد، تا آنجا كه ممكن است، آنها را به صورت جامع و عمومي نشان دهيد.
اگر چند شيء را در يك تصوير آيكون تلفيق مي‏كنيد، توجه داشته باشيد كه تصوير به اندازه‏هاي كوچكتر تبديل خواهد شد. پيشنهاد مي‏شود كه در يك آيكون، بيشتر از سه شيء استفاده نكنيد. براي اندازه 16 * 16 شما مي‏توانيد اشياء را براي ديد بهتر، حذف يا ساده كنيد.

توجه:

از آرم ويندوز در آيكون‏ها استفاده نكنيد. آرم ويندوز بايد در آيكون‏هايي استفاده شود كه به عنوان جزئي از سيستم عامل ®Microsoft® Windows به كار مي‏روند.

آيكون‏هاي عمومي ويندوز:

تصوير 12 : آيكون‏هاي عمومي ويندوز xp

آيكون‏هاي عمومي منوي ابزار:

تصوير 13 : آيكون‏هاي عمومي منوي ابزار ويندوز xp

مرحله 2 ـ نقاشي (Illustrate)

براي نقاشي آيكون‏هاي ويندوز xp پيشنهاد مي‏شود كه از يك برنامه وكتوري مانند FreeHand و يا Adobe Illustrator استفاده كنيد.
1. تصوير خود را با استفاده از FreeHand يا Illustrator نقاشي كنيد.
2. سه اندازه از تصوير خود تهيه كنيد. به خاطر اينكه بعداً به تصوير خود سايه اضافه مي‏كنيد، شما بايد تصوير خود را در سه اندازه 46 * 46 ، 30 * 30 و 14 * 14 پيكسل تهيه كنيد.
3. تصوير خود را كپي كنيد و در برنامه فتوشاپ paste كنيد.

تصوير 14 : پنجره Paste

توجه: برنامه فتوشاپ به عنوان ابزار ايجاد تصوير به اين دليل پيشنهاد شده است كه نرم‏افزار GMG ‏(Gif Movie Gear = ابزاري كه ما براي ساخت فايل‏هاي ico. از آن استفاده مي‏كنيم) اغلب فايل‏هاي فتوشاپ را به طور دقيق به محيط خود وارد (Import) مي‏كند. هر تصويري كه در فتوشاپ با استفاده از مد رنگ RGB ساخته شده باشد، يك كانال رنگ آلفا به صورت ضميمه به همراه دارد. اگر شفافيتي در تصوير يا لايه وجود داشته باشد، اين كانال رنگ براي مقصود آيكون، معني‏دار خواهد شد.

مرحله 3 ـ ايجاد تصوير 24 بيتي

بعد از چسباندن فايل وكتوري خود در فتوشاپ، مرحله بعد، ايجاد يك تصوير 24 بيتي است.

وقتي كه شما تصوير خود را در سه اندازه در فتوشاپ وارد كرديد، وضوح تصوير خود را امتحان كنيد. به خصوص در اندازه 16 * 16. اگر اندازه 16 * 16 به طور واضحي، خوانا نبود، به FreeHand برگرديد و تصوير را در آن اندازه، ساده‏تر كنيد.
به تصوير خود سايه اضافه كنيد: بر روي لايه تصوير دو بار كليك كنيد و گزينه Drop Shadow را انتخاب كنيد. سپس angle را روي 135، Distance را روي 2 و Size را روي 2 تنظيم كنيد. همچنين Opacity را بر روي 75% تنظيم كنيد.

تصوير 15 : تنظيمات مربوط به Drop Shadow

براي اينكه سايه و تصوير 24 بيتي را با هم تركيب كنيد، يك لايه جديد ايجاد كنيد. در منوي لايه‏ها، گزينه Merge Visible را انتخاب كنيد و دو لايه را با هم تركيب كنيد.

تصوير 16 : تركيب لايه‏ها، براي حفظ و نگهداري سايه

براي هر سه اندازه 48 * 48، 32 * 32 و 16 * 16 پيكسل، سه فايل جديد در فتوشاپ ايجاد كنيد. تصوير مناسب را كپي كنيد و در فايل فتوشاپ بچسبانيد (Paste). اگر سايه تصوير، دندانه‏دار شد، بايد به FreeHand برگرديد، تصوير را كوچكتر كنيد و مراحل را از ابتدا دنبال كنيد.
هر فايل را با پسوند psd. ذخيره كنيد. لايه تصوير را با لايه background تركيب نكنيد. اين به شما كمك مي‏كند كه اندازه و وضوح رنگ در نام فايل آورده شود.

مرحله 4 ـ ايجاد تصاوير 8 بيتي و 4 بيتي

ايجاد تصوير 8 بيتي:
حالا كه شما يك تصوير 24 بيتي داريد، آماده هستيد تا يك آيكون 32 بيتي ايجاد كنيد. شما احتياج داريد كه يك نسخه 8 بيتي ايجاد كنيد. آيكون‏هاي 8 بيتي در تمام مد‏هاي رنگ كمتر از 32 بيت نمايش داده خواهند شد.

نسخه 8 بيتي، 8 بيت كانال رنگ آلفا را نخواهد داشت بنابراين آنها احتياج دارند كه لبه‏هاي آنها تميز شود. چون لبه‏هاي آنها antialias نيست. (به اين خاطر، لبه‏هاي آنها دندانه‏دار خواهد شد)
1. در فتوشاپ، لايه تصوير 24 بيتي خود را duplicate كنيد و نام آن را به 8bit Image تغيير دهيد.
2. يك لايه جديد ايجاد كنيد و با يك رنگ تاريك مانند آبي، آن را پر (Fill) كنيد.
3. لايه تصوير 8 بيت را با لايه جديد تركيب كنيد.
4. با يك رنگ، مانند آبي، لبه‏ها را پاك كنيد، پيكسل‏هاي antialias را پاك كنيد، (منظور پيكسل‏هايي است كه رنگ آنها به طور واضح، مشخص نيست). از يك حالت پله‏اي سازگار () براي كاهش مشخص بودن لبه‏هاي دندانه‏دار، استفاده كنيد. (به مقاله آموزشي در مورد Pixle Art مراجعه كنيد)
5. تصوير خود را در يك پس‏زمينه روشن مانند رنگ سفيد امتحان كنيد تا ببينيد كه چگونه به نظر مي‏رسد.

تصوير 17 : تصوير خود را براي يك وضوح رنگ 8 بيتي آماده كنيد.

6. سه فايل جديد فتوشاپ براي هر كدام از اندازه‏هاي آيكون‏ها ايجاد كنيد. تصوير مناسب هر اندازه را Copy و Paste كنيد.
7. سپس شما احتياج داريد تصوير را با 256 رنگ تنظيم كنيد. آيكون‏هاي 8 بيتي مي‏توانند رنگ‏هاي عادي داشته باشند.
الف) در تصوير 48 * 48 پس‏زمينه را با يك رنگ واحد ـ رنگي كه در تصوير خود استفاده نكرده باشيد ـ پر كنيد. اغلب از رنگ Magenta = ‏R255 G0 B255 استفاده مي‏شود.
ب) به Image->Mode->Indexed Color برويد و گزينه Flatten Layers را انتخاب كنيد.
ج) در منوي انتخابي Palette گزينه Custom را انتخاب كنيد. در پنجره Custom كليد OK را كليك كنيد. در پنجره Indexed Color كليد OK را كليك كنيد.
د) فايل را با پسوند psd. ذخيره كنيد.

ايجاد تصوير 4 بيتي
اگر مي‏خواهيد آيكون شما در وضوح تصوير پايين خوب به نمايش در بيايد، يك نسخه 16 رنگي از آيكون خود تهيه كنيد.

1. تصوير خود را متناسب با پالت 16 رنگ ويندوز تنظيم كنيد.
2. تنها با استفاده از رنگ‏هايي كه در پالت رنگ 16 رنگي ويندوز وجود دارد، تصوير خود را تميز كنيد.
3. از خط دور مشكي در لبه‏هاي پاييني و سمت راست تصوير استفاده كنيد.
4. از خاكستري تيره يا رنگ‏هاي تيره ديگر براي خط دور بالا و سمت چپ تصوير استفاده كنيد.
5. سه اندازه از تصوير را با پس‏زمينه‏هاي مشابه، ذخيره نماييد. مطمئن شويد كه رنگ پس‏زمينه، در تصوير استفاده نشده است زيرا رنگ پس‏زمينه، همان رنگي است كه به صورت شفاف (transparent) در خواهد آمد.

تصوير 18 : نمونه آيكون‏هاي 4 بيتي

مرحله 5 ـ ايجاد فايل‏هاي ICO.

هنگامي كه شما تمام تصاوير را آماده كرديد، وقت آن است كه آنها را به فايل‏هاي ico. تبديل كنيد. براي ايجاد آيكون‏هاي 32 بيتي، ما از نرم‏افزار Gif Movie Gear‏‏ (GMG) استفاده مي‏كنيم. براي دريافت اين نرم‏افزار به سايت Gamani برويد.

اين مرحله شما را با مراحل ايجاد فايل ico. كه سه اندازه و سه نوع وضوح تصوير دارد، آشنا مي‏كند.
1. شما بايد در مجموع 9 فايل داشته باشيد (سه اندازه در سه وضوح تصوير يا عمق رنگ):
48 × 48 at 24-bit
32 × 32 at 24-bit
16 × 16 at 24-bit

48 × 48 at 8-bit
32 × 32 at 8-bit
16 × 16 at 8-bit

48 × 48 at 4-bit
32 × 32 at 4-bit
16 × 16 at 4-bit
2. برنامه Gif Movie Gear را باز كنيد و هر تصوير را به درون پنجره برنامه بكشيد(Drag)‏ (يا از گزينه File->InsertFrames استفاده كنيد). هر تصوير، يك فريم خواهد شد.
3. وقتي شما تصاوير 24 بيتي (يا هر فايل psd. را كه شامل لايه‏ها باشد) را به اين برنامه مي‏كشيد، اين پنجره به نمايش در خواهد آمد:

تصوير 19 : تنظيمات تصاوير 24 بيتي در برنامه Gif Movie Gear

دقت كنيد كه تنظيمات به صورت زير انجام شده باشند:
   Layers as multiple frames in animation
   No blending: each Layer is a frame
   Keep background transparency
4. لايه‏ي پس‏زمينه هر تصوير 24 بيتي به صورت يك فريم ظاهر خواهد شد. اين فريم‏ها را توسط انتخاب فريم و زدن كليد Delete حذف كنيد.
5. شما الان بايد در مجموع 9 فريم داشته باشيد. تصاوير بايد بر اساس وضوح رنگ و به صورت صعودي مرتب شوند: سه تاي اول 4 بيتي (16 رنگ)، سه‏تاي بعد 8 بيتي (256 رنگ) و سه‏تاي آخر 24 بيتي با 8 بيت كانال رنگ آلفا (در مجموع 32 بيتي) هستند.

تصوير 20 : مرتب‏سازي تصاوير در برنامه Gif Movie Gear

توجه: براي اطلاع از مشخصات تصاوير، موس را روي تصوير نگه داريد. يك جعبه كه شامل اطلاعات رزلوشن هست، نمايش داده مي‏شود. اطلاعاتي كه به صورت پيش‏فرض نمايش داده مي‏شوند، شامل اندازه، شفافيت و تعداد بيت‏هاي رنگ هستند. شما مي‏توانيد اين اطلاعات را اضافه يا حذف كنيد. براي اين كار به اين قسمت برويد: Edit->Preferences->Frame Tips

6. براي نسخه‏هاي 8 بيتي و 4 بيتي، شما احتياج داريد كه پس‏زمينه را به صورت شفاف در بياوريد. GMG از رنگ سبز براي نمايش "transparent" استفاده مي‏كند. شما مي‏توانيد رنگ دلخواه خود را تنظيم كنيد. براي اين كار از گزينه‏هاي اين منو استفاده كنيد: View->Transparency As‏ . رنگ‏هاي انتخاب شده، فقط براي نمايش هستند و تأثيري در تصوير ندارند.
7. براي ساخت نسخه‏هاي 8 بيتي و 4 بيتي شفاف:
الف) يك فريم را انتخاب كنيد و بعد از منوي ابزار، شكل Pick Transparency Color (قطره‏چكان) را انتخاب كنيد.

تصوير 21 : استفاده از ابزار شفاف‏سازي

ب) در پنجره‏اي كه آيكون شما را نشان مي‏دهد، رنگ پس‏زمينه را توسط ابزار قطره‏چكان شكل انتخاب كنيد. اين رنگ به سبز روشن تبديل مي‏شود (يا هر رنگي كه شما براي نمايش پس‏زمينه‏هاي شفاف انتخاب كرده باشيد).
ج) براي تمام فريم‏هاي 4 بيت و 8 بيت اين كار را تكرار كنيد.

8. براي ذخيره آيكون از منوي File ، گزينه Save As را انتخاب كنيد.

ايجاد منوي ابزار

آيكون‏هاي منوي ابزار ويندوز همانند ديگر آيكون‏هاي ديگر هستند بجز اينكه سايه در مورد آنها استفاده نمي‏شود. به علت آنكه آيكون‏ها به طور متوسط كوچك هستند، پيشنهاد مي‏شود سادگي تصاوير حفظ شود.
اگر در يك خط افقي بودن به وضوح تصوير كمك كند، پذيرفته‏تر آن است كه از اين روش استفاده شود به‏جاي اينكه از يك تصوير داراي زاويه و پرسپكتيو استفاده شود.

منوي ابزار ويندوز، دو اندازه 24 * 24 و 16 * 16 پيكسل را نمايش مي‏دهد. دو حالت پيش‏فرض و حالت ويژه (MouseOver) براي آيكون‏هاي منوي ابزار وجود دارد. براي حالت ويژه، اندكي اشباع (saturation) تصوير را افزايش مي‏دهيم.

1. هنگامي كه شما يك آيكون نقاشي‏شده در FreeHand و در اندازه‏هاي مختلف داريد، آنها را كپي كنيد و در فتوشاب بچسبانيد(paste). تصاوير 24 * 24 پيكسل را در يك لايه و 16 * 16 در يك لايه ديگر قرار دهيد.
2. در لايه‏هاي جداگانه، يك رديف چهارخانه براي هر اندازه رسم كنيد. يك رديف از چهارخانه‏‏هاي 16 * 16 و يك رديف از چهارخانه‏هاي 24 * 24 پيكسلي.

تصوير 22 : نمونه‏اي از چهارخانه‏ها براي آيكون‏هاي منوي ابزار

3. هر تصوير را در يك چهارخانه و به ترتيبي كه احتياج داريد، جاي‏گذاري كنيد. دقت كنيد كه تصاوير روي هم قرار نگيرند.

تصوير 23 : جاي‏گذاري تصاوير در فريم‏هاي منوي ابزار

4. فايل فتوشاپ خود را ذخير نماييد.
5. سپس شما حالت ويژه را در فتوشاپ ايجاد خواهيد كرد
الف) لايه‏هاي 24 * 24 و 16 * 16 را تكثير (Duplicate) كنيد. لايه‏ها را تغيير نام دهيد طوري كه حالت ويژه (Hot) در نام لايه نمايش داده شود.
ب) براي هر نسخه، لايه را انتخاب كنيد و به ...Image->Adjust->Levels برويد و فلش وسط را روي 0.75 ببريد. كليد OK را فشار دهيد.

تصوير 24 : تنظيم Level براي نمايش حالت ويژه

6. هنگامي كه نسخه‏هاي ويژه تهيه شدند، شما بايد يك لايه براي هر نوار داشته باشيد: يك لايه براي آيكون پيش‏فرض 24 * 24 ، يكي براي آيكون ويژه 24 * 24 ، يكي براي پيش‏فرض 16 * 16 و يكي هم براي آيكون ويژه 16 * 16.
7. سپس شما بايد براي هر حالت، يك فايل مخصوص ايجاد كنيد.
الف) يك راه براي اين كار اين است كه از ابزار Crop استفاده كنيد و نوارهاي داراي وضوح مختلف را به صورت جداگانه ببريد و سپس آن فايل را ذخيره كنيد. هر نوار بايد شامل چهارخانه‏ها از ابتدا تا انتها باشد.
ب) هر نوار را جداگانه به صورت يك فايل فتوشاپ 24 بيتي، ذخيره كنيد.

تصوير 25 : يك نوار منوي ابزار 24 بيتي در فتوشاپ