.:. آموزش قدم به قدم طراحی گرافیکی وب سایت .:.

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

Erfan

Active Member
بنام خدا
امیدوارم حال شما خوب باشه، در این مقاله که متوسط به چندین قسمت تقسیم میشود به نحوه طراحی گرافیکی یک وب سایت خواهیم پرداخت و اگر استقبال فراوان از آن شد نحوه تبدیل استاندارد یک قالب psd به یک قالب html را به شما آموزش خواهیم داد.

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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



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



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



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

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

shape_screen_shot_01.jpg


shape_screen_shot_02.jpg


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

pentool.jpg


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

screen_shot_pattern.jpg


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

gradiant.jpg


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


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

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

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

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

Erfan

Active Member
در مقاله قبلی ضمن مقدمه ای بر اصول طراحی وب سعی کردیم شما را به تعدادی از ابزارهای کاربردی که در طراحی گرافیکی یک وب سایت شما را یاری میکنند مروری گذرا کرده باشیم.
امروز میخواهیم با مثالی کاربردی جزئیات هر قسمت را به شما آموزش بدهیم که شما با دیدن این آموزش در خواهید یافت که چگونه با همکاری همه قسمت ها میشود به فرض مثال یک وب سایت نسبتاً زیبا طراحی کرد.

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


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

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


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



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



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

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

طریقه ساختن یک پترن از یک تصویر :
1) ابتدا تصویری که مد نظر شما میباشد را در محیط فتوشاپ باز کنید، سپس از منوی Edit بر روی گزینه Define Pattern مانند تصویر بروید و بر روی پنجره ای که ظاهر میشود روی دکمه OK کلیک کنید دقیق مانند تصاویر زیر.







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





3) سپس بر روی لایه ای که در مرحله قبل ایجاد و رنگ آمیزی کردید راست کلیک کنید و گزینه Blending Options را انتخاب کنید، درست مانند تصویر زیر : {برای استفاده از میانبر این عمل میتوانید روی لایه مربوطه دوبار کلیک کنید}



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



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





در تصویر زیر با تغییر گزینه مشخص شده میتوانید سایز پترن را ریز یا درشت نمایید.



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



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






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



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

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



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



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

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






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

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



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



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

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

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



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


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



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



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



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





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



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



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

مانند تصویر زیر :



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

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



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

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




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

pat_imag.jpg



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


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


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

پیوست ها

  • Pattern.zip
    169.1 کیلوبایت · بازدیدها: 922

Erfan

Active Member
با عرض سلام مجدد به تمامی دوستان
مقاله امروز در مورد پترن و انوع آن و چگونگی تولید و استفاده آنها در فضاهای وب و غیره است.

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

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

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

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

به تصویر زیر توجه کنید :

pattern_erfan_pix01.jpg


pattern_erfan_pix02.jpg


پی نوشت :
کار فوق اولین تجربه گرافیکی من در سبک دارک بود، خیلی مبتدیانه است و هدف فقط رساندن مفهوم مقاله هست {به من نخندید :دی}


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

در محیط فتوشاپ پنجره ای با سایز 3x3 باز کنید، درست مانند تصویر زیر : {دقت کنید سند جدید حالت Transparent داشته باشد}

000.jpg


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

00.jpg


در این قسمت کار از ابزار select استفاده کنید و مانند تصویر چند نقطه را انتخاب کنید و سپس با رنگ مشکی آنها را رنگ کنید، مانند تصویر :

001.jpg


002.jpg


سپس از منوی Edit گزینه Define Brush Preset را انتخاب کنید و سپس برای پترن خود یک اسم به دلخواه انتخاب کنید و روی دکمه OK کلیک کنید.

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

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

6.gif


7.gif


pattern_erfanix_01.jpg


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

1. در گام اول سبک و در لود شدن آن مشکلی نداشته باشیم.
2. نمیشود در هر طراحی وب از این گونه پترنها استفاده کرد چرا که مضمون کلی اینگونه طرحهای Floral یک محور خاص بیشتر نیست.

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

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


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

pattern_erfan_web01.jpg


pattern_erfan_web02.jpg


pattern_erfan_web03.jpg


pattern_erfan_web04.jpg


تصویر خام طرح بالا به صورت زیر است :

pattern_erfan_web05.jpg


pattern_erfan_web06.jpg


pattern_erfan_web07.jpg


pattern_erfan_web08.jpg


