PDA

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



Mr.sarrowless
2010-09-09, 05:49
بنام خدا
امیدوارم حال شما خوب باشه، در این مقاله که متوسط به چندین قسمت تقسیم میشود به نحوه طراحی گرافیکی یک وب سایت خواهیم پرداخت و اگر استقبال فراوان از آن شد نحوه تبدیل استاندارد یک قالب psd به یک قالب html را به شما آموزش خواهیم داد.

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

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

اشاره کرد که با عضویت در اینگونه سایتها شما یک آدرس مانند :
Username.persianblog.ir
Username.blogfa.com
Username.mihanblog.com

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

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


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

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

اهمیت رنگ در طراحی وب :
تاثیرات رنگها از دیدگاههای مختلف
1- روان‌شناسی رنگ سیاه
• سیاه تمام نورها در طیف رنگ‌ها را جذب می‌کند.
• سیاه معمولاً به عنوان نماد ترس یا شیطان مورد استفاده قرار می‌گیرد امّا به عنوان نشانگر قدرت نیز شناخته می‌شود. از رنگ سیاه برای نشان دادن شخصیت‌های خطرناک مثل دراکولا و یا جادوگران استفاده می‌شود.
• رنگ سیاه در بسیاری از فرهنگ‌ها برای مراسم سوگواری مورد استفاده قرار می‌گیرد. این رنگ همچنین نشانگر غمگینی، جذابیت جنسی و رسمی بودن است.
• در مصر قدیم، رنگ سیاه نشانگر زندگی و تولّد دوباره بود.
• رنگ سیاه معمولاً به دلیل لاغر نشان دادن در نمایش‌های مد مورد استفاده قرار می‌گیرد.

2- روان‌شناسی رنگ سفید
• رنگ سفید، نماد معصومیت و پاکی است.
• رنگ سفید می‌تواند در انسان احساس فضای بیشتر به وجود آورد.
• رنگ سفید معمولاً نشانگر سرما، پاکیزگی و آرامش است. اتاقی که کاملاً به رنگ سفید نقاشی شده باشد ممکن است جادار و بزرگ به نظر آید امَا خالی و سرد است. بیمارستان‌ها و کادر پزشکی از رنگ سفید برای ایجاد حس پاکیزگی استفاده می‌کنند.

3- روان‌شناسی رنگ قرمز
• رنگ قرمز، رنگ گرمی است که برانگیزاننده هیجانات قوی است.
• رنگ قرمز، نشانگر عشق، حرارت و صمیمیت است.
• رنگ قرمز، به وجود آورنده احساس شور و هیجان است.
• رنگ قرمز، تحریک کننده احساس خشم و عصبانیت است.

4- روان‌شناسی رنگ آبی
• آبی، رنگ مورد علاقه بسیاری از مردم و محبوبترین رنگ در بین مردان است.
• رنگ آبی، احساس آرامش را به ذهن می‌آورد و معمولاً نشانگر صلح، امنیت و نظم است.
• رنگ آبی، می‌تواند احساس غم، درون‌گرایی یا گوشه‌گیری را در بعضی افراد به وجود آورد.
• رنگ آبی معمولاً برای دکور دفاتر مورد استفاده قرار می‌گیرد زیرا تحقیقات نشان داده است که افراد در اتاق‌های آبی کارآیی بیشتری دارند.
• رنگ آبی با وجودی که از محبوبترین رنگ‌هاست امّا یکی از رنگ‌هایی است که کمترین اشتها را بر می‌انگیزد. در برخی از برنامه‌های کاهش وزن توصیه می‌شود که غذای خود را در بشقاب‌های آبی بکشید. رنگ آبی به ندرت به صورت طبیعی درخوراکی‌ها وجود دارد. همچنین رنگ آبی غذا معمولاً به عنوان نشانه فاسد بودن و یا سمّی بودن آن در نظر گرفته می‌شود.
• رنگ آبی می‌تواند باعث کاهش ضربان قلب و حرارت بدن گردد.

5- روان‌شناسی رنگ سبز
• رنگ سبز، رنگ سردی است که نماد طبیعت است.
• رنگ سبز، نشانگر آرامش، خوشبختی، سلامتی و حسادت است.
• پژوهشگران دریافته‌اند که رنگ سبز می‌تواند باعث افزایش قابلیت خواندن گردد. برخی از دانش‌آموزان و دانشجویان با قراردادن یک برگه شفاف سبز رنگ بر روی صفحه کتاب، می‌توانند مطالب را با سرعت بیشتری از حدّ معمول بخوانند و درک کنند.
• رنگ سبز، از دیر باز نماد باروری بوده و در قرن پانزدهم برای لباس عروسی به کار می‌رفته است.
• از رنگ سبز در دکوراسیون به دلیل اثر آرام بخشی آن استفاده می‌شود.
• رنگ سبز باعث کاهش استرس می‌شود. کسانی که در فضای کاری سبز رنگ کار می‌کنند، کمتر دچار دردهای دستگاه گوارش می‌شوند.

