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

آیا آرزو دارید که خودتان یک وب سایت زیبا و مورد پسندتان را طراحی کنید ، اما نمی دانید چگونه؟ باید صادقانه عرض کنم که چند سال پیش همین موضوع برای خودم رخ داده بود که همیشه دوست داشتم طرح های مورد علاقه خودم را طراحی و بسازم!

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

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

تصویر نهایی آموزش را می بینید که با یادگیری این آموزش قالبتان به این شکل می شود!

1- برای امروز آموزش طراحی قالب در فتوشاب بر مبنای 960 Grid System را برای شما تدارک دیده ام. بنابراین ، قبل از آغاز آموزش شما می بایست تمپلیت 960 Grid را دانلود کنید. شما می توانید سیستم 960 grid را از آدرس 960.gs دانلود کنید. کافیست بعد از دانلود فایل را توسط برنامه Winrar خارج نمائید و فایل PSD را را با فتوشاپ باز کنید. قالب 960 گرید دارای دو حالت می باشد: یکی 12 ستونه و دیگری 16 ستونه . در صورتی که قالبی که میخواهید طراحی کنید سه ستونه هست از نوع 12 ستونه گرید باید استفاده کنید. اگر هم می خواهید طراحی با 4 ستون را در فتوشاپ طراحی نمائید می توانید از نسخه 16 ستونه یا همان 12 ستونه گرید استفاده کنید. اگر شما آموزش را دنبال نمائید متوجه توضیحات 12 ستونه و 16 ستونه خواهید شد و می توانید تشخیص دهید از کدامیک استفاده کنید.

2- قبل از هر کاری فایل PSD دانلود شده را در داخل فتوشاپ برای طراحی باز کنید ، ما اول نیاز داریم به یک طرح اولیه و کلی از وب سایتمان که در تصویر زیر می توانید نمونه کلی طرح را ببینید.

3- پس از تعریف تعیین کردن طرح و ساختار کلی قالب فایل 16_Col.PSD را در فتوشاپ باز کنید. کلیدهای ترکیبی ( Alt+Ctrl+C) را بزنید یا به منوی Image > Canvas size بروید و گزینه ها را بر روی 1200px طول و 1700px ارتفاع قرار دهید و رنگ پس زمینه را # FFFFFF تعیین کنید.

4- یک لایه با کلیدهای (Ctrl+Shift+N) ایجاد کنید و با ابزار Rectangle Tool یا زدن کلید ( M ) به اندازه 80px در عرض مانند تصویر یک مستطیل ایجاد کنید و با کد رنگ #dddddd آن را پر کنید.

5- یک لایه جدید دیگر بسازید و تنظیم حالت لایه را روی Overlay قرار دهید . حالا یک براش نرم با 600px و با رنگ سفید مانند تصویر در نظر بگیرید و چند بار با لبه قلمو بر روی بالای مستطیل کلیک کنید تا افکت نور لطیف به کار داده شود.

6- یک لایه دیگر ایجاد کنید و با ابزار Rectangle Tool یک مستطیل بسیار کوچک مانند تصویر ایجاد کنید و با رنگ خاکستری تیره آن را پر کنید.

7- با همان ابزار Rectangle Tool یک مستطیل 500px در پایین تصویر بکشید و بعد یک لایه بسازید و با رنگ سفید پر کنید و روی لایه کلیک راست کرده و گزینه Blending Option را انتخاب کنید و گزینه Gradient Overley را انتخاب و در کادر آن رنگ های گرادینت را بین #d2d2d0 و #ffffff قرار دهید و Angel را روی -90 درجه بگذارید و Scale را هم 100% قرار دهید.

8- حالا برای ایجاد افکت نور مانند مرحله پنج عمل می کنیم . از این به بعد نیز برای استفاده های بعدی شما را به مرحله پنج ارجاع می دهم. یک لایه جدید ایجاد کنید و و تنظیم لایه را روی Overlay بگذارید و با استفاده از ابزار براش یک براش نرم با اندازه 600px در نظر گرفته و چند بار بر روی لبه مستطیل بزرگ کلیک می کنید تا افکت نور به آن داده شود.

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

10- یک لایه جدید ایجاد کنید و با ابزار رسم مستطیل یک خط 1px در پایین کادر آبی ایجاد کنید و آن را با رنگ آبی تیره پر کنید و با کلیک بر روی لایه گزینه Blending Option را انتخاب و از کادر باز شده Drop Shadow را انتخاب کنید و تنظیمات را به صورت : Blend mode: Multiply, Opacity: 65%, Angle: -90, Distance: 1px and Size: 6px قرار دهید. یک لایه دیگر هم ایجاد و با همان ابزار یک مستطیل 1px این بار در بالای کادر آبی رنگ می کشید و با همان تنظیمات قبلی آن را افکت می دهید. به این ترتیب کادر ما دارای لبه های برجسته و تیز می شود.

