گروه مقاله : آموزش فتوشاپ
تاريخ انتشار : 1396/04/26 - 14:37
كد :7712

طراحی قالب سایت گردشگری با فتوشاپ

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

طراحی قالب سایت گردشگری با فتوشاپ

در این آموزش سایت زیر را ایجاد خواهیم کرد:

 

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

 

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

ایجاد سند جدید

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

 

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

 

نکته : برای طراحی قالب استاندارد میتوانید از اندازه 1024×768 استفاده کنید.

گام دوم :ایجاد خطوط راهنما

معمولا شبکه بندی طرح را بر اساس نحوه کد نویسی سایت انجام میدهند. شبکه بندی Bootstrap و شبکه بندی 960 از پرکاربردترین شبکه بندی ها می باشند. اگر از سیستم bootstrap استفاده می کنید ، نسبت هر قسمت به کل باید مضربی از 8.33% باشد. دستور View > New Guide را اجرا کنید. و خطوط عمودی را در فواصل 200px, 260px, 700px, 1140px و 1200pxایجاد کنید.

 

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

 

گام 3: ایجاد پوشه

ما در این آموزش در ابتدا پوشه های مورد نیاز خود را یجاد کرده ایم . شما میتوانید در پنل لایه ها پوشه های Header, Features, Social Proof, Final CTA و Footerرا ایجاد کنید.

 

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

 

طراحی هدر سایت

رنگ بکگراند خود را به کد #ebebeb تغییر دهید. در پوشه هدر که در پنل لایه ها در گام قبل ایجاد کرده اید با ابزار رسم مستطیل یک مستطیل 600×1000 ایجاد کنید. این مستطیل را در وسط خطوط راهنما قرار دهید. ما واژه Bike traveler photo را در گوگل جستجو کرده وتصویر مد نظر خود را دانلود و به سند خود اضافه کرده ایم. ما تصویر خود را در بالای لایه شکل مستطیل قرار داده ایم. کلید Alt را نگه داشته .و لایه عکس را با مستطیل کلیپ ماسک کرده ایم.

با کلید Ctrl+T اندازه های عکس را تنظیم کنید. هنگام تنظیم اندازه های عکس از کلید Shift برای حفظ نسبت های تصویر کمک بگیرید.

 

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

 

گام 2 :به تصویر جلوه تاریک بدهید

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

 

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

 

گام 3 : متن عنوان و منو را تایپ کنید

ما در تصویر زیر از فونت Aller برای تایپ عنوان سایت و از فونت Open Sans برای تایپ متن منوها استفاده کرده ایم.

 

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

 

گام4:افزودن شعار سایت

معمولا شعار سایت کوچکتر از فونت های عنوان است ولی در این طراحی ما شعار سایت را در وسط بنر و با فونتی بزرگ طراحی کرده ایم . ما از فونت Open Sans=32px برای تایپ قسمت اصلی پیام سایت استفاده کرده ایم و قسمتی را نیز برجسته کرده ایم.

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

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

 

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

 

گام 5: یک خط دیگر برای ترغیب مشتریان اضافه کنید

ما با فونت PT Serif (Italic) در اندازه 14 پوینت یک متن برای تبلیغ عضویت در مجله سایت اضافه کرده ایم . ثبت نام کاربران در مجله سایت برای ما ارزشمنداست و یکی از اهداف سایت محسوب میشود.

 

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

 

گام 6 : ایجاد کادر ورود ایمیل برای دریافت مجله سایت

ما در پنل لایه ها یک پوشه جدید به نام Email form اضافه کرده و سپس با ابزار رسم مستطیل گوشه گرد با گردشدگی 3px و رنگ سفید یک کادر ورود ایمیل ساده ایجاد کرده ایم.

 

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

 

گام7: افزودن متن به کادر ورود ایمیل

در کادر ورود متن یک متن تایپ کنید. تا کاربران متوجه کارایی این کادر شوند. ما از فونت open sanse در اندازه ی 13 پیکسل و رنگ #bdbdbd استفاده کرده ایم. برای روی دکمه هم رنگ فونت را به سفید تغییر داده ایم .

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

 

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

 

مردم انتظار دارند با اسکرول کردن به سمت پایین جزئیات بیشتری را مشاهد ه کنند.

ایجاد ناحیه متن اصلی سایت

برای ایجاد یک بکگراند متفاوت از ابزار رسم مستطیل گوشه گرد با گردشدگی 5px استفاده کنید. ما رنگ این مستطیل را سفید انتخاب کرده ایم.

این لایه را در بالای لایه بکگراند اصلی در پنل لایه ها قرار دهید:

 

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

 

ایجاد عنوان و متن ناحیه متن اصلی سایت

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

 

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

 

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

برای جدا کردن قسمت های مختلف درج محتوا در قسمت اصلی سایت از ابزار رسم خط با عرض 1px و با رنگ #e8e8e8 استفاده کنید:

 

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

 

قرار دادن متن پوشه Social Proof

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

 

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

ایجاد آواتار کاربران

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

 

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

 

طراحی آخرین قسمت درج محتوای اصلی سایت

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

به زیر خط یک پاراگراف متن با یک عنوان اضافه کنید.

 

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

 

کپی کردن کادر ورود ایمیل

لایه ای را که در آن مستطیل ورود ایمیل و دکمه آن قرار داشت کپی کرده و به آن افکت Stroke با رنگ #51a200 بدهید:

 

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

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

 

طراحی پا صفحه

برای طراحی پا صفحه در پوشه Footer لینک های پا صحفه را با فونت Open Sans (Semibold) تایپ کنید.

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

 

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

 

 

طراحی تخصصی قالب سایت را به شرکت طراحی سایت سارگون بسپارید.

 

نظرات كاربران :