منابع آنلاین بسیاری برای طراحان وجود دارد که بتوانند ترکیب‌های رنگی عالی را کاوش کنند، بهینه‌سازی کنند و دانلود کنند.
بازی با ترکیب‌های مکمل، مشابه، تک رنگ و سایر ترکیبات ما را به امکانات هیجان‌انگیزی باز می‌کند، و هیچ کمبودی برای رایگان وجود ندارد.
اما بین طرح رنگ برنده و طرح برنده ای که از آن استفاده می کند، تفاوت وجود دارد.
انتخاب رنگها اولین قدم است. تطبیق آنها با نیازهای طراحی شما به همان اندازه مهم است.
آنچه در یک نمونه خوب به نظر می رسد ممکن است در یک صفحه وب به خوبی کار نکند – اما این بدان معنا نیست که باید به حالت اول برگردید. ما در اینجا راه‌های جدیدی را برای مشاهده طرح‌های رنگی بررسی می‌کنیم.
رنگ نقش مهمی در نحوه جذب محتوا دارد. خواه یک طرح محفوظ یا بلند، دوستانه یا شوم، گرم یا سرد باشد، بازدیدکنندگان یک وب‌سایت بلافاصله تحت تأثیر لحن تنظیم‌شده توسط چیدمان، تایپوگرافی، تصاویر و البته رنگها و مقادیری که طرح رنگ آن را تشکیل می‌دهند، می‌شوند.
انتخاب رنگ می تواند ذهنی ترین کار در طراحی وب باشد. برخی از رنگ ها به خوبی با هم کار می کنند. دیگران، نه چندان برخی از ترکیبات برای افراد خاصی جذاب است. بیش از یک مجموعه رنگ می تواند با یک طرح مطابقت داشته باشد.
خوشبختانه، منابع زیادی برای کمک وجود دارد. مولدهای پالت رنگ مانند طراح طرح رنگ، Adobe Kuler، Aviary Toucan و طرح رنگ روزانه در میان مکان‌های فوق‌العاده برای یافتن ترکیب‌هایی از رنگ که به طور موثر خلق و خوی ایجاد می‌کند. اما پیدا کردن یک پالت تنها اولین قدم است. اثربخشی بالقوه هر طرح رنگی می‌تواند با به‌کارگیری آن به خطر بیفتد.
تعداد رنگها در یک طرح تفاوت ایجاد می‌کند
طرح رنگ مجموعه ای از رنگ ها است که برای کار با هم انتخاب شده اند. طرح‌ها معمولاً حداقل چهار رنگ دارند و اغلب می‌توانند به صورت تصاویر ساده و گاهی اوقات به‌عنوان فایل‌های ASE دانلود شوند. بیایید با طرح زیر کار کنیم:
طرح رنگ بالا نمونه ای از نحوه ارائه بیشتر طرح ها است: به عنوان نمونه های یکنواخت رنگ های مسطح. این مجموعه می تواند به این صورت برچسب گذاری شود:
- شاد
- دوستانه
- معاصر
- گاه به گاه
- مقدماتی
اما یک یا دو رنگ را برجسته کنید و ممکن است صفت های مختلفی به ذهنتان خطور کند.
تصویر بالا همان طرحی را دارد که در نمونه ارائه شده بود، اما کمتر معمولی و بیشتر شبیه به بیابان است. این تصویر بر رنگ های گرم تاکید دارد. تکه های جدا شده آبی و سبز با پراکنده بودن توجه را به خود جلب می کند. خلق و خوی حاصل را می توان به صورت زیر توصیف کرد:
- شنی
- روشن
- گرم
- خاکی
- ناهموار
انتخاب رنگ غالب بر نحوه نمایش طرح تأثیر می گذارد.
باز هم، در اینجا ما از رنگ‌های یکسانی استفاده می‌کنیم، اما در پایان بسیار متفاوت. این تصویر چیزی شبیه یک نقشه انتزاعی جهان با جزایر قرمز، سبز و قهوه ای به نظر می رسد. تصویر نه تنها خنک‌تر است، بلکه کمی تاریک‌تر است، حتی اگر از همان پالت باشد.
توانایی تشخیص ترکیب رنگ های خوب کافی نیست، زیرا رنگ ها به ندرت به طور یکنواخت در طراحی وب سایت اعمال می شوند. استفاده عاقلانه و متناسب با رنگ ها به اندازه انتخاب رنگ های مناسب مهم است.
زمینه آهنگ را تنظیم می‌کند
واضح‌ترین مکان برای تأثیرگذاری با رنگ در پس‌زمینه است. این گستره وسیع می تواند به اندازه محتوایی که بالای آن قرار می گیرد، توجه را به خود جلب کند.
با وجود محتوای یکسان، طرح سمت راست بسیار گرمتر از طرح سمت چپ است. اما در اینجا بیشتر از یک تعویض رنگ ساده اتفاق می افتد.
نوارهای محتوا در طرح سبز (مثلاً متن سفید روی قرمز) در برابر پس‌زمینه سبز گسترده خود را حفظ می‌کنند. اما پس‌زمینه قرمز سمت راست میله‌های سبز ناچیز را می‌شوید. این به این دلیل است که علاوه بر گرمتر بودن، این سایه خاص قرمز اشباع‌تر نیز هست. در واقع، تنها عناصر با وزن بصری کافی برای مقابله با پس‌زمینه قرمز، عنوان‌های بزرگ هستند. متن کوچک بدنه و نوارهای سبز رنگ پریده در مقایسه کمرنگ است. این لزوما بد نیست؛ یک پس زمینه قدرتمند به صفحه حضور قابل توجهی می بخشد. طرح سبز خنک‌تر است و به محتوا محیطی معمولی‌تر می‌دهد.
کدام استفاده از رنگ بهتر است؟ بستگی به نیت شما دارد. آیا بازدیدکنندگان باید محتوا را آرام یا جسورانه بدانند؟ آیا می خواهید نوارهای رنگی را پایین بیاورید؟ آیا نگران این هستید که پس زمینه بر اطلاعات غلبه کند؟ آیا یک رنگ مهمتر از رنگ دیگر در برندسازی شماست؟ پاسخ به این سوالات مشخص می کند که کدام رنگ “درست” است. این پالت تک رنگ دو راه حل متفاوت ارائه می دهد.
رنگ پشت متن
تعامل متن و پس‌زمینه تحت تأثیر اندازه و کمیت هر کدام است. تأثیر متن بر روی صفحه به همان اندازه که به رنگ خود متن بستگی دارد به رنگ پس‌زمینه – علی رغم تمایل عمومی به نگرانی بیشتر در مورد پس‌زمینه.
در بالا، متن روشن در پس زمینه تیره زمانی که نوع بزرگ باشد بهتر عمل می کند. این طلایی که از طرح رنگی که با آن شروع کردیم وام گرفته شده است، برای متن بدنه مناسب نیست (یعنی حدود 13 پیکسل یا کوچکتر). راه حل ساده است:
در بالا، متن کوچک در دو ردیف آخر به رنگ طلایی کمرنگ‌تر است. کاملاً سفید نیست، اما بسیار خواناتر از دو خط در تصویر اول است. کنتراست اضافه شده از تحت تأثیر قرار گرفتن متن کوچک توسط پس زمینه جلوگیری می کند. نکته کلیدی این است که از طرح رنگ خود به عنوان نقطه شروع استفاده کنید، نه یک قانون ثابت. اگر رنگ پس‌زمینه تهدید به غلبه بر عناصر کوچکتر می‌کند، کنتراست را افزایش دهید، که یکپارچگی طرح را حفظ می‌کند و محتوا را خوانا نگه می‌دارد.
متن روی سفید
بسیاری از صفحات وب دارای پس‌زمینه سفید یا مناطق محتوای سفید هستند. اما “سفید” به معنای “خالی” نیست. نوارهای بزرگ سفید بر نحوه درک رنگ تأثیر می گذارد. به عنوان مثال:
رنگ‌هایی که با آنها شروع کردیم، هنگام استفاده برای متن روشن‌تر به نظر می‌رسند.
- آبی نسبتاً تیره کنتراست کافی ایجاد می کند تا متن در برابر سفید خوانا شود.
- این سایه خاص سبز با پس زمینه ترکیب می شود. اگر هدف هماهنگی باشد، سبز کار می کند.
- قرمز + سفید = صورتی یا هلویی.
- طلا تقریباً شبیه رنگ قهوه ای به نظر می رسد.
سفید تمایل دارد هر چیزی را که لمس می کند روشن کند. اگر می‌خواهید حالتی سبک ایجاد کنید، هر یک از ترکیب‌های بالا ممکن است کارساز باشد. برای تاثیر بیشتر، می توانید طرح رنگ را تیره کنید.
بازی با طرح‌های رنگی در فتوشاپ
اگر طراحی شما نیاز به استفاده یکنواخت از همه رنگ‌های طرح شما ندارد، باید یک یا دو رنگ را برای تسلط آزمایش کنید. ترفند این است که طرحی با رنگ هایی پیدا کنید که هم با یکدیگر و هم با رنگ غالب کار کنند.
خوشبختانه، ما یک فرآیند آسان برای آزمایش رنگ ها داریم. برای اینکه ببینید چگونه اندازه‌های مختلف رنگ می‌تواند روی یک طراحی تأثیر بگذارد، این مراحل را در فتوشاپ دنبال کنید.
1. طرح رنگی را بیابید یا ایجاد کنید. مثال ما دارای پنج رنگ است، اما هر عددی بالاتر از یک کار خواهد کرد.
2. یک تصویر جدید در فتوشاپ، 500 x 500 پیکسل، با پس زمینه سفید ایجاد کنید.
3. چهار لایه جدید ایجاد کنید (لایه پس زمینه شما پنجمین لایه خواهد بود). اگر طرح شما بیشتر یا کمتر از پنج رنگ دارد، طبق آن لایه ها را اضافه یا حذف کنید.
4. هر لایه را با رنگی متفاوت از طرح خود پر کنید.
5. یک لایه ماسک به هر لایه بالای لایه پس زمینه اضافه کنید. پالت لایه های شما باید به این صورت باشد:
در بالا، پالت لایه های فتوشاپ، با یک لایه در هر رنگ و با ماسک لایه اعمال شده است.
6. عمل “Thresholdizer” را روی هر لایه ماسک اجرا کنید — اما نه روی خود لایه ها.
در بالا، هنگام استفاده از عمل “Thresholdizer”، مطمئن شوید که لایه ماسک را انتخاب کنید، نه لایه واقعی. اگر اکشن را به اشتباه روی لایه اجرا کردید، از عملکرد “Undo” خوشحال باشید.
این عمل بیشتر یک الگوی تصادفی در ماسک لایه ایجاد می کند. از اینجا، طراح مسئولیت را بر عهده می گیرد: با کنترل “Threshold”. کنترل آستانه را به سمت چپ بکشید تا مقدار بیشتری از یک لایه مشخص نشان داده شود و به راست برای نشان دادن کمتر. اعمال این عمل برای هر لایه ماسک باعث می‌شود که یک رنگ در یک الگوی تصادفی بر رنگ‌های دیگر غالب شود.
در این مورد، کنترل Threshold تعیین می کند که چه مقدار از یک لایه مشخص قابل مشاهده است. یک ماسک لایه عمدتا سیاه لایه را پنهان می کند. بیشتر سفید لایه را نشان می دهد. اجرای اکشن Thresholdizer روی هر لایه ماسک ترکیبی از رنگ ها را ایجاد می کند:
این سند فتوشاپ نشان می‌دهد که اگر رنگ زرد غالب بود، یک طرح چگونه می‌شد. تنظیم رنگ ها در حال حاضر یک کار فوری است: برای ایجاد کنتراست بیشتر (یا کمتر) رنگ، فقط از یک دستور فتوشاپ استفاده کنید (مانند Image > Adjustments > Hue Saturation).
به عنوان مثال، سایه سبز که قبلاً با آبی خوب کار می کرد، اکنون که آبی غالب نیست، خیلی خوب به نظر نمی رسد. چند آزمایش موارد زیر را نشان می دهد:
در اینجا ما دو تغییر از طرح رنگ اصلی خود داریم. تغییر شماره 1 سبز را کمی تیره می کند. تقریباً کار می کند. تغییر شماره 2 همه چیز را تغییر می دهد به جز زرد برای افزودن کنتراست و تراز کردن رنگ ها.
اگر طرح ما عمدتاً به جای رنگ زرد آبی باشد، چه؟ این سایه آبی به اندازه‌ای تیره است که با رنگ‌های دیگر تضاد داشته باشد، اما هیچ‌کدام از آنها هماهنگ نیستند – همه آنها اولیه هستند. با انتخاب یک غالب جدید، مشکل جدیدی ایجاد کرده ایم.
تغییر شماره 1 در بالا قرمز ملایم را با آبی تیره تر جایگزین می کند و سایه سبز را به رنگ نعنایی کم رنگ تبدیل می کند. تغییر شماره 2 برعکس است و از رنگ قرمز (یا شرابی) بیشتر به جای کمتر استفاده می کند.
شایستگی هر یک از این تغییرات ذهنی است. در حالت ایده آل، قبل از تصمیم گیری نهایی، آنها را در طراحی واقعی اعمال کنید. کلید در این فرآیند است: یک پالت دریافت کنید، یک رنگ غالب را انتخاب کنید و دیگران را مجبور کنید با آن کار کنند.
درباره اقدام “Thresholdizer”
این اقدام هیچ رمز و رازی ندارد. می توانید با اعمال Filter > Render > Clouds یا Filter > Render > Difference Clouds روی یک ماسک لایه، همان جلوه را دریافت کنید. این عمل فقط فرآیند را اصلاح می‌کند و دستور Threshold را به دهک‌ها سازماندهی می‌کند.
لطفاً با خیال راحت عمل “Thresholdizer” را دانلود کنید. بهتر است، خودتان را ایجاد کنید و با ارائه یک پیوند در نظرات زیر، آن را با همه به اشتراک بگذارید.
ارزیابی رنگ بدون عمل
البته راه هایی برای قضاوت در مورد رنگ بدون بازی با Threshold وجود دارد. با انتخاب یک رنگ اصلی شروع کنید و سپس بقیه را با آن کار کنید.
اینجا طرح رنگ اصلی ما با رنگ قهوه ای به عنوان رنگ اصلی است.
ما رنگ سبز را کمرنگ و قرمز را اشباع کرده ایم. رنگ‌های خشن‌تر به خودی خود باقی می‌مانند، مانند آبی (که تنظیم نشده است).
در اینجا، سبز، زرد و قرمز را محو کرده ایم. این «لهجه‌ها» کم‌کلید با پس‌زمینه قهوه‌ای ترکیب می‌شوند. برای ایجاد کنتراست، رنگ آبی را تیره کنید.
سه رنگ اصلی تیره‌تر به خوبی با قهوه‌ای متوسط هماهنگ می‌شوند، در حالی که زرد کمرنگ به عنوان رنگ برجسته عمل می‌کند.
دوباره، تصمیم نهایی زمانی گرفته می شود که طراح این طرح ها را در طرح واقعی اعمال کند. تا آن زمان، اینها فقط نقاط شروع هستند: ابزارهای مفید برای جلوگیری از برخورد، ارجاعات مفید برای نگه داشتن طرح ها در موضوع و راهی عالی برای کشف ترکیبات.
رنگ فقط یک عنصر طراحی است. استفاده از رنگ مهارتی است که فرد باید برای کنترل خلق و خو، پرورش ذائقه خود و توانایی دیدن امکانات در چند نمونه تمرین کند.
فقط یک چیز مسلم است: آن سبز باید از بین برود.
نوشته شده به طور انحصاری برای Webdesigner Depot توسط Ben Gremillion. بن یک طراح وب آزاد است که مشکلات ارتباطی را با طراحی بهتر حل می کند.
چگونه رنگ ها را آزمایش می کنید؟ راه های مورد علاقه شما برای ایجاد طرح های رنگی چیست؟ نظرات خود را در نظرات زیر به اشتراک بگذارید.
بدون دیدگاه