11- به منوی Image > Canvas size بروید و از فلش ها ، فلش بالا را انتخاب و 50px را در گزینه Height وارد کنید تا کادری به اندازه 50 پیکسل در بالای کادر آبی ایجاد شود و رنگ آن را هم خاکستری کنید و بعد یک لایه ایجاد کنید و با استفاده از ابزار رسم مستطیل مانند تصویر به اندازه همان 50px مستطیل در نظر بگیرید و دوباره با همان ابزار 1px در بالا رسم و رنگ آن را خاکستری تیره قرار دهید و بر روی لایه کلیک راست کرده و گزینه Blending Option را کلیک کنید و گزینه Drop Shadow را انتخاب و تنظیمات را مانند تصویر اجرا کنید.

12 - با انتخاب ابزار Rounded Rectangle Tool یا زدن کلید L یک مستطیل با گوشه گرد با اندازه 5PX در گزینه Radius در بالای کادر و به اندازه 60*30 بکشید و رنگ آن را هم نارنجی یا زرد در نظر بگیرید و بر روی لایه کلیک راست کنید و از گزینه Blending Option تنظیمات را مانند زیر وارد کنید.

Inner Shadow – color: #ffffff, Blend mode: overlay, Opacity: 60%, Angle: 120*, Distance: 7px, Size: 6px
Inner glow – Blend mode: normal, color: #ffffff, Size: 4px
Stroke – Size: 1px, Position: inside, color: #ce7e01

حالا بر روی همان لایه یا Shape با کلیدهای Ctrl+Mouse کلیک کنید و از منوی Select > Modify > Contract در کادر 1px را وارد کنید.

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

13- با ابزار Rounded Rectangle Tool یک مستطیل با گوشه گرد با اندازه 5PX در گزینه Radius در بالای کادر به اندازه یک کادر سرچ بکشید و رنگ آن را رنگ مشکی که در بالای سایت است قرار دهید و روی لایه کلیک راست کرده و تنظیمات را به صورت زیر انجام دهید:

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

و در کادر ایجاد شده کلمه جستجو را بنویسید و به آن رنگ بدهید و از همان ابزار قبلی یک کادر کوچک دیگر برای سرچ کردن بکشید و رنگ را به آن بدهید.

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

14- با ابزار رسم مستطیل و با همان اندازه در گزینه Radius یک کادر در پایین کادر جستجو بسازید و رنگ آبی به آن بدهید و هر افکتی که می خواهید بر روی آن اعمال کنید.

یک لایه جدید ایجاد کنید و مانند مرحله پنج اعمال کار کنیدو با انتخاب براش نرم اندازه را روی 45px قرار دهید و دور کادر را انتخاب کنید و با براش نرم چند بار روی لبه کادر بکوبید تا افکت نور به آن داده شود.

و نوشته ثبت نام را داخل کادر بنویسید و رنگ و اندازه دلخواه به آن بدهید و بعد از آن نوشته وارد شوید را هم در کنار کادر بنویسید و رنگ آن را هم تعیین کنید.

15- لوگو و شعار خود را در بالای منوها و در راس کادرها قرار دهید .

16- برای اینکه کار با لایه ها راحت تر شود و بعدا سردرگم نشوید چند پوشه با نام های Header و Footer و Main و Contect ایجاد کنید و لایه ها و بک گراند های مربوط به هر بخش را داخل هر پوشه بیندازید.

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

18- برای تصاویر وسط صفحه دو تصویر تهیه کنید و با کلیدهای Ctrl+T یکی را بزرگتر و دیگری را کوچکتر کنید و پشت تصویر بزرگتر قرار دهید و بعد از آن برای اینکه به دو تصویر سایه بدهیم ، و بعد از دو تصویر کپی تهیه کنید و از منوی Edit > Transform > Flip Vertical را انتخاب کنید و آنها را دقیقا زیر هم قرار دهید و ابزار Rectangular Marquee Tool را انتخاب و از منوی Select > Modify > Feather گزینه را روی 30px قرار دهید و مانند تصویر قسمتی را انتخاب کنید و Delete کنید که تصویر به صورت هاله ای و سایه دار ایجاد می شود.

برای ایجاد یک دایره کنار تصویرمان از ابزار Elipse Tool استفاده کنید و مانند مراحل قبل به آن افکت و نور بدهید. و نوشته های خود را با فونت مورد نظرتان در کادر آبی وارد کنید و با دستورا قبلی منوهای این بخش را مانند تصاویر بسازید.

19- اگر به تصویر نهایی دقت کرده باشید منوهای سه ستونه که در وسط صفحه قرار دارند که با همان ابزار Rounded Rectangle Tool ترسیم شده اند . شما هم با همان ابزار به اندازه Radius در 10px و به اندازه 70px از کادر آبی به پایین رسم کنید و افکت دور کادر را 1PX قرار دهید و رنگ و افکت را هم مشخص کنید.

