% تخفیف ویژه تخفیف های شگفت انگیز ثبت نام در دوره های برنامه نویسی وب و موبایل رو از دست ندید! (از عید فطر تا پایان خرداد)

آموزش طراحی قالب (فصل دوم - جلسه اول) : طراحی سرصفحه (header)

- visibility ۱۱۰ mode_comment

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

خیر. این قالب یه قالب html هست و با هیچ سیستمی ست نمیشه. در پایان شما باید دست به کار بشید و قالب رو با سیستم موردنظرتون همگام کنید.من فقط طراحی قالب رو آموزش خواهم داد، و به علت اینکه با کد قالب های وبلاگدهی (بلاگفا و میهن بلاگ و...) آشنایی ندارم پس از پایان این سری، قالب رو برای سیستم مدیریت محتوای وردپرس تبدیل خواهم کرد.

بسیار خب حال میریم سراغ آموزش.

گرافیک قالب

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

همانطور که میدونید هر قالب از 4 قسمت اصلی تشکیل شده :

  1. سرصفحه (header)
  2. ستون های کناری(sidebar)
  3. قسمت محتوا(content)
  4. پانوشت (footer)

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

حال تصاویر را در پوشه ی images مربوط به قالب انتقال دهید و فونت ها رو نصب کنید : بسیار خب کارمون را شروع می کنیم : اول فایل psd که در جلسه قبل ایجاد کردیم رو باز کنید : از منوی view گزینه new guide رو انتخاب کنید و طبق تصاویر زیر خط راهنما را ایجاد کنید : و دوباره در این حالت با ایجاد خطوط راهنما فضایی که در وسط قرار دارد برابر با 1024px که عرض استاندارد نمایشگرهای کامپیوتر است.

قسمت پس زمینه

همانطور که می بینید ما در پس زمینه از تصویر استفاده کردیم (pattern) برای اینکه در فتوشاپ تصویری را به pattern تبدیل کنیم کارهای زیر رو انجام دهید 1. از تصاویری که دانلود کردید فایل body-bg با فتوشاپ باز کنید 2. از منوی edit گزینه define pattern رو انتخاب کنید و ok رو بزنید تا تصویر به pattern تبدیل شود. 4. به فایل قالب برگردید 3. بر روی لایه background دابل کلیک و ok کنید تا از حالت قفل خارج شود، سپس دوباره بر روی لایه دابل کلیک کنید تا پنجره blending optoins باز شود و استایل زیر رو بهش بدین

همانطور که می بینید، تصویرمان به patternها اضافه شده است آنرا انتخاب کنید بر روی ok کلیک کنید تا استایلمان اعمال شود. حال بر روی لایه کلیک راست کنید و layer properties رو انتخاب کنید و نام آن را به background تغییر و ok کنید.

قسمت سرصفحه (header)

ابتدا از منوی layer گزینه new و سپس group رو انتخاب کنید و نام آن را header قرار دهید. 1. یک خط راهنمای جدید طبق تصویر زیر ایجاد کنید : 2. ابزار rectangle tool رو انتخاب کنید و طبق تصویر زیر یک مستطیل ایجاد و آن را در قسمت بالای قالب سایت قرار دهید

سپس استایل زیر رو بهش بدین