pattern_erfan_web09.jpg


pattern_erfan_web10.jpg


pattern_erfan_web11.jpg


pattern_erfan_web12.jpg


در این قسمت یک باکس را با هم تجزیه میکنیم که پترنها در این باکس چقدر باعث زیبایی شده است :

pattern_erfan_web13.jpg


pattern_erfan_web14.jpg


pattern_erfan_web15.jpg


پترن ها در تکست باکسها هم مورد استفاده قرار میگیرد مانند نمونه زیر :

pattern_erfan_web16.jpg


به صورت مثال یک وب سایت را با هم تجریه و تحلیل کنیم که چه قسمت هایی از این وب سایت از ابزار پترن بهره برده است.



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

از تمامی طراجان عزیز هم عذرمیخوام که بدون اجازه از طرح هاشون برای رساندن مفهوم در این آموزش استفاده کردم.

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

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

pattern_screenshot.jpg




 

پیوست ها

  • pattern_majidonline.zip
    3.1 کیلوبایت · بازدیدها: 472
آخرین ویرایش:

Erfan

Active Member
دانلود پک پترن در چند پارت مختلف با سرورهای دانلود مختلف برای راحتی شما دوستان عزیز که امیدوارم مفید واقع باشه.



کد:
http://www.4shared.com/file/209787683/8a742985/Pattern_www_MajidOnline_com_Go.html
http://graphist.persiangig.com/Pattern_www_MajidOnline_com/Pattern_www_MajidOnline_com_Gold_Pack.rar
http://rapidshare.com/files/342641272/Pattern_www_MajidOnline_com_Gold_Pack.rar.html
http://s81.eu.rapidbaz.com/get/_xXiE/Pattern_www_MajidOnline_com_Gold_Pack.rar

پسورد فایل : www.majidonline.com



کد:
http://www.4shared.com/file/209791858/ba9dd526/Pattern_www_MajidOnline_com_01.html
http://graphist.persiangig.com/Pattern_www_MajidOnline_com/Pattern_www_MajidOnline_com_01.rar
http://rapidshare.com/files/342588529/Pattern_www_MajidOnline_com_01.rar.html
http://s85.eu.rapidbaz.com/get/_xXNO/Pattern_www_MajidOnline_com_01.rar

پسورد فایل : www.majidonline.com



کد:
http://www.4shared.com/file/209794409/8e2918a3/Pattern_www_MajidOnline_com_02.html
http://graphist.persiangig.com/Pattern_www_MajidOnline_com/Pattern_www_MajidOnline_com_02.rar
http://rapidshare.com/files/342591002/Pattern_www_MajidOnline_com_02.rar.html
http://s83.eu.rapidbaz.com/get/_xXNK/Pattern_www_MajidOnline_com_02.rar

پسورد فایل : www.majidonline.com



کد:
http://www.4shared.com/file/209800948/e6be3991/Pattern_www_MajidOnline_com_03.html
http://graphist.persiangig.com/Pattern_www_MajidOnline_com/Pattern_www_MajidOnline_com_03.rar
http://rapidshare.com/files/342594130/Pattern_www_MajidOnline_com_03.rar.html
http://s81.eu.rapidbaz.com/get/_xXNd/Pattern_www_MajidOnline_com_03.rar

پسورد فایل : www.majidonline.com



کد:
http://www.4shared.com/file/209804420/39851221/Pattern_www_MajidOnline_com_04.html
http://graphist.persiangig.com/Pattern_www_MajidOnline_com/Pattern_www_MajidOnline_com_04.rar
http://rapidshare.com/files/342596224/Pattern_www_MajidOnline_com_04.rar.html
http://s83.eu.rapidbaz.com/get/_xXcg/Pattern_www_MajidOnline_com_04.rar

پسورد فایل : www.majidonline.com



کد:
http://www.4shared.com/file/209813165/8bfff048/Pattern_www_MajidOnline_com_05.html
http://graphist.persiangig.com/Pattern_www_MajidOnline_com/Pattern_www_MajidOnline_com_05.rar
http://rapidshare.com/files/342600025/Pattern_www_MajidOnline_com_05.rar.html
http://s67.eu.rapidbaz.com/get/_xXcR/Pattern_www_MajidOnline_com_05.rar

پسورد فایل : www.majidonline.com



