در این آموزش قصد طراحی یک منوی زیبا را در فتوشاپ داریم.این آموزش به شما یاد می دهد که چه طور چندین لایه را با هم ترکیب کنید تا یک منوی زیبا را طراحی کنید.این منو معمولا در بالای سایت در زیر هدر قرار می گیرد.

نتیجه کار منوی طراحی شده:

گام ۱:
برای شروع ابتدا نرم افزار فتوشاپ را باز کرده و با استفاده از گزینه File>New یک سند جدید در ابعاد ۵۴۰ در ۲۲۰ پیکسل ایجاد کنید.حال رنگ پس زمینه را به رنگ سیاه تغییر دهید.برای این کار به گزینه Edit>Fill رفته و رنگ ۰d0d0d را انتخاب کنید.

گام ۲:
حال ما می خواهیم یک پس زمینه هم برای دکمه های منوی خود ایجاد کنیم.با استفاده از گزینه Layer>New>Layer یک لایه جدید ایجاد کنید و سپس ابزار rounded rectangle را انتخاب کنید و با اندازه ثابت ۴۸۰ در ۵۰ پیکسل و radius یا شعاع ۵ پیکسل قسمتی از سند خود را انتخاب کنید.

حال قسمت انتخابی را با استفاده از تدارج رنگ یا gradient خطی با درصد رنگ ۱۵۱۵۱۵ به ۰۵۰۵۰۵ پر کنید.سپس opacity یا شفافیت لایه جدید را به ۶۰ درصد تغییر دهید.

گام ۳:
حال یک لایه هم اندازه لایه قبلی,دقیقا بر روی آن ایجاد کنید.
از منوی Layer>Layer Style>Outer Glow تنظیمات مربوط به Glow  یا تابیدن را انجام دهید.

بعد گزینه Layer > Layer Style > Stroke را انتخاب کنید و تنظیمات مربوط به کادر اطراف لایه را انجام دهید.

حالا منو طراحی شده شما تا به اینجا باید شبیه به زیر باشد:

گام ۴:
در این قسمت نوبت به اضافه کردن دکمه های منو می رسد.یک لایه جدید ایجاد کنید و با استفاده از ابزار rounded rectangle قسمتی در ابعاد ۱۵۰ در ۴۰ پیکسل و شعاع ۵ پیکسلی را در قسمت چپ منو سایت خود انتخاب کنید.

سپس برای رنگ امیزی منو ابزار gradient خطی را انتخاب کنید و از درصد رنگ ۳۲۳۲۳۲ به ۱۶۱۶۱۶ یک خط بر روی دکمه از بالا به پایین بکشید.سپس گزینه fill این لایه را روی ۵۰ درصد قرار دهید.

گام ۵:
حال می خواهیم سه استایل رو به لایه دکمه خود اضافه کنیم.
ابتدا گزینه Layer > Layer Styles > inner Glow را انتخاب کنید و تنظیمات مربوطه را مانند زیر انجام دهید.

سپس گزینه Layer > Layer Styles > Gradient Overlay را انتخاب کنید.

و در آخر گزینه Layer > Layer Styles > Stroke را انتخاب کنید.

حال منوی طراحی شده شما بایستی شبیه به زیر باشد:

گام ۶:
حال نوبت به نوشتن گزینه های منو می رسد.با استفاده از فونت Bell Gothic Std ,ضخیم و رنگ سفید.

گام ۷:
برای دکمه بعدی هم تنظیمات مربوط به استایل را پیاده سازی کنید ولی با این تفاوت که تدارج رنگ مورد استفاده در دکمه وسطی باید از درصد رنگ ۱۴b9ef به ۰۵۴۵۷۳ باشد.دکمه وسطی نشان دهنده زمانی است که ماوس بر روی یک دکمه قرار می گیرد.

گام ۸:
و در آخر با استفاده از gradient شعاعی و با رنگ های مورد استفاده در پروژه پس زمینه را به صورت زیر درآورید.

 
                                                                            منبع