6- روان‌شناسی رنگ زرد
• رنگ زرد، رنگی گرم وشاد است.
• رنگ زرد به دلیل مقدار زیاد نوری که منعکس می‌کند، بیشتر از بقیه رنگ‌ها چشم را خسته می‌کند. استفاده از رنگ زرد برای پس زمینه کاغذ یا نمایشگر کامپیوتر می‌تواند باعث چشم درد یا در حالت‌های خاص از دست دادن بینایی گردد.
• رنگ زرد می‌تواند احساس رنجیدگی و خشم را به وجود آورد. با وجودی که رنگ زرد به عنوان یک رنگ شاد شناخته می‌شود اما بیشتر مردم در اتاق‌های زرد رنگ، هیجانشان را از دست می‌دهند و بچه ها نیز در اتاق‌های زرد رنگ بیشتر گریه می‌کنند.
• رنگ زرد باعث افزایش سوخت و ساز بدن انسان می‌گردد.
• چون رنگ زرد، از بقیه رنگ‌ها زودتر دیده می‌شود، بیشتر از بقیه برای جلب توجه مورد استفاده قرار می‌گیرد.

7- روان‌شناسی رنگ ارغوانی
• رنگ ارغوانی نماد وفاداری و ثروت است.
• رنگ ارغوانی نشانگر عقل و معنویت است.
• رنگ ارغوانی خیلی کم در طبیعت وجود دارد و به همین دلیل ممکن است به عنوان نشانه مصنوعی یا غیر عادی بودن در نظر گرفته شود.

8- روان‌شناسی رنگ قهوه‌ای
• رنگ قهوه‌ای، رنگی طبیعی است که برانگیزاننده حس قدرت و اطمینان‌پذیری است.
• رنگ قهوه‌ای همچنین می‌تواند حس غم و انزوا را به وجود آورد.
• رنگ قهوه‌ای، حس گرما ، محبت، آسایش و امنیت را به ذهن می‌آورد.
• رنگ قهوه‌ای معمولاً بیانگر طبیعی بودن، زمینی بودن و متفاوت بودن است اما گاهی می‌تواند نشانگر پیچییدگی نیز باشد.

9- روان‌شناسی رنگ نارنجی
• رنگ نارنجی، ترکیب زرد و قرمز است و به عنوان یک رنگ انرژی‌زا در نظر گرفته می‌شود.
• رنگ نارنجی، احساس هیجان، گرما و شور و شوق را به ذهن می‌آورد.
• رنگ نارنجی، معمولاً برای جلب توجه مورد استفاده قرار می‌گیرد.

10- روان‌شناسی رنگ صورتی
• رنگ صورتی، در واقع همان رنگ قرمز کم رنگ است و معمولاً نشانگر عشق است.
• رنگ صورتی اثر آرام‌بخشی دارد. در ورزشگاه‌ها معمولاً رختکن تیم حریف را به رنگ صورتی نقاشی می‌کنند تا بازیکنان آن‌ها کم انرژی و منفعل شوند.
• با وجودی که اثر آرام بخشی رنگ صورتی مشخص شده است ولی پژوهشگران دریافته‌اند که این اثر تنها در خلال مواجهه اولیه به وجود می‌آید. مثلاً هنگامی که از این رنگ در زندان‌ها استفاده شد، زندانیان پس از عادت کردن به آن، حتی نا آرامتر از قبل شدند.

منبع : روان شناسی رنگها - لوشر

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

http://img.majidonline.com/thumb/254483/learning_photoshop_webdesign.jpg (http://img.majidonline.com/thumb/254483/learning_photoshop_webdesign.jpg)

شکل دوم :
شکل دوم را میتوان یک طرح فانتزی متوسط برداشت کرد، نامگذاری قسمت ها در این طرح همه به صورت سلیقه ای هست و در طراحی یک وب سایت در درجه اول دیتاها و محل قرار گیری آنها است که یک ایده نوین را در ذهن شما نقش میبندد. پس به خاطر داشته باشید در طراحی یک وب سایت در درجه نخست باید خواسته هایتان را بر روی یک کاغذ بنویسید و به صورت سلیقه ای قسمتها را مشخص کنید و سپس اقدام به طراحی و پایه ریزی ایده هایتان کنید.
لزوماً یک طرح را که خلق کردید نپسندید و آنقدر روی اون متمرکز شوید که در کنار ایده قبلی شما، ایده های جدید پیدا شود که به زیبایی طرح شما کمک بسیاری خواهد کرد.

http://img.majidonline.com/thumb/254488/learning_photoshop_webdesign_02.jpg (http://img.majidonline.com/thumb/254488/learning_photoshop_webdesign_02.jpg)

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

http://img.majidonline.com/thumb/254492/learning_photoshop_webdesign_03.jpg (http://img.majidonline.com/thumb/254492/learning_photoshop_webdesign_03.jpg)

و اما طراحی و ابزارهای مورد نیاز :
در مورد طراحی پایه یک سایت چند ابزار خیلی پر کاربرد را با هم مرور میکنیم که نیاز این چند ابزار مستلزم یادگیری متوسط شما از امکانات خیلی ابتدایی آنها میباشد.

1. ابزار شیپ و زیر مجموعه های آن - Rectangle tool

2. ابزار پن تول {Pen Tool} که ابزاری خیلی حرفه ای برای خلق خیلی از قسمت های فانتزی یک طراحی وب به آن محتاج خواهید شد. مانند خلق اشکالی نظیر تصاویر زیر که خیلی در هیدر و قسمت های مختلف یک بنر یا سایت به آن احتیاج پیدا میکنید.

http://img.majidonline.com/pic/254498/pentool.jpg (http://img.majidonline.com/pic/254498/pentool.jpg)

3. ابزار پترن که خیلی از فضاهای کلیشه ای یک طرح را به فضایی فانتزی و سنتی زیبا و با توجه خواسته های شما تغییر خواهد داد.

http://img.majidonline.com/pic/254500/screen_shot_pattern.jpg (http://img.majidonline.com/pic/254500/screen_shot_pattern.jpg)

4. ابزار Gradient که در طراحی خیلی از باکسهای کوچک و به قولاً خلق فضاهای وب2 به شما کمک خواهد کرد.

5. ابزار براش، که رابط شما برای ایجاد خیلی از اشکالهای زیبا و کاربردی خواهد بود.


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

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

تا مقاله بعدی خدانگهدار.

Mr.sarrowless
2010-09-09, 17:37
در مقاله قبلی ضمن مقدمه ای بر اصول طراحی وب سعی کردیم شما را به تعدادی از ابزارهای کاربردی که در طراحی گرافیکی یک وب سایت شما را یاری میکنند مروری گذرا کرده باشیم.
امروز میخواهیم با مثالی کاربردی جزئیات هر قسمت را به شما آموزش بدهیم که شما با دیدن این آموزش در خواهید یافت که چگونه با همکاری همه قسمت ها میشود به فرض مثال یک وب سایت نسبتاً زیبا طراحی کرد.

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



(http://img.majidonline.com/pic/254721/erfan_template_final.jpg)
نکته :
به خاطر داشته باشید در این تاپیک و بستگی به زمان و موقعیت هر چند مدت یک بار وب سایتی را برای نقد بررسی از نظر گرافیکی کنکاش خواهیم کرد پس این ذهنیت تبلیغ یک وب سایت خاص را در ذهن پرورش ندهید.

وب سایتی که در این مرحله از پایه بررسی خواهیم کرد، وبلاگ شخصی خودم هست که خیلی از دوستان شخصاً ایمیل زده بودند و درخواست تمپلت آن را کرده بودند؛ حال در اینجا به آن دسته از دوستان خواهم گفت که هیچ کار سختی نیست که همچین قالبی طراحی کرد و چه بسا مطمئن هستم شما از قالب فعلی زیباتر خواهید ساخت.
مرحله اول :
قبل از هر چیز میبایست صفحه ای به سایز اصلی یک سایت با دیتاهایی که قرار هست در آن قرار بگیرد را در محیط فتوشاپ باز کنیم، بر فرض مثال سایتی که قصد داریم آن را کنکاش کنیم به طور متوسط 4 مطلب در صفحه اصلی آن قرار میگرد و ما به صورت فرضی سایز 1024 در 1500 را انتخاب میکنیم که مانند تصویر زیر خواهد بود.
مرحله دوم :
با خط کش فتوشاپ دقیق محل قرار گیری سایت را به طوری قرار میدهیم که در وسط مرورگر قرار بگیرد و همه این قرار و مدار ها بستگی به دید شما و سلیقه و ایده شما از وب سایت دارد. به طور مثال در وب سایتی که میخواهیم طراحی کنیم عضوی به عنوان ستون سمت راست یا چپ موجود نمی باشد و یک وبسایت تک ستونی محسوب میشود.
مرحله سوم :
در این مرحله پترن خیلی اهمیت دارد، به این معنی که تصویری را به صورت سنگ فرش در محیط بک گراند قالب ایجاد میکنیم که بتوانیم خیلی راحت روی آن مانور بدهیم.
برای اون دسته از دوستانی که طریقه کاردن با پترن یا اصلاً به طور کلی با مفهوم پترن آشنایی ندارند یک مینی آموزش در این مرحله در باب پترن قرار میدهم.
تعریف :
پترن به تصاویر کوچک و در اندازه کاشی های مربعی شکل گفته میشود که فضاهای خالی و کاذب یک تصویر یا طرح را پر میکند. امروزه در دنیای بزرگ گرافیک سایت و پایگاهایی وجود دارند که کار اصلی آنها در اختیار گذاشتن ابزارهای گرافیکی ائم از پترن و شیپ و وکتور و ... میباشد.
طریقه ساختن یک پترن از یک تصویر :
1) ابتدا تصویری که مد نظر شما میباشد را در محیط فتوشاپ باز کنید، سپس از منوی Edit بر روی گزینه Define Pattern مانند تصویر بروید و بر روی پنجره ای که ظاهر میشود روی دکمه OK کلیک کنید دقیق مانند تصاویر زیر.

