دانلود به صرت PDF
بخش اول :


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

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

اگه بچه ها مایل بودن ادامه می دیم.

---

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

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

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

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

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

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

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



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



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



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



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

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

عالیه

منتظر ادامه آموزشتون هستیم

واقعا عالیه
من خودم تا آخرشو پی گیری می کنم

چه جالب من تغریبا فوتوشاپ بلدم (70%) ولی نمیدونستم میشه یه قالب سایت باهاش طراحی کرد فقط فکر میکردم دگمه های مورد نظر میشه درست کرد .
(فقط خواهشا ادامه دار باشه )
موفق باشید

بخش دوم:

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

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

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

ادامه :

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

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

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

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

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



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



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

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

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



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

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



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

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



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

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

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




خوب دوستان
تا بخش بعدی

حالا می رسیم به بخش منو های کاربری یا منوهای دیگه ای که سمت راست و چپ تارنمای های گونانگون نمایش داده می شه.
این گونه پنجره ها، یه هدر (تیتر) دارن که نام پنجره رو می نویسن درش.
و یه سلول هم دارن که مطالب در اون قرار می گیرن.

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

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

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

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

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



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



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



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



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



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



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



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



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



شاد باشید همگی

سلام . ممکنه این آموزش خوب ومفید به صورت pdf ارائه کنید (تا بتونم سر فرصت و با دقت بیشتر بخونمش ) البته فکر کنم برای همه مفید باشه .
موفق باشید

(۱۳۸۷ دي ۷ ۰۳:۳۸ عصر)ahmadi81 نوشته :  سلام . ممکنه این آموزش خوب ومفید به صورت pdf ارائه کنید (تا بتونم سر فرصت و با دقت بیشتر بخونمش ) البته فکر کنم برای همه مفید باشه .
موفق باشید

به روی چشم
در اولین فرصت

سلام . چرا ادامه نمیدین

امروز در مورد منوها براتون توضیح می دم
منوهای بالای سایت

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

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

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

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

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

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

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



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



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

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

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



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

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

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

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


خوب، تا حالا که خوب پیش رفتیم

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

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

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

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

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

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

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

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



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

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



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

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

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

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

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



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

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

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



خوب.
شبتون به خیر