طراحی قالب سایت دیزاین فضای خارجی با فتوشاپ

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

آموزش فتوشاپ طراحی قالب یک سایت طراحی فضاهای خارجی

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

طراحی نمای جنگل کاج

به تصویر زیر نگاه کنید:

ما در این گام سند جدیدی برای مونیتور های 24 تا 27 اینچ ایجاد کرده و یک مستطیل 960px رسم کرده ایم و خطوط راهنما را در جایی که محتوای سایت قرار خواهند گرفت ایجاد کرده ایم. حالا یک تصویر بزرگ برای پس زمنیه سایت قرار خواهیم داد:

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

ما برای ایجاد بافت از قلم های آبرنگی و ماسک لایه استفاده کرده ایم و سعی کرده ایم تصویر را با بکگراند ادغام کنیم:

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

به واژه Pinewood کمی استایل اضافه کرده ایم :

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

سپس کمی به متن سایه اضافه می کنیم Drop Shadow و منو ها را با فونت ساده تری تایپ خواهیم کرد:

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

یک مربع 960px ایجاد و با رنگ طوسی که مانند رنگ شروع گرادیانت لوگو است آن را پر کنید:

افکت دانه شدگی را با دستور Filter > Noise > Add Noise=2.5% اجرا کنید.

در تصویر زیر ما با کلید Ctrl + کلیک روی لایه آن را درحالت انتخاب قرار داده ناحیه انتخاب را 40px کوچک تر کرده و آن را در لایه ای جدید با رنگ سفید پر کرده و به آن در سمت چپ کمی سایه اضافه کرده ایم. تهیه و تنظیم توسط شرکت طراحی سایت سارگون بخش آموزش طراحی با ما در تماس باشید.:

به حاشیه دور این ناحیه سفید با ماسک لایه و براش یک بافت بدهید:

تصویر را وارد کرده و نواحی خارج از کادر تصویر را حذف یا ماسک کنید:

با کمک آموزش حرفه ای Curves : رنگها رنگ های تصویر را تنظیم کنید:

با کمک لایه تنظیمی hue/saturation تصویر را به حالت آبی بکگراند نزدیک کنید:

با کمک براش paint roller از براش های آبرنگی یک ناحیه برای وارد کرد متن در این تصویر ایجاد کنید:

برای تایپ متن از فونت های ساده استفاده کنید برای تایپ فارسی میتوانید فونت F titr یا f lotus استفاده کنید.

در این قسمت ما همان استایل لایه هدر سایت راکپی کرده ایم ولی شما میتوانید استایل دیگری به این قسمت بدهید:

سعی کنید که متن ها رنگی نزدیک به طوسی داشته باشند:

برای ایجاد دکمه از ابزار رسم مستطیل گوشه گرد با کلید میانبر Shift+u استفاده کنید . و رنگ آن را آبی انتخاب کنید و کمی به آن نویز بدهید ما گرد شدگی گوشه را 1px قرار داده ایم :

به این دکمه استایل لایه Inner Glow با color=blue, normal blending mode, opacity=100% بدهید و سایز را مناسب با اندازه دکمه انتخاب کنید. به دکمه یک خط دور 1 پیکسلی با رنگ آبی کمرنگ تر بدهید.

یک متن به دکمه اضافه خواهیم کرد.

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

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

بافت ایجاد شده با براش paint roller ایجاد شده است و با ناحیه انتخاب قسمت هایی که از محدوده خارج شده اند را حذف کرده ایم:

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

حالا این قسمت ها را با هم گروپ کنید و یا در یک پوشه قرار دهید:

برای قسمت زیر محتوا از متن و استایل متن هدر برای ایجاد عدد و از یک بکگراند و یک مخفف نام ماه با رنگ تیره برای ایجاد استایل مد نظر این قسمت استفاده کنید: