سيستم عامل ها ( طراحي آيکون هايي با سبک ويندوز Xp )
طراحي آيکون هايي با سبک ويندوز XP
خلاصه
اين مقاله نحوه طراحي و ايجاد آيکون هاي تمام رنگي و ديناميک مورد استفاده در ويندوز XP را با استفاده از برنامه هاي گرافيکي مبتني بر Vector ( بردار) ، همانند فري هند ، Illustrator يا فتوشاپ بررسي مي کند .
عناوين :
1- مقدمه
2- مرورري بر طراحي آيکون
مرحله 1: انديشه و تصور
مرحله 2: طراحي
مرحله 3: ايجاد تصاوير 24-Bit
مرحله 4: ايجاد تصاوير 8-Bit و 4-Bit
مرحله 5: ايجاد فايلهاي .ico
3- ايجاد نوار ابزار
4- ايجاد AVI ها
1- مقدمه
سبک طراحي آيکون ها در ويندوز XP نسبت به نسخه هاي قبلي ويندوز تغيير يافته است .مقاله زير گام به گام شما را با طراحي و ايجاد آيکون هاي مناسب اين نسخه از ويندوز آشنا مي کند .
سبک آيکون ها در ويندوز XP رنگي ، جالب و دارا ي انرژي است. در واقع آنها آيکون هاي 32 بيتي با لبه هاي هموار و نرم است. هر آيکون در يکي از برنامه هاي گرافيکي برداري ايجاد مي شود و سپس در برنامه فتوشاپ تغييرات لازم در آن ايجاد مي شود تا زيبايي خود را کسب کند .
براي دستيابي به نتيجه بهتر به شما توصيه مي کنيم تا از برنامه هاي گرافيکي که امکان ايجاد تصاوير برداري و سه بعدي را دارند استفاده کنيد .
[ برای مشاهده لینک ، با نام کاربری خود وارد شوید یا ثبت نام کنید ]
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 پيکسل
[ برای مشاهده لینک ، با نام کاربری خود وارد شوید یا ثبت نام کنید ]
آيکون هايي که در سمت راست منوي شروع قرار دارند داراي ابعاد 24 × 24 پيکسل هستند. که البته اندازه مورد نياز شما نيست .
[ برای مشاهده لینک ، با نام کاربری خود وارد شوید یا ثبت نام کنید ]
اگر قصد ايجاد آيکون هايي براي نوار ابزار داريد بايد از اندازه هاي 24 × 24 و 16 × 16پيکسل استفاده کنيد.
[ برای مشاهده لینک ، با نام کاربری خود وارد شوید یا ثبت نام کنید ]
عمق رنگ مورد پشتيباني در آيکون ها
در ويندزو 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 است .
[ برای مشاهده لینک ، با نام کاربری خود وارد شوید یا ثبت نام کنید ]
پالت رنگ
رنگهاي اصلي که در ايجاد آيکون ها مورد استفاده قرار مي گيرند عبارتند از :
[ برای مشاهده لینک ، با نام کاربری خود وارد شوید یا ثبت نام کنید ]
زاويه و پرسپکتيو آيکون ها
طرح شبکه اي مورد استفاده در پرسپکتيو آيکون هايي با سبک ويندزو XP به شکل زير است :
[ برای مشاهده لینک ، با نام کاربری خود وارد شوید یا ثبت نام کنید ]
البته همه آيکون ها در زاويه 16 × 16 به خوبي ديده نمي شوند . نمونه آبجکت هاي زير فاقد زاويه بوده و از شيوه مستقيم استفاده مي کنند:
- آيکونهاي مورد استفاده براي اسناد
- آيکون هاي بيان کننده نشان و سمبل ( همانند آيکون هاي نشان دهنده پيام يا اطلاعات )
- آيکون هايي که آبجت هاي واحدي هستند ( همانند آِکون مئرد استفاده براي ذره بين )
[ برای مشاهده لینک ، با نام کاربری خود وارد شوید یا ثبت نام کنید ]
آبجت هاي ثانوي را با همان زاويه آبجکت اصلي ايجاد کنيد مگر آنکه قصد ايجاد حس بيشتري را داشته باشيد ، تا خوانايي بيشتري را ايجاد کنيد.
[ برای مشاهده لینک ، با نام کاربری خود وارد شوید یا ثبت نام کنید ]
استفاده از سايه پشت سر آبجکت
آيکون هاي ويندوز XP از يک سايه در پشت سر آبجکت ها استفاده مي کند که به آيکون بُعد مي دهد . اين افکت را مي توانيد در برنامه هاي گرافيکي همانند فتوشاپ ايجاد کنيد که در مباحث بعدي به ان مي پردازيم .
براي افزودن سايه پشت سر به تصوير در برنامه فتوشاپ و در لايه تصوير دوبار سريع کليک کرده و گزينه Drop Shadow را انتخاب کنيد. سپس مقدار زوايه را در فيلد Anfle به 135 افزايش دهيد و مقدار Distance يا بُعد را در 2 قرار دهيد و Size را نيز 2 وارد کنيد. مقدار Opacity مربوط به سايه را 75% تعيين کرده و رنگ سياه را انتخاب کنيد .
[ برای مشاهده لینک ، با نام کاربری خود وارد شوید یا ثبت نام کنید ]
خطوط خارجي
با افزودن خطوط خارجي به تصاوير تناسبي ايجاد کنيد تا تصوير در رنگ ها يا تصاوير زمينه مختلف به خوبي ديده شود .
مرحله 1 : انديشه و تصور
قبل از طراحي و پياده سازي يک آيکون جديد بهتر است مداد و کاغذي برداشته و طرح نمونه اي از ايده و نظرتان را بر روي آن پياده کنيد
در شکل زير تصويري از آيکون My Pictures که بر روي کاغذ طراحي شده است را مشاهده مي کنيد:
[ برای مشاهده لینک ، با نام کاربری خود وارد شوید یا ثبت نام کنید ]
دقت و توجه در هنگام طراحي آيکون ها :
تا حد ممکن از اجزايي استفاده کنيد که مفهوم را بيشتر براي کاربران مي رساند .
توجه و بررسي در اينکه آيکون چگونه در زمينه رباط گرافيکي کاربر ديده مي شود و چگونه در کنار ساير آيکون ها قرار مي گيرد .
بررسي و دقت در فرهنگ هاي مختلف در پياده سازي گرافيک ها . مثلا از حروف الفبا ، کلمات ، تصوير چهره و مشابه آنها حتي الامکان استفاده نکنيد. هنگامي که قصد نمايش کاربرا ن يا افراد را داريد بهتر است حتي الامکان از تصاوير کلي استفاده کنيد.
اگر مي خواهيد چندين آبجکت را دريک آيکون با يکديگرترکيب کنيد ، به ابعاد و زاويه آنها توجه کنيد . توصيه اي که در اين خصوص مي توانيم به شما بکنيم اين است که بيش از 3 تصوير در آيکون استفاده نکنيد. براي آيکونهاي 16 × 16پيسکل بهنر است از تصاوير ساده استفاده کرده و آبجکت هاي اضافي را از آنها حذف کنيد تا تشخيص آيکون به راحتي امکان پذير باشد.
1- آيکون هاي عمومي
[ برای مشاهده لینک ، با نام کاربری خود وارد شوید یا ثبت نام کنید ]
مرحله 2: طراحي
براي طراحي آيکون هايي با سبک ويندوز XP به شما توصيه مي کنيم تا از ابزار هاي برداري همانند فري هند يا Illustrator استفاده کنيد. در اين برنامه ها مي توانيد از نکاتي که در قسمت مروري بر طراحي آيکون ها ذکر شد همانند استفاده از پالت ها و سبک ها استفاده کنيد.
1- طرح مورد نظر تان را در يکي از برنامه هاي فري هند يا Illustrator پياده سازي کنيد.
2- تصوير را در سه اندازه ايجاد کنيد. با توجه به اينکه علاوه بر طرح مزبور سايه اي در پشت سر آيکون ها ايجاد مي شود که 2 پيکسل از فضاي ازراف آيکون را به خود اختصاص مي دهد باسد ابعاد 46 × 46, 30 × 30,و 14 × 14 پيکسل را در طراحي آيکون ها مورد استفاده قرار دهيد .
3- تصوير برداري ايجاد شده را در حافظه موقت سيستم copy کرده و سپس در برنامه فتوشاپ از حافظه خارج کنيد (Paste)
[ برای مشاهده لینک ، با نام کاربری خود وارد شوید یا ثبت نام کنید ]
مرحله 3: ايجاد تصاوير 24-Bit
بعد از انجام عمل Paste فايل برداري در برنامه فتوشاپ مرحله بعد ايجاد تصوير 24 بيتي است :
1- هر بار که تصوير را با اندازه هاي مختلف در فتوشاپ از حافظه خارج مي کنيد ، خوانايي و دقت تصوير را بررسي کنيد. خصوصا در تصوير 16 × 16پيکسل. در صورتي که تصوير مزبور وضوح کافي ندارد به برنامه فري هند برگشته و تغييرات مورد نظرتان را در تصوير ايجاد کنيد.
2- سايه پشت نصوير را به شيوه توضيح داده شده در قسمت استفاده از سايه پشت سر آبجکت ايجاد کنيد .
[ برای مشاهده لینک ، با نام کاربری خود وارد شوید یا ثبت نام کنید ]
3- براي يکي کردن سايه با تصاوير 24 بيتي يک لايه جديد ايجاد کنيد. در منوي Layers گزينه Merge Visible را انتخاب کرده و هر سه لايه را با يکديگر يکي و merge کنيد.
[ برای مشاهده لینک ، با نام کاربری خود وارد شوید یا ثبت نام کنید ]
4- سه فايل جديد در برنامه فتوشاپ ايجاد کنيد . يکي براي تصوير 48 × 48يکي براي 32 × 32 ويک فايل نيز براي تصوير 16 × 16 پيکسلي .تصاوير مزبور را مجددا در حافظه موقت ويندوز کپي کرده و سپس از حافظه خارج کنيد.
5- فايل را در قالب بندي psd. ذخيره کنيد. لايه پس زمينه را با تصوير يکي نکنيد.
مرحله 4: ايجاد تصاوير 8-Bit و 4-Bit
- ايجاد تصاوير 8 بيتي
پس از ايجاد تصاوير 24 بيتي مي توانيد در اين مرحله آيکون هاي 32 بيتي را ايجاد کنيدو براي اين کارنياز به نسخه 8 بيتي از آيکون داريد.
نسخه هاي 8 بيتي فاقد کانال آلفا 8 بيتي هستند:
1- در فتوشاپ لايه تصويري 24 بيتي را انتخاب کرده و سپس کپي از آن ايجاد کنيد(duplicate ) و آن را تحت عنوان 8-bit images نام گذاري کنيد.
2- يک لايه خالي ايجاد کرده و آن را با رنگي تيره همانند رنگ آبي پر رنگ رنگ آميزي کنيد.
3- لايه تصوير 8بيتي را با اين لايه يکي کنيد (merger).
4- لبه هاي آن را با رنگ هموار و نرم کنيد. و هر پيکسل دندانه داري را حذف کنيد.
[ برای مشاهده لینک ، با نام کاربری خود وارد شوید یا ثبت نام کنید ]
5- سه فايل جديد با ابعاد 48 × 48, 32 × 32 و 16 × 16پيکسل ايجاد کرده و آنها را copy و paste کنيد.
6- در اين مرحله بايد تصاوير را به حالت رنگ بندي 256 رنگ قرار دهيد . آيکون هاي 8 بيتي مي توانند پالت هاي سفارشي داشته باشند .
1-6- در تصوير 48 × 48 ، زمينه را با يک رنگ منحصر به فرد رنگ آميزي کنيد ( رنگي در تصوير شما به کار نرفته باشد ) مي توانيد از رنگ ارغواني (R255 G0 B255) براي اين کار استفاده کنيد.
2-6- گزينه Image->Mode->Indexed Color را انتخاب کرده و سپس گزينه Flatten Layers را انتخاب کنيد.
3-6- در منوي پائين افتادني Palette گزينه Custome را انتخاب کنيد. در کادر محاوره اي Customeگزينه Ok را انتخاب کرده و سپس در کادر محاوره اي Indexed Color نيز گزينه Ok را انتخاب کنيد.
4-6- فايل را در قالب .psd ذخيره کنيد.
5-6- با استفاده از همان رنگ زمينه دو تصوير ديگر را نيز ذخيره کرده و پالت سفارشي را به آن اعمال کنيد.
7- هر فايل را در قالب .psd ذخيره کنيد.
- ايجاد تصوير 4 بيتي
براي ايجاد نسخه هاي 16 رنگي از آيکون ها :
1- تصوير 8 بيتي تان را با پالت رنگ 16 تايي ويندوز مشاهده کنيد.
2- تصوير را با استفاده از رنگ هاي 16 تايي پالت پاکسازي کنيد.
3- در گوشه سمت راست پائين تصوير از يک خط سياه استفاده کنيد.
4- ازيک رنگ خاکستري تيره يا ديگر رنگ هاي تيره براي گوشه هاي چپ و لبه هاي بالاي تصوير استفاده کنيد.
5- تصوير مربوطه را با سه اندازه و با همان رنگ زمينه ذخيره کنيد. دقت کنيد که رنگ زمينه انتخابي تان در خود تصوير استفاده نشده باشد .
[ برای مشاهده لینک ، با نام کاربری خود وارد شوید یا ثبت نام کنید ]
5- ايجاد فايلهاي .ico
پس از ايجاد فايل ها زمان تهيه فايل هاي .icoاست . براي ايجاد آيکون هاي 32 بيتي ما از ابزار و برنامه اي به نام Gif Movie Gear (GMG) استفاده مي کنيم. براي تهيه اين برنامه مي توانيد
[ برای مشاهده لینک ، با نام کاربری خود وارد شوید یا ثبت نام کنید ]
را کليک کنيد.
مراحل زير شما را در ايجاد يک فايل .ico راهنمايي مي کند :
1- شما بايد مجموعا 9 فايل داشته باشيد . 3 اندازه براي هر عمق رنگ :
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 را باز کرده و به سادگي هر تصوير را به داخل پنجره بکشيد و يا از گزينه File->Insert Frames استفاده کنيد. هر تصوير به عنوان يک فريم در نظر گرفته مي شود .
3- هنگام کشيدن تصوير 24 بيتي به داخل برنامه ( يا هر فايل .psd با لايه هايش )کادر محاوره اي نمايان مي شود :
[ برای مشاهده لینک ، با نام کاربری خود وارد شوید یا ثبت نام کنید ]
توجه داشته باشيد تا تنظيمات به شکل زير باشند :
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 رنگ) هستند و3 تصوير آخر نيزآيکون هاي 24 بيتي با 8 بيت کانال آلفا(32 بيتي ) هستند.
[ برای مشاهده لینک ، با نام کاربری خود وارد شوید یا ثبت نام کنید ]
براي بررسي ويژگي هاي تصاوير ماوس را بر روي تصاوير جابجا کنيد . ابزار راهنمايي (tooltip) نمايان مي شود که resolution هر تصوير را به شما نشان مي دهد . در حالت پيش فرض اطلاعاتي همچون ابعاد ، شفافيت و مقدار بيت موجود در تصاوير نشان داده مي شود . اين آيتمها را مي توانيد با انتخاب گزينه Edit->Preferences->Frame Tips حذف کرده يا اضافه کنيد .
6- براي تصاوير 4 و 8 بيتي نياز به اعمال شفافيت در پس زمينه هستيد . برنامه GMG از رنگ سبز براي ايجاد شفافيت استفاده مي کند.شما مي توانيد در صورت تمايل با استفاده از منوي View->Transparency As رنگ مورد نظرتان را تعيين کرده يا رنگ پيش فرض را حفظ کنيد. رنگ مزبور در تصوير نهايي موثر نيست و تنها براي تعيين محدوده شفافيت مورد استفاده قرار مي گيرد .
7- براي اعمال ضافيت در نسخه هاي 4 و 8 بيتي :
1-7 – يک فريم را انتخاب کرده و سپس آيکون Transparency Color را از نوار ابزار انتخاب کنيد.
[ برای مشاهده لینک ، با نام کاربری خود وارد شوید یا ثبت نام کنید ]
2-7- کادر محاوره اي نمايان مي شود که آيکون را به شما نشان مي دهد . با قطره چکان در رنگ پس زمينه آيکون کليک کنيد . اين رنگ به سبز روشن تغيير مي يابد . ( يا هر رنگي که شما براي رنگ محدوده شفاف شونده در برنامه GMG انتخاب کرده ايد )
3-7- اين مراحل را براي تمامي فريم هاي 4 و 8 بيتي در اندازه هاي مختلف تکرار کنيد.
8- براي ذخيره آيکون ها گزينه File->Save Icon As…. را انتخاب کنيد.
3- ايجاد نوار ابزار
آیکون های نوار ابزار ها از همان سبکی پیروی می کنند که آیکون های دیگر استفاده می کنند به جز اینکهآنها فاقد رنگ سایه پشت هستند . با توجه به اینکه نوار آیکون ها ی نوار ابزار تقریبا کوچک هستند ، بهتر است از تصاویر بسیار ساده برای آنها استفاده کنید.
نوار ابزار در ویندوز دو اندازه 24 × 24 و 16 × 16پیکسل را نشان می دهند . دو وضعیت برای آنها وجود دارد . حالت پیش فرض و حالت قرار گیری ماوس بر روی آیکون . برای وضعیت mouseover بهتر است تا وضعیت اشباع تصویر را افزایش دهید .
البته این آیکون ها در نواری با قالب .BMP قرار می گیرند:
1- هر بار که شما آیکون ها را در برنامه فری هند و در هر اندازه ای ایجاد می کنید ، آنها را در برنامه فتوشاپ copy و paste کنید . سپس 24 × 24 ها را در یک لایه و 16 × 16 ها را در لایه دیگری قرار دهید .
2- یک ردیف کادر را برای هر اندازه در لایه دیگری ایجاد کنید. یک ردیف از کادر های 16 × 16 و یک ردیف از کادر های 24 × 24.
[ برای مشاهده لینک ، با نام کاربری خود وارد شوید یا ثبت نام کنید ]
3- هر تصویر را در یک مربع و به ترتیبی که مایلید قرار دهید . دقت کنید تا هیچ تصویری بر روی تصویردیگر قرار نگیرد.
[ برای مشاهده لینک ، با نام کاربری خود وارد شوید یا ثبت نام کنید ]
4- فایل را در فتوشاپ ذخیره کنید.
5- سپس باید حالت mouseover را برای فایل ایجاد کنید.
1-5- کپی از لایه های 24 × 24 و 16 × 16 را مجددا تکرار کنید(Duplicate)
2-5 – برای هر حالت mouseover لایه را انتخاب کنید و سپس گزینه Image->Adjust->Levels… را انتخاب کنید. و فلش میانی را تا مقدار 0.75 جابجا کنید. سپس گزینه OK را انتخاب کنید .
[ برای مشاهده لینک ، با نام کاربری خود وارد شوید یا ثبت نام کنید ]
6- هر بار که نسخه mouseover را ایجاد می کنید ، باید یک لایه برای هر نوار داشته باشید : یک 24 × 24 پیش فرض با یک نوار 24 × 24 mouseover و یک 16 × 16 پیش فرض با یک نوار 16 × 16 mouseover
7- سپس باید برای هر نوار باریک فایل های جداگانه ای را ایجاد کنید:
1-7 – یکی از روش های انجام چنین کاری استفاده از بزار crop و سپس جدا کردن آن بخش از فایل و ذخیره فایل در ابعاد نوار است. هر نوار باید از ابتدای کادر اول تا انتهای کادر آخر را شامل شود .
2-7 – هر نوار را به عنوان یک فایل .psd و در حالت 24 بیتی ذخیره کنید.
[ برای مشاهده لینک ، با نام کاربری خود وارد شوید یا ثبت نام کنید ]
8- برای ذخیره یک نوار در حالت تصویر 32 بیت ، نوار را به داخل برنامه GMG بکشید . فریم های خالی را حذف کنید .سپس گزینه File->Export as->Filmstrip را انتخاب کنید. در کادر محاوره ای Film Export توجه داشته باشید تا گزینه های BMP/DIB و 24-bit with Alpha انتخاب شده باشند .
4- ايجاد AVI ها
ویندوز Xp از فایل های AVI با حالت 8 بیت استفاده می کند .فرایند ایجاد این فایل ها نیز همانند ایجاد فایل های آیکون است. شما تکه ها ی فایلها را در برنامه فتوشاپ آماده کرده و سپس به داخل برنامه GMG می کشید. از مطالب عنوان شده در ایجاد فایل های 8 بیتی استفاده کنید.
برای ذخیره فایلهای Avi با استفاده از برنامه GMG گزینه File->Export As->AVI file…. را انتخاب کنید.
هنگام ایجاد این فایل ها توجه داشته باشید تا :
از رنگ ارغوانی (R255 G0 B255) به عنوان رنگ شفاف پس زمینه استفاده کنید .
در برنامه فتوشاپ مهم است که هیچ پیکسل بی موردی وجود نداشته باشد . مقدار صفر را در tolerances تعیین کرده و همچنین توجه داشته باشید که گزینه antialiase انتخاب نشده باشد .
