طراحی یک وبسایت زیبا از پایه

تا بحال شده بخواهید یک وبسایت زیبا طراحی کنید ام ندانید چطور؟ شاید برای هر طراحی این موقعیت پیش آمده باشد که بخواهد مهارت طراحی سایتهای زیبایی را که در اینترنت هستند بدست بیاورد و آنها را طراحی کند. در این آموزش به شما یاد خواهیم داد که این کار را انجام دهید. پیش نیاز این آموزش مهارتهای اولیه فتوشاپ و داشتن یک چشم تیزبین برای زیر نظر داشتن جزئیات است. در خلال این آموزش ما بر روی این جزئیات تمرکز خواهیم کرد چرا که وجود همین جزئیات کوچک است که باعث زیبایی هرچه تمام تر طرح یک وبسایت می شود. فتوشاپ را باز کنید تا به سراغ آموزش برویم

 

گام 1- دانلود قالب سیستم شبکه ای 960

آموزش ما بر پایه 960 Grid System Template است. بنا براین در ابتدای کار لازم است قالب فتوشاپ این شبکه را از اینترنت دانلود کنید. این قالب را میتوانید از سایت رسمی این قالب https://960.gs دانلود کنید. بعد از دانلود بسته فشرده آن را باز کنید و فایل قالب با پسوند psd. را پیدا کنید

دو قالب مختلف در بسته وجود دارد. یکی به نام 12_col  و دیگری به نام 16_col . تفاوت این دو فایل در نام آنها آمده است. فایل 12_col از 12 ستون تشکیل شده و فایل 16_col از 16 ستون تشکیل شده است. اگر بخواهیم بیشتر توضیح دهیم میتوانیم بگوییم اگر وبسایت دارای سه باکس محتوا در عرض صفحه باشد یا دارای سه ستون محتوا باشد باید از قالب 12 ستونه استفاده کنیم زیرا 12 به 3 قابل تقسیم است. اما اگر وبسایت شما از 4 باکس محتوا در عرض تشکیل شده باشد میتوانید هم از قالب 12 ستونه استفاده و هم از قالب 16 ستونه چون هر دو عدد 12 و  16 بر 4 قابل تقسیم هستند. در طول این آموزش مفهوم این توضیحات را بیشتر درک خواهید کرد

گام 2 - تعریف ساختار

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

گام 3

بعد از اینکه ساختار سایت را تعریف کردیم میتوانیم کار طراحی را شروع کنیم. قالب col_16.psd را باز کنید. از منو  Image > Canvas size را انتخاب کنید. اندازه سند را با عرض 1200 پیکسل و طول 1700 پیکسل تنظیم کنید. رنگ پس زمینه را #ffffff قرار دهید

گام 4

ابزار Rectangle Tool را انتخاب کنید و یک مستطیل به عرض صفحه طراحی و ارتفاع 80 پیکسل بکشید. این مستطیل را با رنگ #dddddd پر کنید.

گام 5

در بالای مستطیل یک لایه جدید ایجاد کنید و مود لایه را بر رو Overlay قرار دهید. بر روی لایه مستطیل Ctrl+کلیک کنید. مستطیل انتخاب می شود.

یک براش نرم به اندازه 600 پیکسل انتخاب کنید. رنگ سفید را انتخاب کنید و در داخل ناحیه انتخاب با لبه براش مانند تصویر زیر چند بار کلیک کنید. با این روش یک افکت نوری زییا و ظری در ناحیه انتخاب ایجاد میشود. می توانید این دو لایه را باهم لینک کنید.

گام 6

مجددا یک لایه جدید ایجاد کنید. Rectangle tool را انتخاب کنید و یک مستطیل باریک به رنگ خاکستری تیره مانند تصویر زیر بکشید

گام 7

 

ابزار Rectangle tool را انتخاب کنید و در زیر مستطیل بالایی یک مستطیل به عرض 500 پیکسل بکشید. ارتفاع آن را 575 پیکسل تنظیم کنید.

