يتطلب تطبيق أنظمة الألوان رؤيتهم من جديد
توجد العديد من الموارد عبر الإنترنت للمصممين لاستكشاف وتوليف وتنزيل مجموعات رائعة من الألوان.
اللعب بمجموعات تكميلية ومماثلة أحادية اللون ومجموعات أخرى تفتح لنا إمكانيات مثيرة ، ولا يوجد نقص في المجلات المجانية.
ولكن هناك فرق بين نظام الألوان الفائز والتصميم الفائز الذي يستخدمه.
اختيار الألوان هو الخطوة الأولى. تكييفها لتلائم متطلبات التصميم الخاص بك هو بنفس القدر من الأهمية.
قد لا يعمل ما يبدو جيدًا في حامل بشكل جيد على صفحة ويب - ولكن هذا لا يعني أن عليك العودة إلى المربع الأول. سنستكشف هنا طرقًا جديدة للنظر إلى أنظمة الألوان.
يلعب اللون دورًا مهمًا في كيفية استيعاب الأشخاص للمحتوى. وسواء كان التصميم محجوزًا أم صاخبًا أو ودودًا أو شريرًا أو دافئًا أو باردًا ، يتأثر زائرو موقع الويب على الفور بالنغمة التي حددها التصميم والطباعة والتصوير وبالطبع الأشكال والقيم التي تشتمل على نظام الألوان.
اختيار الألوان يمكن أن يكون أكثر وظيفة ذاتية في تصميم الويب. بعض الألوان تعمل بشكل جيد معا ؛ الآخرين ، ليس كثيرا. بعض النغمات تناشد بعض الناس. يمكن أن تتناسب أكثر من مجموعة من الألوان مع نفس التصميم.
لحسن الحظ ، توجد موارد كثيرة للمساعدة. مولدات لوحة الألوان مثل مصمم نظام الألوان ، أدوبي كولر ، القفص الطوقان و نظام الألوان اليومي هي بين الأماكن الرائعة للعثور على مجموعات من الألوان التي تضبط الحالة المزاجية بشكل فعال. لكن العثور على لوحة هي الخطوة الأولى فقط. يمكن اختراق أي فعالية ممكنة لنظام الألوان من خلال طريقة تطبيقه .
عدد الألوان في مخطط يجعل فرق
نظام الألوان عبارة عن مجموعة من الألوان التي تم اختيارها للعمل معًا. عادة ما تحتوي مخططات النظام على أربعة ألوان على الأقل ويمكن في الغالب تنزيلها كصور بسيطة وأحيانًا
يعتبر نظام الألوان أعلاه نموذجياً لكيفية عرض معظم الخطط: كعينات موحدة من الألوان المسطحة. يمكن وضع علامة على هذه المجموعة على النحو التالي:
- مرح
- ودود
- معاصر
- عارض
- الانتخابات التمهيدية
ولكن احرص على تمييز لون واحد أو لونين وقد يتبادر إلى الذهن العديد من الصفات المختلفة.
الصورة أعلاه لها نفس المخطط الذي تم تقديمه في الحامل ، لكنه أقل عرضية وأكثر شبيهة بالصحراء. تؤكد هذه الصورة على الألوان الدافئة. بقع معزولة من اللونين الأزرق والأخضر لفت الانتباه عن طريق كونها أكثر حذرا. يمكن وصف الحالة المزاجية الناتجة بأنها:
- رملي
- مشرق
- دافئ
- كاكي
- الخام
يؤثر اختيار اللون السائد على كيفية ظهور المخطط.
مرة أخرى ، نحن هنا نستخدم نفس الألوان ، ولكن إلى طرف مختلف تمامًا. تبدو هذه الصورة كخريطة عالمية مجردة ، مع جزر حمراء وخضراء وبنية. الصورة ليست فقط أكثر برودة - إنها أغمق قليلاً ، على الرغم من أنها تأتي من نفس اللوحة.
إن القدرة على التعرف على تركيبات الألوان الجيدة ليست كافية ، لأن الألوان نادراً ما يتم تطبيقها بالتساوي على تصميم موقع الويب. إن استخدام الألوان بحكمة وفي النسبة الصحيحة لا يقل أهمية عن اختيار الألوان الصحيحة.
تعيّن الخلفية النغمة
المكان الأكثر وضوحًا لإحداث تأثير مع اللون موجود في الخلفية. هذا الامتداد الواسع يمكن أن يجذب الكثير من الاهتمام مثل المحتوى الذي تم وضعه فوقها.
على الرغم من وجود محتوى متطابق ، إلا أن التصميم على اليمين أكثر دفئًا من التصميم الموجود على اليسار. ولكن ما يحدث هنا أكثر من مجرد مبادلة ألوان بسيطة.
أشرطة المحتوى في التصميم الأخضر (أي النص الأبيض على الأحمر) يحملها على خلفية خضراء واسعة. لكن الخلفية الحمراء على اليمين تغسل القضبان الخضراء الضيقة. هذا لأنه ، بالإضافة إلى كونه أكثر دفئًا ، فإن هذا اللون الأحمر الخاص أكثر تشبعًا. في الواقع ، فإن العناصر الوحيدة التي لديها وزن بصري كاف لمواجهة الخلفية الحمراء هي العناوين الكبيرة. نص الجسم الصغير والقضبان الخضراء باهتة في المقارنة. هذا ليس بالضرورة سيئا. خلفية قوية يعطي الصفحة وجود كبير. التصميم الأخضر أكثر برودة ويعطي المحتوى محيطًا أكثر راحة.
أي استخدام للون هو أفضل؟ ذلك يعتمد على نيتك. هل يجب على الزائرين اعتبار المحتوى مرتاحًا أو جريئًا؟ هل تريد اللعب أسفل القضبان الملونة؟ هل أنت قلق من أن الخلفية سوف تغلب على المعلومات؟ هل هناك لون أكثر أهمية من لون آخر في علامتك التجارية؟ ستحدد الإجابات على هذه الأسئلة أي لون هو "الصحيح". تقدم لوحة الألوان الواحدة حلين مختلفين.
لون خلف النص
يتأثر تفاعل النص والخلفية بحجم وكمية كل منهما. يعتمد تأثير النص على الصفحة على لون النص نفسه كما في لون الخلفية - على الرغم من الاتجاه العام للقلق أكثر حول الخلفية.
أعلاه ، يعمل النص الفاتح مقابل خلفية داكنة بشكل أفضل عندما يكون النوع كبيرًا. باقتراض من نظام الألوان الذي بدأناه ، كان هذا الذهب أقل ملاءمة لنص الجسم (أي حوالي 13 بكسل أو أصغر). الحل بسيط:
أعلاه ، النص الصغير في الصفين الأخيرين في ظل من الذهب. إنها ليست بيضاء تمامًا ، ولكنها أكثر وضوحًا من السورتين في الصورة الأولى. التباين الإضافي يبقي النص الصغير من التغلب على الخلفية. المفتاح هو استخدام نظام الألوان كنقطة بداية ، وليس قاعدة ثابتة. إذا كان لون الخلفية يهدد بتجاوز العناصر الأصغر ، قم بزيادة التباين ، مما سيحافظ على سلامة النظام وسيبقي المحتوى مقروءاً.
النص على الأبيض
تحتوي العديد من صفحات الويب على خلفيات بيضاء أو مناطق محتوى بيضاء. لكن "الأبيض" لا يعني "فارغة". إن مساحات كبيرة من اللون الأبيض تؤثر على كيفية إدراك اللون. فمثلا:
الألوان التي بدأناها بنظرة أخف عند استخدامها للنص.
- الأزرق الداكن نسبياً يخلق تبايناً كافياً لجعل النص مقروءاً ضد الأبيض.
- يمزج هذا اللون الأخضر الخاص في الخلفية. إذا كان القصد هو الانسجام ، فإن الأعمال الخضراء.
- أحمر + أبيض = وردي أو خوخ.
- الذهب يشبه تقريبا نغمة اللون البني.
الأبيض يميل إلى سطع كل شيء يلمسه. إذا كنت ترغب في تعيين مزاج خفيف ، فقد يعمل أي من المجموعات أعلاه. لمزيد من التأثير ، يمكنك تعتيم نظام الألوان.
اللعب مع أنظمة الألوان في Photoshop
إذا لم يتطلب التصميم الخاص بك استخدام جميع الألوان في مخططك بشكل متساوٍ ، فيجب عليك اختبار لون أو لونين للسيادة. الخدعة هي العثور على مخطط مع الألوان التي تعمل مع بعضها البعض ومع اللون السائد.
لحسن الحظ ، لدينا عملية سهلة لاختبار الألوان. لمعرفة كيف تؤثر مقاييس الألوان المختلفة على التصميم ، اتبع هذه الخطوات في Photoshop.
1. البحث عن أو إنشاء نظام الألوان. يحتوي مثالنا على خمسة ألوان ، ولكن أي رقم فوق واحد سيعمل.
2. قم بإنشاء صورة جديدة في Photoshop ، 500 × 500 بكسل ، مع خلفية بيضاء.
3. قم بإنشاء أربع طبقات جديدة (ستكون طبقة الخلفية الخاصة بك هي الخامسة). إذا كان مخططك يحتوي على أكثر من خمسة ألوان أو أقل ، قم بإضافة طبقات أو إزالتها وفقًا لذلك.
4. املأ كل طبقة بلون مختلف عن مخططك.
5. أضف قناع طبقة لكل طبقة فوق طبقة الخلفية. يجب أن تبدو لوحة الطبقات كما يلي:
أعلاه ، طبقات لوحة Photoshop ، مع طبقة واحدة لكل لون ومع أقنعة طبقة مطبقة.
6. قم بتشغيل إجراء "Thresholdizer" على كل قناع طبقة - ولكن ليس على الطبقات نفسها.
أعلاه ، عند استخدام الإجراء "Thresholdizer" ، تأكد من تحديد قناع الطبقة ، وليس الطبقة الفعلية. إذا قمت بتشغيل الإجراء على الطبقة عن طريق الخطأ ، يكون سعيدًا بوظيفة "التراجع".
يقوم هذا الإجراء في الغالب بإنشاء نمط عشوائي في قناع طبقة. من هنا ، يتولى المصمم المسؤولية: مع تحكم "العتبة". قم بتحريك التحكم عتبة اليسار للكشف عن المزيد من طبقة معينة ، والحق في الكشف عن أقل. سيؤدي تطبيق هذا الإجراء على كل قناع طبقة إلى جعل لون واحد يسيطر على الألوان الأخرى في نمط عشوائي.
في هذه الحالة ، يحدد عنصر التحكم Threshold مقدار طبقة معينة مرئية. يخفي قناع الطبقة السوداء في الغالب الطبقة. في الغالب أبيض يكشف عن الطبقة. يؤدي تشغيل إجراء Thresholdizer على كل قناع طبقة إلى إنشاء مجموعة متنوعة من الألوان مثل:
يعرض مستند Photoshop هذا الشكل الذي قد يبدو عليه التصميم إذا كان اللون الأصفر هو المسيطر. يعد ضبط الألوان الآن بمثابة التقاط: لإعطاء لون أكثر (أو أقل) ، استخدم فقط أمر Photoshop (مثل Image> Adjustments> Hue Saturation ).
على سبيل المثال ، لا يبدو لون الظل الأخضر الذي كان يعمل بشكل جيد مع الأزرق في وقت سابق جيدًا جدًا حتى الآن أن اللون الأزرق ليس مهيمنًا. بعض التجارب تكشف ما يلي:
لدينا هنا نوعان مختلفان من نظام الألوان الأصلي. التباين رقم 1 يظلم الأخضر قليلاً. يكاد يعمل. يغيّر التباين # 2 كل شيء ما عدا اللون الأصفر لإضافة التباين ومحاذاة الأشكال.
ماذا لو كان تصميمنا أزرق في الغالب بدلاً من اللون الأصفر؟ هذا الظل الأزرق غامق بما فيه الكفاية ليتناقض مع الألوان الأخرى ، لكن لا ينسق أي منهم - كل الانتخابات التمهيدية. باختيار مهيمن جديد ، قمنا بإنشاء مشكلة جديدة.
يستبدل التباين رقم 1 أعلاه اللون الأحمر الناعم بلون أزرق داكن ويحول الظل الأخضر إلى نعناع باهت. يختلف الشكل رقم 2 في الاتجاه الآخر ، باستخدام المزيد من اللون الأحمر (أو العنابي) بدلاً من أقل.
جدارة أي من هذه الاختلافات هو ذاتي. من الناحية المثالية ، يمكنك تطبيقها على التصميم الفعلي قبل اتخاذ قرار نهائي. المفتاح هو في العملية: الحصول على لوحة ، واختيار اللون المهيمن وجعل الآخرين يعملون معه.
حول إجراء "العتبة"
ليس هناك غموض لهذا الإجراء. يمكنك الحصول على نفس التأثير من خلال تطبيق Filter> Render> Clouds أو Filter> Render> Difference Clouds to a mask mask. يعمل هذا الإجراء على تنقيح العملية فقط ، بتنظيم أمر Threshold إلى deciles.
رجاء خذ حريتك في قم بتنزيل إجراء "Thresholdizer" . الأفضل من ذلك ، قم بإنشاء حساب خاص بك ومشاركته مع الجميع من خلال توفير رابط في التعليقات أدناه.
تقييم اللون بدون العمل
بالطبع ، هناك طرق للحكم على اللون دون اللعب مع Threshold. ابدأ باختيار لون رئيسي واحد ، ثم اجعل الآخرين يعملون معه.
هنا مخطط الألوان الأصلي لدينا ، باللون البني كاللون الأساسي.
لقد قللنا من اللون الأحمر والمشبعة باللون الأحمر. فالألوان الأكثر قساوة تقف بمفردها ، كما يفعل اللون الأزرق (الذي لم يتم ضبطه).
هنا ، لقد تلاشى اللون الأخضر والأصفر والأحمر. تمتزج هذه "اللكنات" المنخفضة المفتاح مع الخلفية البنية. أظلم اللون الأزرق لخلق التباين.
الألوان الأساسية الثلاثة الداكنة تسير بشكل جيد مقابل اللون البني المتوسط ، بينما يعمل اللون الأصفر الباهت كألوان مميزة.
مرة أخرى ، يأتي القرار النهائي عندما يقوم المصمم بتطبيق هذه المخططات على التصميم الفعلي. حتى ذلك الحين ، هذه هي مجرد نقاط بداية: أدوات مفيدة لتجنب الصدامات ، ومراجع مفيدة للحفاظ على التصاميم في موضوع وطريقة رائعة لاستكشاف تركيبات.
اللون هو مجرد عنصر التصميم. استخدام اللون هو مهارة يجب على المرء أن يمارسها للتحكم في المزاج ، لزراعة ذوقه وأن يصبح قادراً على رؤية الاحتمالات في عدد قليل من الحوامل.
هناك شيء واحد مؤكد: يجب أن يذهب اللون الأخضر.
مكتوبة حصريًا لموقع Webdesigner Depot by Ben Gremillion. بن هو حر مصمم على شبكة الإنترنت الذي يحل مشاكل التواصل مع تصميم أفضل.
كيف تختبر الألوان؟ ما هي الطرق المفضلة لديك لإنشاء مخططات الألوان؟ شارك آراءك في التعليقات أدناه.