با سلام خدمت دوستان عزیز, و محترم . امیدوارم حالتون خوب باشه، با شما هستیم در فصل دوم آموزش طراحی قالب.این قالب یه قالب html هست و با هیچ سیستمی ست نمیشه.
بسیار خب حال میریم سراغ آموزش.
گرافیک قالب
قالبی که برای این آموزش در نظر گرفتم، یک قالب وبلاگ شخصی، سه ستونه هست، سعی خواهم کرد که کل مراحل به طور کامل توضیح بدم، اما اگر در مرحله ای از کار سوالی براتون پیش اومد در بخش نظرات مطرح کنید،
همانطور که میدونید هر قالب از ۴ قسمت اصلی تشکیل شده :
سرصفحه (header)
ستون های کناری(sidebar)
قسمت محتوا(content)
پانوشت (footer)
که البته هر قسمت نیز به چند قسمت دیگر شده است، اما اصلی ترین قسمت های هر قالب این چهار قسمت است.
ابتدا تصاویر و فونت هایی که در این قالب استفاده خواهیم کرد رو دانلود کنید :
دانلود تصاویر و فونت ها
حال تصاویر را در پوشه ی images مربوط به قالب انتقال دهید و فونت ها رو نصب کنید :
بسیار خب کارمون را شروع می کنیم :
اول فایل psd که در جلسه قبل ایجاد کردیم رو باز کنید :
از منوی view گزینه new guide رو انتخاب کنید و طبق تصاویر زیر
خط راهنما را ایجاد کنید :
و دوباره
در این حالت با ایجاد خطوط راهنما فضایی که در وسط قرار دارد برابر با ۱۰۲۴px که عرض استاندارد نمایشگرهای کامپیوتر است.
قسمت پس زمینه
همانطور که می بینید ما در پس زمینه از تصویر استفاده کردیم (pattern) برای اینکه در فتوشاپ تصویری را به pattern تبدیل کنیم کارهای زیر رو انجام دهید
۱٫ از تصاویری که دانلود کردید فایل body-bg با فتوشاپ باز کنید
۲٫ از منوی edit گزینه define pattern رو انتخاب کنید و ok رو بزنید تا تصویر به pattern تبدیل شود.
۴٫ به فایل قالب برگردید
۳٫ بر روی لایه background دابل کلیک و ok کنید تا از حالت قفل خارج شود، سپس دوباره بر روی لایه دابل کلیک کنید تا پنجره blending optoins باز شود و استایل زیر رو بهش بدین
همانطور که می بینید، تصویرمان به patternها اضافه شده است آنرا انتخاب کنید
بر روی ok کلیک کنید تا استایلمان اعمال شود.
حال بر روی لایه کلیک راست کنید و layer properties رو انتخاب کنید و نام آن را به background تغییر و ok کنید.
قسمت سرصفحه (header)
ابتدا از منوی layer گزینه new و سپس group رو انتخاب کنید و نام آن را header قرار دهید.
۱٫ یک خط راهنمای جدید طبق تصویر زیر ایجاد کنید :
۲٫ ابزار rectangle tool رو انتخاب کنید و طبق تصویر زیر یک مستطیل ایجاد و آن را در قسمت بالای قالب سایت قرار دهید
سپس استایل زیر رو بهش بدین
سپس نام لایه رو به header-bg تغییر دهید
۳٫ ابزار نوشتن (type) رو انتخاب کنید یک متن با رنگ سفید (#ffffff) و اندازه فونت ۷۲px ایجاد کنید، بنده از فونت entezare zohoor 3 ** استفاده کردم. که همراه فایل هایی که دانلود کردید وجود داره
نکته :
اگر فونت رو نصب کردین اما به لیست فونت ها در نرم افزار فتوشاپ اضافه نشده، نرم افزار رو ببندید و دوباره اجرا کنید.
۴٫ سپس استایل زیر رو طبق تصویر بهش بدین
۵٫ یک متن دیگر با فونت b yekan و اندازه ۳۰px و رنگ سفید با عنوان “یک سایت دیگر با وردپرس” ایجاد کنید و استایل زیر رو بهش بدین :
محل قرارگیریش هم مانند تصویر زیر :
۶٫حال آیکن های شبکه های اجتماعی رو وارد فایل کنید و در بالا سمت چپ header مانند تصویر زیر قرار دهید.
سپس استایل زیر رو بر روی همه آن ها اعمال کنید
در قسمت Layers دو لایه متنی مربوط به لوگو رو با نگه داشت دکمه CTRL انتخاب کنید و سپس CTRL + G رو بزنید تا این دو لایه در یک گروه قرار گیرند، حال در قسمت لایه ها بر روی group1 کلیک راست کنید و group properties رو انتخاب کنید و نام گروه رو به logo تغییر بدین.
همین کار رو برای آیکون شبکه های اجتماعی انجام بدین و نام گروه رو sn-icons قرار بدین
حال opacity گروه sn-icons رو به ۵۰ درصد تغییر بدین.
حال به ایجاد قسمت جستجو میرسیم :
۱٫ ابزار rounded rectangle tool رو انتخاب کنید و یک مربع با اندازه های زیر ایجاد کنید :
و آن را در پایین سمت چپ header قرار دهید.
سپس استایل های زیر رو به اون بدین.
سپس یک متن با فونت b nazinin و اندازه ی ۱۸px و رنگ سفید ایجاد کنید و آن را مانند تصویر زیر در داخل باکس جستجو قرار دهید :
حال تصویر search-btn را وارد فایل کنید و آن را داخل باکس جستجو سمت چپ آن قرار دهید.
حال این سه لایه (shape1 و لایه متنی و تصویر) رو با هم انتخاب کنید و آن ها را در داخل یک group جدید با نام search-box قرار دهید.
منوی سایت
حال به ایجاد قسمت منوی سایت رسیدیم.
ابتدا یک خط راهنما طبق تصویر زیر ایجاد کنید :
۱٫ ابزار rectangle tool رو انتخاب کنید و یک مربع با ابعاد زیر ایجاد کنید :
و آنرا در زیر header و در بین خطوط راهنما قرار دهید، سپس نام آنرا به menu-bg تغییر دهید.
۲٫ بر روی لایه ی header-bg کلیک راست کنید و گزینه copy layer style رو انتخاب کنید
۳٫ سپس بر روی لایه menu-bg کلیک راست کنید و گزینه paste layer style رو انتخاب کنید تا استایل لایه header-bg بر روی لایه menu-bg اعمال شود
۴٫ سپس استایل inner-shadow آنرا مانند تصویر زیر ایجاد کنید :
۵٫ حال تصویر home-icon را وارد فایل کنید و در ابتدای منو قرار دهید
۶٫ حال یک لایه متنی جدید با فونت b nazanin و اندازه ۲۰px و رنگ سفید ایجاد و آیتم های منو رو با فاصله ۸فضای خالی (space) بنویسید.
و سپس استایل زیر رو به متن بدین :
حال باید به همچین نتیجه ای رسیده باشید :
در آخر این سه لایه (menu-bg و icon و متن منو) را انتخاب کنید و اون ها رو در یک group جدید با نام menu قرار دهید.
خب خسته نباشید.فایل رو ذخیره کنید و از نرم افزار خارج شوید، در جلسه بعد به ادامه آموزش می پردازیم.