کد:
http://www.4shared.com/file/209821469/692bccd3/Pattern_www_MajidOnline_com_06.html
http://graphist.persiangig.com/Pattern_www_MajidOnline_com/Pattern_www_MajidOnline_com_06.rar
http://rapidshare.com/files/342604223/Pattern_www_MajidOnline_com_06.rar.html
http://s77.eu.rapidbaz.com/get/_xXci/Pattern_www_MajidOnline_com_06.rar

پسورد فایل : www.majidonline.com



کد:
http://www.4shared.com/file/209832631/36d6e294/Pattern_www_MajidOnline_com_07.html
http://graphist.persiangig.com/Pattern_www_MajidOnline_com/Pattern_www_MajidOnline_com_07.rar
http://rapidshare.com/files/342610681/Pattern_www_MajidOnline_com_07.rar.html
http://s79.eu.rapidbaz.com/get/_xXc3/Pattern_www_MajidOnline_com_07.rar

پسورد فایل : www.majidonline.com



کد:
http://www.4shared.com/file/209841170/8067727d/Pattern_www_MajidOnline_com_08.html
http://graphist.persiangig.com/Pattern_www_MajidOnline_com/Pattern_www_MajidOnline_com_08.rar
http://rapidshare.com/files/342615060/Pattern_www_MajidOnline_com_08.rar.html
http://s79.eu.rapidbaz.com/get/_xXcs/Pattern_www_MajidOnline_com_08.rar

پسورد فایل : www.majidonline.com



کد:
http://www.4shared.com/file/209850985/fc5a8550/Pattern_www_MajidOnline_com_09.html
http://graphist.persiangig.com/Pattern_www_MajidOnline_com/Pattern_www_MajidOnline_com_09.rar
http://rapidshare.com/files/342621628/Pattern_www_MajidOnline_com_09.rar.html
http://s73.eu.rapidbaz.com/get/_xXcB/Pattern_www_MajidOnline_com_09.rar

پسورد فایل : www.majidonline.com



کد:
http://www.4shared.com/file/209860969/2ccf9e25/Pattern_www_MajidOnline_com_10.html
http://graphist.persiangig.com/Pattern_www_MajidOnline_com/Pattern_www_MajidOnline_com_10.rar
http://rapidshare.com/files/342626884/Pattern_www_MajidOnline_com_10.rar.html
http://s77.eu.rapidbaz.com/get/_xXig/Pattern_www_MajidOnline_com_10.rar

پسورد فایل : www.majidonline.com



کد:
http://www.4shared.com/file/209879950/3e561378/Pattern_www_MajidOnline_com_11.html
http://graphist.persiangig.com/Pattern_www_MajidOnline_com/Pattern_www_MajidOnline_com_11.rar
http://rapidshare.com/files/342636197/Pattern_www_MajidOnline_com_11.rar.html
http://s79.eu.rapidbaz.com/get/_xXiC/Pattern_www_MajidOnline_com_11.rar

پسورد فایل : www.majidonline.com
 

Erfan

Active Member
به درخواست خیلی از دوستان مقاله های قسمت اول تا سوم رو به صورت PDF میذارم که استفاده کنید.

0001.jpg

کد:
لینک مستقیم / لینک غیر مستقیم

http://www.4shared.com/file/238993267/b463bb0e/web-designe_01.html
http://s79.eu.rapidbaz.com/get/_lWU3/web-designe_01.zip
http://rapidshare.com/files/362008212/web-designe_01.zip.html
http://erfanix.files.wordpress.com/2010/03/web-designe_01.pdf

0002.jpg

کد:
لینک مستقیم / لینک غیر مستقیم
http://www.4shared.com/file/239004098/b17f6e8a/web-designe_02.html
http://s83.eu.rapidbaz.com/get/_lWeB/web-designe_02.zip
http://rapidshare.com/files/362017575/web-designe_02.zip.html
http://erfanix.files.wordpress.com/2010/03/web-designe_02.pdf

0003.jpg


کد:
لینک مستقیم / لینک غیر مستقیم
http://www.4shared.com/file/239050166/971f2d52/web-designe_03.html
http://rapidshare.com/files/362020386/web-designe_03.zip.html
http://s83.eu.rapidbaz.com/get/_lWyQ/web-designe_03.zip
http://erfanix.files.wordpress.com/2010/03/web-designe_03.pdf

موفق باشید.
:rose:
 
وضعیت
موضوع بسته شده است.

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

بالا