/
  • آموزش طراحی قالب با فتوشاپ و ایمیج ری دی

  • صفحه‌ها (2):
  • ارسال پاسخ   امتیاز موضوع:
    • 2 رأی - میانگین امیتازات: 4.5
    • 1
    • 2
    • 3
    • 4
    • 5

    حالت موضوعی | حالت خطی آموزش طراحی قالب با فتوشاپ و ایمیج ری دی
    نویسنده پیام
    molana آفلاین
    چالیست - chalist
    *******

    ارسال‌ها: 1,764
    تاریخ عضویت: ۱۳۸۷ آذر ۳۰
    اعتبار: 60
    تشکرها : 1644
    ( 1550 تشکر در 1015 ارسال )
    ارسال: #1
    آموزش طراحی قالب با فتوشاپ و ایمیج ری دی
    دانلود به صرت PDF
    بخش اول : [تصویر:  54e245dddec91a57a7ece88e777c19af4g.jpg]


    ---------------------------------------------------------------------

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

    اگه بچه ها مایل بودن ادامه می دیم.
    Blush
    برای یادگیری بیشتر و بهتر این آموزش باید حداقل با html و css آشنا باشین.

    ابتدا یه پروژه جدید ایجاد می کنم در ابعاد سایتمون (800x600 یا 1024x768 و .... هر اندازه ای که دلتون می خواد )

    من اندازه 1000 در 650 رو انتخاب کردم (البته عرض خیلی مهم نیستش، چون ممکنه مطالب زیاد بشه و عرضتون هم بیشتر بشه...

    چندان تاثیری تو این روشی که در پیش داریم نداره...
    (دقت کنید که ریزولیشن 72 باشه )

    یه رنگ پیش فرض انتخاب کنید برای کل سایت
    من رنگ e3e3e3# رو انتخاب کردم.

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

    اندازه لوگوی سایت رو در نظر بگیرید. برای نمونه من اندازه 1000 در 150 رو انتخاب می کنم.
    بنابراین می رین به منوی view > new guide... و گزینه Horizontal رو انتخاب کرده و عدد 150px رو وارد می کنید.

    [تصویر:  1.jpg]

    ( می شه با دست هم یه خط کمکی کشید، ولی از اونجایی که ما می خوایم کارمون دقیق باشه، از این روش استفاده می کنیم)
    بعدی منوی سمت راست و چپ. هرکدوم با عرض طول 180 و عرض صد در صد (می تونید یه اندازه ابتدایی بدید مثلا 100 پیکسل)
    از همون روش قبلی خطوط کمکی رو رسم می کنیم. view > new guide...

    [تصویر:  3.jpg]

    فاصله بین تمامی پنجره های ما 10 پیکسل هستند
    پس فاصله رو هم جدا می کنیم از تیبل ها...
    اندازه های ما به این صورت در میاد:

    [تصویر:  4.jpg]

    بخش های کاری ما هم این جوریه:

    [تصویر:  5.jpg]

    اگه به دردتون می خوره ادامه بدم...
    این بخش خیلی جالب نبود و بیشتر در مورد کل قالب بود....

    در قسمت های بعدی با نکات جالب تر و کاربردی تری مواجه می شین و یاد می گیرین...
    __________________________________________________________________________
    همه جوره اش رو داریم ظاهرن
    (آخرین ویرایش در این ارسال: ۱۳۸۷ دي ۹ ۱۲:۵۲ صبح، توسط molana.)
    ۱۳۸۷ دي ۳ ۱۰:۳۶ عصر
    یافتن ارسال‌ها WWW پاسخ با نقل قول
     تشکر شده توسط : Na3r Alimokhlesi admin amir.s ahmadi81 HiddeN payam
    Na3r آفلاین
    ناصر خلقی
    *****

    ارسال‌ها: 412
    تاریخ عضویت: ۱۳۸۷ دي ۳
    اعتبار: 11
    تشکرها : 257
    ( 576 تشکر در 308 ارسال )
    ارسال: #2
    RE: آموزش طراحی قالب با فتوشاپ و ایمیج ری دی
    عالیه

    منتظر ادامه آموزشتون هستیم
    ۱۳۸۷ دي ۳ ۱۱:۳۴ عصر
    یافتن ارسال‌ها پاسخ با نقل قول
     تشکر شده توسط :
    Alimokhlesi آفلاین
    مدیر کل
    **********

    ارسال‌ها: 457
    تاریخ عضویت: ۱۳۸۷ آذر ۲۵
    اعتبار: 13
    تشکرها : 601
    ( 1126 تشکر در 412 ارسال )
    ارسال: #3
    RE: آموزش طراحی قالب با فتوشاپ و ایمیج ری دی
    واقعا عالیه
    من خودم تا آخرشو پی گیری می کنم
    Smile
    __________________________________________________________________________
    علم تاج افتخار دنیا و یادگار پس از مرگ است
    ۱۳۸۷ دي ۴ ۰۹:۵۸ صبح
    یافتن ارسال‌ها WWW پاسخ با نقل قول
     تشکر شده توسط :
    ahmadi81 آفلاین
    عضو
    ***

    ارسال‌ها: 68
    تاریخ عضویت: ۱۳۸۷ دي ۱
    اعتبار: 1
    تشکرها : 73
    ( 76 تشکر در 34 ارسال )
    ارسال: #4
    Bug RE: آموزش طراحی قالب با فتوشاپ و ایمیج ری دی
    چه جالب من تغریبا فوتوشاپ بلدم (70%) ولی نمیدونستم میشه یه قالب سایت باهاش طراحی کرد فقط فکر میکردم دگمه های مورد نظر میشه درست کرد .
    (فقط خواهشا ادامه دار باشه Tongue)
    موفق باشید
    __________________________________________________________________________
    آن که می خواهد روزی پریدن را بیاموزد نخست باید ایستادن، راه رفتن، دویدن و بالا رفتن آموزد، پرواز را با پرواز آغاز نمی کنند
    ۱۳۸۷ دي ۴ ۰۱:۳۹ عصر
    یافتن ارسال‌ها پاسخ با نقل قول
     تشکر شده توسط :
    molana آفلاین
    چالیست - chalist
    *******

    ارسال‌ها: 1,764
    تاریخ عضویت: ۱۳۸۷ آذر ۳۰
    اعتبار: 60
    تشکرها : 1644
    ( 1550 تشکر در 1015 ارسال )
    ارسال: #5
    RE: آموزش طراحی قالب با فتوشاپ و ایمیج ری دی
    بخش دوم:

    قبل از همه چی اعلام کنم که یه تغییر کوچولو تو کل کار دادم و اون اینه که اون بخش آبی رنگ که قرار بود بخش های ما تو اون قرار بگیره رو حذف کردم... بنا به دلایلی که شاید در طول آموزش بتونم توضیح بدم بهتون...

    یه نکته دیگه این که سعی می کنم میانبر های صفحه کلید رو هم بنویسم تا اونایی که عادت نکردن، کم کم تمرین کنن برای اینکه بیشتر با صفحه کلید دوست بشن، چون با این کار سرعتشون چن برابر می شه:wink:

    ====================

    ادامه :

    طراحی لوگو با خودتونه... با هر شکل و هر قیافه ای که دلتون می خواد.

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

    من یه کار آماده داشتم که از اون استفاده کردم (چون حوصله طراحی لوگو ندارم:crySmile

    می رسیم به طراحی منوی بالای سایت:

    رنگ پس زمینه رو 8f8f8f انتخاب می کنم و برای این که کمی برجسته و شیشه ای به نظر بیاد، از یه لایه شفاف رنگ سفید در بخشی از کار استفاده می کنم به این صورت :

    [تصویر:  1.jpg]

    چطوری :
    برای سلکت کردن لایه، کافیه کنترل رو نگه دارین و روی thumbnails لایه مورد نظرتون یه کلیک بکنید تا فقط اون بخش مورد نیازتون انتخاب بشه، دقیقاًکنترل رو نگه دارین و اینجا کلیک کنید:

    [تصویر:  2.jpg]

    بعد که کلیک کردین با ابزار M و نگه داشتن Alt اون بخشی رو که نمی خواین (یعنی نصف منو ) رو Deselect می کنید.
    بعد یه لایه جدید ایجاد می کنید.
    و در لایه جدید، بخش سلکت شده رو پر از رنگ می کنید (به ترتیب این دکمه ها رو بزنید : d و x و Ctrl+Delete )

    بعد برای اینکه حالت شیشه ای پیدا کنه، Opacity لایه رو به بیست درصد یا سی درصد تغییر می دید ( که این کار رو هم می تونید با زدن کلید های 2 یا 3 انجام بدید ) البته باید دقت کنید که ابزار v فعال باشه.

    حاصل کل کار می شه همچین چیزی:

    [تصویر:  3.jpg]

    می رسیم به Divider :
    حالا این که گفتم یعنی چی؟
    راستش خودمم نمی دونم ، برای بالا رفتن کلاس کار هم شده بد نیست چن تا واژه فرنگی پیوست کنم تو کارCool

    منظورم از Divider یه خط عمودی هستش که توی منوی بالای تارنما، کارش جدا کردن بخش ها از همدیگه ست.
    به عبارتی منظورم اینه:

    [تصویر:  4.jpg]

    یه خط می کشیم ( با ابزار u و line ) با ضخامت 1 پیکسل به اندازه عرض منو عمود بر منو روی منو:
    تنظیمات زیر رو انجام بدین:

    رنگ : به رنگ پس زمینه منو
    و :

    [تصویر:  5.jpg]

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

    ( این رو هم بگم که می تونید کلا این کار رو انجام ندید و منو ها رو با یه کاراکتر " | " از هم جدا کنید و منو هاتون هم تکست باشه و با CSS روشون کار کنید. ولی این روش پایه هست برای انجام کارهای دیگه، مثل همین منوی مجید آنلاین خودمون )

    نمای کلی کار می شه مثل این :

    [تصویر:  6.png]


    خوب دوستان
    تا بخش بعدی
    __________________________________________________________________________
    همه جوره اش رو داریم ظاهرن
    ۱۳۸۷ دي ۴ ۰۳:۴۱ عصر
    یافتن ارسال‌ها WWW پاسخ با نقل قول
     تشکر شده توسط : admin HiddeN
    molana آفلاین
    چالیست - chalist
    *******

    ارسال‌ها: 1,764
    تاریخ عضویت: ۱۳۸۷ آذر ۳۰
    اعتبار: 60
    تشکرها : 1644
    ( 1550 تشکر در 1015 ارسال )
    ارسال: #6
    RE: آموزش طراحی قالب با فتوشاپ و ایمیج ری دی
    حالا می رسیم به بخش منو های کاربری یا منوهای دیگه ای که سمت راست و چپ تارنمای های گونانگون نمایش داده می شه.
    این گونه پنجره ها، یه هدر (تیتر) دارن که نام پنجره رو می نویسن درش.
    و یه سلول هم دارن که مطالب در اون قرار می گیرن.

    می تونید هدر رو به یک رنگ و سلول مطالب رو به رنگ دیگه ای در بیارین و دور هر کدوم یه خط بندازین (border =1)
    این ساده ترین راهه

    راه حل دیگه اینه که یکی از گوشه هارو گرد کنید یا تا کنید یا .... و بقیه رو ساده.
    راه بعدی دو تا گوشه بالایی...
    بعدی هم هر چهار تا گوشه...

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

    از اونجایی هم که بنده یه آدم کاملاً تنبل هستم، همه راه ها رو انتخاب می کنم Big Grin

    ابتدا با خطوط راهنما 30 پیکسل از بالای پنجره (هدر) جدا می کنیم و 20 پیکسل از پایین پنجره ( منوی view گزینه New Guide ). به این صورت :

    [تصویر:  1.png]

    به کل پنجره یه stroke یه پیکسلی به رنگ سیاه می دیم( یا هر رنگی که دلتون می خواد)
    بعد بخش هدر رو سلکت می کنیم ( یعنی این قسمت رو ):

    [تصویر:  2.gif]

    پس از سلکت، یه لایه جدید ایجاد می کنید و در منطقه سلکت شده، یه شیب رنگ می ریزید ( از 8f8f8f به d8d8d8 )
    همین بلا رو سر بخش زیری پنجره هم می یاریم ( یعنی این بخش ):

    [تصویر:  3.gif]

    شکل کار به این حالت در می یاد :

    [تصویر:  4.gif]

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

    [تصویر:  5.gif]

    و برای اینکه خیلی خشک و خالی نباشه ( و احتمالاً این حالتی رو که می خوام بگم تو بسیاری از تارنما ها دیدید و الان شاید تو کف باشین که چه جوری می شه همچین چیزی ساخت ) یه لایه دید ایجاد می کنیم و 30 پیکسل از بخش بالایی بخش مطالب رو سلکت می کنیم ( یعنی این بخش ):

    [تصویر:  6.gif]

    بعد یه شیب رنگی می دیم ( از c8c8c8 به رنگ خود بخش مطالب که مال من cccccc هستش)
    می شه اینجوری :

    [تصویر:  7.gif]

    نمای کل کار می شه این :

    [تصویر:  8.gif]

    و این کوچولو رو که ساختیم، تو سایر تیبل ها هم جایگزین می کنیم.
    نمای سرتاسری پوسته مون (با یه کم بازی با رنگ ها Ctrl + u) می شه این:

    [تصویر:  9.gif]

    شاد باشید همگی
    __________________________________________________________________________
    همه جوره اش رو داریم ظاهرن
    ۱۳۸۷ دي ۶ ۰۳:۰۷ عصر
    یافتن ارسال‌ها WWW پاسخ با نقل قول
     تشکر شده توسط : amir.s HiddeN
    ahmadi81 آفلاین
    عضو
    ***

    ارسال‌ها: 68
    تاریخ عضویت: ۱۳۸۷ دي ۱
    اعتبار: 1
    تشکرها : 73
    ( 76 تشکر در 34 ارسال )
    ارسال: #7
    Bug RE: آموزش طراحی قالب با فتوشاپ و ایمیج ری دی
    سلام . ممکنه این آموزش خوب ومفید به صورت pdf ارائه کنید (تا بتونم سر فرصت و با دقت بیشتر بخونمش ) البته فکر کنم برای همه مفید باشه .
    موفق باشید
    __________________________________________________________________________
    آن که می خواهد روزی پریدن را بیاموزد نخست باید ایستادن، راه رفتن، دویدن و بالا رفتن آموزد، پرواز را با پرواز آغاز نمی کنند
    ۱۳۸۷ دي ۷ ۰۳:۳۸ عصر
    یافتن ارسال‌ها پاسخ با نقل قول
     تشکر شده توسط :
    molana آفلاین
    چالیست - chalist
    *******

    ارسال‌ها: 1,764
    تاریخ عضویت: ۱۳۸۷ آذر ۳۰
    اعتبار: 60
    تشکرها : 1644
    ( 1550 تشکر در 1015 ارسال )
    ارسال: #8
    RE: آموزش طراحی قالب با فتوشاپ و ایمیج ری دی
    (۱۳۸۷ دي ۷ ۰۳:۳۸ عصر)ahmadi81 نوشته شده توسط:  سلام . ممکنه این آموزش خوب ومفید به صورت pdf ارائه کنید (تا بتونم سر فرصت و با دقت بیشتر بخونمش ) البته فکر کنم برای همه مفید باشه .
    موفق باشید

    به روی چشم
    در اولین فرصت
    __________________________________________________________________________
    همه جوره اش رو داریم ظاهرن
    ۱۳۸۷ دي ۷ ۰۳:۴۲ عصر
    یافتن ارسال‌ها WWW پاسخ با نقل قول
     تشکر شده توسط :
    ahmadi81 آفلاین
    عضو
    ***

    ارسال‌ها: 68
    تاریخ عضویت: ۱۳۸۷ دي ۱
    اعتبار: 1
    تشکرها : 73
    ( 76 تشکر در 34 ارسال )
    ارسال: #9
    Bug RE: آموزش طراحی قالب با فتوشاپ و ایمیج ری دی
    سلام . چرا ادامه نمیدین Sad
    __________________________________________________________________________
    آن که می خواهد روزی پریدن را بیاموزد نخست باید ایستادن، راه رفتن، دویدن و بالا رفتن آموزد، پرواز را با پرواز آغاز نمی کنند
    ۱۳۸۷ دي ۱۰ ۰۴:۳۷ عصر
    یافتن ارسال‌ها پاسخ با نقل قول
     تشکر شده توسط :
    molana آفلاین
    چالیست - chalist
    *******

    ارسال‌ها: 1,764
    تاریخ عضویت: ۱۳۸۷ آذر ۳۰
    اعتبار: 60
    تشکرها : 1644
    ( 1550 تشکر در 1015 ارسال )
    ارسال: #10
    RE: آموزش طراحی قالب با فتوشاپ و ایمیج ری دی
    امروز در مورد منوها براتون توضیح می دم
    منوهای بالای سایت

    می خوایم جوری طراحی کنیم که زمانی که موس روشون می ره رنگ پس زمینه عوض بشه

    حرفه ای ها م یدونن که برای استفاده از این تکنیک باید از خاصیت موس آور (Mouse Over) استفاده کنیم. خوب حالا چی هست این موس آور؟؟؟

    الان برای منوی ها، ما عکس داریم درسته؟
    خوب کاری که باید بکنیم اینه که به مرورگر کاربر بفهمونیم که وقتی موس طرف (کاربر) تشریف آورد روی منوی ما، این عکسی رو که داریم، جاش رو با یه عکس دیگه عوض کن

    و وقتی موسش از روی منو رفت کنار، عکس قبلیه رو برگردون
    (البته برای استفاده استاندارد باید از سی اس اس ها استفاده کنید CSS)

    ما کاری به استایل شیت ها (CSS) نداریم فعلا. فقط و فقط طراحی

    خوب چی کار باید بکنیم؟
    الان عرض می کنم خدمتتون

    این منوی ماست :

    [تصویر:  1.png]

    ابتدا محل منو ها رو با یه ابزاری ( هر چی دوست دارین ) select می کنیم.
    مثل شکل دو:

    [تصویر:  2.png]

    بعد لایه نوار منو رو انتخاب می کنید و یه Ctrl + J می زنید
    با این کار، منطقه سلکت شده از منو، در یک لایه جدید کپی می شه.

    حالا Ctrl + U می زنید و با رنگ ها بازی می کنید، هر رنگی رو که می خواین اعمال کنید...

    منوهای من این شکلی شدن:

    [تصویر:  3.png]

    یه مشکل دیگه؟؟؟!!!!!

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

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

    دوباره همین کار رو با یه رنگ دیگه انجام می دین :
    اول Ctrl + J بعش Ctrl + U به همین راحتی:

    [تصویر:  4.png]
    خوب، تا حالا که خوب پیش رفتیم

    لایه های جدید رو خاموش می کنیم تا برق زیاد مصرف نشه ( بعدا می فهمین که چی کی کار باید بکنیم )

    =======================================================================

    حتما همیشه با خودتون می گفتین که مسئولین شرکت ادوبی، معصوم که نیستن، پس چرت و پرت هم می گن بعضی وقت ها...
    مثلا این ابزار Slice Tools با میانبر K به چه دردی می خوره؟؟؟؟ خیلی چیز بی خودیه.... و شاید چن تا فحش هم داده باشین بهشون.

    خوب حق دارین
    من هم هیچ وقت نفهمیدم چرا اینو گذاشتن:wink:

    خوب شوخی بسه ( از اون معلم باحال ها هستم که نمی خوام کلاسم خشک باشه ها.....)

    خوب این ابزار خیلی کمکمون خواهد کرد.
    شروع به کار با این ابزار می کنیم.

    این ابزار در واقع تیبل های HTML ما رو می سازن
    یعنی ما این جا قطعاتمون رو مشخص می کنم و شرکت ادوبی یه حال اساسی بهمون می ده و کد HTML تحویل می ده بهمون.

    اون خطوط کمکی که ترسیم کردیم که یادتون؟؟؟
    ازشون کمک می گیریم و خطوط کمکی جدیدی هم ترسیم می کنیم. به این صورت در میاد:

    [تصویر:  5.png]

    بعداً می فهمین چرا به این صورت خطوط کمکی ترسیم کردیم.

    شروع می کنیم به اسلایس بندی ( قطعه قطعه کردن )
    اسلایس های (Slice) ما به این صورت خواهند بود :

    [تصویر:  6.png]

    تعداد اسلایس های ما شد 57 بخش.

    می دونم که خیلی سوال دارین:
    1- اینکه چرا این قدر ریز ریز و هر گوشه رو هم اسلایس کردم؟
    لزوم این کار چی بود؟
    2- به چه دردی می خورن؟
    3- آیا از همش استفاده خواهیم کرد؟ ( اینو جوابش رو الان می دم: نه، خیلی از کارهایی که کردیم، لازم هستن، اما در کار استفاده نمی شن، به زودی می فهمین چرا)

    و ...................

    اما در جلسه بعدی خواهید فهمید که چرا و چکونه...

    به رنگ اسلایس ها دقت کنید:

    [تصویر:  7.png]

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

    به شماره اسلایس ها هم دقت کنید.
    نیازی نیست هیچ ترتیبی رو در اسلایس کردن رعایت کنید.
    خود فتوشاپ به طور پیش فرض و ترتیبی شماره گذاری می کنه

    پس فرقی نداره از چپ شروع کنید یا راست.



    خوب.
    شبتون به خیر
    __________________________________________________________________________
    همه جوره اش رو داریم ظاهرن
    ۱۳۸۷ دي ۱۲ ۰۱:۲۹ صبح
    یافتن ارسال‌ها WWW پاسخ با نقل قول
     تشکر شده توسط : ahmadi81 admin oia amir.s mehdi farokh HiddeN bcmodir
    « قدیمی تر | تازه‌ تر »

  • صفحه‌ها (2):
  • ارسال پاسخ
    پرش به انجمن:


    کاربرانِ درحال بازدید از این موضوع: 1 مهمان
    IranPHP.org | تماس با ما | بازگشت به بالا | بازگشت به محتوا | بایگانی | پیوند سایتی RSS