no-img
ساروگرافیک

آموزش ساخت قالب لایه باز PSD با فتوشاپ - ساروگرافیک

ساروگرافیک

ادامه مطلب

ZIP
آموزش ساخت قالب لایه باز PSD با فتوشاپ
zip
آوریل 22, 2017
سطح آموزش:حرفه ای

آموزش ساخت قالب لایه باز PSD با فتوشاپ


https://sarographic.ir/wp-content/uploads/2017/04/lll11117.jpg

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

آموزش ساخت قالب لایه باز PSD با فتوشاپ

مرحله ی اول :
یک سند جدید با اندازه ی  768* 1024 px بسازید
من فهمیدم که این اندازه برای ساخت یک سایت اندازه ی خیلی خوبیه حالا اگر شما فک میکنین که اندازه های دیگه بهتره آزادین که تغییر بدین
حالا بک گراندتون رو پر کنید با رنگ خاکستری تاریک(پررنگ) یا #1e1e1eمرحله ی دوم :
به بک گراندتون پترن اضافه کنید!
یک لایه ی جدید بسازید,برید به edit<fill و پترن رو بکار بگیرید!یک پیکسل اساسی پترن میتونه به شما کمک کنه که طرحتون جذاب و پویا باشه!(یکی دو روز پیش آموزشش رو گذاشتم)
من لایه م رو اینطوری پر کردم :

[تصویر: step2_a.jpg]

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

[تصویر: step2_b.jpg]

