Step 1
یک صفحه با ابعاد 1000x750px ایجاد کنید
روی لایه بک گراند 2 بار کلیک کرده و و به قسمت
Color Overlay برید و یک رنگ قهوه ای تیره انتخاب کنید
Step 2
خط کش ها را فعال کنید. (View>Rulers)
برای طراحی سایت همیشه دقت در اندازه ها و مقیاس ها خیلی مهمه.
به خطوط راهنمای آبی رنگی که در تصویر زیر میبینید guides میگویند. که با کشیدن موس روی خط کش ها و آوردن اون رو صفحه ظاهر میشوند.
حالا 2 تا guides افقی به تصویر بکشید . یکی را روی 30px بزارید و دیگری رو روی 250px
و 2 تا guides عمودی هم به داخل صفحه بیارین یکی رو روی 100px و دیگری را روی 900px بزارید.
Step 3
یه لایه جدید بسازید و اسمش رو بزارید(
header)
با ابزار شیپ مستطیل
Rectangle Tool (U) ، مانند تصویر زیر و از جاهای که اندازه گیری شده یه مستطیل سفید رسم کنید.
Step 4
رنگ سیاه رو از جعبه ابزار انتخاب کنید. با ابزار رسم
شیپ دایره یه بیضی روی یه لایه دیگر رسم کنید. (
Ellipse Tool)
این لایه را (
shadow) نامگذاری کنید.
از منوی Filter دومین گذینه یعنی
convert it to Smart Filters را انتخاب کنید. سپس به
Filter>>Blure>>Gaussian Blur برید. و میزان شفافیت را روی 60% بزارید.
حالا این سایه که ساختین رو به زیر لایه (
header) منتقل کنید.
Step 5
به لایه
header برید . 2 بار روی لایه کلیک کنید تا
Layer Style بیاد.به قسمت
Gradient Overlay برید. و نوع گرادینت رو radial (محور شعاعی) بزارید. و سپس رنگ قرمز تند را انتخاب کنید. تصویر شما باید مانند عکس زیر بشوید.
Step 6
لایه جدید در بالاترین لایه ها بسازید. ابزار
Line Tool (U) را انتخاب کنید. قطر خط روی 1 پیکسل باشد و رنگش هم کمی روشنتر از هدر.
قرمز روشن
حالا یه بار دیگه یه خط مثل قبل بکشید ولی این دفعه سیاه . این خط دقیقا بالای خط قرمز قبلی باشه .( یعنی 1 پیکسل بالاتر از خط قرمز)
هر دو خط رو group کنید و نام group را "
vDivider" بزارین
روی "
vDivider" یک کلیک کنید تا انتخاب بشه حالا
Layer>Layer Mask>Reveal All را انتخاب کنید.
حالا ابزار گرادینت رو انتخاب کنید و رنگ سیاه و سفید انتخاب شده باشه و نوع رسم گرادینت هم شعاعی باشه. و روی ماسکی که روی روی لایه "
vDivider" ساختید بکشید تا خطوط اول و آخرشون نامرئی بشن.مثل عکس زیر
Step 7
ساخت منو
ابزار
Horizontal Type Tool (T) را انتخاب کنید .
همان ابزار نوشتن
رنگ سفید و رو انتخاب کنید و شروع به نوشتن لینک ها بکنید. در صورتی که فونت زیبایی لازم داشتید از
این قسمت فونت های کمیاب رو دریافت کنید.
تمام لینک ها (نام موضوع دکمه های بالای سایت) را که نوشتید همه را با هم گروپ group کنید و نام اونو
White Links بزارید.
از گروه لایه های White Links یک Duplicate بگیرید. و رنگ تمام نوشته ها رو سیاه کنید. حالا این group جدید با نوشته های سیاه رو به زیر group قبلی یعنی
White Links منتقل کنید و 1 پیکسل به بالا و 1 پیکسل به چپ حرکت بدید. با این حرکت نوشته هاتون زیباتر و با سایه ها سه بعدی تر به نظر میرسه.
Step 8
این مرحله تکرار مرحله 6 هست کا انجام دادیم . تنها فرقش اینه که ایندفعه خطوط عمودی هستند.
Step 9
خطوط عمودی که در مرحله قبل ساخید رو گروپ کنید و نام اونو
Dividers بزارید.
حالا پایین خطوط را با ماسک و گرادینت سیاه و سفید محو کنیم. مثل
Step 6 ولی فرقش اینه که گرادینت رو حالت
خطی میزاریم نه شعاعی !!
Step 10
ایجاد بافت برای هدر
آموزش ساخت پترن:
یه بافت بیارین توی فتوشاپ . اونو کاملا
Select all و
Edit>Define Pattern انتخاب کنید و یه اسم براش بزارید. برای دریافت پترن های آماده برای طراحی سایت به
بانک پترن برید .
از لایه header یک Duplicate بگیرید. و اسمش رو
pattern بزارید. 2 بار روی لایه جدید کلیک کنید تا
Layer Styles باز شود .
Gradient Overlay را غیر فعال کنید و سپس
Pattern Overlay را فعال کنید و پترنی که خودتون ساختید یا از
اینجا گرفتید را انتخاب کنید و
Blend Mode آن را روی
Color Overlay بزارید و اوکی را بزنید.
سپس در پایان حرکت ماسک و گرادینت شعاعی که در مراحل قبل انجام دادیم را دوباره تکرار میکنیم. (
Step 6)
Step 11
حالا وقت اضافه کردن لوگو و آرم و...
نام سایتتون رو بنویسید برای مثال
PERSIAN MARK رو مینویسم.
مانند عکس زیر قسمت های
Drop Shadow, Gradient Overlay, and Stroke را تنظیم کنید.
THE END
طراحی ما تموم شد.
توجه داشته باشین برای طراحی سایت خیلی مسائل را باید در نظر گرفت.مثلا حجم نهایی طرح و اندازه صفحه سایت در مرورگرها و.....
سطح آموزش: متوسط
نویسنده : وحید حسینخانی
کپی بر داری از مطلب فقط با ذکر منبع مجاز میباشد.
پاسخ با نقل قول
علاقه مندی ها (بوک مارک ها)