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

در این آموزش شما را در طراحی قالب یک سایت حرفه ای در فتوشاپ راهنمایی خواهیم کرد. در این آموزش رنگها ، افکتها و سبکهای لایه حرفه ای بکار میبریم که میتوانید بارها و بارها در پروژه های آتی خود از آنها استفاده کنید. شروع کنیم!

پیشنمایشی از پروژه تکمیل شده

به تصویری که در این پروژه خواهیم ساخت نگاهی بیاندازید

جزئیات آموزش:

• نرم افزار: فتوشاپ

• درجه سختی: متوسط

• زمان تکمیل آموزش : 60 تا 120 دقیقه

گام 1

در فتوشاپ یک سند به عرض 1200 پیکسل و ارتفاع 1160 پیکسل با رنگ پس زمینه سفید ایجاد کنید.

در ابتدای کار برای حفظ عرض کار در اندازه 850 پیکسل در طور طراحی دو خط راهنما ایجاد می کنیم. 

برای ایجاد خطوط راهنا از منو View > New Guide را انتخاب کنید. در box طاهر شده vertical را انتخاب کنید و 175 پیکسل را وارد کنید.

بار دیگر از منو View > New Guide را انتخاب کنید و اینبار 1025 پیکسل را وارد کنید. دقت کنید که راهنما در جهت vertical  تنظیم شود

الان باید دو خط راهنمای عمودی در دوطرف صفحه داشته باشید که هرکدام از حاشیه های صفحه 175 پیکسل فاصله دارند. به این ترتیب فاصله میان دو خط راهنما باید 850 پیکسل باشد. از این به بعد هر المانی ایجاد می کنیم در بین این دو خط راهنما قرار خواهد گرفت.

گام 2

حال پس زمینه را با یک گرادیانت به سبک شعاعی پر می کنیم. رنگ پیش زمینه را سفید  (#ffffff) و پس زمینه را خاکستری روشن (#e1e1e1) انتخاب کنید. gradient tool را با سبک radial gradient انتخاب کنید.

گام 3

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

 

گام 4

ابزار Type tool را انتخاب کنید و در قسمت بالا سمت چپ صفحه در کنار خط راهنمای سمت چپ عنوان سایت را با رنگ صورتی (#ff008a) تایپ کنید. در کنار عنوان سایت شعار سایت را تایپ کنید

گام 5

با ابزار Rectangular Marquee tool هم طراز با عنوان سایت در سمت راست صفحه و در کنار خط راهنمای سمت راست دو مستطیل در کنار هم بکشید.

مستطیل اول بعنوان فیلد جستجو استفاده می شود. بنابراین باید طول آن کمی بیشتر شود. مستطیل دوم بعنوان دکمه submit استفاده میشود و باید کوچکتر باشد

گام 6

سبک لایه زیر را به مستطیل فیلد جستجو اضافه کنید.

گام 7

بعد از اعمال layer style به فیلد جستجو سبک لایه زیر را به دکمه submit اعمال کنید

گام 8

در انتها ابزار Type Tool را انتخاب کنید و به فیلد جستجو و دکمه submit متن اضافه کنید. قالب سایت باید شببه به تصویر زیر شده باشد

گام 9

ابزار Rounded Rectangle tool را انتخاب کنید. در زیر نوار ابزار فتوشاپ چند گزینه را می بینید. گزینه type را بر روی  Path و گزینه Radius را بر روی 15px تنظیم کنید.

گام 10

کشیدن مستطیل را از خط راهنمای سمت راست شروع کنید و به طرف خط راهنمای سمت چپ بکشید. ارتفاع مستطیل باید در حدود 215 پیکسل باشد. بعداز کشیدن مستطیل در داخل آن کلیک راست کنید و گزینه Make Selection را انتخاب کنید

گام 11

در حالی که مستطیل در حال انتخاب است ابزار Gradient tool را با یک گرادیانت شعاعی انتخاب کنید. رنگ پیش زمینه را خاکستری روشن (#fefefe) و رنگ پس زمینه را خاکستری کمی تیره تر (#e1e1e1) انتخاب کنید. گرادیانت را از بالا و وسط مستطیل شروع کنید و به سمت پایین بکشید و لبه پایین مستطیل را رد کنید.

گام 12

گرادیانت را که به مستطیل اضافه کردید layer style زیر را به مستطیل اعمال کنید

گام 13

بر روی لایه مستطیل Ctrl+کلیک کنید تا بصورت انتخاب ظاهر شود. سپس ناحیه انتخاب شده را با انتخاب Select > Modify > Contract به اندازه 15 پیکسل کوچک کنید

گام 14

در بالای لایه مستطیل یک لایه جدید ایجاد کنید و آنر را با رنگ دلخواه پرکنید. سپس با فشار دادن کلیدهای Ctrl+D از حالت انتخاب خارج شوید

گام 15

layer style زیر را به مستطیل کوچکتر اعمال کنید

گام 16

حال میخواهیم برای مستطیل کوچکتر یک افکت بوکه بسازیم.

یک سند جدید به ابعاد 600  در 600 پیکسل با پس زمینه شفاف بسازید. ابزار Elliptical Marquee tool را انتخاب کنید و یک دایره بزرگ در وسط صفحه بکشید.

گام 17

بعد از ایجاد دایره باید کمی ظاهر آن را دستکاری کنیم. layer style زیر را به دایره اعمال کنید

گام 18

به سند اصلی بازگردید و از منوی brush ابزار Paint Brush tool  را انتخاب کنید و سپس اندازه براش را 50 پیکسل انتخاب کنید.

گام 19

کلید F5 را فشار دهید تا  صفحه brush options ظاهر شود. تنظیمات زیر را در قسمت brush options وارد نمایید

 

گام 20

حال براش شما برای استفاده آماده است. در بالای مستطیل کوچکتر یک لایه جدید ایجاد کنید . با رنگ سفید  (#ffffff) شروع به کشیدن چند دایره کنید.  دایره ها را در داخل مستطیل بکشید.  چند دایره بکشید . بعد از کشیدن دایره ها از منو Filter > Blur > Gaussian Blur را انتخاب کنید و به دایره ها افکت بلور بدهید.

گام 21

در بالای لایه اول دایره ها یک لایه جدید ایجاد کنید. با ابزار براش سفارشی چند دایره دیگر در فضای خالی بکشید. سپس شفافیت را بر روی %50 قرار دهید. سپس یک افکت outer glow با تنظیمات پیشفرض فتوشاپ اضافه کنید.

گام 22

یک لایه دیگر در بالای دو لایه قبلی ایجاد کنید. با ابزار براش سفارشی چند دایره دیگر در فضای خالی باقی مانده بکشید. سپس شفافیت را بر روی %75 قرار دهید و مجددا افکت outer glow را با تنظیمات پیشفرض فتوشاپ اضافه کنید

گام 23

حال که کار ایجاد افکت بوکه تمام شد ابزار Type tool را انتخاب کنید و چند متن در مستطیل کوجکتر تایپ کنید. فونت متن عنوان را Helvetica Neue LT pro H انتخاب کنید. پارا گراف زیر عنوان را با فونت Verdana تایپ کنید. بعد از اتمام تایپ متن عنوان و پاراگراف در سمت چپ محتوای متنی یک آیکون قرار دهید. 

گام 24

حال یک منوی راهبری ساده ایجاد می کنیم. ابزار Rounded Rectangle tool  را انتخاب کنید و radius را بر روی 10پیکسل قرار دهید. یک مستطیل از خط راهنمای راست تا خط راهنمای چپ و به ارتفاع 54 پیکسل بکشید.

گام 25

با ابزار Pen tool در داخل مستطیل راست کلیک کنید و  Fill Path را انتخاب کنید. سپس layer style زیر را به مستطیل نسبت دهید

گام 26

بر روی نوار راهبری چند لینک نمونه تایپ کنید. در بین لینکها با ابزار Elliptical Marquee tool  دایره های کوچکی ایجاد کنید. دایره ها را با رنگ صورتی  (#ff008a) پر کنید.

گام 27

حال که منوی راهبری را کامل کردیم به سراغ باکس محتوا میرویم.

ابزار Rounded Rectangle tool را انتخاب کنید و شعاع گوشه ها را 10 پیکسل انتخاب کنید. یک مستطیل به عرض 335 پیکسل و ارتفاع 196 پیکسل بکشید.

مستطیل را با هر رنگی که میخواهید پر کنید چون بعدا آن را عوض میکنیم. مستطیل را در کنار خط راهنمای سمت چپ قرار دهید.

گام 28

سبکهای لایه زیر را به باکس محتوا اعمال کنید.

گام 29

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

ابزار  Polygonal Lasso tool  را انتخاب کنید و یک انتخاب مثلثی در گوشه سمت راست باکس محتوا ایجاد کنید.

گام 30

ناحیه انتخاب شده را کات Ctrl+X و در یک لایه جدید پیست Ctrl+V کنید. لایه گوشه را انتخاب کنید و آن را 180 درجه بچرخانید.  (Edit > Transform > Rotate 180)

هنگامی که گوشه باکس محتوا را میبریم تمام سبکهای لایه را از دست میدهد لذا باید دوباره سبکهای لایه را به آن اعمال کنیم. این کار را به راحتی میتوانیم انجام دهیم. لایه باکس محتوا را انتخاب کنید. راست کلیک کنید و از منو  Copy Layer Styles را انتخاب کنید. لایه گوشه بریده شده را انتخاب کنید و راست کلیک کنید و از منو  Paste Layer Styles را انتخاب کنید. سپس گوشه بریده شده را طوری بر روی باکس محتوا قرار دهید که لبه بالای آن بر روی لبه گوشه باکس محتوا قرار گیرد

گام 31

باکس محتوا را با چند محتوای نمایشی پر کنید.

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

گام 32

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

گام 33

در سمت چپ صفحه در کنار اولی باکس محتوا یک عنوان طولانی ایجاد کنید و layer style های زیر را به آن نسبت دهید

گام 34

در زیر عنوان طولانی یک پاراگراف نمایشی تایپ کنید. میتوانید از یک تصویر نیز استفاده کنید یا یک لیست اضافه کنید تا ماهیت زیباتری به محتوا بدهید.  رنگ متن نمایشی را (#8a8a8a) انتخاب کنید. تصویر میانی را به همان روشی که باکس های محتوا را ایجاد کردید بسازید و layer style آن را مانند سایر المانها اعمال کنید

گام 35

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

لایه فوتر را انتخاب کنید و در حالیکه کلید shift را نگه داشته اید دکمه فلش روبه پایین را آنقدر فشار دهید تا فوتر به مکان خود در پایین صفحه برسد. استفاده از این روش به جای استفاده از ماوس سبب حرکت عمودی و مستقیم فوتر به سمت پایین و قرار گرفتن آن در راستای سایر المانها می شود. با تایپ چند متن در ناحیه فوتر طراحی فوتر را به اتمام برسانید.

سخن آخر

تصویر نهایی قالب وبسایت طراحی شده را در زیر می بینید.

از همین تکنیکها و الگوی زیبای طراحی شده میتوانید برای طراحی سایر وبسایتهای خود استفاده نمایید و با ایجاد تغییراتی در طراحی تنوع ایجاد نمایید.