طراحی یک قالب سبز با ظاهر وب 2

به نام خدا ,در این آموزش قصد داریم تا نحوه ایجاد یک طرح سایت زیبا , سبز و با ظاهر وب 2 را آموزش دهیم

کار با فشردن کلید Ctrl+ N آغاز می کنیم و برای عرض و طول مانند تصویر زیر مقدار می دهیم.

در مرحله بعد چون به خط کش برای رسم Guide نیاز داریم , باید در صورت خاموش بعد وضعیتشان با

فشردن کلید Ctrl + R وضعیتشان را ON نمائیم.
همانطوری که می دانید برای رسم Guide دو راه وجود دارد , راه اول انتخاب ابزار Move و سپس کلیک برروی

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

view و انتخاب گزینه new guide است .

ما برای آنکه می خواهیم در ادامه برای طرح خود یک پشت زمینه انتخاب و استفاده نمائیم این guide ها یا

راهنماها را رسم کردیم.

با فشردن کلید U و یا از نوار ابزار , ابزار Rounded Rectangle را انتخاب کنید و مقدار شعاع یا Radius را به 10

تغییر داده , پیش از رسم نیاز است تا رنگ را به #E0E0AC تغییر دهید , پس از انتخاب رنگ از ناحیه بالائی

سمت چپ به ناحیه سمت راست پائین درگ کنید تا مستطیل رسم شود که فضای کل محیط کار را پوشش

دهد , پس از رسم نام لایه را به background تغییر دهید .

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

اندازه محیط کاری را افزایش دهیم از این رو به منو Image رفته و گزینه Canvas Size را انتخاب کنید و مطابق

تصویر زیر عملیات مقداردهی را انجام دهید . این فضائی ایجاد شده در واقع برای logo سایت مورد استفاده

قرار می گیرید.

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

زیرین ترین لایه که با نام Background مشخص شده است را انتخاب کنید سپس ابزار Paint Bucket را با

فشردن کلید G انتخاب کنید , پیش از پرکردن کار با رنگ مقدار foreground یا رنگ روزمینه را به #6C821C

تغییر دهید .

لایه جدید در بالای لایه Background ایجاد کنید ( منظور لایه Background ای است که به تازگی رنگ آنرا را

تعییر داده اید ) و نام آنرا به gradient تغییر نام دهید .
با فشردم کلید Shift +g ابزار gradient را انتخاب کنید , سپس یک gradient سفید به سیاه مانند تصویر زیر

از بالا به پائین رسم کنید , پس از انجام این کار Blend Mode این لایه را به Overlay و مقدار opacity را به 10

تغییر دهید.

در حالتی که لایه gradient در حالت انتخاب باقی مانده است به منو Layer رفته و از زیر منو Layer Mask

گزینه Reveal All را انتخاب کنید .
مجددا ابزار Gradient را انتخاب کرده از پنجره gradient editor گزینه Foreground to Transparent را انتخاب

کنید ( مطمئن باشید که رنگ Foreground شما سیاه تنظیم شده است ) سپس از پائین به بالا آن را

بکشید.

پس از ایجاد ماسک , برروی لایه راست کلیک کنید و گزینه Convert to Smart Object را انتخاب کنید ,

همچنان که این لایه در حالت انتخاب است به منو فیلتر رفته و از زیر منو Noise گزینه Add Noise را انتخاب

کنید , تنظیمات را با توجه به تصویر زیر انجام دهید.

لایه جدیدی در بالای لایه gradient ایجاد کنید , پس از آن با فشردن کلید B ابزار Brush را فعال کنید , در این

مرحله مقدار قطر یا Diameter را به 300 پیکسل و نوع قلم را به حالت Soft تغییر دهید ( با قرار گرفتن ماوس

در بالای هر قلم می توانید از نام آن قلم اطلاع یابید) پس از انجام این تنظیمات خطی سفید در بالای لایه

محتوای خود ایجاد کنید.
پس از رسم خط نام این لایه را به highlight و مقدار opacity آن را به 30% تغییر دهید.

لایه جدیدی در زیر بالاترین لایه ایجاد کنید . با فشردن کلید D می توانید پلت رنگ را Reset کنید و در واقع

باعث نمایش رنگ های پیش فرض یعنی سفید برای background و سیاه برای foreground شوید. در این

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

