آموزش کامل ساخت قالب سایت با Photoshop و ImageReady

وضعیت
موضوع بسته شده است.
سلام به همه
می خوام آموزش طراحی قالب سایت یا وبلاگ رو بدم.

به روش خودم:d

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

اما به هر حال می خوام یه کاری بکنم دیگه:)

بخش اول رو می زارم

اگه خوشتون اومد بگین ادامه بدم

شاد باشید همگی
 
برای یادگیری بیشتر و بهتر این آموزش باید حداقل با 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


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

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

شاد باشید همگی مجید آنلانی های عزیز
 
آخرین ویرایش:

MeyGraph

دستیار مدیر انجمن گرافیک وکتوری
Very Nice من که عاشق Design وب با فتوشاپ و ایمج ردی هستم ! ادامه بده عزیز

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

AhadGD

Well-Known Member
محمد جان خیلی کار خوبی کردی ادامه بده که دارم لذت می برم...
راستی محمد جان عکسا نمایش داده نمی شه..
بای
 
محمد جان خیلی کار خوبی کردی ادامه بده که دارم لذت می برم...
راستی محمد جان عکسا نمایش داده نمی شه..
بای

حق با شماست

از همه معذرت می خوام
با اینکه چن جا آپلودشون کردم، حتی تو آپلودسنتر سایت ، ولی بازم نشد که نشد...

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

بازم ببخشید
 

mahoo painter

مدیر انجمن گرافیک وکتور
حق با شماست

از همه معذرت می خوام
با اینکه چن جا آپلودشون کردم، حتی تو آپلودسنتر سایت ، ولی بازم نشد که نشد...

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

بازم ببخشید


سلام

بهتره برای موندگاری اموزش از اپالود سنتر عکس مجید انلاین استفاده کنید
kaos-bear08.gif


http://www.img.majidonline.com

159fs183645.gif
 
بخش دوم

بخش دوم:

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

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

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

ادامه :

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

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

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

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

رنگ پس زمینه رو 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



خوب دوستان
باور کنید خیلی خوابم میاد و فردا (یعنی امروز ) ساعت 8 صبح هم باید برم سر کار...
الانم ساعت یک و نیمه صبحه

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

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

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

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

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

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

ابتدا با خطوط راهنما 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


ادامه برنامه تا فردا شب ان شالله
شاد باشید همگی
 
سلام
آقا محمد آموزشت حرف نداره, من امروز تا بخش 2 خوندم و منتظر بخش 3 و آموزش های دیگر شما هستم
ممنون
 
ببخشید بچه ها این چن روزه حسابی سرم شلوغه

خیلی کار ریخته سرم

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

اصلا کاریش مونده

یا علی
 
وضعیت
موضوع بسته شده است.

جدیدترین ارسال ها

بالا