() translation by (you can also view the original English article)
ما زلت أتذكر بوضوح إحدى أولى فصولي الفنية عندما كنت ، بصفتي طفلاً صغيرًا متلهفًا ، عرضت مجموعة من الدهانات ذات الألوان الزاهية. أتذكر سرور رؤية الألوان الأساسية تتحول إلى ألوان ثانوية للمرة الأولى ، ووجدت أنه إذا كان بإمكان لونين أن يصنعوا لونًا جديدًا جميلاً ، يجب أن تجعل كل الألوان معاً شيئًا أفضل! من المؤسف تماما أن ندرك أنه بغض النظر عن كيف ذهبت عنه، إذا استخدمت كل الألوان المتاحة لي لا محالة انتهى بلون كاكي فقط يمكن أن يسمى "BLECH".
بعد سنوات ، باعتباري مصمم ويب حديث العهد ، واجهت شيئًا من العملية نفسها مرة أخرى. عندما كنت أتعلم ، وقعت في فخ لا مفر منه من استخدام الكثير من الألوان ، أو الجمع بينهما بطريقة خاطئة ، فقط في نهاية المطاف مع شيء من "BLECH".
يشرعون في محاولة للتعرف على كيفية إنشاء مخططات الألوان لشبكة الإنترنت، ولقد وجدت كثير من المعلومات الرائعة حول نظرية اللون. قرأت عن الأشكال والصبغات والظلال والنغمات والتشبع والسطوع ، بالإضافة إلى مخططات ألوان متشابهة أحادية اللون وثلاثية وتكميلية ومركبة.
ومع ذلك ، وبدون وجود إطار عملي لوضع هذه المعلومات في حيز التنفيذ ، وجدت أنه في البداية لم يتمكن من اقتنائها أكثر من مجرد تصميم مواقع الويب بشكل جيد. وفي الواقع أنه فقط بعد أن بدأت إنشاء أنظمة الألوان الصلبة عن طريق نقية التجربة والخطأ التي بدأت كل نظرية اللون وقد قرأت بمعنى.
في هذه العملية، التقطت بعض "المبادئ التوجيهية للسلامة" لموقع ويب أنظمة الألوان التي كنت أتمنى لو كان يعرف في البداية. عندما تبدأ لأول مرة ، لن تكون نظرية الألوان الكاملة بالضرورة ما تحتاجه في المقدمة. في كثير من الأحيان تحتاج إلى الحصول على الكرة المتدحرجة بشيء أقل نظريًا ، و "رسم بأرقام".
في هذا البرنامج التعليمي، وأنا سوف أكون معكم تقاسم ستة النار تأكد، "لا يمكن أن تذهب الخطأ" المبادئ التوجيهية التي يمكنك اتباعها للحصول على فهم تأسيسية في العمل مع الألوان في تصميم مواقع الإنترنت. هذه ليست قواعد ، لأنك سوف تنشئ العديد من مخططات الألوان في حياتك المهنية التي ستذهب في اتجاه مختلف تمامًا. بدلاً من ذلك، أنهم نقطة انطلاق، دليل سلامة لكيفية البقاء على قيد الحياة الخاصة بك مباريات الأولى في العالم تصميم ويب دون تشغيل أي وقت مضى إلى "BLECH".
1-نظام ألوان من القماش، وليس اللوحة
أحد أكثر المبادئ الأساسية في تصميم الويب هو أنه بغض النظر عن مقدار الوقت الذي تقضيه في إنشاء تصميم مجيد ، فإن دوره النهائي هو لعب دور ثانوي للنجم الحقيقي للعرض. المحتوى. يجب ألا يجعل مخطط الألوان الخاص بك تصميم الموقع "أعلى" من المحتوى الذي يقدمه. ينبغي أن يكون التصميم الخاص بك في الخلفية، والمساعدة على دفع محتوى الموقع إلى الصدارة.
عملية شائعة جدًا في تصميم الويب هي إنشاء التصميم نفسه في عزلة نسبية ، غالبًا في برامج مثل Photoshop أو Sketch. إذا لم يكن لديك أي محتوى المثال في مكان يمكن أن يكون من السهل في نهاية المطاف مع تصميم التي قد تبدو كبيرة بحد ذاتها، وأن عميل قد الحب جيدا في نموذج بالحجم الطبيعي، ولكن الذي هو تشتيت للغاية لزوار الموقع في الممارسة. في الواقع ، ترتبط عملية تصميم الويب ارتباطًا وثيقًا بالمحتوى الذي تبدو فيه الكثير من تصميمات الويب عالية الجودة خالية من المحتوى.
أنها فكرة عظيمة للبدء بوضع نموذج لنوع المحتوى الذي تتوقع أن يظهر في الموقع، أما في تصميم البرامج أو مباشرة في التعليمات البرمجية، ثم تصميم حوله. وينطبق ذلك على وجه الخصوص في حالة تضمين صور أو صور لأسلوب معين ، لذلك يمكنك التأكد من تدفق التصميم الخاص بك بشكل متناغم معه. تخيل أن محتوى الموقع هو فرد فريد يجب عليك تخصيص بدلة مناسبة له.
2-تبدأ مع قاعدة رمادية بسيطة
هناك عدد لا حصر له من تركيبات الألوان التي يمكنك اختيارها لخلفيتك الأساسية وقاعدة النص الأساسية. ومع ذلك، توصيتي أن تبدأ بإتقان واحدة أسهل، وهذا رمادي أبيض و/أو الضوء في الخلفية جنبا إلى جنب مع النص الرمادي الداكن.
إذا نظرت إلى أي مجموعة من المواقع أو القوالب أو المظاهر الشائعة ، فهناك رهان جيد على أن أغلبية هؤلاء لديهم نفس قاعدة النص الرمادي الداكن على الأبيض أو الرمادي الفاتح ، وهذا لسبب وجيه. مع هذا الجمع ويضمن لك تقريبا لتوفير قابلية القراءة للزائرين، والسماح بالنص والصورة على أساس المحتوى تأتي في المقدمة.
مع وضع بعض محتوى المثال في وضع تخطيط الرمادي الأساسي ، على سبيل المثال:
وبصفة عامة يجب تجنب استخدام jet الأسود للنص كما رمادي داكن قليلاً أسهل للقراءة. مجموعة مريحة في أي مكان من #333333 إلى #666666.
بالنسبة لألوان الخلفية ، يكون #FFFFFF الأبيض الكامل هو الرهان الأكثر أمانًا للخلفيات مباشرة خلف أي نص أساسي في النص. يمكن أن تذهب في أي مكان عناصر أساسية أخرى من #FFFFFF إلى أسفل إلى حوالي #CCCCCC.
مرة أخرى ، هذه ليست قواعد للألوان التي يجب عليك استخدامها ، مجرد إرشادات تعلم أنها يمكنك البدء بأمان.
3. اختر فقط لون واحد لتسليط الضوء
الأكثر شيوعاً وضع أنظمة الألوان الذهاب الخطأ عند المشاحنات عدة ألوان مختلفة. يمكنك استخدام ألوان أكثر، وأكثر تعقيداً فإنه يحصل على الاحتفاظ بها كل شيء تحت السيطرة. لذا ، فبداية ، أضف لونًا إضافيًا واحدًا أعلى قاعدة تدرج الرمادي التي ستستخدم لغرض إبراز أشياء مثل الروابط ، وبعض العناوين ، والقوائم ، والأزرار وما إلى ذلك. يمكن أن يكون لديك لون الأزرق، الأخضر، والأحمر أو يحلو لك.
اختر لون الخاص بك بأول يرسم مربع حول قاعدة الخاص بك حيث يمكن قياس كيفية ظهور الألوان الخاصة بك فيما يتعلق بجميع العناصر. ثم افتح منتقي الألوان وانقر في منتصف الربع الأيمن العلوي من خريطة الألوان.
حرك شريط التمرير لأعلى ولأسفل واختر لونًا تعتقد أنه سيعمل جيدًا لتصميمك.
في هذه المرحلة ، أنت الآن تعمل بثلاثة ألوان أساسية ؛ خلفيتك ونصك وتسليط الضوء عليه. يمكن، وينبغي، باستخدام لون واحد أو أكثر في المستقبل، لكن الآن أعتقد أنها مثل شعوذة. أنت تعمل حاليًا بثلاث دبابيس شعوذة ، لذا ارتاح مع هؤلاء الثلاثة فقط ، ثم أضف المزيد إلى الدوران عندما تكون واثقًا.
أنت فقط تعلمت:
تعلمت فقط كيفية اختيار "هوى". باختصار، لوناً لون أساسي. عندما تقوم بتحريك شريط التمرير صعودا وهبوطاً سترى القيمة "H" في تغيير منتقي الألوان الخاصة بك.
"H" تشير إلى تدرج اللون ، وحالما تختار لون التمييز ، يكون الرقم في هذا المربع هو لونه.
4. إذا كنت في شك، استخدم الأزرق
إذا كان لديك أي شك على الإطلاق في لون التمييز المراد استخدامه ، فاختر اللون الأزرق. محمل الجد. غالباً ما يكون أزرق اللون الأكثر مرونة للعمل مع وتناسب أكبر عدد من أنواع المواقع. يمكن للألوان مثل الأرجواني والأصفر أن تكون لطيفة للغاية ، ولكن يمكن أيضا أن تتحول بسرعة متوهج إذا استخدمت بالطريقة الخاطئة.
من ناحية أخرى ، يمكنك إجراء أي شيء باللون الأزرق على أنه لون مميز ولا يمكنك أن تخطئ إلى حد بعيد. إذا لم تكن متأكدًا من أين تبدأ في التعلم أو اللون الذي ستستخدمه في مشروع ما ، فما عليك سوى الرجوع إلى اللون الأزرق. الأزرق خاصة اختيار يمكن أن يكون في أي مكان من أزرق الداكن (هوي 235) عن طريق أكوا (هوي 190) وكنت في الأرض آمنة جداً.
لمخططي المثال لقد اخترت هوى من 205. عندما كنت قد استقر على لونك تسليط الضوء على المضي قدما وإضافته إلى التصميم الخاص بك أينما كنت تعتقد أن هذا هو المطلوب. إذا كنت تستخدم لون الخاص بك على أزرار أو أي منطقة مع النص على أعلى من ذلك، تغيير لون النص كذلك. في هذه الحالة ، قمت بتغيير النص فوق المساحات المظللة إلى الأبيض.
5. أضف تباينات على لون التظليل
مرة واحدة التي اخترتها الخاص بك إجازة لون تمييز شريط التمرير (هوي) حيث أنها من تلك النقطة على. كنت بحاجة إلى ألوان إضافية للتصميم الخاص بك، ولكن أنهم ذاهبون إلى أن اختلافات لون واحد تسليط الضوء على تلك التي قمت باختيارها مسبقاً من أجل الحفاظ على الأشياء البسيطة.
لإنشاء اختلافات ألوان ، اسحب في منطقة الخريطة الخاصة بمنتقي الألوان.
تستخدم هذه الأنواع من تباين الألوان لأشياء مثل:
تحوم الآثار
الحدود
نص Subtler أكثر من تسليط الضوء على اللون
التدرجات
تأثيرات الضوء والظل
6. ابق خارج الزاوية اليمنى العليا
أعلى الزاوية اليمنى للخريطة الملونة هي أرض ألوان الأوكتان المرتفعة. الألوان في الزاوية اليمنى العليا مثل سباق سيارات الفورمولا 1؛ يمكن القيام بشكل مثير للدهشة، وهي مغرية جداً، ولكن عموما فإنه يأخذ الكثير من الخبرة باستخدامها أيضا. دون تلك التجربة أنها تسبب الحوادث، ولذلك فمن الأفضل لقطع الأسنان على الألوان التي هي أكثر خففت.
لهذا السبب في القسم الثالث من هذا البرنامج التعليمي ، طلبت منك النقر على الخريطة الملونة في وسط الزاوية اليمنى العليا قبل تحديد لون التظليل الخاص بك ، للتأكد من أنك بدأت باللون الخفيف نسبيًا.
لتوضيح ذلك ، شاهد ما يحدث إذا قمت بتغيير لون التصميم حتى الآن ، دون لمس خريطة الألوان.
لا تزال تبدو جميلة جداً، أليس كذلك؟ ومع ذلك إذا سحب الخريطة اللون تصل إلى تلك الزاوية العلوية اليمنى، فجأة أنها ليست لطيفة جداً.
أوش عيني! إذا كنت ترغب في التأكد من أن كنت لا تجتاح شبكية العين لزوار موقعك، اتبع إرشادات عامة للأمور التنغيم بالبقاء خارج الزاوية اليمنى العليا من خريطة ملونة.
أنت فقط تعلمت:
في الفرعين الأخيرين تعلمت فعلا بتطبيق بعض جوانب مختلفة من نظرية اللون. تعلمت كيفية العمل مع:
التشبع والسطوع.
عند قيامك بالسحب حول منطقة الخريطة لمنطقة منتقي الألوان ، سترى قيم "S" و "B" تتغير ، والتي تعني "Saturation" و "Brightness" على التوالي. سترى أيضا عدد هوي يبقى على حالة. حيث تقوم بإنشاء تباين الألوان بتغيير التشبع والسطوع هوي الأصلي الخاص بك.
التشبع والتلوين
التشبع هو كيف يتم التعبير عن لونك بوضوح. على سبيل المثال، تعتقد "قميصي كان مشبع بالنبيذ الأحمر المسكوب". يتم تحديد تشبع منقار الألوان على أساس اللون الأبيض الذي يتم خلطه مع لون القاعدة الخاص بك. الأبيض أقل وأكثر تشبعا.
عندما تقوم بالسحب إلى اليمين على خريطة الألوان ، فإنك تقلل من مقدار اللون الأبيض وبالتالي تزيد التشبع بحيث ترتفع قيمة "S". عندما تقوم بالسحب إلى اليسار باتجاه كل الزاوية البيضاء فإنك تقوم بتقليل التشبع بحيث تنخفض قيمة "S".
يسمى هذا الاختلاط من اللون الأبيض مع لونك الأصلي أيضًا بإنشاء "صبغة". المصطلح يأتي من خلط، حيث يتم خلط طلاء أبيض مع طلاء ملون الطلاء.
السطوع والظلال
السطوع هو مقدار اللون الأسود الموجود في لونك. الأسود أقل، وسطوع أكثر.
عند السحب لأعلى على الخريطة ، يمكنك تقليل مقدار اللون الأسود ، وزيادة السطوع وتزداد قيمة "B" في منتقي الألوان. عندما تقوم بسحب لأسفل يمكنك زيادة السوداء وترتفع قيمة "ب".
خلط الأسود مع هوي الأصلي الخاص بك يسمى أيضا إنشاء "ظل". يأتي هذا أيضًا من مزج الطلاء ، حيث يتم خلط الطلاء الأسود بطلاء ملون.
نغمات
عند مزج اللون الرمادي في لونك ، يسمى هذا إنشاء "نغمة". عند الانتقال خارج الزاوية اليمنى العليا كما فعلنا أعلاه كنت خفض كلا الخاص بك التشبع والسطوع الذي يضيف الأبيض والأسود (الرمادي)، ومن ثم إنشاء نغمة. لذلك في أي وقت يكون كلا من التشبع والسطوع أقل من 100٪ ، هذه نغمة.
مرة أخرى ، يأتي هذا المصطلح من خلط الطلاء ، حيث يتم إنشاء الطلاء الرمادي ثم يخلط مع الطلاء الملون. وهذا أيضا فيها عبارة "الأمور لهجة" يأتي من. هوة بارد؟
أنظمة الألوان أحادية اللون
نظام الألوان "أحادي اللون" هو المكان الذي تأخذ فيه لونًا أساسيًا وتوسعه باستخدام الصبغات والظلال والنغمات. كنت علمت للتو كل ما لهذه الشروط يعني في إعداد عملية. حتى بانتقاء أحد تسليط الضوء على اللون، وخلق تباينات على ذلك، فعلا إنشاء نظام ألوان أحادية اللون.
ماذا بعد؟
تبقى ممارسة أنظمة الألوان أحادية اللون الخاص بك على قاعدة رمادي حتى تشعر بالثقة حقاً. حاول إنشاء لهم مع صبغات مختلفة كلون الخاص بك، تجربة لنرى كيف يتغير التشبع وإعدادات السطوع كنت قادراً على استخدام.
عندما تشعر بالراحة ، انتقل إلى إضافة لون تمييز إضافي واحد. وأوصى تحاول البرتقالي والأزرق في مبارياته الأولى الخاص بك كما أنها تميل إلى أن تكون الثنائي أسهل للعمل مع. ثم حاول الأخضر والأزرق ، والتي في تجربتي هي الثانية أسهل. كل من هذه المجموعات تميل إلى أن تكون ضربة مع العملاء والزبائن.
أفضل ما يمكنك فعله لدفعك لفهم مخططات الألوان للويب هو انتزاع امتداد متصفح الألوان مثل Colorzilla ، واستخدامه لبدء دراسة كيفية عمل المصممين ذوي الخبرة. كما كنت تصفح حول الإنترنت، عندما ترى نظام ألوان التي تبدو كبيرة تندلع عينات الألوان وإلقاء نظرة على الألوان المستخدمة في الصفحة. لكل عينة تختبرها ، ألقِ نظرة على مستويات التشبع والسطوع التي تناسبها بشكل أفضل. كما تولي اهتماما التي تعمل الألوان في تركيبة مع الآخرين.
إذا موضع شك، يمكنك دائماً أن تعول الخاص بك "السلامة أولاً" المبادئ التوجيهية، وسوف تكون في مأمن من "BLECH" من هنا على.
