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

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



  آیا می دانید با دوره های آموزشی سون لرن می توانید از 0 تا 100 طراحی وب را در منزل فراگیرید!

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

34467 ۲۶ خرداد ۹۲

شروع طراحی


در این جلسه، اقدامات اولیه ای که برای طراحی هر قالبی نیازه انجام بدین رو خواهیم گفت، و همچنین کارهای روتینی که در هر جلسه انجام خواهیم داد، پس حتما این آموزش رو با دقت بخونید :
1. پوشه بندی
قبل از شروع طراحی هر قالبی ابتدا اون قالب رو باید پوشه بندی کنیم،
پس مراحل زیر رو دنبال کنید :
ابتدا یک پوشه با نام قالبتون ایجاد کنید، که در این آموزش من نام قالب رو mytheme قرار میدم.
پوشه های زیر رو هم در داخل پوشه mytheme ایجاد کنید :
images : پوشه ای که در آن تصاویر استفاده شده در قالب قرار گرفته میشه.
css : فایل های css و استایل قالب در این پوشه قرار داده میشه
js : فایل های جاوااسکریپت در این پوشه قرار داده میشه
2. ایجاد فایل های اصلی قالب
هر قالب حداقل دارای دو فایل اصلی است که باید اون ها رو ایجاد کنیم :
index.html : کدهای html ما، که کدهای صفحه اصلی هست در این فایل قرار میگیره
style.css : استایل قالب ما، در این فایل قرار میگیره، این فایل رو در داخل پوشه css ایجاد کنید
پس از ایجاد فایل ها و پوشه ها باید نتیجه ای همانند تصویر زیر داشته باشید :

نکته : هنگام ایجاد فایل index.html حتما unicode آن را بر روی utf-8 قرار دهید

نرم افزار فتوشاپ


ما با استفاده از نرم افزار فتوشاپ گرافیک قالب رو طراحی خواهیم کرد
پس ابتدا برای اینکه نرم افزار فتوشاپ شما با نرم افزار من هماهنگ باشد، پس از باز کردن فتوشاپ مراحل زیر رو انجام دهید :
1. دکمه D رو فشار بدین تا رنگ ها به حالت پیشفرض برگرده
2. طبق تصویر تنظیمات همه ابزارها رو به پیشفرض برگردونید :
3. از منوی edit گزینه preferences و سپس units & rulers رو انتخاب و تنظیمات رو مانند تصویر زیر تغییر دهید

4. حال برای نمایش خط کش از منوی view گزینه rulers رو انتخاب میکنیم.
5. از منوی file گزینه new رو انتخاب کنید و یک فایل جدید با عرض 1100 پیکسل، ارتفاع 1300 پیکسل و رزولوشن 72 ایجاد کنید.
6. فایل psd رو در کنار فایل index.html ذخیره کنید تا همیشه در دسترس باشد.
بسیار خب آموزش این جلسه به پایان رسید، در جلسه بعدی قالبمان را در فتوشاپ طراحی خواهیم کرد.

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

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

  • ‏‏

    سلام سجاد جان
    ممنون بابت زحماتت
    عزیز توی متن آموزش گفتی “عرض 1100 پیکسل، ارتفاع 1300 پیکسل”
    ولی فایل نهایی که انتهای فصل 2 خودت قرار دادی، اندازه هاش 1100 و 1130 هستن!!
    درسته؟

    • ‏‏
      سجاد دریس(۱۷ مرداد ۱۳۹۲)

      سلام.
      خب برای داشتن فضای کافی این اندازه ها رو گفتم.
      در آخر فضای اضافه رو crop کردم.

  • ‏‏

    سلام ممنون از زحماتتون.
    توی همین اموزش گفته بودید که :
    حال برای نمایش خط کش از منوی view گزینه rulers رو انتخاب میکنیم.
    من منوی view رو باز میکنم ولی گزینه rulers روشن نیست.
    من باید چه کارکنم؟ 💡

  • ‏‏

    سلام اموزش خیلی خوبی بود مرسی 😛
    فقط ی مشکل دارم پروندی که در فوتوشاپ به اندازه 1300*1100 درست کردیم باید در فایل index.html قرار بدیم یا باید در فایل css قرار بدیم ؟ لطفا کامل پاسخ دهید مرسی

    • ‏‏
      سجاد دریس(۱ مهر ۱۳۹۲)

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

  • ‏‏

    باسلام وعرض خسته نباشید این اموزش قالب برای وبلاگ است یا سایت ؟؟؟؟؟؟؟؟؟

    • ‏‏
      کیوان علی محمدی(۱۵ آذر ۱۳۹۲)

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

      • ‏‏

        چه جوری میشه بگیدلطفا ؟؟؟؟

        • ‏‏
          کیوان علی محمدی(۱۷ آذر ۱۳۹۲)

          خوب باید فقط کد های وبلاگ مورد نظر رو در جای مناسب این قالب جایگذاری کرد؛احتمالا توی قسمت VIP آموزش کاملش رو داریم.

  • ‏‏

    سلام خسته نباشی . بیشتر گزینه ها برای من غیر فعاله ،یعنی روشن نیست . مثلا همین گزینه ی rulers. باید چیکار کنم . میانبر CTRL + R هم جواب نمیده . 💡

    • ‏‏
      وحید صالحی(۲۹ بهمن ۱۳۹۲)

      ابتدا یه فایل جدید ایجاد کنید سپس CTRL+R رو بزنید…

  • ‏‏

    سلام
    این فایلpsdکه توی قسمت دوم اموزش گفتیدیعنی چی?اصلاچی هست?

    • ‏‏
      لقمان آوند(۲۰ بهمن ۱۳۹۲)

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

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

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

    ورود به سایت

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

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

    عبارت :
    7LearnTelegram