طراحی قالب 3 بعدی سایت در فتوشاپ همراه با psd

منبع : سایت بزرگ مجید آنلاین

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

اول از همه میتوانید خروجی PSD و نهایی این خودآموز را از لینک زیر دانلود نمایید :

شروع کار : یک صفحه جدید در ابعاد ۱۲۰۰*۱۲۰۰ پیکسل و با رنگ پس زمینه دلخواه بسازید.سپس پس زمینه را به رنگ “۴۲۴۲۴۲#” و background را “#۱۹۱۹۱۹″ قرار دهید. حالا ابزار “gradient tool ” و گزینه ” radial gradient ” را انتخاب کنید.

سپس “radial gradient ” را انتخاب و مطابق شکل زیر از بالای صفحه تا حدود نیمی از صفحه بکشید.

ساختن عنوان سایت
ابزار “text type tool ” را انتخاب کنید و عنوان و لوگوی دلخواه وب سایتتان را در قسمت باالا سمت چپ تصویر بنویسید.متن زیر با قلم “verdana” و اندازه فونت “pt 36 ” نوشته شده است.

سپس روی لایه ای که متن عنوان و لوگو را نوشتید راست کلیک کرده و گزینه blending options را اعمال کنید و مطابق با شکلهای زیر تغییرات را در آن اعمال کنید:

نتیجه کا ر شما باید چیزی شبیه زیر باشد :

ساختن search box
ابزار “rounded rectangle tool ” را انتخاب کرده و “radius ” آن را “۱۵ px” قرار دهید. سپس یک مستطیل با اندازه متوسط در قسمت بالا سمت راست بکشید.

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

نتیجه کا ر شما باید چیزی شبیه زیر باشد :

حالا با استفاده از ابزار “rounded rectangle tool ” با ” “radius =5 px یک مستطیل کوچکتر داخل مستطیل قبلی بکشید.
وقتی مستطیل داخلی را رسم کردید، یک لایه جدید بازکرده و در سمت راست مستطیل داخلی یک مربع کوچک رسم کرده و لایه مربع کوچک را مخفی کنید تا بعدا مورد استفاده قرار گیرد.

حالا به لایه مستطیل داخلی رفته و روی آن راست کلیک کرده و “blending options ” را انتخاب کنید.
سپس استایل های زیر را به مستطیل داخلی اضافه کنید:

نتیجه کا ر شما باید چیزی شبیه زیر باشد :

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

حالا استایل های زیر را به لایه مربع کوچک اضافه کنید :

در سمت چپ کلید آبی و سمت راست مستطلیل سفید یعنی جایی که محل فیلد جستجو است دو خط “۱ px” رسم کنید.(مطابق شکل زیر ) خط اول دارای رنگ سیاه و خط راست رنگ سفید است. سپس “blend mode” لایه( مربع کوچک ) را به “soft line ” تغییر دهید.

در نهایت search box طرح شما باید شبیه زیر باشد :

ساختن navigation سه بعدی
دو خط ۱ px روئ همدیگر با حدود ۱۰۰ px فاصله و در پایین کادر جستجو و عنوان سایت بسازید .(مانند شکل زیر) رنگ خط بالایی را سیاه ( #۰۰۰۰۰۰) و خط پایینی را سفید (#ffffff) انتخاب کنید. سپس blend mode لایه را به Overlay تغییر دهید.
مانند شکل زیر :

ابزار “rectangle tool ” را انتخاب کنید و مستطیلی به عرض همان خطی که در مرحله قبل ساختیم ، رسم کنید.
مستطیل را با رنگ سفید پر کنید و به مسیر زیر بروید :
Edit —–> transform —- >perspective

سپس گوشه بالا سمت چپ شکل مستطیل را drag(کشیدن و بازی کردن) کنید تا چیزی شبیه شکل زیر شود.

همچنین یک خط ۱ px به رنگ سیاه سفید در بالای مستطیل رسم کرده و هیچ فاصله ای بین دو شی باقی نگذارید.
سپس روی لایه مستطیل راست کلیک کرده و blending options را اتنخاب کنید.
سپس style های زیر را به این لایه اضافه کنید:

ابزار ” elliptical marquee tool ” را برای کشیدن یک بیضی بزرگ انتخاب کنید. این بیضی باید کمتر از نیمی از مستطیل ما را پوشش دهد.

بیضی را با رنگ سیاه ( #۰۰۰۰۰۰) پر کنید و opacity آن را ۵۰% قرار دهید. اطراف مستطیل خود را انتخاب کرده و سپس نواحی انتخابی را معکوس (inverse) کنید. لایه بیضی را انتخاب کرده و delet کنید.
مانند شکل زیر :

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

هریک از آیکن ها را duplicate کرده وسپس تمام لایه های آیکن های duplicate شده را دریک لایه ترکیب کنید.
سپس لایه ترکیب شده را به زیر تمام لایه های آیکن بکشید. و برای وارونه کردن آیکن ها به شکل عمودی به مسیر زیر بروید
Edit — > transform — > flip vertically
سرانجام آیکن های ترکیب شده را به اندازه ۲ px تیره و مبهم کنید. برای اینکار به مسیر زیر بروید:
Filter — > blur — > Guassian blur

برای پایان navigation یک برچسب به اولین آیکن خود اضافه کنید تا حالت شناور بودن را کاملتر کنیم.
من یک شکل حبابی کوچک رو با نوشته دلخواه انتخاب می کنم .

ساختن content area (مکان محتویات)
از ابزار ” rectangle tool ” برای ایجاد مستطیل بزرگ برای مکان محتویاتمان استفاده کنید.
این مستطیل باید هم عرض مستطیل navigation و در پایین آن باشد. وهمچنین نباید بین آنها فاصله ای باشد.

حالا تنظیمات زیر را روی مستطیل رسم شده (برای محتویات) اعمال کنید:

نتیجه کا ر شما باید چیزی شبیه زیر باشد :

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

ساختن footer
ما طرح خود را با اضافه کردن یک استایل به footer تمام می کنیم. من بالای متن فوتر را با یک خط جدا کردم.
که برای اینکار دو خط ۱ px روی هم استفاده کردم . در نهایت blend mode لایه footer را به overlay تغییر دهید.

شکل نهایی طرح ما باید شبیه عکس زیر باشد :

امیدوارم از آموزش بالا لذت برده باشید