ساخت دکمه های براق ۱ (Glossy Buttons) در فتوشاپ

 

آموزش فوتوشاپ

در این آموزش قرار است ساخت دکمه های براق یا همون Glossy Button ها رو که تو وب هم خیلی کاربرد دارن رو به شما آموزش دهیم و سعی داریم که تا جایی که شده جزئیات رو توضیح بدیم تا برای آن دست افرادی که تازه با فتوشاپ آشنا شدن هم قابل فهم و اجرا باشه.

خب برای شروع یه داکیومنت جدید با سایز ۲۵۰*۲۵۰ باز میکنیم و داخل آن را با رنگ #۲۵۲a38 پُر کنید. (منظور همون Fill کردنه که تو منوی Edit > Fill قرار داره یا با کلیدهای میانبر Shift+F5 هم قابل اجرا است.) خلاصه به این شکل:

حالا شکل اصلیه دکمه رو درست میکنیم. هر رنگی که علاقه دارین انتخاب کنین (چون به هر حال بعداً رنگش رو عوض میکنیم) و ابزاره () Rounded Rectangle Tool رو انتخاب نمایید. بالای صفحه یک سری تنظیمات میاد که باید به این شکل قرار بدین:

حال یه لایه ی جدید باز کنین و وسط صفحه یه همچین شکلی رو ایجاد کنید:

حالا میخوایم که این شکل رو با یک Gradient رنگ کنیم که اینجا دو  رنگ لازم داریم و شماره رنگها اینا هستن:

حالا که دو رنگ رو برای Foreground و Background به این شکل انتخاب کردین. باید از کل شکل یه Select بگیریم تا بتونیم Gradient بروی اون قسمت اعمال کنیم. برای Select گرفتن باید در قسمت لایه ها در حالی که کلید Ctrl رو نگه داشتیم روی اون عکس کوچک که درست کنار اسم لایه قرار دارد کلیک کنید. حالا دوره شکل باید انتخاب شده باشه. ابزاره “Gradient Tool” () رو انتخاب کنید و با نگه داشتن دکمه ی Shift درست مثل شکل یه گرادیان از بالا به پایین بکشین:


نکته:فقط باید توجه داشته باشین موقعی که قصد دارید گرادیان رو انجام بدین باید لایه ی مربوط به همین شکل رو انتخاب کرده باشید.

حالا یه سایه (Drop Shadow) به این لایه اضافه میکنید. روی لایه راست کلیک میکنیم و گزینه ی Blending Options رو انتخاب میکنیم. حالا این تنظیمات رو به لایه بدین:

حالا فصد داریم که یه Stroke بک شکل اضافه کنیم.اما این بار با استفاده از یک روش جدید. برای این کار یه بار دیگه مثل دفعه ی قبل از شکل دکمه Select میگیرید مثل دو تا عکس قبل تر. حالا برین به Select>Modify>Contract، به اون ۱px رو بدین و OK رو بزنین. حالا یه لایه ی جدید باز کنین و اون رو با هر رنگی که دوس دارین Fill کنین ولی برای اینکه این رنگ دیده نشه از  قسمت لایه ها اون بالاش گزینه ی Fill رو ۰% کنید تا رنگی که به این لایه دادین دیده نشه.حالا بر روی لایه ی جدیدی که ایجاد کردین کلیک راست کنید و دوباره میرید به Blending Options و این تنظیمات رو به Stroke میدین:

اگه همه مراحل را درست انجام داده باشید هم اکنون باید سه لایه داشته باشید که اینا هستن Background, Shape, Stroke که دو تای آخر رو خودمون نامگذاری کردیم و از اسماشون هم مشخصه که چی هستن.

حال بیایید یه کم بیشتر بهش رنگ و لعاب بدید. برای این کار از منوی ابزار به () Dodge و () Burn نیاز دارید. برای تنظیمات هر دوی این ابزار این مقادیر رو در نظر میگیرین:

