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

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



  آیا می دانید میانگین رضایت دانشجویان سون لرن از دوره ها، بیش از 94% می باشد!

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

27065 ۷ تیر ۹۲

در جلسه قبل از این آموزش، تا قسمت Sidebar سایت پیش رفتیم در این جلسه قسمت Content یا همان مطالب و پانوشت footer را طراحی خواهیم کرد. پس با ما همراه باشید.

قسمت content

در ابتدا تصاویر مورد استفاده در این جلسه را دانلود کرده و در پوشه images قالب قرار دهید.

فایل psd طرح را باز کنید تا کار را شروع کنیم :

1.ابتدا با استفاده از ابزار rounded rectangle tool یک مستطیل با ابعاد زیر ایجاد کنید و آن را در وسط بین دو بلوک قرار دهید.

2.گروه block را باز کرده و بر روی لایه block-bg کلیک راست کنید و گزینه copy layer style رو انتخاب کنید :

3.سپس بر روی لایه مطلب (shape 7) کلیک راست کنید و paste layer style رو انتخاب کنید

4. یک لایه متنی جدید ایجاد کنید با عنوان " عنوان مطلب " فونت b nazanin ، اندازه ی 24px و رنگ سیاه.

5. با ابزار rounded rectnangle tool یک مربع با ابعاد 150 * 150 ایجاد کنید و آن را در پایین عنوان مطلب قرار دهید

نکته : اگر لایه ای که ایجاد کردید دارای استایل است بر روی لایه کلیک راست کنید و clear layer style رو انتخاب کنید

رنگ لایه را به #cdcdcd تغییر دهید .

6. یک لایه متنی جدید ایجاد کنید با عنوان " بدون تصویر بند انگشتی" رنگ و آن را #546995، فونت entezare zoohor 3 و اندازه 36px درون لایه قرار دهید.

7. یک لایه متنی جدید دیگر با عنوان " متن مطلب در این جا قرار می گیرد" ، با رنگ سیاه فونت Tahoma و اندازه 14px ایجاد کنید و آن را در سمت چپ تصویر بند انگشتی قرار دهید.

8. با ابزار rounded rectangle tool یک مستطیل با ابعاد زیر ایجاد کنید :

سپس استایل زیر را به آن بدهید :

9. یک لایه متنی دیگر ایجاد کنید با فونت b naznin و رنگ #7b7b7b و اندازه 24px و با عنوان "ادامه مطلب" و ان را درون لایه ای که ر مرحله قبل ایجاد کردیم قرار دهید.

10. با ابزار rounded rectangle tool یک مستطیل با ابعاد زیر ایجاد کنید

سپس رنگ ان را #d2d2d2 قرار دهید .

11. سه تصویر date , auther و comments را وارد فایل کنید و آن ها را با فاصله تقریبا 150px از هم در لایه ای که در مرحله قبل ایجاد کردیم قرار دهید :

12. سپس در کنار آیکون ها یک لایه متنی جدید با فونت Tahoma و اندازه 14px و رنگ # 255497 با عناوین زیر ایجاد کنید :

مقداری آیکون نظرات و نوشته آن را به سمت چپ بکشید

13. همه لایه هایی که در این جلسه ایجاد کرده اید را با نگه داشتن SHIFT انتخاب کنید و آن ها را در یک گروه جدید با نام post قرار دهید.

قسمت footer

1.با ابزار rectangle tool یک مستطیل با ابعاد زیر ایجاد کنید

2. رنگ لایه را به #366995 تغییر داده و آن را در زیر قسمت content قرار دهید

3. یک لایه متنی با فونت b nazanin و اندازه 24px و رنگ سفید مانند تصویر زیر ایجاد کنید

4.این دولایه را با هم در یک گروه جدید با نام footer قرار دهید.

بسیار خب کار ما به پایان رسید، فایل را ذخیره کنید و از نرم افزار خارج شوید،