یک گرادیانت خطی با طیف رنگی از  #d2d2d0 به سمت رنگ #ffffff انتخاب کنید. مانند تصویر با Direction به اندازه 90- درجه و scale به اندازه %100 با مود overlay بر روی مستطیل بکشید.

گام 8

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

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

گام 9

یک لایه جدید ایجاد کنید و یک مستطیل بزرگ به ارتفاع 400 پیکسل بکشید. این یکی بعنوان هدر سایت استفاده می شود. آن را با یک گرادیانت زیبا با طیف رنگی آبی از #2787b7 به سمت #258fcd پر کنید.

تنظیمات گرادیانت را بصورت زیر انجام دهید

گام 10

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

Blend mode: Multiply

Opacity: 65%

Angle: -90

Distance: 1px

Size: 6px

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

گام 11

.

یک لایه جدید ایجاد کنید. ابزار Rectangle Tool را انتخاب کنید و در بالای صفحه یک مستطیل با ارتفاع 50 پیکسل مانند تصویر ایجاد کنید. این مستطیل بعنوان نوار راهبری سایت خواهد بود.

یک افکت Drop Shadow با تنظیمات نشان داده شده در تصویر به مستطیل اعمال کنید.

گام 12

حال باید دکمه های  نوار راهبری را طراحی کنیم. ابزار Rounded Rectangle Tool انتخاب کنید. radius را بر روی 5 پیکسل تنظیم کنید. یک مستطیل بکشید. آن را با رنگ  #f6a836 پر کنید و افکت های زیر را به آن اعمال کنید

• Inner Shadow - color: #ffffff, Blend mode: overlay, Opacity: 60%, Angle: 120*, Distance: 7px, Size: 6px.
• Inner glow - Blend mode: normal, color: #ffffff, Size: 4px. Everything else leave default.
• Stroke - Size: 1px, Position: inside, color: #ce7e01.

حال مستطیل را با Ctrl+کلیک انتخاب کنید. از منو Select > Modify > Contract را انتخاب و 1px را انتخاب کنید.

در بالای همه لایه ها یک لایه جدید ایجاد کنید و blend mode را بر روی Overlay قرار دهید. افکتی را که در گام 5 توضیح دادیم بر روی این لایه اعمال کنید و اینبار از براش با سایز کوچکتری استفاده کنید. به نوار راهبری متن اضافه کنید. میتوانید از فونت Arial استفاده کنید. گزینه all caps را انتخاب کنید و  Antialias را بر روی None قرار دهید

گام 13

حال باکس جستجو را طراحی می کنیم. ابزار Rounded Rectangle Tool را انتخاب کنید. شعاع گوشه ها را 5 پیکسل انتخاب کنید. در سمت راست چیدمان سایت و در بالای نوار خاکستری رنگ که در گام 4 طراحی کردیم باکس جستجو را ترسیم کنید.

سبکهای لایه زیر را به آن اعمال کنید

• Inner Shadow - color: #000000, Blend mode: Multiply, Opacity: 9%, Angle: 90*, Distance: 0px, Size: 6px.
• Stroke - Size: 1px, Position: inside, color: #dfdfdf.

باکس جستو را با رنگ خاکستری تیره و یک دکمه با رنگ خاکستری روشن با متن Go مانند تصویر زیر ایجادکردیم 

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

گام 14

یک لایه جدید ایجاد کنید و یک دکمه Sign Up با همان روشی که باکس search را ایجاد کردیم بسازید به اندازه نصف عرض باکس جستجو. دکمه Sign Up را در زیر باکس جستجو و در وسط نوار راهبری قرار دهید.

مانند گام 5 افکتها را بر روی دکمه Sign Up قرار دهید.

یک براش به اندازه کوچکتر انتخاب کنید. اینبار اندازه آن را 45 پیکسل انتخاب کنید.

گام 15