لایه راست کلیک کنید و گزینه Convert to Smart Object را انتخاب کنید در ادامه نام لایه را به texture تغییر

دهید .

همچنان که لایه texture در حالت انتخاب است به منو Filter رفته و از زیر منو Blur گزینه Motion Blur را

انتخاب کنید , برای انجام تنظیمات از تصویر زیر پیروی کنید .

با دیگر به منو Filter بروید و این بار از زیر منو Sharpen گزینه Sharpen را انتخاب کنید. حال می خواهیم که

لایه ماسک به لایه texture خود اضافه کنیم برای این کار کافی است به منو Layer رفته و از زیر منو Layer

Mask گزینه Reveal All را انتخاب کنیم. در ادامه ابزار Gradient را انتخاب کنید و از بخش gradient editor

گزینه Foreground to Transparent را مشروط به این که رنگ Foreground شما سیاه باشد انتخاب کنید و

از پائین به بالا این gradient را رسم کنید.

Blend Mode این لایه را به Overlay و مقدار opacity آنرا به 40 درصد تغییر دهید.

برروی بالاترین لایه خود یعنی لایه background راست کلیک کنید و گزینه blending options را انتخاب کنید

پس از باز شدن پنجره Layer Style به بخش Outer Glow رفته و مانند تصویر زیر نسبت به تغییر اختیارات

اقدام نمائید.

رنگ foreground را به #2A2009 تغییر دهید , با فشردن کلید U ( یا Shift+ U ) ابزار Ellipse را انتخاب کنید و

اختیارات آنرا مانند تصویر زیر تغییر دهید . پس از آن در قسمت پائین مستطیل این دایره را رسم نمائید.

برروی این لایه راست کلیک کنید و گزینه Convert to Smart Object را انتخاب کنید . با فشردن کلیدهای Ctrl

+ t ابزار Transform را فعال کنید و مانند تصویر آن را به صورت عرضی بکشید.

به منو Filter رفته و از زیر منو Blur گزینه Gaussian Blur را انتخاب کنید و مطابق تصویر زیر اختیارات را مقدار

دهی کنید.

Blend Mode این لایه را به Multiply و مقدار opacity آنرا به 30 درصد تغییر دهید. در پایان نام لایه را به

shadow تغییر نام دهید , مکان این لایه باید در زیر بالاترین لایه یعنی background باشد.

طراحی منو راهبری
در این قسمت قصد داریم تا منو راهبری را طراحی کنیم , برای این کار با فشردن کلید U ابزار Rectangle را

انتخاب کنید , مقدار color را به #D8D8A5 و مستطیلی با طول 60 و عرض 980 رسم کنیم , دقت داشته

باشید که لایه جدید باید در بالای بالاترین لایه موجود باشد , پس از رسم نام آن را به navigation bar تغییر

دهید.

برروی لایه navigation bar راست کلیک کنید و گزینه blending options را انتخاب کنید پس از باز شدن پنجره

Layer Style مانند تصویر زیر نسبت به مقداردهی اختیارات بخش های مورد نظر کنید.

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

rounded نمایش داده نمی شود . برای حل این مشکل کافی است تا بروی لایه navigation bar راست کلیک

کنید و گزینه Create Clipping Mask را انتخاب کنید .

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

Rectangle را انتخاب کنید و رنگ را به #A6A43F تغییر دهید , سپس با توجه به نیاز خود مستطیلی با عرض

دلخواه و طول 60 رسم کنید . مقدار opacity این لایه را به 15 درصد و نام آن را به current page button تغییر

دهید , سپس برروی این لایه راست کلیک کرده و گزینه Create Clipping Mask را انتخاب کنید .

چهار لایه بالائی را انتخاب کرده و با فشردن کلیدهای Ctrl +g یک گروه درست کنید , پس از ایجاد گروه نام آن

را به bg & navigation bar تغییر نام دهید.

با فشردن کلید T ابزار Type را انتخاب کنید , سپس متن دلخواه برای هر آیتم از این منو را با رنگ #A6A43F

ایجاد کنید , من برای فونت از مجموعه مریم استفاده کرده ام و فونت yekan را انتخاب کرده ام , البته اگر

شما از فتوشاپ نسخه ME استفاده می کنید خوب راحتر هستید و می توانید از فونت های استاندارد مانند

