تدریس وب
جستجو در سایت
گروه مقاله : مقالات و انتشارات
تاريخ انتشار : 1395/10/20 - 13:12
كد :151

طراحی قالب سایت با فتوشاپ طراحی ظاهر ویستا

در این آموزش نحوه ایجاد ظاهر ویستا را با فتوشاپ فرا خواهیم گرفت

ایجاد منو های ویستا در وب با فتوشاپ


این آموزش نحوه ایجاد منو های ویستا را به ما می آموزد و از سایه و گرادیانت برای ایجاد این منو ها استفاده خواهیم کرد


گام 1

یک سند جدید با ابعاد 600x335px. ایجاد کنید از منوی View>Rulers را انتخاب کنید و دو خط کش در 285px و 310px. قرار دهید

ایجاد زمینه ویستا در سایت با فتوشاپ


گام 2

حالا با کمک ابزار رسم مستطیل بر روی خط کش پایین یک مسطیل رسم کنید اسم این لایه را lower bar بگذارید و روی آن دبل کلیک کنید و گزینه Gradient Overlay را انتخاب نمایید و رنگ #000000 تا #0c0c0c را در زاویه 90 درجه اعمال کنید .

ایجاد زمینه ویستا در سایت با فتوشاپ

گام 3

ابزار رسم خط را برداشته و ضخامت آن را بر روی 2PX تنظیم کنید یک خط در زیر شکل بالا رسم کنید و رنگ آن را روی #9fa2a4. تنظیم کنید نام این لایه را lower highlight بگذارید یک خط در بالای منو رسم کنید و رنگ آن را #484b4d بکذارید و نام آن را upper highlight بگزارید این لایه ها را با هم گروپ کنید و نام گروپ را bar بگزارید:

ایجاد زمینه ویستا در سایت با فتوشاپ

گام 4

حالا میتوانیم که جدا کننده منو ها را طراحی کنیم ابزار رسم خط را انتخاب و ضخامت آن را روی 2 پیکسل قرار داده و یک خط عمودی در قسمت بالای منو رسم کنید روی لایه دبل کلیک کنید و Gradient Overlay را انتخاب کرده و در زاویه 90 درجه رنگ های#676a6d و #4d6672 را اعمال کرده و نام این لایه را به upper divider تغییر بدهید.
حالا همین کار را برای رسم خط جدا کننده قسمت پایین منو انجام دهید و رنگ آن را #43474b انتخاب کنید و نام آن را lower divider بگزارید این دو خط را در یک پوشه به نام divider قرار دهید.

ایجاد زمینه ویستا در سایت با فتوشاپ

گام 5

با رنگ سفید و با ابزار تایپ متن منو ها را تایپ کنید ما از فونت Segoe استفاده می کنم که در ویستا به کار رفته است و ابعاد فونت را هم 11pt در نظر خواهیم گرفت متن منو ها را تایپ کرده و تمام آنها را در یک پوشه به نام links قرار می دهم.
منو های ما به شکل زیر در آمده است

ایجاد زمینه ویستا در سایت با فتوشاپ

 

گام 6

یک بکگراند انتخاب کنید ما عکس زیر را انتخاب کرده ایم:

ایجاد زمینه ویستا در سایت با فتوشاپ

لایه بکگراند را زیر لایه منو قرار داده و نام آن را بکگراند بگزارید .

ایجاد زمینه ویستا در سایت با فتوشاپ

 

گام 7

لایه بکگراند را کپی کنید ابزار رسم مستطیل را انتخاب کنید از خارج از بوم در سمت چپ شروع به رسم کنید که تنها دو گوشه گرد داشته باشید.
لایه را Rasterize کنید ، با ابزار Magic Wand آن را انتخاب و رنگ آن را حذف کنید ، خط دور حفظ خواهد شد. حالا لایه کپی بکگراند را انتخاب و ناحیه انتخاب شده را حذف کنید یک لایه جدید به نام blur اضافه کنید .
مستطیل را در این لایه قرار داده و از منوی filter گزینه Blur و سپس Gaussian Blur را انتخاب نمایید و به لایه یک سایه Drop shadow بدهید:

ایجاد زمینه ویستا در سایت با فتوشاپ

 

گام 8

حالا باید متن داخل مستطیل محو شده را وارد کنیم. از همان فونت استفاده کنید. فونت Bold استفاده کنید و به آن سایه Drop Shadow بدهید. و سپس به آن گرادیانت اضافه کنید.

ایجاد زمینه ویستا در سایت با فتوشاپ

گام9

حالا باید افکت هاور کردن دکمه ها را اضافه کنیم برای اینکار از یک شکل بیضی برای ایجاد تغییر رنگ در دکمه ها استفاده می کنیم. رنگ آن را برروی #5c94c5 قرار داده و Gaussian blur=10 px بدهید برای اینکه این دایره در بخش مد نظر باشد از ابزار انتخاب مستطیل استفاده کنید.