لوگو سایت و Tagline را مانند تصویر بسازید

گام 16

حال مانند چند مرحله قبل که لایه ها را سازماندهی کردیم لایه ها را منظم می کنیم. یک پوشه جدید بسازید و آن را top_bar نامگذاری کنید. 

تمام المانهای قسمت بالای صفحه (شامل لوگو ، Tagline ، باکس جستجو ، دکمه sign up ، نوار راهبری و پس زمینه ها )را در داخل این پوشه قرار دهید

یک پوشه دیگر ایجاد کنید و آن را Header نامگذاری کنید. المانهای سربرگ را مانند تصویر زیر در این پوشه قرار خواهیم داد

گام 17

بخش هدر سایت خیل ساده به نظر میرسد. همان افکت نوری که در سایر قسمتهای سایت بکار بردیم برای هدر استفاده می کنیم. باکس هدر را انتخاب کنید (قسمت آبی رنگ). یک لایه در بالای آن ایجاد کنید و مود لایه را بر روی Overlay قرار دهید.

یک براش نرم به اندازه 600 پیکسل انتخاب کنید. رنگ  #ffffff را انتخاب کنید و چندین بار ناحیه زیر نوار راهبری را کلیک کنید.

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

گام 18

در این قسمت از آموزش به شما یاد خواهیم داد برای تصاویر هدر سایت افکت انعکاس ایجاد کنید.

دو تصویر به دلخواه انتخاب کنید. یکی از آنها را تغییر اندازه دهید و کوچکتر کنید و در پشت تصویر بزرگتر قرار دهید.

هر دو لایه را کپی کنید و لایه های اول را با ابزار Free Transform Tool برعکس کنید تصاویر برعکس شده را با پایین نگهداشتن دکمه shift مقداری پایین بکشید.

با ابزار Rectangular Marquee Tool از خارج قست پایین اولین تصویر برعکس شده به سمت داخل و وسط آن یک انتخاب ایجاد کنید.

از منو Select > Modify > Feather را انتخاب کنید و 30px را انتخاب کنید. انتخاب را مانند تصویر انجام دهید. چند بار دکمه delete را فشار دهید تا یک جلوه زیبا از انعکاس تصویر اصلی بوجود آید. همین تکنیک را بر روی تصویر دوم اعمال کنید.

برای اینکه تصاویر را کمی از حالت سادگی در آوریم یک لایه جدید ایجاد کنید و مود آن را  Overlay و افکتهای توضیح داده شده در گام 5 را به آنها اعمال کنید.

هدر سایت بعد از اضافه کردن چند tagline و دکمه شبیه به تصویر خواهد شد. فراموش نکنید که برای سازماندهی به لایه ها این المانها را در پوشه header قرار دهید.

گام 19

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

ابتدا با ابزار  Rounded Rectangle Tool یک شکل مستطیل ایجاد کنید. ارتفاع مستطیل را 70 پیکسل قرار دهید و شعاع گوشه ها را 10 پیکسل انتخاب کنید.

حال باید گوشه های گرد پایین مستطیل را به گوشه های تیز تبدیل کنیم. Direct Selection Tool را انتخاب کنید. سپس مستطیل را انتخاب کنید.

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

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

گام 20

ابزار  Line tool را انتخاب کنید و آن را بر روی 1px تنظیم کنید

گام 21

با گرفتن کلید shift خطهای خاکستری جداکننده بکشید

گام 22

برای هر کدام از تب ها یک عنوان و یک آیکون و پاراگراف متنی اضافه کنید. معمولا همیشه یک تب فعال و بقیه غیر فعال است. برای نشان دادن این افکت در سایت میتوانید تبهایی را که فعال نستند با افکت desaturate بی رنگ کنید و شفافیت متن عنوان آنها را کمتر نمایید تا تمایزی بین تب فعال و تبهای غیر فعال دیده شود

گام 23

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

اولین مانند تصویر بالا انتخاب می شود

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

گام 24

