آموزش طراحي آيکون هايي با سبک ويندوز Xp

واضح آرشیو وب فارسی:سایت ریسک: soooot21-12-2005, 04:32 AMطراحي آيکون هايي با سبک ويندوز 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 بيتي با لبه هاي هموار و نرم است. هر آيکون در يکي از برنامه هاي گرافيکي برداري ايجاد مي شود و سپس در برنامه فتوشاپ تغييرات لازم در آن ايجاد مي شود تا زيبايي خود را کسب کند . براي دستيابي به نتيجه بهتر به شما توصيه مي کنيم تا از برنامه هاي گرافيکي که امکان ايجاد تصاوير برداري و سه بعدي را دارند استفاده کنيد . http://www.tebyan.net/Computer/82/09/image/image001.gif 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 پيکسل http://www.tebyan.net/Computer/82/09/image/image002.gif آيکون هايي که در سمت راست منوي شروع قرار دارند داراي ابعاد 24 × 24 پيکسل هستند. که البته اندازه مورد نياز شما نيست . http://www.tebyan.net/Computer/82/09/image/image003.gif اگر قصد ايجاد آيکون هايي براي نوار ابزار داريد بايد از اندازه هاي 24 × 24 و 16 × 16پيکسل استفاده کنيد. http://www.tebyan.net/Computer/82/09/image/image004.gif عمق رنگ مورد پشتيباني در آيکون ها در ويندزو 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 است . http://www.tebyan.net/Computer/82/09/image/image005.gif پالت رنگ رنگهاي اصلي که در ايجاد آيکون ها مورد استفاده قرار مي گيرند عبارتند از : http://www.tebyan.net/Computer/82/09/image/image006.gif زاويه و پرسپکتيو آيکون ها طرح شبکه اي مورد استفاده در پرسپکتيو آيکون هايي با سبک ويندزو XP به شکل زير است : http://www.tebyan.net/Computer/82/09/image/image007.gif البته همه آيکون ها در زاويه 16 × 16 به خوبي ديده نمي شوند . نمونه آبجکت هاي زير فاقد زاويه بوده و از شيوه مستقيم استفاده مي کنند: - آيکونهاي مورد استفاده براي اسناد - آيکون هاي بيان کننده نشان و سمبل ( همانند آيکون هاي نشان دهنده پيام يا اطلاعات ) - آيکون هايي که آبجت هاي واحدي هستند ( همانند آِکون مئرد استفاده براي ذره بين ) http://www.tebyan.net/Computer/82/09/image/image008.gif آبجت هاي ثانوي را با همان زاويه آبجکت اصلي ايجاد کنيد مگر آنکه قصد ايجاد حس بيشتري را داشته باشيد ، تا خوانايي بيشتري را ايجاد کنيد. http://www.tebyan.net/Computer/82/09/image/image009.gif استفاده از سايه پشت سر آبجکت آيکون هاي ويندوز XP از يک سايه در پشت سر آبجکت ها استفاده مي کند که به آيکون بُعد مي دهد . اين افکت را مي توانيد در برنامه هاي گرافيکي همانند فتوشاپ ايجاد کنيد که در مباحث بعدي به ان مي پردازيم . براي افزودن سايه پشت سر به تصوير در برنامه فتوشاپ و در لايه تصوير دوبار سريع کليک کرده و گزينه Drop Shadow را انتخاب کنيد. سپس مقدار زوايه را در فيلد Anfle به 135 افزايش دهيد و مقدار Distance يا بُعد را در 2 قرار دهيد و Size را نيز 2 وارد کنيد. مقدار Opacity مربوط به سايه را 75% تعيين کرده و رنگ سياه را انتخاب کنيد . http://www.tebyan.net/Computer/82/09/image/image010.gif خطوط خارجي با افزودن خطوط خارجي به تصاوير تناسبي ايجاد کنيد تا تصوير در رنگ ها يا تصاوير زمينه مختلف به خوبي ديده شود . مرحله 1 : انديشه و تصور قبل از طراحي و پياده سازي يک آيکون جديد بهتر است مداد و کاغذي برداشته و طرح نمونه اي از ايده و نظرتان را بر روي آن پياده کنيد در شکل زير تصويري از آيکون My Pictures که بر روي کاغذ طراحي شده است را مشاهده مي کنيد: http://www.tebyan.net/Computer/82/09/image/image011.gif دقت و توجه در هنگام طراحي آيکون ها : تا حد ممکن از اجزايي استفاده کنيد که مفهوم را بيشتر براي کاربران مي رساند . توجه و بررسي در اينکه آيکون چگونه در زمينه رباط گرافيکي کاربر ديده مي شود و چگونه در کنار ساير آيکون ها قرار مي گيرد . بررسي و دقت در فرهنگ هاي مختلف در پياده سازي گرافيک ها . مثلا از حروف الفبا ، کلمات ، تصوير چهره و مشابه آنها حتي الامکان استفاده نکنيد. هنگامي که قصد نمايش کاربرا ن يا افراد را داريد بهتر است حتي الامکان از تصاوير کلي استفاده کنيد. اگر مي خواهيد چندين آبجکت را دريک آيکون با يکديگرترکيب کنيد ، به ابعاد و زاويه آنها توجه کنيد . توصيه اي که در اين خصوص مي توانيم به شما بکنيم اين است که بيش از 3 تصوير در آيکون استفاده نکنيد. براي آيکونهاي 16 × 16پيسکل بهنر است از تصاوير ساده استفاده کرده و آبجکت هاي اضافي را از آنها حذف کنيد تا تشخيص آيکون به راحتي امکان پذير باشد. 1- آيکون هاي عمومي http://www.tebyan.net/Computer/82/09/image/image012.gif مرحله 2: طراحي براي طراحي آيکون هايي با سبک ويندوز XP به شما توصيه مي کنيم تا از ابزار هاي برداري همانند فري هند يا Illustrator استفاده کنيد. در اين برنامه ها مي توانيد از نکاتي که در قسمت مروري بر طراحي آيکون ها ذکر شد همانند استفاده از پالت ها و سبک ها استفاده کنيد. 1- طرح مورد نظر تان را در يکي از برنامه هاي فري هند يا Illustrator پياده سازي کنيد. 2- تصوير را در سه اندازه ايجاد کنيد. با توجه به اينکه علاوه بر طرح مزبور سايه اي در پشت سر آيکون ها ايجاد مي شود که 2 پيکسل از فضاي ازراف آيکون را به خود اختصاص مي دهد باسد ابعاد 46 × 46, 30 × 30,و 14 × 14 پيکسل را در طراحي آيکون ها مورد استفاده قرار دهيد . 3- تصوير برداري ايجاد شده را در حافظه موقت سيستم copy کرده و سپس در برنامه فتوشاپ از حافظه خارج کنيد (Paste) http://www.tebyan.net/Computer/82/09/image/image014.gif مرحله 3: ايجاد تصاوير 24-Bit بعد از انجام عمل Paste فايل برداري در برنامه فتوشاپ مرحله بعد ايجاد تصوير 24 بيتي است : 1- هر بار که تصوير را با اندازه هاي مختلف در فتوشاپ از حافظه خارج مي کنيد ، خوانايي و دقت تصوير را بررسي کنيد. خصوصا در تصوير 16 × 16پيکسل. در صورتي که تصوير مزبور وضوح کافي ندارد به برنامه فري هند برگشته و تغييرات مورد نظرتان را در تصوير ايجاد کنيد. 2- سايه پشت نصوير را به شيوه توضيح داده شده در قسمت استفاده از سايه پشت سر آبجکت ايجاد کنيد . http://www.tebyan.net/Computer/82/09/image/image015.gif 3- براي يکي کردن سايه با تصاوير 24 بيتي يک لايه جديد ايجاد کنيد. در منوي Layers گزينه Merge Visible را انتخاب کرده و هر سه لايه را با يکديگر يکي و merge کنيد. http://www.tebyan.net/Computer/82/09/image/image016.gif 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- لبه هاي آن را با رنگ هموار و نرم کنيد. و هر پيکسل دندانه داري را حذف کنيد. http://www.tebyan.net/Computer/82/09/image/image017.gif 5- سه فايل جديد با ابعاد 48 × 48, 32 × 32 و 16 × 16پيکسل ايجاد کرده و آنها را copy و paste کنيد. 6- در اين مرحله بايد تصاوير را به حالت رنگ بندي 256 رنگ قرار دهيد . آيکون هاي 8 بيتي مي توانند پالت هاي سفارشي داشته باشند . 1-6- در تصوير 48 × 48 ، زمينه را با يک رنگ منحصر به فرد رنگ آميزي کنيد ( رنگي در تصوير شما به کار نرفته باشد ) مي توانيد از رنگ ارغواني (R255 G0 B 255) براي اين کار استفاده کنيد. 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- تصوير مربوطه را با سه اندازه و با همان رنگ زمينه ذخيره کنيد. دقت کنيد که رنگ زمينه انتخابي تان در خود تصوير استفاده نشده باشد . http://www.tebyan.net/Computer/82/09/image/image018.gif 5- ايجاد فايلهاي .ico پس از ايجاد فايل ها زمان تهيه فايل هاي .icoاست . براي ايجاد آيکون هاي 32 بيتي ما از ابزار و برنامه اي به نام Gif Movie Gear (GMG) استفاده مي کنيم. براي تهيه اين برنامه مي توانيد اينجا (http://www.gamani.com/foricons) را کليک کنيد. مراحل زير شما را در ايجاد يک فايل .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 با لايه هايش )کادر محاوره اي نمايان مي شود : http://www.tebyan.net/Computer/82/09/image/image019.gif توجه داشته باشيد تا تنظيمات به شکل زير باشند : 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 بيتي ) هستند. http://www.tebyan.net/Computer/82/09/image/image020.gif براي بررسي ويژگي هاي تصاوير ماوس را بر روي تصاوير جابجا کنيد . ابزار راهنمايي (tooltip) نمايان مي شود که resolution هر تصوير را به شما نشان مي دهد . در حالت پيش فرض اطلاعاتي همچون ابعاد ، شفافيت و مقدار بيت موجود در تصاوير نشان داده مي شود . اين آيتمها را مي توانيد با انتخاب گزينه Edit->Preferences->Frame Tips حذف کرده يا اضافه کنيد . 6- براي تصاوير 4 و 8 بيتي نياز به اعمال شفافيت در پس زمينه هستيد . برنامه GMG از رنگ سبز براي ايجاد شفافيت استفاده مي کند.شما مي توانيد در صورت تمايل با استفاده از منوي View->Transparency As رنگ مورد نظرتان را تعيين کرده يا رنگ پيش فرض را حفظ کنيد. رنگ مزبور در تصوير نهايي موثر نيست و تنها براي تعيين محدوده شفافيت مورد استفاده قرار مي گيرد . 7- براي اعمال ضافيت در نسخه هاي 4 و 8 بيتي : 1-7 – يک فريم را انتخاب کرده و سپس آيکون Transparency Color را از نوار ابزار انتخاب کنيد. http://www.tebyan.net/Computer/82/09/image/image021.gif 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. http://www.tebyan.net/Computer/82/09/image/image022.gif 3- هر تصویر را در یک مربع و به ترتیبی که مایلید قرار دهید . دقت کنید تا هیچ تصویری بر روی تصویردیگر قرار نگیرد. http://www.tebyan.net/Computer/82/09/image/image023.gif 4- فایل را در فتوشاپ ذخیره کنید. 5- سپس باید حالت mouseover را برای فایل ایجاد کنید. 1-5- کپی از لایه های 24 × 24 و 16 × 16 را مجددا تکرار کنید(Duplicate) 2-5 – برای هر حالت mouseover لایه را انتخاب کنید و سپس گزینه Image->Adjust->Levels… را انتخاب کنید. و فلش میانی را تا مقدار 0.75 جابجا کنید. سپس گزینه OK را انتخاب کنید . http://www.tebyan.net/Computer/82/09/image/image024.gif 6- هر بار که نسخه mouseover را ایجاد می کنید ، باید یک لایه برای هر نوار داشته باشید : یک 24 × 24 پیش فرض با یک نوار 24 × 24 mouseover و یک 16 × 16 پیش فرض با یک نوار 16 × 16 mouseover 7- سپس باید برای هر نوار باریک فایل های جداگانه ای را ایجاد کنید: 1-7 – یکی از روش های انجام چنین کاری استفاده از بزار crop و سپس جدا کردن آن بخش از فایل و ذخیره فایل در ابعاد نوار است. هر نوار باید از ابتدای کادر اول تا انتهای کادر آخر را شامل شود . 2-7 – هر نوار را به عنوان یک فایل .psd و در حالت 24 بیتی ذخیره کنید. http://www.tebyan.net/Computer/82/09/image/image025.gif 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 B 255) به عنوان رنگ شفاف پس زمینه استفاده کنید . در برنامه فتوشاپ مهم است که هیچ پیکسل بی موردی وجود نداشته باشد . مقدار صفر را در tolerances تعیین کرده و همچنین توجه داشته باشید که گزینه antialiase انتخاب نشده باشد . mpsjavad13-02-2006, 10:33 PMبا سلام .. من اوردم اينجا :) كبريت13-02-2006, 11:24 PMمنم اين آموزش رو به PDF تبديل كردم و گذاشتم براي دانلود تا ديگران هر موقع خواستن بخونن اگه خواستين كليك كنين (http://www.savefile.com/files/6445167) rb 9713-02-2006, 11:28 PMایول خیلی باهال بود ميلاد پوررجب14-02-2006, 04:16 AMممنون از اين آموزش خوبتون سایت ما را در گوگل محبوب کنید با کلیک روی دکمه ای که در سمت چپ این منو با عنوان +1 قرار داده شده شما به این سایت مهر تأیید میزنید و به دوستانتان در صفحه جستجوی گوگل دیدن این سایت را پیشنهاد میکنید که این امر خود باعث افزایش رتبه سایت در گوگل میشود

این صفحه را در گوگل محبوب کنید

[ارسال شده از: سایت ریسک]

[مشاهده در: www.ri3k.eu]

[تعداد بازديد از اين مطلب: 521]