WFruit | Fruit Supplier and Wholesale
نمایش نتایج: از 1 به 1 از 1

موضوع: آموزش طراحی سایت | فصل دوم - جلسه 1

  1. Top | #1
    کاربر سایت

    تاریخ عضویت
    Jul 2015
    ورژن ویبولتین
    1
    نوشته ها
    20
    مورد پسند
    9 بار
    اطلاعات
    Windows 7/Server 2008 R2 Chrome 44.0.2403.125
    میزان امتیاز
    0

    پیش فرض آموزش طراحی سایت | فصل دوم - جلسه 1

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

    گرافیک قالب

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

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

    که البته هر قسمت نیز به چند قسمت دیگر شده است، اما اصلی ترین قسمت های هر قالب در طراحی سایت این چهار قسمت است.

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

    جلسه قبل >

    کاربر مقابل از mamerz بابت این پست مفید تشکر کرده است:





  2. گیفت کارت آیتونز

اطلاعات موضوع

کاربرانی که در حال مشاهده این موضوع هستند

در حال حاضر 1 کاربر در حال مشاهده این موضوع است. (0 کاربران و 1 مهمان ها)

موضوعات مشابه

  1. پاسخ: 185
    آخرين نوشته: 2018/06/12, 11:23 PM
  2. پاسخ: 0
    آخرين نوشته: 2014/10/16, 11:02 AM
  3. آموزش ثبت url های سایت به صورت روزانه در بینگ
    توسط MR.Shadow در انجمن آموزش ( غیر از ویبولتین )
    پاسخ: 1
    آخرين نوشته: 2014/07/11, 06:32 PM
  4. پاسخ: 0
    آخرين نوشته: 2012/08/01, 02:24 AM

کلمات کلیدی این موضوع

علاقه مندی ها (Bookmarks)

علاقه مندی ها (Bookmarks)

مجوز های ارسال و ویرایش

  • شما نمیتوانید موضوع جدیدی ارسال کنید
  • شما امکان ارسال پاسخ را ندارید
  • شما نمیتوانید فایل پیوست کنید.
  • شما نمیتوانید پست های خود را ویرایش کنید
  •