آموزش طراحی قالب وبسایت در فوتوشاپ

نوشته های مشابه

چگونه ارور های وب مستر گوگل را از بین ببریم؟

پکیج کامل و جامع آموزش طراحی وب

طراحی سایت روان چیست؟

یک صفحه با ابعاد ۱۰۰۰x750px ایجاد کنید
روی لایه بک گراند ۲ بار کلیک کرده و و به قسمت Color Overlay برید و یک رنگ قهوه ای تیره انتخاب کنید

Step 2

خط کش ها را فعال کنید. (View>Rulers)
برای طراحی سایت همیشه دقت در اندازه ها و مقیاس ها خیلی مهمه.
به خطوط راهنمای آبی رنگی که در تصویر زیر میبینید guides میگویند. که با کشیدن موس روی خط کش ها و آوردن اون رو صفحه ظاهر میشوند.
حالا ۲ تا guides افقی به تصویر بکشید . یکی را روی ۳۰px بزارید و دیگری رو روی ۲۵۰px
و ۲ تا guides عمودی هم به داخل صفحه بیارین یکی رو روی ۱۰۰px و دیگری را روی ۹۰۰px بزارید.

Step 3

یه لایه جدید بسازید و اسمش رو بزارید(header)
با ابزار شیپ مستطیل Rectangle Tool (U) ، مانند تصویر زیر و از جاهای که اندازه گیری شده یه مستطیل سفید رسم کنید.

Step 4

رنگ سیاه رو از جعبه ابزار انتخاب کنید. با ابزار رسم شیپ دایره یه بیضی روی یه لایه دیگر رسم کنید. (Ellipse Tool)
این لایه را (shadow) نامگذاری کنید.
از منوی Filter دومین گذینه یعنی convert it to Smart Filters را انتخاب کنید. سپس بهFilter>>Blure>>Gaussian Blur برید. و میزان شفافیت را روی ۶۰% بزارید.
حالا این سایه که ساختین رو به زیر لایه (header) منتقل کنید.

Step 5

به لایه header برید . ۲ بار روی لایه کلیک کنید تا Layer Style بیاد.به قسمت Gradient Overlayبرید. و نوع گرادینت رو radial (محور شعاعی) بزارید. و سپس رنگ قرمز تند را انتخاب کنید. تصویر شما باید مانند عکس زیر بشوید.

Step 6

لایه جدید در بالاترین لایه ها بسازید. ابزار Line Tool (U) را انتخاب کنید. قطر خط روی ۱ پیکسل باشد و رنگش هم کمی روشنتر از هدر. قرمز روشن
حالا یه بار دیگه یه خط مثل قبل بکشید ولی این دفعه سیاه . این خط دقیقا بالای خط قرمز قبلی باشه .( یعنی ۱ پیکسل بالاتر از خط قرمز)

Step 7

ساخت منو

تمام لینک ها (نام موضوع دکمه های بالای سایت) را که نوشتید همه را با هم گروپ group کنید و نام اونوWhite Links بزارید.

Step 8 

این مرحله تکرار مرحله ۶ هست کا انجام دادیم . تنها فرقش اینه که ایندفعه خطوط عمودی هستند.

Step 9

خطوط عمودی که در مرحله قبل ساخید رو گروپ کنید و نام اونو Dividers بزارید.
حالا پایین خطوط را با ماسک و گرادینت سیاه و سفید محو کنیم. مثل Step 6 ولی فرقش اینه که گرادینت رو حالت خطی میزاریم نه شعاعی !

Step 10

ایجاد بافت برای هدر
آموزش ساخت پترن:
یه بافت بیارین توی فتوشاپ . اونو کاملا Select all و Edit>Define Pattern انتخاب کنید و یه اسم براش بزارید. برای دریافت پترن های آماده برای طراحی سایت به بانک پترن برید .

از لایه header یک Duplicate بگیرید. و اسمش رو pattern بزارید. ۲ بار روی لایه جدید کلیک کنید تاLayer Styles باز شود . Gradient Overlay را غیر فعال کنید و سپس Pattern Overlay را فعال کنید و پترنی که خودتون ساختید یا از اینجا گرفتید را انتخاب کنید و Blend Mode آن را روی Color Overlay بزارید و اوکی را بزنید.

سپس در پایان حرکت ماسک و گرادینت شعاعی که در مراحل قبل انجام دادیم را دوباره تکرار میکنیم.

Step 11

حالا وقت اضافه کردن لوگو و آرم و…
نام سایتتون رو بنویسید برای مثال PERSIAN MARK رو مینویسم.
مانند عکس زیر قسمت های Drop Shadow, Gradient Overlay, and Stroke را تنظیم کنید.

THE END

طراحی ما تموم شد.
توجه داشته باشین برای طراحی سایت خیلی مسائل را باید در نظر گرفت.مثلا حجم نهایی طرح و اندازه صفحه سایت در مرورگرها و…..