میخواهیم یک سایه اضافه کنیم. مانند تصویر در پشت تبها یک مستطیل به رنگ خاکستری تیره ایجاد کنید

با فشار دادن دکمه کوچک در پایین پالت لایه ها یک vector mask به لایه اضافه کنید.

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

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

مجموعه تبها باید ظاهری شبیه به تصویر داشته باشند.

گام 25

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

ابتدا تصویر شاخص را طراحی می کنیم. میخواهیم ظاهری از تصاویر را که بطور نامنظم بر روی هم قرار گرفته را ایجاد کنیم. با این روش افکت زیبایی برای تصویر شاخص خواهیم داشت.

برای این منظور یک مستطیل سفید رنگ با حاشیه ای به رنگ خاکستری روشن و به ضخامت 1 پیکسل ایجاد کنید. یک سایه ظریف به مستطیل بدهید.

سپس لایه مستطیل را که ایجاد کرده اید کپی کنید و بر روی مستطیل قبلی قرار دهید. با ابزار Free Transform Tool لایه بالایی را کمی بچرخانید.

این عملیات را چند بار دیگر تکرار کنید

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

مستطیل بالایی را انتخاب کنید. از منو Select > Modify > Contract و اندازه 5 پیکسل را وارد کنید. تصویر شاخص را انتخاب کنید و در پایین پالت لایه ها دکمه add layer mask را کلیک کنید. با این روش یک افکت حاشیه زیبا برای تصویر خواهیم داشت.

لایه ها باید مانند تصویر به نظر برسند

گام 26

فراموش نکنید که المانها را سازماندهی و منظم نمایید. پوشه های بیشتری در پالت لایه ها ایجاد کنید و مانند تصویر پالت را سازماندهی نمایید.

با اضافه کردن چند عنوان زیبا ، چند متن و لیستهای ترتیبی طراحی وبسایت کامل می شود.

و دوباره لایه ها را سازماندهی کنید

گام 27 : نقل قول مشتریان

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

یک مستطیل کوچکتر به رنگ روشنتر به اندازه 10 پیکسل کوچکتر از هر طرف بکشید و حاشیه ای به رنگ خاکستری روشن به ضخامت 1 پیکسل به آن بدهید

در انتها چند متن اضافه کنید و کار تمام است

گام 28

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

گام 29

همان افکتهای نوری توضیح داده شده در گام 5 را به این قسمت اعمال کنید.

گام 30

یک مستطیل به ارتفاع 10 پیکسل در بالای فوتر ایجاد کنید و با اضافه کردن دو خط تیره رنگ در بالا و پایین مانند تصویر افکت ظریفی به آن بدهید.

گام 31

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

براحتی میتوانیم مستطیل حاوی نوار راهبری را کپی کنیم و در این قسمت قرار دهیم . ارتفاعی به اندازه 40 پیکسل به آن بدهید. آن را در پایین صفحه قرار دهید. ممکن است برای جاگرفتن تمام المانها در صفحه مجبور شوید canvas را افزایش دهید . در این صورت از منو Image > Canvas size را انتخاب کنید و ارتفاع convas را بیشتر کنید تا تمام المانها در صفحه جا شوند.

گام 32

مجددا به جزئیات توجه می کنیم. در پایین فوتر یک خط سفید به ارتفاع 1 پیکسل ایجاد کنید تا افکت زیبایی به آن بدهید.

گام 33

در فوتر چند محتوای مناسب اضافه کنید و آنها را با کمک شبکه خطوط راهنما از هم جدا کنید.

گام 34

سر انجام تمام لایه ها را در پوشه هایی سازماندهی نمایید. مانند تصویر

طراحی کل صفحات

صفحه اصلی

صفحه درباره ما

صفحه نمونه کار

صفحه تماس با ما

صفحه قیمتها

سر انجام کار ب پایان رسید. تمام صفحات یک وبسایت کامل را طراحی کردیم.

سخن آخر

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