مرحله ی سوم :
یک لایه ی جدید بسازید و gradient tool رو انتخاب کنید,مطمین باشید که پیش نمای(foreground)شما به رنگ مشکی(#000000)هست و دومین گرادینت در منوی کشویی گرادینت ها رو انتخاب کنید!

[تصویر: step3_a.jpg]

روی بالای سندتون یا همون بومتون کلیک کنید کلید پایین(down) و shift رو نگه دارید,ماوستون رو حدود 1.5 بیارید پایین توی سند و ولش کنین!بعد opacity رو روی 90% درصد بزارین,حالا شما باید یچیزی مثل این داشته باشین :

[تصویر: step3_b.jpg]

مرحله ی چهارم : شیپ اضافه کنید
ابزار Rectangular Marquee tool رو انتخاب کنید :

[تصویر: step4_tools.jpg]

با استفاده از این ابزار دو مستطیل گسترده بسازید,این ها قسمت ناوبری و فوتر شما میشن!خب حالا قسمت ناوبری رو بزرگترمی کنیم نسبت به قسمت فوتر چون میخوایم بهش غالب بشه!حالا یه مستطیل بزرگتر به رنک خاکستری میسازیم برای قسمت محتوای سایتمون,از رنگ #7e7e7e و opacity رو روی 30% بزارید!خب حالا باید یچیزی مثل این داشته باشین :

[تصویر: step4_a.jpg]

اگه میخواین که شیپ هارو جابه جا کنین تا نتیجه کارتون ثل مال من شه میتونین با استفاده از ابزار move tool استفاده کنین!

ادامه ی آموزش :

مرحله ی پنجم : انحراف کردن شیپ ها
ب استایل دادن به قالبتون میتونین زیباتر و پویاترش کنین,ما باید شیپ هارو انحراف بدید!یک به یک!هرکدوم از شیپ هارو انتخاب کنید و به Edit>Transform>Distort برید حالا گوشه هارو انحراف بدید اما دقت کنین که زیاد از حد اینکارو نکنین که باعث زشت شدن طرح میشه!این از نمونه ی من :
[تصویر: step5_a.jpg]
حالا شیپ خاکستری رو duplicate کنین,opavity رو روی 100% درصد بزارین و رنگ رو رنگ بک گراند یا #1e1e1e انتخاب کنید!حالا این لایه ها رو که برای محتوای سایت هستن رو به زیر لایه های شیپ های ناوبری و فوتر ببرین!
تصویری که تا الان باید داشته باشین :
[تصویر: step5_b.jpg]
مرحله ی ششم : ناوبری و لینک هرو اضافه کنین
یک لایه ی جدید بسازین و Rectangular Marquee tool رو انتخاب کنین,بک مستطیل لاغر در قسمت پایینتر از وسط ناوبریتون بسازین
[تصویر: step6_a.jpg]
حالا لایه تون رو پر کنین با رفتن به Edit>Fill و هررنگ که میخواین رو انتخاب کنین!مطمین شین که شیپ شما ارتفاعش 3 پیکسل باشه,اگر که این شیپ بزرگتر یا کوچیکتر شد میتونین با Rectangular Marquee tool ببرینش یا اضافه کنین بهش
حالا Horizontal type tool رو انتخاب و روی قسمت سمت چپ ناوبری که پرش کردین کلیک کنین!فونت Verdana رو انتخاب کنین,bold کنینش و رنگ سفید و سایز 11 !حالا 6 لینکی رو که میخواین توی قسمت ناوبریتون باشه رو توی ناوبری بنویسین
[تصویر: step6_b.jpg]
برای اضافه کردن فلش ها,pen tool رو انتخاب کنین و یک فلش کوچیک بسازید که بسمت بالا باشه در هنگام ساختن فلش  کلید shift رو نگه دارید تا
ازابعادی که میسازین مطمین باشین!برای هرکدوم از لینک هایی که ساختین یه فلش بسازین و زیرش قرار بدین
[تصویر: step6_d.jpg]
مرحله ی هفتم : استایل دادن به ناوبری
در قسمت پالت لایه ها,فلش هایی رو که ساختین انتخاب کرده(shift رو همزمان که شیپ هارو انتخاب میکنین نگه دارین)و ادغامشون کنین در یک لایه با رفتن به Layer>Merge Layers.حالا همزمان که این لایه هارو انتخاب شده هستن برید به Layer>Layer Style>Gradient Overlay
زاویه ی گرادینت رو تغییر بدین به 0 و عکس گرادینت رو بزنین تا رنگ هارو تنظیم کنین.طبق عکس زیر تنظیم کنین
[تصویر: step7_a.jpg]
اینجا اطلاعاتی از رنگ هایی که من گذاشتم هست:
قرمز #ef4833 Location: 0
نارنجی #f7911e Location: 11
زرد #fff335 Location: 21
سبز #49b749 Location: 40
آبی  #00b4e5 Location: 58
آبی تیره #355ba9 Location: 76
صورتی  #c5197e Location: 100
همچنین یادتون باشه که این گرادینت رو سیو کنین تا دیگه محبور نباشین که اینکارارو دوباره انجام بدین!حالا شما باید این طرح رو داشته باشین :
[تصویر: step7_b.jpg]
مرحله ی هشتم : لوگو بسازید
برای این بخش شما میتونین از هر شیپی که برای فتوشاپ تهیه شده استفاده کنین اما من فقط از یه دایره استفاده کردم!Elipse tool رو انتخاب و همزمان shift رو نگه داریدو  یک شکل بسازید!
حالا لایه ی شیپی که ساختین رو انتخاب کنید و برید به Layer>Layer Style>Gradient Overlay,از توی کشوی گرادینت ها گرادینت رنگین کمان رو انتخاب کنین,همون گرادینتی که توی مرحله ی 7 ساختیم,استیل رو روی زاویه(angle)بزارین
[تصویر: step8_a.jpg]


حالا با اسفاده از Horizontal type tool و کنار دایره ای که ساختیم کلیک کنید و اسم یا عنوان سایتتون رو بنویسین.پیشنهاد من این فونت هست
GEIST KNT
این سایت هم شاید کمکتون کنه البته خارجیه : لینک
خب فونت رو روی smooth بزارین و سایز 27
همچنین میتونین یه شعار زیر عنوان سایتتون بنویسین,با ابزار type tool زیر عنوانتون کلیک و بنویسید شعارتون رو با فونت verdana  و سایز 10 و رنگ #585858!اگر شعارتون یخورده ناجور دراومد و نتونستین با عنوان سایتتون خوب فیکسش کنین میتونین با استفاده از قسمتی که توی شکل زیر نشون دادم فضای بین کلمه هارو کم و زیاد کنین تا قشنگ تر شه!یا برید به
window>character
[تصویر: step8_b.jpg]
مرحله ی نهم : محتواتون رو اضافه کنین
با استفاده از Horizontal type tool محتواتون و عنوان رو اضافه کنید,و با استفاده از Rectangular Marquee tool زیر هر عنوانی یک خط با 1 پیکسل ضخامت خط بکشید و رنگ رو مشکی انتخاب کنید!همچنین میتونین با استفاده از type tool تکست توی فوتر رو اضافه کنید!برای هر حرفی توی محتواتون پیشنهاد میشه که Anti-Aliasing رو روی none بزارید,من برای تکست های توی محتوام سایز 11 و فونت verdana رو انتخاب کردم
تا اینجا باید این شکل رو داشته باشیم که البته بازم وابسته به میل و سلیقه خودتون میتونین تغییرش بدین :

[تصویر: step9_a.jpg]

برای اضافه کردن تکست توی محتواتون به غیر از کلیک کردن برای نوشتن اونو بکشین به پایین تا یک تکست باکسی ساخته بشه تا حاوی تکستون باشه این باعث میشه بتونین راحتتر فضای بین کلمات و غیره رو کنترل کنید
اگه که میخوای ریز عکس هایی رو اضافه کنین میتونین روش مشابه رو به کار بگیرید تا بتونین شکل های مستطیلی رو بسازین.Rectangle tool رو به کار بگیرین تا یک مستطیل تیره تر بسازید و یک تغییر دیگه بهش اضافه کنین با رفتن به Edit>Transform>Distort ,من رنگ #202020 رو انتخاب کردم
وقتی که این شیپ هارو ایجاد کردین و تصمیم گرفتین که کجا قرارشون بدین,میتونین با استفاده از Rectangular Marquee tool قسمت هایی رو ایجاد کنین که مثلا این شیپ هارو نگه میدارن و شما عکس هاتون رو توش قرار میدین(اوف خسته شدم[تصویر: 104.gif])

[تصویر: step9_b.jpg]

بعد از قرار دادن عکس ها :

[تصویر: step9_c.jpg]

بعد ازینا تنها کاری که باید بکنین اوردن عکس هاتون توی قالب هست,روی لایه ی عکس هاتون کلیک کنین و Create Clipping Mask رو انتخاب کنین

اگه میخواین به بیننده تون اجازه بدین که برای تصاویر بتونه مثل اسلایدر عقب و جلو کنه عکس هارو,فقط کافیه که دوتا  فلش مثل عکس زیر قرار بدین,بهترین راه اینه که از Rectanglular Marquee tool استفاده کنین تا شکل ایجاد کنین,پرش کنین,و بعد از pencil tool برای ایجاد فلش استفاده کنین

[تصویر: step9_d.jpg]

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

اول لایه ی اصلی محتواتون رو پیدا کنین,همونی که رنگش خاکستری و opacity رو 30 بود,انتخابش کنین و یک لایه ی جدید ایجاد کنین(اینطوری لایه ی جدید بالای لایه ی محتوا ایجاد میشه)روی این لایه کلیک کنین و Create Clipping Mask رو انتخاب کنین و opacity رو روی 60 بزارین!حالا brush tool رو انتخاب کنین با 0% hardness,و سایز بزرگ,سپس با دقت زیاد کلیک کنید و به بالا و پایین و راست و چپ ببرین یکم!اینو طوری کنین که دارین از لبه های براش استفاده کنین :

[تصویر: step10_a.jpg]

اگر شما یچیزی متفاوت با چیزی که من ساختم دارین مطمین شین که تنظیمات براشتون مثل تنظیمات براش توی عکس بالایی باشه

حالا یکم روشنایی اضافه میکنیم,یه لایه ی جدید بسازین و لایه ش رو زیر تمام لایه های محتواتون بزارین,پس الان بالای بک گراند و پترن هست!
opacity این لایه رو روی 60 بزارید,حالا براش مشابه رو بکار بگیرین اما با رنگ سفید,یکبار در قسمت یکم بالاتر از وسط محتواتون کلیک کنین :

[تصویر: step10_b.jpg]

مرحله ی آخر : نشان فروش رو اضافه کنین

ابزار شکل سفارشی رو پیدا کنین توی tools window و شکلی که اسمش Seal هست رو انتخاب کنین

[تصویر: step11_a.jpg]

همزمان که shift رو نگه داشتین این شکل رو سمت راست محتواتون بکشین,مطمین باشین که رنگ شیپپتون مشکی هست,حالا همزمان که لایه ی شیپتون انتخاب شده هست برید به Layer>Layer Styles>Stroke  و این تنظیمات رو اعمال کنین :
stroke to 3px, Inside, Style: Angle
Fill type: Gradient  برای گرادینت همون گرادینت که ساختیم اول رو انتخاب کنین

[تصویر: step11_b.jpg]

سپس با استفاده از type tool,روی شیپ کلیک کنین و تکستتون رو بنویسین بارنگ سفید!من از تنظیمات زیر استفاده کردم

روی عکس کلیک کنین
[تصویر: step11_c.jpg]

در آخر,یک لایه ی جدید بسازین و Eliptical Marquee tool رو انتخاب کنین,همزمان که shift رو نگه داشتین یک شکل خیمه داخل شیپ ایجاد کنین,بعد gradient tool رو انتخاب کنین و  یک رنگ جدید بسازید تا گرادینت رو شفاف کنین توی شیپ,opacity رو روی 30 بزارین و marquee tool رو استفاده کنین برای انتخاب خارج از شیپ

[تصویر: step11_d.jpg]


موضوعات :
آموزش , فتوشاپ

دیدگاه ها


یک پاسخ به “آموزش ساخت قالب لایه باز PSD با فتوشاپ”

  1. mamad گفت:

    عالی بود

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *