۰۹۳۶۴۲۴۵۱۳۸

طراحی دکمه در فتوشاپ

مقدمه 

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

 

طراحی دکمه Download 

فايل جديد با تنظيمات زير ايجاد كنيد:

پنجره New

تصوير را ۲۰۰% Zoom كنيد. پالت Channel را فعال كنيد و يك كانال ايجاد نماييد. ابزار Rounded Rectangle ( Shape ) را انتخاب نماييد. رنگ سفيد براي روزمينه انتخاب كنيد. شعاع را در نوار موارد اختياري ۱۰ پيكسل انتخاب كنيد. شكل را رسم كرده و در وسط صفحه قرار دهيد. كليد Ctrl را نگه داشته و روي كانال كليك كنيد تا انتخاب شود. كانال RGB را انتخاب كرده و به پالت Layer برگرديد. اين روشي براي نگه­داشتن شكل است تا اگر بخواهيم دوبار انتخاب كنيم بتوانيم از پالت كانال اين كار را انجام دهيم. لايه جديدي ايجاد كرده و رنگ دلخواه را براي پس زمينه و رو زمينه انتخاب كنيد. بهتر است Guide (خطوط راهنما) براي تصوير ايجاد كنيد. بدين منظور خط كش ( Ruler ) را از منوي View فعال كنيد و يك خط از درون خط­كش افقي در وسط شكل بكشيد. رنگ خطوط Guide را مي­توانيد از قسمت Preferences تغيير دهيد. رنگ روزمينه را ۷۹bbef و رنگ پشت زمينه را ۲۱۹۳e0 را انتخاب كنيد. ابزار Gradient را انتخاب كنيد. روي نوار موارد اختياري دقيقاً روي رنگ كليك كنيد. پنجره زير باز مي­شود:

پنجره Gradient

اولين گزينه را انتخاب كنيد. از ناحيه بالاي انتخاب كليك كنيد و آنرا به وسط شكل بكشيد. خطوط راهنما در اين زمينه به شما كمك مي­كند. ابزار انتخاب مستطيلي را انتخاب كنيد. كليد Alt را نگه داشته و ناحيه بالايي شكل را كم كنيد. تصوير به شكل زير تغيير مي­يابد:

شکل مستطیل

رنگ رو زمينه را ۰b6bb8 انتخاب كنيد و رنگ پشت زمينه ۰۴۵۱b3 انتخاب كنيد. ابزار Gradient را انتخاب كنيد.از بالاي انتخاب به سمت پايين بكشيد. هنگان درگ كردن كليد Shift‌ را نگه داريد. با اجراي فرمان Deselect ناحيه انتخابي را از انتخاب خارج كنيد. با اجراي فرمان Clear Guides از منوي View خطوط راهنما را پاك كنيد. در پالت Layer گزينه Layer Style را اجرا كرده و گزينه Stroke را برگزينيد. رنگ دور آنرا آبي ( ۰۰۰۰۳۳ ) انتخاب كنيد. گزينه Drop Shadow را انتخاب كرده و Ok‌ را كليك كنيد. تصوير همانند شكل زير شده است:

تغییر ظاهر دکمه

كليد Ctrl را نگه داشته و روي لايه شكل كليك كنيد تا انتخاب شود. از منوي Select گزينه Modify و سپس Contract را انتخاب كنيد. اندازه ۲ پيكسل را وارد و Ok را كليك كنيد. لايه جديدي ايجاد كرده و كليدهاي D و X را از صفحه كليد بزنيد. ابزار Gradient‌ را انتخاب كنيد. گزينه دوم را انتخاب كنيد. يعني از سفيد به شفاف. از بالاي انتخاب تا وسط بكشيد. فرمان Deselect را اجرا كنيد. اكنون ميزان Opacity‌ را كاهش دهيد. علامت PDF را از پوشه پروژه باز كرده و آنرا روي فايل اصلي بكشيد. مكان آنرا تنظيم كنيد. اندازه آنرا در صورت لزوم تغيير دهيد. متن Download eBook را تايپ كرده و يك كپي از لايه ايجاد كنيد. رنگ متن زيرين را مشكي و رنگ متن بالايي را سفيد انتخاب كنيد. لايه زيرين را انتخاب كرده و آنرا پايين بكشيد تا به صورت سايه متن به نظر برسد. لايه­اي كه تصوير دكمه در آن قرار دارد را انتخاب كنيد. روي آن فرمان Adjustment‌ را از پالت Layer اجرا كرده و گزينه Hue/Saturation را اجرا كنيد. با تغيير دادن Hue مي­توانيد دكمه­هايي با رنگهاي متفاوت ايجاد كنيد. همانند تصوير زير:

رنگ آمیزی دکمه

 

طراحی دكمه Order Button 

بهتر است بجاي پيدا كردن دكمه­ هاي متفاوت در وب خودتان در فتوشاپ دكمه دلخواه خود را ايجاد كنيد. زير هر تغييري كه مي­خواهيد مي­توانيد روي آن اعمال كنيد. همانند رنگ و متن آن را مي­توانيد تغيير دهيد.

فايل جديد با مشخصات زير ايجاد كنيد:

پنجره New

