تئوری رنگ، بخش سوم، ایجاد پالت رنگ


تئوری رنگ، بخش سوم، ایجاد پالت رنگ

تئوری رنگ ها و ایجاد پالت رنگ


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

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





اساسا چرخه ی 12 رنگ مهم ترین ابزار در ساخت طرح رنگ یا رنگ بندی می باشد.




Monochromatic یا تک رنگ
رنگ بندی های Monochromatic از درجات رنگ (tone) و سایه هایی (shade) و ته رنگ های (tint) مختلف تشکیل شده اند که درون یک رنگ مایه ی خاص قرار دارند. ساخت این نوع رنگ بندی ساده است، چون همه ی آنها از یک رنگ مایه ی رنگ مشابه و یکسان گرفته شده اند
مثال:
در اینجا سه نمونه از رنگ بندی تک رنگ برای شما به نمایش گذاشته شده است. اولین رنگ این مجموعه (از چپ به راست) ترجیحا برای عناوین استفاده می شود. رنگ دوم برای متن بدنه یا احتمالا رنگ پس زمینه بکار برده می شود. از رنگ سوم به عنوان رنگ پس زمینه (اگر از رنگ دوم برای پس زمینه استفاده شده به عنوان رنگ متن بدنه) استفاده می شود و دو رنگ انتهایی به عنوان یا درون گرافیک ها بکار برده می شود.





Analogous
رنگ بندی های Analogous یا مشابه را نیز می توان به آسانی ساخت. رنگ بندی های Analogous با استفاده از 3 رنگ ایجاد می شوند که در چرخه ی رنگ کنار یکدیگر قرار دارند. اصولا همه ی رنگ بندی های Analogous دارای سطح مشخصه های رنگی (chroma) یکسانی هستند. اما ما می توانیم با استفاده از درجات و سایه های رنگ به این رنگ بندی ها جذابیت بیشتری اضافه کنیم و آنها را مطابق با نیازهای خود در طراحی وب سایت ها وفق دهیم.
مثال:

این یک رنگ بندی سنتی analogous است و اگر چه ظاهرا جالب و جذاب است اما برای طراحی یک سایت از کنتراست مناسب و مطلوبی برخودار نیست.



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



نمونه ی دیگری از رنگ بندی analogous سنتی:



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


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



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



نمونه ی دیگری از رنگ بندی با برد وسیعی از مشخصه های رنگی:



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


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



یک رنگ بندی در قسمت زرد/سبز پایه ی درجات رنگ است وجود تفاوت کافی در مشخصه ی رنگی و مقدار، بین رنگ هایی که برای این نوع رنگ بندی انتخاب می کنید اهمیت زیادی دارد



پالت های دیگر با برد های وسیع تر:


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



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



همچنین استفاده از یک رنگ روشن به همراه دو رنگ مات باعث می شود تا تک رنگ روشن برجسته تری بوجود می آورد.