برای اینکه لبه های پایینی کادری که کشیدیم صاف باشد با ابزار Direct Selection Tool یا زدن کلید A در پایین گوشه کادر کلیک کنید و با نگه داشتن Shift و ماوس را به پایین بکشید به طوری که دو نقطه پایینی هم دیگر را قطع کنند. به این ترتیب یک کادر گرد با گوشه صاف ساخته ایم.

20 - ابزار Line Tool را انتخاب کنید و اندازه آن را روی 1px قرار دهید.

21- بعد از انتخاب ابزار کادری که در مرحله 19 کشیدیم را به چهار قسمت تقسیم کرده و در هر قسمت هم یک خط با ابزارمان می اندازیم.

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

23- برای اینکه هر Tab وقتی انتخاب شد با رنگ سفیدتر نمایان شود اینطور عمل می کنیم که کل کادر اول را انتخاب و هایلایت می کنیم و با قوانین قبلی افکت نور به آن بدهید.

24- یک لایه جدید بسازید و داخل ان را با رنگ خاکستری تیره پر کنید و زیر لایه کادر 3ستونی باشد سپس گزینه Vector Mask را مانند تصویر انتخاب کنید و سپس حالت رنگ را مانند تصویر قرار دهید و با براش نرم گوشه ها را بکوبید تا کادر سایه دار شود.

سپس با ابزار Line Tool یک خط 1px زیر کادر بکشید و رنگ به آن بدهید و با همان ابزار براش نرم گوشه های خط را بکوبید تا زیباتر شود.

25- یک لایه ایجاد کنید و با ابزار رسم مستطیل یک مربع مانند تصویر زیر کادرها بکشید و رنگ داخل آن را سفید پر کنید و با کلیک راست روی لایه به آن افکت Drop Shadow با اندازه 1px و رنگ خاکستری تیره بدهید. و از همان لایه چند کپی بگیرید و آنها را با کلیدهای Ctrl+T بچرخانید تا شبیه تصویر شوند . حالا یک تصویر انتخاب کنید و آن را وارد فتوشاپ کنید و روی لایه اصلی که صاف است قرار دهید .

روی لایه اصلی با کلید Ctrl+ Mouse کلیک کرده و از منوی Select > Modify > Contract انتخاب کرده و گزینه را روی 5px بگذارید و گزینه Vector Mask را بزنید تا تصویر دقیقا در مرکز لایه بنشیند.

26 - برای لایه های خود پوشه بسازید و لایه ها و نوشته های مربوطه را در آن بیندازید .

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

27 - با استفاده از ابزار همیشگی یک مستطیل بزرگ با کد رنگ f3f3f3# به اندازه 220px رسم کنید و گزینه Strok آن را روی 1px و با رنگ خاکستری تیره در نظر بگیرید. دوباره با همان ابزار یک مستطیل دیگر داخل مستطیل قبلی رسم کنید و کد رنگ #f7f7f7 را به آن بدهید و گزینه Strok آن را نیز 1px بگذارید و رنگ خاکستری کمرنگ تر در نظر بگیرید.

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

28- یک کادر در پایین صفحه با رنگ سیاه به اندازه 400px رسم کنید.

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

30- یک کادر دیگر به اندازه 10px در بالای کادر سیاه بکشید و رنگ خاکستری به آن بدهید و یک خط در ابتدای کادر سیاه با ابزار Line Tool با اندازه 1px بکشید و افکت Drop Shadow به آن بدهید و همین عمل را برای کادر خاکستری نیز اعمال کنید.

31- حالا یک مستطیل در پایین کادرها به اندازه 40px بکشید و رنگ خاکستری به آن بدهید و هر افکتی که می خواهید به آن بدهید و نوشته ها و لوگوها و آیکون های مورد نظرتان را در آن قرار بدید. اگر احساس کردید که صفحه کوچک می شود با استفاده از منوی Image > Canvas size به اندازه صفحه اضافه کنید.

32- با ابزار Line Tool یک خط سفید در پایین صفحه و یک خط هم در بالای صفحه بیندازید.

33- حالا نوشته ها و آیکون های خود را در پایین صفحه بچینید و به آنها رنگ و سایز دلخواهتان را بدهید.

34- در نهایت لایه ها و افکت ها و تصاویر خود را با ساخت پوشه در داخل آنها ساماندهی کنید.

نتیجه آموزش

خوب این بود آموزش امروز ما در مورد طراحی قالب سایت در فتوشاپ که امیدوارم مورد پسند شما واقع شده باشد! اگر تقاضا و پیشنهاد برای آموزش های دیگر زیاد شود مطمئنا آموزش هایی از این دست را بیشتر خواهم کرد! ( البته یک پست دیگر با همین مضمون”  خودآموز ساخت یک سایت زیبا در فتوشاپ ” در وب هاب منتشر شده که می توانید مطالعه کنید )

البته من خودم هم بر اساس این آموزش یک قالب شبیه به همین تم طراحی کرده ام که در زیر شاهد آن هستید و می توانید PSD و PDF آن را دانلود کنید.