هميشه اندازه فايل را بزرگتر از اندازه اصلي ايجاد كنيد تا فضاي كافي براي ايجاد دكمه داشته باشيد. پالت Channel را فعال كنيد. كانال جديدي ايجاد كنيد. از ابزار Shape گزينه Rounded Rectangle را انتخاب كنيد. ميزان شعاع گوشه را ۱۵ پيكسل وارد كنيد. رنگ روزمينه را سفيد انتخاب كنيد. يك مستطيل رسم كنيد. كليد Ctrl را نگه داشته و روي لايه كليك كنيد تا انتخاب شود. لايه RGB‌ را انتخاب كرده و به پالت Layers باز گرديد. لايه جديدي ايجاد كرده و رنگهاي رو زمينه را ۶۶۰۰۰۰ و پشت زمينه را ff6666 انتخاب كنيد. ابزار Gradient را انتخاب كنيد. روي رنگ Gradient كليك كنيد. اولين گزينه را انتخاب كنيد. Ok‌ را كليك كنيد. كليد Shift را نگه داشته در قسمت وسط از بالا به سمت پائين بكشيد. اكنون مي­خواهيم كمي اندازه انتخاب را كوچك كنيم. از منوي Select فرمان Modify و سپس Contract را اجرا نماييد. عدد ۳ را وارد كرده و Ok‌ را كليك نماييد. ابزار Rectangular Marquee را انتخاب كرده و كليد Alt را نگه داريد تا علامت منها در كنار ابزار ديده شود. ناحيه پائيني را به شكل زير كم كنيد:

رسم دکمه

اكنون از منوي Select گزينه Modify و سپس Smooth را اجرا نماييد. عدد ۳ را وارد كنيد. اين فرمان لبه­ها را گردتر مي­كند. رنگ روزمينه را ffcccc‌ انتخاب كنيد. رنگ پشت زمينه را cc9999 وارد كنيد. ابزار Gradient‌ را انتخاب كنيد. با نگه داشتن كليد Shift از بالا به سمت پايين بكشيد.فرمان Deselect را اجرا كنيد. ابزار Rectangular Marquee را انتخاب كرده و ناحيه­اي به شكل زير انتخاب نماييد:

فرمان Feather را اجرا كرده و عدد ۵ را وارد كنيد و كليد Delete را دوبار بزنيد. تصوير همانند شكل زير مي­شود:

انتخاب بخشی از دکمه

روي لايه حاوي شكل كليك كرده و فرمان زير را اجرا نماييد:

Layer–>Layer Style–>Stroke

عدد ۲ را وارد كنيد. گزينه Position را Inside‌ انتخاب كنيد. رنگ دور آن را نيز تغيير دهيد. رنگ تيره انتخاب كنيد. گزينه Drop Shadow‌ را انتخاب كنيد و تغييرات لازم را به دلخواه اعمال كنيد. تصوير به شكل زير تغيير مي­يابد:

سایه دار کردن دکمه

 

بالاترين لايه را انتخاب كرده و رنگ روزمينه را سفيد انتخاب كنيد. متن مورد نظر را روي دكمه تايپ كنيد. از لايه متن كپي ايجاد كنيد. لايه متن زيرين را مشكي انتخاب كنيد و با صفحه كليد دوبار به سمت پايين بكشيد تا به عنوان سايه متن به نظر برسد. همانند تصوير زير :

اكنون به راحتي مي­توانيد رنگ دكمه را به دلخواه تغيير دهيد. فرمان Adjustment‌ را از پالت Layer اجرا  كرده و گزينه Hue/Saturation‌ را انتخاب كنيد. رنگ دلخواه خود را در قسمت Hue‌ انتخاب كنيد. اين رنگ بستگي به رنگ مورد استفاده در سايت دارد. در شكل زير نمونه­اي از رنگ متفاوت ديده مي­شود:

رنگ آمیزی دکمه

 

 

طراحي دكمه Subscribe 

اين دكمه به شكلي طراحي شده است كه به نظر مي­رسد متن تورفتگي دارد. فايل جديد با مشخصات زير ايجاد كنيد:

پنجره New

لايه جديدي ايجاد كنيد. ابزار Rounded Rectangular‌ را انتخاب كنيد. رنگ روزمينه را ffcc00 وارد كنيد. اندازه شعاع را ۸ وارد كنيد. شكل را رسم كنيد. كليد Ctrl را نگه داشته و روي لايه كليك كنيد. لايه جديدي ايجاد كرده و با فرمان Contract به اندازه ۲ پيكسل از انتخاب كم كنيد. رنگ رو زمينه را زرد روشن ( ffff99 ) انتخاب كنيد.رنگ پشت زمينه سفيد انتخاب شود. ابزار Gradient را انتخاب كرده و از بالا به سمت پايين انتخاب بكشيد. كليد Shift را نيز هنگام كشيدن نگه داريد. تصوير به شكل زير تغيير مي­يابد:

رسم دکمه

لايه اول راشكل در آن رسم شده انتخاب كنيد. Layer Style‌ را اجرا كرده و Drop Shadow را انتخاب كرده و تنظيمات آنرا به دلخواه تغيير دهيد. تصوير پس از اعمال جلوه سايه به شكل زير تغيير مي­يابد:

سایه دار کردن دکمه

ابزار Type‌ را انتخاب كرده متن مورد نظر را روي دكمه تايپ كنيد. با ابزار Move‌ مكان آنرا تغيير دهيد. متن با رنگ زرد روشن نوشته شده است. آنرا تغيير ندهيد. از لايه متن كپي ايجاد كنيد. رنگ متن آنرا به ۰۰۹۹ff‌ تغيير دهيد. اكنون كافيست لايه متن به رنگ آبي را با استفاده از كليد جهتي يكبار به بالا و يك بار به سمت چپ تغيير مكان دهيد. اين كار باعث مي­شود لايه متن زرد روشن از زير آن ديده شود و حالت فرو رفتگي را شبيه­سازي كند:

نوشتن متن روی دکمه

مي­توانيد متن دلخواه را به آن اضافه كنيد. متن اصلي بايد بزرگتر از ساير متنها باشد. زماني كه اندازه متن كوچك است فاصله بين آنها را افزايش دهيد. تصوير نهايي همانند شكل زير است:

تصویر نهایی دکمه

ارسال دیدگاه