illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

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



  آیا می دانید تا کنون 6339 نفر در 14 دوره آموزشی سون لرن ثبت نام کرده اند !

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

44880 ۲۹ خرداد ۹۲

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

خیر. این قالب یه قالب 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 ** استفاده کردم. که همراه فایل هایی که دانلود کردید وجود داره

نکته :

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



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 قرار دهید.
خب خسته نباشید.فایل رو ذخیره کنید و از نرم افزار خارج شوید، در جلسه بعد به ادامه آموزش می پردازیم.
اگر سوالی براتون پیش اومده در بخش نظرات مطرح کنید.

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها 110 دیدگاه برای این مطلب ارسال شده است. نظردهی برای این مطلب بسته شده است .

  • ‏‏

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

  • ‏‏

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

    • ‏‏
      سجاد دریس(۷ اردیبهشت ۱۳۹۳)

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

  • ‏‏

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

    • ‏‏
      سجاد دریس(۷ اردیبهشت ۱۳۹۳)

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

  • ‏‏

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

    • ‏‏
      سجاد دریس(۷ اردیبهشت ۱۳۹۳)

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

  • ‏‏

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

  • ‏‏

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

  • ‏‏
    Hamideh Amani Azad(۱۰ اردیبهشت ۱۳۹۳)

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

  • ‏‏

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

  • ‏‏

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

    • ‏‏
      لقمان آوند(۱۲ خرداد ۱۳۹۳)

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

      • ‏‏

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

  • ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

    :: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
    برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
    عضویت/ ورود سریع با :
    در حال اتصال ...

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram