در این مقاله با فتوشاپ یک سایت آموزشی را طراحی می کنیم ، برای ایجاد قالب یک سایت ابتدا آن را بصورت خطی ایجاد و سپس برای آن یک گرافیک طراحی می کنیم.
طراحی قالب سایت آموزشی
در این آموزش ما در فتوشاپ یک قالب خطی ترسیم شده را به یک قالب سایت تبدیل می کنیم. هدف ما این است که در آینده در مقالات طراحی سایت تمام قالب های طراحی شده در فتوشاپ را بصورت صفحات وب سایت در بیاوریم.
گام های طراحی قالب سایت با فتوشاپ
هنگام طراحی قالب یک سایت در فتوشاپ ما باید علاوه بر طراحی صفحه نخست ، صفحات داخلی را نیز طراحی کنیم ، ولی با توجه به محدویت زمان در این آموزش، تنها گام اول طراحی قالب سایت، یعنی طراحی صفحه نخست را انجام میدهیم، با ما همراه باشید.
گام 1-ایجاد سند
ابتدا یک سند جدید در فتوشاپ ایجاد کنید .
ابعداد: 1100×1100
رنگ : گرادیانت #472373 - #1b204c
گرادیانت را خطی ایجاد کنید تصویر زیر می تواند راهنمای خوبی باشد:
گام 2- دانلود تصویر بکگراند سایت
ما برای طراحی قالب سایت خود، از یک تصویر گرافیکی استفاده کرده ایم، میتوانید با کمی سرچ تصویر مناسبی برای پسزمینه سایت خود بیابید، ما برای معکوس کردن رنگ از کلید CTRL+I استفاده کرده ایم تا رنگ های ما قرمز و مشکی شود:
گام 3-تنظیم تصویر بکگراند
تصویری را که برای بکگراند خود دانلود کرده اید با کلید های Ctrl+T و ابزار های براش و ماسک ویرایش کنید تا با اندازه سایت هماهنگ شود.
گام 4 تنظیم نوع ترکیبی لایه ی تصویر بکگراند
ما لایه عکس دانلود شده را انتخاب و تنظیمات زیر را انجام داده ایم (نام این لایه watercolorاست) :
Opacity=70%
blend mode= Overlay
گام 5 ایجاد یک لایه جدید
حالا یک لایه جدید در بالای لایه watercolor ایجاد کرده و یک گرادیانت خطی از مشکی به ترانس پرنت ایجاد می کنیم . این گرادیانت قسمت زیرین لایه watercolor را محو می کند تا با پس زمینه ادغام شود.
گام 6: افزودن افکت نور به طرح
برای اینکه تصویر ما جلوه زیباتری داشته باشد، دولایه ایجاد کرده و با گرادیانت دایره ای، از سفید به ترانسپرنت دو دایره ، یکی کوچک و یکی بزرگ رسم کرده ایم. تنظیمات این دو لایه را بصورت زیر قرار دهید:
blend mode= Overlay
دایره بزرگ : Opacity=40
دایره کوچک : Opacity=100
گام 7 افزودن لایه های تنظیمی
قاعدتا شما بعنوان یک دیزاینر نمی خواهید که رنگ شما بنفش باشد با افزودن لایه تنظیمی color adjustment میتوانیم رنگ را کمی تغییر دهیم ، ما رنگ صورتی را به رنگ بنفش افزوده ایم :
گام 8 ایجاد لوگوی سایت
در طراحی سایت ما دو مرحله داریم دیزاین گرافیکی سایت و طراحی کد های سایت در سایت های خارجی آموزش طراحی کد های سایت را با عنوان NETTUTS نیز مشخص می کنند این اصطلاح اولین بار توسط سایت envato بکار رفت که یکی از اولین سایت های آموزش طراحی سایت در دنیا بشمار میرود . در این آموزش بجای طراحی لوگو که یک کار گرافیکی حرفه ای بوده و نیاز به آموزش جدا گانه دارد، از یک متن استفاده کرده ایم و عبارت psd vs net را تایپ کرده ایم .
فونتهای که در این آموزش بکار رفته است Egyptian505 BT Bold و Egyptian505 LT BT Light میباشند ، شما میتوانید بجای این فونت ها از فونت های پیشفرض ویندوز مانند Times و arial استفاده کنید.
در پنل کاراکتر میتوانید عبارت vs را کمی بالاتر ببرید. حالا به لایه استایل Gradient Overlay و 1px Inner Glow با رنگ سفید بدهید:
گام 9 خطوط راهنما را اضافه کنید
کلید Ctrl+R را زده و خطوط راهنما را روی 50px, 320px, 610px, 900px ایجاد کنید . همانطور که در تصویر زیر می بینید ما چهار خط ایجاد کرده ا یم ، در طراحی قالب سایت برای اجرا در وب شما میتوانید خطوط خود را در فواصل مشخصی بگذارید، فراموش نکنید که اندازه صفحه را بر 12 تقسیم کنید و اندازه خط کش های خود را با یکی از مضرب های عدد بدست آمده انجام دهید :
گام 10: ایجاد بلوک های سایت
برای ایجاد اولین بلوک سیاه خود با استفاده از خطوط راهنما و ابزار رسم ناحیه انتخاب مستطیل در یک لایه جدید از اولین خط تا آخرین خط یک مستطیل ایجاد کرده و آنرا با رنگ سیاه پر می کنیم ، میزان Opacity=80% لایه را تنظیم کرده و سپس پنجره استایل لایه را باز کنید و به لایه خط دور بدهید :
Stroke=1px white Outside Overlay :
گام 11 ویرایش بلوک مشکی
حالا لایه بلاک مشکی را کپی کنید ، ما برای اینکار از کلید CTRL+J استفاده کرده ایم با کمی تغییر سایز این لایه کپی تصویر زیر را ایجاد کرده ایم.
در ادامه تنظیمات این لایه جدید را به این صورت تغییر می دهیم:
Opacity=40%
Fill=50%
ما در این قسمت محیط و فضای منوی سایت را ایجاد کرده ایم، دلیل این شکل طراحی، این است که نظر بیننده ابتدا به متن ما جلب شده و سپس متوجه وجود منو شود:
گام 12: ایجاد متن منو و بلاک متن
ما برای تایپ متن در بلاک مشکی از فونت Egyptian Light استفاده کرده ایم و برای فونت منوها از Arial استفاده کرده ایم .
اگر به فونت Egyptian دسترسی ندارید میتوانید از فونت پیشفرض Times استفاده کنید :
گام 13: به متن های بلاک گرادیانت اضافه کنید
به کمک استایل لایه gradient overlay به متن درون کادر مشکی کمی افکت اضافه کرده ایم. سپس به این لایه Gradient Overlay اضافه کرده ایم و نوع ترکیبی این استایل را روی Overlay mode قرار داده ایم:
گام 14: افزودن بلاک اصلی سایت
با همان روشی که بلاک اولی را ایجاد کرده بودید، یک بلاک دیگر با پس زمینه مشکی ایجاد کنید که از بلاک اول بزرگتر باشد . برای اینکار روی لایه بلاک اول کلیک و CTrl+J را زده و لایه کپی را با دستور Ctrl+T جابجا کرده و تغییر سایز بدهید:
گام 15 : به قسمت اصلی سایت محتوا اضافه کنید
برای افزودن محتوا به این بخش بهتر است که از خطوط راهنما استفاده کنید، به این ترتیب کد نویسی سایت راحت تر می شود.
برای طراحی این قسمت ما سه ستون با عرض های مساوی ایجاد کرده ایم ، ولی میتوانید عرض ستون سمت چپ را بیشتر بگیرید، تا محتوا اصلی از محتوای فرعی مشخص شود . افکت متن ها را در گام قبل توضیح داده ام ، تصاویری که در زیر مشاهده می کنید را از اینترنت دانلود و به سند خود اضافه کرده ایم.
گام 16: افزودن پاصفحه
یک لایه جدید ایجاد کنید و با تکنیکی که به بلاک ها خط دور اضافه کرده ایم ، می توانید به این قسمت خط دور اضافه کنید. برای فونت ها از فونت های درشت و کوچک استفاده کنید تا گرافیک جذاب تری داشته باشید:
سایت ما اکنون به این صورت در آمده است :
یکی از خواسته های مشتریان هنگام طراحی این است که بتوانند براساس مناسبت ها مود سایت خود را تغییر دهند شما میتوانید با کمک لایه های تنظیمی این کار را برای مشتریان خود انجام دهید:
برای مطالعه بیشتر به صحفه آموزش فتوشاپ سایت شرکت طراحی سایت سارگون مراجعه کنید.