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

یک صفحه با ابعاد ۱۰۰۰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) را انتخاب کنید. قطر خط روی ۱ پیکسل باشد و رنگش هم کمی روشنتر از هدر. قرمز روشن
حالا یه بار دیگه یه خط مثل قبل بکشید ولی این دفعه سیاه . این خط دقیقا بالای خط قرمز قبلی باشه .( یعنی ۱ پیکسل بالاتر از خط قرمز)

هر دو خط رو 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 منتقل کنید و ۱ پیکسل به بالا و ۱ پیکسل به چپ حرکت بدید. با این حرکت نوشته هاتون زیباتر و با سایه ها سه بعدی تر به نظر میرسه.

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

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

درباره‌ی

همچنین ببینید

Responsive Design در طراحی سایت

طراحی سایت Responsive Responsive design به معنی طراحی یک سایت برای نمایش مناسب در تمام …

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

Time limit is exhausted. Please reload CAPTCHA.

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.

عطر و ادکلن ارشاکو