سپس نام لایه رو به header-bg تغییر دهید 3. ابزار نوشتن (type) رو انتخاب کنید یک متن با رنگ سفید (#ffffff) و اندازه فونت 72px ایجاد کنید، بنده از فونت entezare zohoor 3 ** استفاده کردم. که همراه فایل هایی که دانلود کردید وجود داره

info نکته :

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

4. سپس استایل زیر رو طبق تصویر بهش بدین 5. یک متن دیگر با فونت b yekan و اندازه 30px و رنگ سفید با عنوان "یک سایت دیگر با وردپرس" ایجاد کنید و استایل زیر رو بهش بدین : محل قرارگیریش هم مانند تصویر زیر : 6.حال آیکن های شبکه های اجتماعی رو وارد فایل کنید و در بالا سمت چپ header مانند تصویر زیر قرار دهید. سپس استایل زیر رو بر روی همه آن ها اعمال کنید در قسمت Layers دو لایه متنی مربوط به لوگو رو با نگه داشت دکمه CTRL انتخاب کنید و سپس CTRL + G رو بزنید تا این دو لایه در یک گروه قرار گیرند، حال در قسمت لایه ها بر روی group1 کلیک راست کنید و group properties رو انتخاب کنید و نام گروه رو به logo تغییر بدین. همین کار رو برای آیکون شبکه های اجتماعی انجام بدین و نام گروه رو sn-icons قرار بدین حال opacity گروه sn-icons رو به 50 درصد تغییر بدین. حال به ایجاد قسمت جستجو میرسیم : 1. ابزار rounded rectangle tool رو انتخاب کنید و یک مربع با اندازه های زیر ایجاد کنید : و آن را در پایین سمت چپ header قرار دهید. سپس استایل های زیر رو به اون بدین. سپس یک متن با فونت b nazinin و اندازه ی 18px و رنگ سفید ایجاد کنید و آن را مانند تصویر زیر در داخل باکس جستجو قرار دهید : حال تصویر search-btn را وارد فایل کنید و آن را داخل باکس جستجو سمت چپ آن قرار دهید. حال این سه لایه (shape1 و لایه متنی و تصویر) رو با هم انتخاب کنید و آن ها را در داخل یک group جدید با نام search-box قرار دهید.

منوی سایت

حال به ایجاد قسمت منوی سایت رسیدیم. ابتدا یک خط راهنما طبق تصویر زیر ایجاد کنید : 1. ابزار rectangle tool رو انتخاب کنید و یک مربع با ابعاد زیر ایجاد کنید : و آنرا در زیر header و در بین خطوط راهنما قرار دهید، سپس نام آنرا به menu-bg تغییر دهید. 2. بر روی لایه ی header-bg کلیک راست کنید و گزینه copy layer style رو انتخاب کنید 3. سپس بر روی لایه menu-bg کلیک راست کنید و گزینه paste layer style رو انتخاب کنید تا استایل لایه header-bg بر روی لایه menu-bg اعمال شود 4. سپس استایل inner-shadow آنرا مانند تصویر زیر ایجاد کنید : 5. حال تصویر home-icon را وارد فایل کنید و در ابتدای منو قرار دهید 6. حال یک لایه متنی جدید با فونت b nazanin و اندازه 20px و رنگ سفید ایجاد و آیتم های منو رو با فاصله 8فضای خالی (space) بنویسید. و سپس استایل زیر رو به متن بدین : حال باید به همچین نتیجه ای رسیده باشید : در آخر این سه لایه (menu-bg و icon و متن منو) را انتخاب کنید و اون ها رو در یک group جدید با نام menu قرار دهید. خب خسته نباشید.فایل رو ذخیره کنید و از نرم افزار خارج شوید، در جلسه بعد به ادامه آموزش می پردازیم. اگر سوالی براتون پیش اومده در بخش نظرات مطرح کنید.

comment دیدگاه کاربران
شیرو

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

سجاد دریس

سلام.
فایلها مشکلی ندارن.
دوباره دانلودشون کنید.

laya25

به مستطیل هدر استایل دادم! ولی الان رنگ هدرم اصلا آبی نمیشه در ضمن اون gradient editor رو چجوری بیارم ؟ اون تیک color overlay رو هم که شما زدین من میزنم هدرم قرمز میشه چیکار کنم؟کسی نیست جواب بده؟! ای بابا یکی جواب بده دیگه

سجاد دریس

سلام.
1.بر روی تصویر گرادینت کلیک کنید پنچره ی gradient editor باز میشه.
2.خب بد از زدن تیکش باید color رو تغییر بدین، روی مربعی که قرمزه (تو همون صفحه) کلیک کنید و رنگ رو تغییر بدید.

laya25

منظورتون از تصویر گرادینت کدومه؟
رنگ رو تغییر هم میدم بازم قرمزه فقط هاله ای از اون رنگی که تغییر میدم دور رنگ قرمز می افته
کلافه شدم

سجاد دریس

1. تو پنجره ی gradient overlay منظورم بود. اونجا یه تصویر گرادینتی هست روش کلیک کنید تا بتونید گرادینت رو تغییر بدین.
2. چک کنید بقیه گزینه های پنجره ی color overlay شبیه تصویری هست که توی پست قرار دادم…

laya25

پیدا کردم
رنگشم عوض کردم فقط اینکه تو اون تصویر گرادینت مشکیه آبی نشد
تو پنجره gradient editor هم مشکیه

سجاد دریس

دوست عزیز بیشتر دقت کنید، آموزش مشکلی نداره. از اول بخونید ببینید کجای کار اشتباه کردین.

laya25

ممنون از راهنماییتون
مشکل نرم افزار فتوشاپمه بیشتر گزینه هایی که تو پست گذاشتینو اصلا نداره
دوباره باید نصبش کنم
ایندفعه بیشتر دقت میکنم
بازم ممنونم

سجاد دریس

از فتوشاپ cs3 به بالا استفاده کنید.
خواهش می کنم.

مهدیار

سلام
سایت خیلی خوبی دارید .
من بخش css و html رو که از قبل هم کمی بلد بودم ، خوندم . خوب توضح داده بودید.
اما این بخش رو که من بلد نیستم و اولین بار هست که کار میکنم رو شما خوب توضیح ندادید.یه چیزایی گفتید که آدم گیج میشه.

Hamideh Amani Azad

عکسهای شبکه های اجتماعی رو چطور در قسمت هدر وارد کنیم؟

سجاد دریس

با درگ کردن تصویر

محمد

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

hamraze

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

لقمان آوند

باید نسخه ی فتوشاپی رو استفاده کنید که با زبان فارسی سازگار باشه . نسخه ی فتوشاپ شمه چیه ؟

hamraze

فتوشاپ CS6 بود.ممنون از راهنمایی تون فتوشاپ رو عوض کردم مشکل برطرف شد

ارسال نظرات

کاربر گرامی، امکان ارسال نظر و پشتیبانی برای دوره های مجازی فقط برای دانشجویان این دوره امکان پذیر می باشد.

1 3 4 5