Arial استفاده کنید , دقت داشته باشید که من برای کد کردن از فونت های رایج و unicode مانند Arial و

Tahoma استفاده خواهم کرد.

از آنجا که قرار است برای بخش نمایش پروژهای جدید از یک نقش یا pattern استفاده کنیم , فایلی جدید با

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

پس از ایجاد سند جدید رنگ foreground را به #2A2009 تغییر دهید , سپس با فشردن کلید B ابزار Pencil را

انتخاب کنید. با راست کلیک کردن برروی محیط کار پنجره Brush preset picker نمایان می شود و شما می

توانید یک قلم harded round انتخاب نمائید , مقدار قطر را به 1 پیکسل تغییر دهید و در وسط محیط کار

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

پس از انجام این کار به منو Edit رفته و گزینه Define Pattern را انتخاب کنید , پس از باز شدن پنجره pattern

name یک نام دلخواه برای نقش وارد کنید .
پس از ایجاد نقش به سراغ ایجاد بخش پروژهای جدید می رویم , با فشردن کلید u ابزار Rectangle را انتخاب

و مستطیلی با طول 330 پیکسل و عرض 980 پیکسل رسم کنید ( برای رسم دقیق تر می توانید از Guide

بهره برید)

برروی این لایه راست کلیک کنید و گزینه blending options را انتخاب کنید , سپس مانند تصاویر زیر مقادیر

موجود در پنجره Layer Style را مقدار دهی کنید.

نام این لایه را به pattern تغییر نام دهید .
ابزار Rounded Rectangle را با فشردن کلید u فعال کنید , مقدار Radius یا شعاع را به 8px تغییر داده و

همچنین رنگ را به #A6A43F تغییر دهید . سپس مستطیلی با طول 240 پیکسل و عرض 940 پیکسل رسم

کنید. پس از ایجاد نام لایه را به featured project bg و مقدار opacity را به 50 درصد تقلیل دهید.

ابزار Rectangle را انتخاب کرده و رنگ را به #A6A43F تغییر دهید سپس مستطیلی در بالای لایه featured

project bg ایجاد نمائید. برای عرض این مستطیل مقدار 610 و طول نیز 220 در نظر داشته باشید , پس از

رسم نام این لایه را به image bg تغییر نام دهید.

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

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

bg برروی این لایه جدید (منظور لایه ای که محتوی تصویر است ) راست کلیک کنید و گزینه Create Clipping

Mask را انتخاب کنید . در پایان نام این لایه را به image تغییر نام دهید .
در ادامه متن دلخواه خود را به بخش سمت راستی تصویر اضافه کنید , من در تصویر نشان داده ام که از چه

رنگ هائی بهره برده ام. همچنین من تمامی این متون را در گروهی با نام text قرار دادم.

در ادامه قصد داریم تا دو کلید در زیر این بخش ایجاد کنیم .
پیش از رسم این دو کلید باید بخش پائینی لایه featured project bg را بصورت صاف در آوریم , برای این کار

ابتدا برروی این لایه کلیک کنید تا انتخاب شود , سپس با فشردن کلید U ابزار Rectangle را فعال کنید در این

مرحله با فشردن کلید + (به اضافه ) وضعیت Add to shape area را فعال کنید ,

در انتها مستطیلی با طول 20 و عرض 980 ایجاد کنید , بطوری که بخش Rouded پائینی را کاملا پوشش

دهد.

فشردن کلید U ابزار Rounded Rectangle را انتخاب نمائید . پس از آن مقدار Radius را به 8px تغییر داده و

رنگ را نیز به #A6A42F تغییر دهید . اندازه این مستطیل با توجه به سلیقه شما است و می توانید هر

مقداری را تعیین کنید.(من برای طول و عرض به ترتیب 50 و 180 در نظر گرفتم)

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

شد یک مستطیل در بالای مستطیل اصلی ایجاد می کنیم .

نام این لایه را به btn_visit تغییر داده و سپس مقدار opacity را به 30 درصد تغییر دهید.

پس از ایجاد می توانید متن دلخواه خود را با رنگ #EAEAB7 به این کلید اضافه کنید , ضمن آنکه برای زیباتر

شدن من از یک آیکون استفاده کردم.

