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

[MAYAPOWER]

  الله الرحمن الرحیم

سلام به شما


اینجا لطفا اسپم ندین با تشکر ویِژه از محمد

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

[External Link Removed for Guests]

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

[External Link Removed for Guests]

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

[External Link Removed for Guests]

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

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





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



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



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



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


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

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



با تشکر از دوست عزیز [Erfan]
[External Link Removed for Guests]
 

[MAYAPOWER]

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

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


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

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


مرحله اول :
قبل از هر چیز میبایست صفحه ای به سایز اصلی یک سایت با دیتاهایی که قرار هست در آن قرار بگیرد را در محیط فتوشاپ باز کنیم، بر فرض مثال سایتی که قصد داریم آن را کنکاش کنیم به طور متوسط 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) استفاده کنید و یک مربع مستطیل رسم کنید برای محلی که قرار است کپی رایت سایت شما و شمارنده (کنتور) در آن قرار بگیرد.

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



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

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



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




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




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


[External Link Removed for Guests]

[MAYAPOWER]

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

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

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

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

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

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



   از اندازه واقعي خود کوچکتر نمايش داده مي شود. براي ديدن اين تصويردر اندازه واقعي اينجا را کليک کنيد. اندازه واقعي اين تصوير 787 در 655پيکسل است.  

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

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

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



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



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





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

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

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







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

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

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

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


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

   از اندازه واقعي خود کوچکتر نمايش داده مي شود. براي ديدن اين تصويردر اندازه واقعي اينجا را کليک کنيد. اندازه واقعي اين تصوير 641 در 382پيکسل است.  







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

















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







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



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

[External Link Removed for Guests]

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

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

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

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

   از اندازه واقعي خود کوچکتر نمايش داده مي شود. براي ديدن اين تصويردر اندازه واقعي اينجا را کليک کنيد. اندازه واقعي اين تصوير 768 در 448پيکسل است.  


 

[MAYAPOWER]

سلام

اینم چند تا از انواع مختلف پترن به اهتمام عرفان عزیز


-----------------1



-----------------2



-----------------3



-----------------4



-----------------5



-----------------6



-----------------7



-----------------8



-----------------9



-----------------10
[External Link Removed for Guests]





-----------------11
[External Link Removed for Guests]





منبع:[External Link Removed for Guests]