گام ۱:

نرم افزار فتوشاپ را باز کرده و از منوی File>New یک سند جدید با اندازه ۱۰۰۰ در ۲۱۶ پیکسل ایجاد کنید.

15 300x183 آموزش طراحی هدر سایت

گام ۲:

برای گام بعدی می خواهیم یک گرادیانت یا تدارج رنگ را به پس زمینه سند خودمان بدهیم.برای این کار یک لایه جدید ایجاد کنید(Ctrl+Shift+N) و بر روی آن دابل کلیک کنید تا پنجره Layer Style ظاهر شود.تنظیمات مربوط به gradient رو مطابق با تصیر زیر انجام دهید.
23 300x232 آموزش طراحی هدر سایتگام ۳:

برای ایجاد منوی اصلی یک لایه جدید ایجاد کنید, ابزار rectangle marquee را انتخاب کنید و مساحتی به اندازه تصویر زیر ایجاد کنید و به آن رنگ سفید(با استفاده از ابزار سطل رنگ) بدهید.

42 300x90 آموزش طراحی هدر سایت

گام ۴:

حال تنظیمات مربوط به Layer Style قسمت منوی اصلی را تنظیم کنید.

52 300x236 آموزش طراحی هدر سایت

62 300x234 آموزش طراحی هدر سایت

72 288x300 آموزش طراحی هدر سایت

گام ۵:

هدر طراحی شده شما تا به این جای کار باید شبیه به تصویر نمونه زیر باشد.

82 300x88 آموزش طراحی هدر سایت

گام ۶:

حالا نوبت به نوشتن گزینه های منوی اصلی می رسد.به وسیله ابزار نوشتن متن های مورد نظر را با رنگ سفید بر روی هدر تایپ کنید.

93 300x89 آموزش طراحی هدر سایت

گام ۷:

در این گام باید لینکی که فعال هست و ما در صفحه خودش قرار داریم و مشخص کنیم.مثلا ما به صورت پیشفرض در صفحه اصلی یا Home قرار داریم .با استفاده از ابزار rectangle marquee قسمت مربوط به Home را انتخاب کنید.
102 آموزش طراحی هدر سایت

گام ۸:

بعد از انتخاب گزینه Edit>Clear را انتخاب کنید تا رنگ قسمت انتخابی پاک شود.

10.1 300x56 آموزش طراحی هدر سایت

گام ۹:

دوباره با ابزار rectangle marquee بالای هدر را انتخاب کنید و رنگ سفیدی به آن قسمت بدهید.

112 300x86 آموزش طراحی هدر سایت

گام ۱۰:

حال تنظیمات  Layer Style مربوط به قسمت بالایی هدر رو مانند زیر انجام دهید.
122 300x233 آموزش طراحی هدر سایت
131 291x300 آموزش طراحی هدر سایت

گام ۱۱:

هدر طراحی شده شما تا به این جای کار باید شبیه به تصویر نمونه زیر باشد.
141 300x89 آموزش طراحی هدر سایت
گام ۱۲:

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

151 300x87 آموزش طراحی هدر سایت

گام ۱۳:

برای پایان کار می توانید از پترن هایی با شکل دایره بر روی هدر استفاده کنید که این قسمت سلیقه ای است.

final 300x64 آموزش طراحی هدر سایت