برای اینکه نتیجه ی کارتون به چیزی که اینجاست نزدیک بشه بهتره که از براش های نرم استفاده کنید. حالا یه Select از لایه ی اصلی (یا همون لایه ی Shape) بگیرین و همون طوری که تو تصویر نمایش داده شده از این دو ابزار استفاده کنین تا به نتیجه ی مشابه برسین. فقط یادآوری کنم که برای اینکه به تیرگی یا روشنی دلخواه برسین باید از کلیک های متعدد بهره ببرید:

اگه همه چیز رو درست پیش رفته باشین کاری مشابه تصویر زیر دارین:

حالا زمان آن رسیده است که آن قسمت براق که قرار بود این دکمه داشته باشه رو بهش اضافه کنید. از لایه ی Shape که داشتین یه با دیگه Select بگیرین و ابزاره Elliptical Marquee Tool () رو از منوی ابزار انتخاب کنین. حالا با نگه داشتن کلید Alt یه قسمت از این Select رو اینطوری بُرش بزنین:

از نو Gradient Tool رو انتخاب کنین و حرف “D” رو روی کیبورد بفشارید (محض اطلاع اونایی که نمیدونن این کار باعث میشه تا Foreground Color و Background Color رو حالت Default یا همون پیش فرض سیاه و سفید قرار بگیرن، یه میانبر خیلی عالی و کاربردی خداییییی) حالا تو تنظیمات گرادیان Foreground to Transparent رو همون طوری که تو شکل نشون داده شده انتخاب کنین. دقت کنین که رنگ سمت چپ رو سفید خالص در نظر گرفته باشین.

حالا از گرادیان به این صورت، از پایین به بالا استفاده کنید تا یه همچین شیب رنگی رو ایجاد کنید:

بعد از اینکه درست به نتیجه ای که قرار بود برسید رسیدین، میتوانید شکل رو Deselect کنید (که میشه با میانبر Ctrl+D هم اینکارو کرد). حالا در قسمت بالا تو قسمت لایه ها تنظیمات لایه رو از حالت Normal به Overlay و Opacity رو از ۱۰۰ به ۴۰% تغییر بدین:

خیلی لذت بخش بود حال وقت آن رسیده است که برروی آن یک متن بنویسیم و یک آیکون هم کنار آنبگذاریم. اول Text رو انجام میدهید. ما تنظیمات فونت رو اینجوری قرار دادیم، شما میتونین تنظیمات رو هر جوری که دلتون میخواد بگذارید تا به نتیجه ی دلخواه خودتون برسین :
font = Arial, 25 pt, Smooth و رنگ فونت هم سیاه خالص (#ffffff) بود. حالا یه چیزی بنویسین و بعد این تنظیمات رو به Blending Options برای لایه تکست بدین:

حال دکمه ای که ما درست کردیم اینجوری به نظر میرسه (البته ما یک مقدار تکست رو آوردیم سمت راست چون میخوام یه آیکون بزارم کنارش):

ما یک متن با همین فونت با سایز ۱۱ برای توضیحات بیشتر زیره همین متن اضافه کردیم که در زیر میبینید:

حال وقت آن رسیده که آیکون رو بگذارید کناره متن شما میتونین از هر آیکونی که دوس دارید با توجه به اینکه دکمه برای چه قسمتی داره ساخته میشه تو طراحی هاتون استفاده کنین. حالا برین به منوی Image>Adjustments>Hue-Saturation (یا با استفاده از میانبره Ctrl+U) و مقداره Saturation رو -۱۰۰ قرار بدین درست مثل تصویر زیر:

بعد از این کار لایه ی آیکون را بر روی حالت Overlay قرار بدین و کار به پایان میرسد.
نکته: اگر آیکونی که دارید بیش از حد روشنه که دیده نمیشه میتونین یه کَلَک مرغابی بزنید، لایه رو Duplicate کنین و فقط Opacity لایه ی Duplicate رو تغییر بدین تا نتیجه ی مطلوب حاصل بشه انشاا… .
در نهایت نتیجه ی کارمون این شِلکی شد:

حالا که به این عکس دست یافتید میتونین به راحتی رنگش و یا آیکون هاش رو تغییر بدین و به راحتی دکمه های متفاوتی از همین رو بسازین:

منبع: coregfx.org

ارسال نظر