http://img.majidonline.com/thumb/254725/pattern_01.jpg (http://img.majidonline.com/show/254725/pattern_01.jpg)

http://img.majidonline.com/thumb/254726/pattern_02.jpg (http://img.majidonline.com/show/254726/pattern_02.jpg)

http://img.majidonline.com/thumb/254727/pattern_03.jpg (http://img.majidonline.com/show/254727/pattern_03.jpg)

2) در این مرحله صفحه ای که در مرحله اول ایجاد کردیم را بیاورد و یک لایه جدید روی آن ایجاد کنید و سپس با سطل رنگ آن را رنگ آمیزی کنید مانند تصویر زیر :

http://img.majidonline.com/thumb/254731/pattern_04.jpg (http://img.majidonline.com/show/254731/pattern_04.jpg)
3) سپس بر روی لایه ای که در مرحله قبل ایجاد و رنگ آمیزی کردید راست کلیک کنید و گزینه Blending Options را انتخاب کنید، درست مانند تصویر زیر : {برای استفاده از میانبر این عمل میتوانید روی لایه مربوطه دوبار کلیک کنید}

4) در این قسمت از کار مانند تصویر ابتدا گزینه Pattern Overlay کلیک کنید و سپس روی زبانه دیگر پترنها که در تصویر زیر آماده کلیک کنید :

http://img.majidonline.com/thumb/254744/pattern_07.jpg (http://img.majidonline.com/show/254744/pattern_07.jpg)

5) در اینجا تصویری که در مرحله اول ساخت پترن، آن را به پترن تبدیل کرده بودید را خواهید دید و با کلیک کردن روی آن خواهید دید که قسمت بکگراند صفحه طراحی وبسایت تان را با طرحی که مدنظرتان بوده سنگ فرش کرده اید.

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

مرحله ششم :
در این مرحله میبایست سایه ای روی شکل طراحی شده در مرحله قبل ایجاد کنیم که آن را از سنگ فرش بکگراند مجزا کند. برای همین کار روی شکل ایجاد شده در مرحله قبل راست کلیک و گزینه Blending Options را انتخاب کنید یا دو بار روی آن کلیک کنید و تنظیمات را مطابق شکل ایجاد کنید.

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

طبق مرحله پنجم میبایست از ابزار شیپ (Rectangle tool) استفاده کنیم و تعدادی مربع یا مستطیل بسته به ذوق و سلیقه خود ایجاد کنید مانند تصویر زیر :

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

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

تنها نکته ای که این وسط باقی میماند، تنظیمات نهایی یکی از اشکال است که باید برای زیباتر جلوه دادن آن از ابزار Gradient استفاده شود. در مقاله قبل از مزایای این ابزار صحبت مختصری با همدیگر کردیم و حال میخواهیم یکی از ساده ترین تنظیمات این ابزار که به زیبا شدن وب سایت ما کمک شایانی خواهد کرد استفاده کنیم.
برای همین منظور روی شکل مورد نظر دوبار کلیک یا راست کلیک کرده و گزینه Blending Options را انتخاب کنید و به زبانه Gradient Overlay بروید و تنظیمات را مطابق تصویر زیر انجام دهید.