ایجاد زمینه ویستا در سایت با فتوشاپ

گام آخر

حالا ما یک منو به همراه یک مربع بلوری شکل داریم که در فضای وب می توانیم از آن استفاه کنیم . با کد نویسی میتوان هاور کردن روی دکمه های منو را تنظیم نمود :
ایجاد زمینه ویستا در سایت با فتوشاپ

تهیه شده در سایت تدریس وب با ما در تماس باشید.

 

 

 

نويسندگان BALAHANG
نظرات كاربران :
نام :
ايميل :
متن نظر : *
 
متن بالا را وارد نماييد*
 
جدیدترین مقالات
آموزش فتوشاپ رنگی کردن عکس
آموزش فتوشاپ رنگی کردن عکس
آموزش فتوشاپ قالب اخبار فوتبال
آموزش فتوشاپ قالب اخبار فوتبال
آموزش فتوشاپ طراحی قالب سایت عکاسی
آموزش فتوشاپ طراحی قالب سایت عکاسی
آموزش فتوشاپ قالب سایت گرافیکی
آموزش فتوشاپ قالب سایت گرافیکی
آموزش فتوشاپ تایپوگرافی
آموزش فتوشاپ تایپوگرافی
آموزش فتوشاپ ایجاد یک متن دیجیتال زیبا
آموزش فتوشاپ ایجاد یک متن دیجیتال زیبا
آموزش تایپوگرافی متن ترسناک در فتوشاپ
آموزش تایپوگرافی متن ترسناک در فتوشاپ
آموزش فتوشاپ نوع ترکیبی
آموزش فتوشاپ نوع ترکیبی "Difference"
آموزش فتوشاپ ایجاد یک طرح با چرخاندن و معکوس کردن تصویر
آموزش فتوشاپ ایجاد یک طرح با چرخاندن و معکوس کردن تصویر
آموزش فتوشاپ فکوس روی دسته ای از تصاویر
آموزش فتوشاپ فکوس روی دسته ای از تصاویر
آموزش فتوشاپ تایپو گرافی متن محو شده
آموزش فتوشاپ تایپو گرافی متن محو شده
آموزش فتوشاپ ایجاد یک متن پلاستیکی ساده
آموزش فتوشاپ ایجاد یک متن پلاستیکی ساده
آموزش فتوشاپ قرار دادن چند تصویر بر روی یک متن
آموزش فتوشاپ قرار دادن چند تصویر بر روی یک متن
آموزش فتوشاپ ایجاد یک متن ژله ای
آموزش فتوشاپ ایجاد یک متن ژله ای
آموزش فتوشاپ متن درهم فرورفته
آموزش فتوشاپ متن درهم فرورفته
آموزش فتوشاپ باز تابش نور از پنجره با جابجایی نقشبندی نور
آموزش فتوشاپ باز تابش نور از پنجره با جابجایی نقشبندی نور
آموزش فتوشاپ درخشش در بخش روشن تصویر
آموزش فتوشاپ درخشش در بخش روشن تصویر
آموزش فتوشاپ متحد کردن رنگها در یک تصویر
آموزش فتوشاپ متحد کردن رنگها در یک تصویر
آموزش فتوشاپ ایجاد یک تصویر درهم بافته شده
آموزش فتوشاپ ایجاد یک تصویر درهم بافته شده
آموزش فتوشاپ روتوش تصاویر در لایه های جداگانه
آموزش فتوشاپ روتوش تصاویر در لایه های جداگانه
آموزش فتوشاپ روتوش عکس با تناژهای رنگی آماده
آموزش فتوشاپ روتوش عکس با تناژهای رنگی آماده
آموزش فتوشاپ روتوش سریع چهره
آموزش فتوشاپ روتوش سریع چهره
آموزش فتوشاپ بازتابش نور از پنجره
آموزش فتوشاپ بازتابش نور از پنجره
آموزش فتوشاپ نقاشی با براش آبرنگی روی تصویر
آموزش فتوشاپ نقاشی با براش آبرنگی روی تصویر
آموزش فتوشاپ ایجاد تصویر یک گانگستر
آموزش فتوشاپ ایجاد تصویر یک گانگستر
آموزش فتوشاپ افزودن تاتو واقعی
آموزش فتوشاپ افزودن تاتو واقعی
آموزش فتوشاپ ایجاد براش رعدوبرق
آموزش فتوشاپ ایجاد براش رعدوبرق
آموزش فتوشاپ  تایپوگرافی سایه دراز
آموزش فتوشاپ تایپوگرافی سایه دراز
آموزش فتوشاپ تغییر رنگ رژلب
آموزش فتوشاپ تغییر رنگ رژلب
آموزش فتوشاپ شارپ کردن چشم ها همه تکنیک ها
آموزش فتوشاپ شارپ کردن چشم ها همه تکنیک ها
پربازدیدترین مقالات