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

طراحی دکمه

مقدمه 

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

 

طراحی دکمه 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‌ تغییر دهید. اکنون کافیست لایه متن به رنگ آبی را با استفاده از کلید جهتی یکبار به بالا و یک بار به سمت چپ تغییر مکان دهید. این کار باعث می­شود لایه متن زرد روشن از زیر آن دیده شود و حالت فرو رفتگی را شبیه­سازی کند:

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

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

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

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

آموزش به صورت کاربردی و پروژه محور رد کردن