در جلسه بعد به تکه تکه (slice) کردن قالب خواهیم پرداخت، و تصاویر مورد نیاز را از قالب خارج خواهیم کرد.

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

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

  • ‏‏

    سلام
    درصورت امکان راهنمایی کنیدکه چطورازووردpdfتهیه کنیم
    باتشکر

    • ‏‏
      سجاد دریس(۱۰ تیر ۱۳۹۲)

      سلام.
      از منوی file گزینه save as رو انتخاب کنید و در پنجره ای که باز میشه، save as type رو PDF قرار بدین.

  • ‏‏

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

    • ‏‏
      سجاد دریس(۱۰ تیر ۱۳۹۲)

      سلام.
      مشکل از پلاگینیه که فایل های pdf رو ایجاد میکنه.
      فعلا دانلود نکنید تا مشکلش رو برطرف کنیم.

  • ‏‏
    Shahin-Sorkh(۲۰ تیر ۱۳۹۲)

    سلام سجاد جان خسته نباشی
    اقا یه نظر کلی درباره این بده مرسی:
    http://upload7.ir/images/77176094368743588237.jpg

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

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

  • ‏‏

    عالی

  • ‏‏

    سلام دوستان
    من توی کار با فتوشاپ یه مشکل کوچولو دارم
    متن رو وقتی روی یه لایه دیگه مثلا content میذارم، خوب و عالیه؛ ولی وقتی روی مثلا footer میذارم متن رو نشون نمیده
    توی جاهای دیگه هم این مشکل رو داشتم
    مشکل از کجاست؟
    عکس ها رو ببینید:
    http://upload7.ir/images/53790972478853249998.jpg
    http://upload7.ir/images/14313978720527847020.jpg

    ممنونم

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

      سلام.
      احتمالا مشکل از ترتیب لایه هاست
      ترتیب لایه ها باید مانند تصویر زیر باشه.

  • ‏‏

    ممنون سجاد جان، درست شد
    فقط دوتا سوال دیگه دارم، ببخشید که خیلیییی مبتدیانه هستن 😕

    1. وقتی یه متن میخوام بنویسم، دورش یه کادر اندازه گیری میفته، اونو چجوری غیرفعال/فعال کنم؟؟
    http://upload7.ir/images/83279451403806690673.jpg

    2. الان طرحم کاملا شبیه طرح شماست فقط لایه content رو که با ابزار rectangle tool و اندازه های 1024 و 800 باید درست میکردم، فکر کنم ارتفاعش رو کم گرفتم، آخه فوتر من از پایین بکگراند خیلی فاصله داره، حالا این لایه رو چطوری باید بزرگش کنم؟؟ هرکاری کردم نتوسنتم ارتفاعش رو زیاد کنم

    ممنون

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

      سلام.
      1. وقتی میخوای یه متنی رو بنویسی بعد از انتخاب کردن ابزار type، جایی که میخوای متنت قرار بگیره کلیک کن و شروع کن به نوشتن، در این صورت این کادراندازه گیری ظاهر نمیشه.
      اما وقتی مثلا میخوای که متنت در یک عرض و ارتفاع معینی قرار بگیره، با کشیدن و رها کردن، یک عرض و ارتفاع برای کادر متنی ایجاد میکنی. که در این صورت باعث نمایش این کادر میشه.
      2.مهم نیست که دقیقا شبیه طرح من بشه. در ادامه با css اندازه ها دقیق درمیاد.

  • ‏‏

    سلام یه سئوال الان من دارم با آموزش های شما جلو میرم
    فقط یه چیزی مگه قالب با کد های css کار نداره پس این کاری که ما داریم میکنیم با فوتوشاپه که

    آخرش به قالب تبدیل میشه یا نه

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

    سلام .. لطفا pdf هارو اصلاح کنین .. خیلی نیاز دارم .. عکس هارو نشون نمیده ..
    لطفا سریع تر درستش کنین
    مرسی

  • ‏‏

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

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

      شما باید در قسمت حلقه فقط تصویر و عنوان مطلب رو نمایش بدین،یا مثلا فقط عنوان مطلب رو نمایش بدین.برای حذف کردن خلاصه مطالب این کد the_excerpt(); و برای برداشتن متن کامل مطلب the_content رو حذف کنید.

  • ‏‏

    سلام یه سوال دارم شاید ابتدایی باشه ولی ممنون میشم جواب بدین
    من تصویرارو که وارد فایل میکنم تو یه صفحه جدا باز میشه من اونارو cut میکنم بعد تو صفحه اصلی paste میکنم آیا کار من درسته یا روش دیگه ای داره؟
    و اینکه چجوری تصویرارو با فاصله 150px بزارم یعنی فاصلشو چجوری تعیین کنم
    ممنون

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

      سلام.
      1. مشکلی نیست، این روش هم درسته.
      2. زیاد فرقی نمیکنه، کمتر یا بیشتر شد بعدا تو html کردن درستش میکنیم. اما واسه دقیقتر شدن می تونید از ابزار خط کش استفاده کنید.

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

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

    ورود به سایت

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

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

    عبارت :
    7LearnTelegram