http://img.majidonline.com/thumb/254766/erfan_template_07_c.jpg (http://img.majidonline.com/show/254766/erfan_template_07_c.jpg)

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

تصویر نهایی و اعمال آنها به این صورت است که مشاهده میکنید :

توجه :
برای چرخش اشکال ایجاد شده به صورتی که مد نظرتون هست از منوی Image گزینه Rotate Canvas را انتخاب کنید و از زیر مجموعه های آن به صورت نیاز استفاده کنید مانند تصویر :

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

برای این منظور با استفاده از ابزار شیپ (Rectangle tool) یک مربع متناسب با سایز عرض قالب ایجاد میکنیم مانند تصویر زیر :

دقت کنید حتماً به مقدار یک یا دو سانتیمتر از هر دو طرف راست و چپ فاصله بگیرید برای زیبایی کار خود.
مرحله دهم :
ایجاد منو در بالای سایت قسمت بعدی کار است که، طراح سایت که بنده باشم الزام را بر این میدانم که اگر در این سایت از امکانات جاوا اسکریپت استفاده شود به زیبایی سایت جلوه بیشتری خواهد داد و خلاء نبودن منوهای راست و چپ چین را پر خواهد کرد.
برای این منظور از ابزار شیپ (Rounded Rectangle Tool) استفاده کنید و دکمه هایی مانند تصویر رسم کنید.

سپس یک نوار باریک با همان ابزار شیپ (Rectangle tool) بالای دکمه های ایجاد شده رسم کنید با همان رنگ مرتبط با دکمه ها، مانند تصویر زیر :

در ادامه چند دکمه هم در قسمت پایین هیدر رسم میکنیم برای دسترسی به دیگر قسمت های سایت که قرار است برای آن در نظر بگیرم.
به همین منظور دوباره از ابزار شیپ (Rounded Rectangle Tool) استفاده میکنیم و مطابق تصویر زیر سه دکمه با رنگ سفید رسم میکنیم.

بعد از رسم دکمه ها، آنها را کمی به سمت پایین تغییر مکان میدهیم که از طرف پایین با قسمت سفید رنگ باکس اصلی هم رنگ شوند و سپس نوبت به تنظیمات ریز و کاربردی رنگ دکمه های پایین است که برای این منظور روی یکی از دکمه ها دو بار کلیک کنید یا روی آن راست کلیک کنید و گزینه Blending Options را انتخاب کنید و به زبانه Gradient Overlay رفته و تغییرات را اعمال کنید :

سپس روی زبانه Stroke کلیک کنید و تنظیمات نهایی رو مطابق تصویر زیر اعمال کنید :

این تنظیمات را برای دو دکمه دیگر نیز لحاظ کنید که تصویر نهایی شما مانند تصویر زیر شود :

http://img.majidonline.com/thumb/254786/erfan_template_10_g.jpg (http://img.majidonline.com/show/254786/erfan_template_10_g.jpg)

مرحله یازدهم :
برای ایجاد فوتر یا پای انداز که در انتهای سایت قرار میگیرد از ابزار (Rectangle tool) استفاده کنید و یک مربع مستطیل رسم کنید برای محلی که قرار است کپی رایت سایت شما و شمارنده (کنتور) در آن قرار بگیرد.


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

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

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

در ادامه مبحث پترنها تعدادی تصویر در زیر قرار میدهیم که شما خودتان آنها را به پترن تبدیل کنید و از آنها استفاده کنید.

پاسخ به سوالات دوستان :
دوستان عزیز نگران ابزارهای وب نباشید، به محض معرفی هر قسمت ابزارههای مورد نیاز رو در اختیار دوستان قرار خواهیم داد که استفاده کنند.
ائم از Gradient و پترن و براش و شیپ و وکتور و ...

m.ghalgar
2011-01-19, 20:04
امیدوارم حال شما خوب باشه، در این مقاله که متوسط به چندین قسمت تقسیم میشود به نحوه طراحی گرافیکی یک وب سایت خواهیم پرداخت و اگر استقبال فراوان از آن شد نحوه تبدیل استاندارد یک قالب psd به یک قالب html را به شما آموزش خواهیم داد.
خواهشا تاپیک را ادامه دهید.

FeoDolaR
2011-01-20, 01:49
مرسی ، واقعاً زحمت کشیدید . تنها مشکل فیــــلتـــر بودن عکسهاس

imjava
2011-01-24, 23:52
ممنون
خوب بود
استفاده کردیم