در این آموزش قصد داریم یک منو بازشو ساده و شیک طراحی کنیم ، این آموزش رو دنبال کنید …

با استفاده از کلید ترکیبی Ctrl + N یک سند جدید با طول 600px و عرض 450px با اسم دلخواه که من اینجا Navigation Menu گذاشتم ایجاد کنید !

با استفاده از کلید U ابزار Rounded Rectange رو انتخاب کنید ،Radius رو روی 5px بذارید ، حال مستطیلی با طول 570px و عرض 55px ایجاد کنید !

تنظیمات زیر رو به لایه اعمال کنید !



حالا وقتش رسیده که منوها رو از هم دیگه جدا کنیم ، طبق شکل زیر دو خط با رنگ های #3b616c و #6f96a2ایجاد کنید !

2 لایه ای که برای جدا سازی منوی های ایجاد کردی بودیم با استفاده از کلید ترکیبی Ctrl + Click انتخاب کنید و باهم دیگه Merge کنید ( با استفاده از کلید ترکیبی Ctrl + E) و ازشون 4 بار کپی بگیرد !
زمانش رسیده که متن منومون رو وارد کنیم ، من اینجا از فونت Georgia  با سایز 13px استفاده کردم !

زمانش رسیده که بریم سراع منوهایی که زیر منو دارن drop-down ! برای این کار به منویی که زیربازشو داره من رنگ بکگراند رو روی #70939f میذارم و یک نشون هم کنارش میذارم !

بعد از ساختن منوی زیرمنو دار زمانش رسیده که خود زیرمنوی منو رو هم طراحی کنیم !
برای این کار ابزار Rectangle رو انتخاب کنید با radius 5px و مطابق شکل زیر یه مربع با ابعاد 140×150px ایجاد کنید !

الان زمانش فرا رسیده که لینک هایی که قراره توی زیرمنومون قرار بگیرن رو متن هاشون رو وارد کنیم !
مطابق 4 مرحله قبل 2 خط برای جدا سازی منوها ایجاد کنید ولی این بار به صورت افقی ! :دی

میریم سراغ ساخت لینک صفحه نخست !
برای این کار ابزار Rectangle رو انتخاب کنید ، یه مستطیل عمودی با سایز 50×70px با رنگ #ffc849 ایجاد کنید و لایه رو Rasterize Layer کنید !

ابزار Pen رو انتخاب کنید و همانند تصویر زیر لایه رو برش بزنید !

الان باید تصویر همانند شکل زیر داشته باشیم !

برای اینکه بکگراند صفحه نخست زیباتر بشه میخوایم بهش سایه اضافه کنیم ! برای این کار ابزار Pen رو انتخاب کنید و
همانند شکل زیر عمل کنید !

برای اینکه منوی من زیبا تر هم بشه من کناره های بکگراندم خط چین اضافه میکنم ! همانند شکل زیر !

زمانش فرا رسیده که آیکن صفحه نخست رو اضافه کنیم ، من از این آیکن استفاده کردم !
استایل زیر رو به آیکن اضافه کنید !

آموزش ما به پایان رسید ! امیدوارم از این آموزش لذت برده باشید !
تصویر نهایی ما !

موفق باشید !

دریافت PSD آموزش از لینک زیر …

PSD_Navigation Menu[www.ideaGFX.com]

دریافت آموزش به صورت PDF از لینک زیر …

PDF_Create_a_Clean_Navigation_Menu_in_Photoshop[www.ideaGFX.com]