(Double-Complementary (Tetradic
احتمالا رنگ بندی های Tetradic دشوار ترین رنگ بندی ها هستند.
مثال:



بهترین راه برای استفاده از یک رنگ بندی مانند این، این است که در طراحی از یک رنگ به عنوان رنگ اولیه استفاده کرد و رنگ های دیگر را فقط به عنوان accent مورد استفاده قرار داد



رنگ بندی Tetradic می تواند برای ساخت رنگ بندی هایی با مشخصه ها و مقادیر یکسان به خوبی کار کند. فقط یک رنگ خنثی مثل خاکستری تیره یا سیاه برای متن و accent ها اضافه کنید.



این رنگ بندی برای رنگ بندی های تیره تر نیز کارایی دارد.


Custom یا سفارشی
کار ساخت رنگ بندی های Custom یا سفارشی بسیار مشکل است. به جای دنبال کردن رنگ بندی های آماده ای که در بالا ذکر شد، یک رنگ بندی Custom بر پایه ی هیچ قانون یا رویه ی تعریف شده و معمولی نیست. در هنگام ساخت این رنگ بندی باید مشخصه های رنگی (chroma)، مقدار و saturation را به خاطر داشته باشید.
مثال:



رنگ هایی که در اینجا بکار رفته است همه دارای مشخصه های رنگی و سطح saturation یکسان هستند.



استفاده از رنگ هایی با همان مشخصه های رنگی و saturation تاثیر گذار است و یک حس پیوستگی سراسر رنگ بندی ایجاد می کند.



استفاده از یک رنگ با مشخصه ی رنگی بالا در میان سایر رنگ ها با مشخصه ی رنگی پایین یکی دیگر از روش های تاثیر گذار می باشد(رنگ با مشخصه ی رنگی بالا می تواند به عنوان یک accent عمل کند).


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

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



در اینجا یک رنگ بندی تک رنگ سنتی برای فروشگاه لباس وجود دارد که رنگ سفید به عنوان رنگ خنثی به آن اضافه شده است.



برای بلاگ طراحی نیز از رنگ بندی استفاده می کنیم که از سایه ها (shade) و ته رنگ ها ی (tint) رنگ خاکستری تشکیل شده است.



این تقریبا یک رنگ بندی analogous است، اما ما یک رنگ آن را حذف کرده ایم. این رنگ بندی از سایه های (shade) رنگ ارغوانی و ارغوانی متمایل به قرمز ساخته شده است. این دو رنگ در چرخه ی رنگ در کنار یکدیگر قرار گرفته اند و با هم به خوبی کار می کنند، مخصوصا وقتی که از آنها در مقادیر و سطح saturation مختلف استفاده می شود.



اضافه کردن دو رنگ قرمز به رنگ بندی خاکستری ظاهر آن را تا حد زیادی جذاب می کند.



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


دلیل اهمیت Shade و Tone و Tint ها چیست؟
همین طور که در رنگ بندی بالا مشاهده می کنید استفاده از Shade و Tone و Tint در رنگ بندی شما ضروری است. همه ی رنگ های خالص دارای مقادیر و سطح saturation مشابهی هستند. این باعث ایجاد رنگ بندی می شود که خسته کننده و ملالت آور است.

وقتی شما Shade و Tone و Tint را با هم مخلوط کنید چرخه ی 12 رنگ را به یک چرخه با رنگ های نامحدود گسترش داده اید. یکی از آسان ترین راه ها برای ساخت یک رنگ بندی حرفه ای این است که تعدادی کمی از و Shade و Tone و Tint های رنگ موجود را برداشته (از رنگ خاص اجتناب کنید) و به یک رنگ خالص (یا نزدیک به خالص) دیگر اضافه کنید که در چرخه ی رنگ به عنوان رنگ accent حداقل سه فاصله با آن دارد این کار باعث می شود در حالیکه حس تعادل در رنگ بنید حفظ شده است منظره و ظاهر بهتر و جالب تری پیدا کند.


اضافه کردن رنگ خنثی یا Neutral
Neutral ها یا نگ های خنثی و و بی اثر یکی دیگر از بخش های مهم یک رنگ بندی هستند. رنگ های خاکستری، سیاه، سفید، قهوه ای، قهوه ای سوخته و کرم عموما به عنوان رنگ های خنثی در نظر گرفته می شوند. گرایش رنگ های قهوه ای، قهوه ای سوخته و کرم به سمت ساخت و ایجاد رنگ بندی های گرم هستند (چون این رنگ ها از درجات و سایه ها (shade) و ته رنگ های (tint) نارنجی و زردند). رنگ خاکستری بسته به رنگ های محیط می تواند حس گرم یا سرد را منتقل کند. رنگ های سیاه و سفید نیز بسته به رنگ های محیط هم می توانند سرد باشند و هم گرم.

رنگ های سیاه و سفید از رنگ های خنثی هستند که اضافه کردن آنها به رنگ بندی خیلی آسان است. برای اینکه جذابیت ظاهری کمی افزایش پیدا کند، همیشه در نظر داشته باشید که به جای رنگ سفید و سیاه از ته رنگ های خاکستری خیلی تیره استفاده کنید.
اضافه کردن رنگ های قهوه ای، قهوه ای سوخته و کرم نیاز به مهارت بیشتری دارد، اما با کمی تمرین خواهید توانست راه سریع اضافه کردن آنها را یاد بگیرید. در مورد رنگ های قهوه ای، در نظر داشته باشید. در بسایری از موارد یک رنگ زرد یا کرم خیلی کم رنگ می تواند به جای رنگ سفید یا خاکستری روشن بکار برده شود و رنگ قهوه ای سوخته نیز می تواند به جای رنگ خاکستری مورد استفاده قرار گیرد.


استفاده از عکس برای رنگ بندی کی از روش های جالب ساخت رنگ بندی استفاده از یک عکس است. ابزارهایی وجود دارند که این کار را به صورت خودکار انجام می دهند، همچنین شما می توانید این کار را در نرم افزار فتوشاپ نیز انجام دهید. با استفاده از نرم افزار Adobe Kuler که یک نرم افزار تحت وب است می توانید عکس ها را از لیست مورد نظر خود جستجو کنید (browse) و هم از روی سایت Flickr یا می توانید تصویر مورد نظر خود را upload کنید.

در این قسمت رنگ بندی اصلی قرار دارد که هنگامی که از این عکس استفاده می کردیم Kuler آن را به ما داد.



یکی از ویژگی های جالب Kuler رد ساخت رنگ بندی از عکس گزینه ی "Select a Mood" یا انتخاب حالت است، که شامل رنگی بودن (Colorful)، درخشندگی (Bright)، مات بودن (Mute)، عمق (Deep) و تیرگی (Dark) می باشد. اینها ترتیب رنگ هایی است که ما در زمان استفاده از هر یک از آن حالات با یک عکس یکسان به آن دست پیدا می کنیم:



Colorful



Bright



Muted



Deep



Dark


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



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



و اینجا 5 رنگ بندی که برنامه ی Kuler از این تصویر به ما داده است وجود دارد:



Colorful



Bright



Muted



Deep



Dark
و در این قسمت تصویری را می بینید که در فتوشاپ با استفاده از همین عکس بدست آمده است:



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


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







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


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

در طراحی تعداد زیادی از وب سایت ها ممکن است فقط از سه رنگ استفاده شده باشد، بعضی از آنها نیز تنها با استفاده از دو رنگ طراحی شده اند و بعضی دیگر از 8 یا 10 رنگ درست شده اند. آسان ترین راه برای اضافه کردن یک رنگ این است که کار را با یکی از رنگ بندی ها آماده ی سنتی آغاز کنید و سپس از آنجا به کار ادامه دهید.


10 سایت با رنگ بندی ها ی زیبا
در این قسمت 10 سایت به شما نشان خواهیم داد که به صورت ماهرانه و عالی رنگ بندی شده اند.

Wentings Cycle & Mountain Shop



Scheme یا توالی رنگ:



Trivuong.com

Scheme یا توالی رنگ:



Oscar Barber

Scheme یا توالی رنگ:



North East Peace III Partnership

Scheme یا توالی رنگ:



mbA Architects

Scheme یا توالی رنگ:



Studio 13

Scheme یا توالی رنگ:



Joy Project

Scheme یا توالی رنگ:



Morphix Blog

Scheme یا توالی رنگ:



El Designo

Scheme یا توالی رنگ:



LemonStand

Scheme یا توالی رنگ:



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


تعاریف

accent color چیست؟ accent color به رنگ هایی گفته می شود که برای تاکید در یک رنگ بندی مورد استفاده قرار می گیرد.