پس از اضافه شدن , بهتر است که اشیاء دورن این کلید راه در یک گروه قرار دهید , از این سو ابتدا انها را

انتخاب کرده وسپس کلید Ctrl +G را فشار دهید . پس از ایجاد گروه نام آن را به button 1 تغییر نام دهید.

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

در پایان طراحی بخش featured بهتر است برای آنکه نظم بهتری به چیدمان لایه ها بدهیم , تمامی لایه

های مربوط به این بخش را در گروهی با نام featured project قرار دهیم.

طراحی روبان سه بعدی
کار را با انتخاب ابزار Rectangle آغاز می کنیم . سپس برای رنگ مقدار #A6A43F را در نظر می گیریم , برای

عرض 940 و طول نیز مقدار 130 را در نظر می گیریم . پس از رسم این مستطیل نام لایه را به ribbon

background تغییر نام می دهیم.

در ادامه با فشردن کلید u ابزار Rounded Rectangle را انتخاب کنید , برای رنگ مقدار #A6A43F و برای

Radius مقدار 10 را در نظر بگیرید , این مستطیل قرار است کناره چپ روبان ما باشد , من برای عرض مقدار

40 و برای طول نیز مقدار 140 را در نظر گرفتم. من برای تنظیم بهتر از guide استفاده کردم یعنی یک gudie

در 455 مین پیکسل بصورت عمودی ایجاد کردم.

برروی vector mask این لایه کلیک کنید , سپس یکبار دیگر ابزار Rounded Rectangle را بافشردن کلید U

فعال کنید , از آنجا که می خواهیم یک ناحیه از Rounded Rectangle جاری کم کنیم با فشردن – ( یا منهی )

وضعیت Subtract را فعال کنید . در ادامه مانند تصویر زیر منطقه مربوطه را از بخش اصلی حذف کنید.

در ادامه لایه جدید در بالای بالاترین لایه ایجاد کنید , پس از ایجاد برروی آن راست کلیک کنید و گزینه Create

Clipping Mask را انتخاب کنید .
با فشردن کلید G ابزار Gradient را فعال کنید و سپس از بخش Gradient Editor گرادینت Foreground to

Transparent به شرط آنکه رنگ Foreground شما سفید باشد انتخاب کنید و مانند تصویر زیر گرداینت را

رسم کنید.

پس از رسم وضعیت Blend Mode را به Overlay تغییر دهید و مقدار opacity را نیز به 30 درصد تغییر دهید ,

ضمن آنکه نام لایه را به highlight تغییر نام دهید .

بار دیگر ابزار Rounded Rectangle را انتخاب کنید و این بار در بالای لایه ribbon background یک مستطیل

مانند تصویر زیر با رنگ #878533 ایجاد کنید. من برای طول 25 و عرض 40 پیکسل در نظر گرفتم.

پس از رسم با فشردن کلید U ابزار Rectangle را انتخاب کنید , مانند تصویر نیاز است تا بخشی را که روی

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

باشد .

در ادامه برروی این لایه راست کلیک کنید و گزینه blending options را انتخاب کنید , و مانند تصویر زیر مقادیر

را وارد کنید.

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

تمامی لایه های مروبط به روبان را در گروهی با نام ribbon قرار دهید.

یک لایه جدید در زیر لایه ribbon background ایجاد کنید و درست کاری را برای ایجاد سایه در زیر لایه محتوا

انجام دادیم در این مرحله تکرار کنید .

ابزار Rounded Rectangle را با فشردن کلید U فعاب کنید مقدار Radius را به 8 پیکسل و رنگ را به #E1E0C1

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

کلید Ctrl + G این لایه ها را در یک گروه قرار دهید , پس از آن نام گروه را به images تغییر نام دهید.

مانند تصویر زیر متن و لینک های دلخواه خود را درج کنید.

برای عنوان سایت و یک توضیح مختصر می توانید از رنگ #E0E0AC بهره برید.
برای زیبا نمایش دادن نام سایت , می توانید از این تنظیمات در بخش layer style نیز بهره برید.

برای آنکه کار تمام شود می توانید , تصاویر دلخواه خود را به بخش روبان اضافه کنید.

برای آنکه وضعیت یکی از آیتم های روبان را نیز فعال نشان دهیم می توانیم مقدار opcity آنرا افزایش دهیم.
این هم تصویر پایانی کار::