هذا التطبيق البسيط يمنعك من رؤية كيف تستخدم هوليوود اللون لتناقش عواطفك

لماذا يشعر جورج بأنه لا يهتم بالخضراوات الأخضر والأزرق؟

Why does Joker feel so unsettlingly green and yellow?

لماذا يتم تغطية "Blade Runner" في الحليب واللون الأسود؟

Why is Blade Runner soaked in teal and orange?

لماذا يجعلك تنظر إلى الجلد جافًا ومحركًا؟

Why does film make skin look soft and warm?

هذا ليس سحرًا، هذا هو اللون.

ومن يسيطر على اللون يسيطر على الوزن العاطفي للكاميرا.التصنيع باللون هو لغة التصوير في السينما - وسيلة لتشكيل الجوانب، والتركيز على الاهتمام للمرء، وتحديد أصوات القصة. ويمكن أن يكون رائعًا ومتجددًا. أو شجاعًا ونموذجًا، كما هو الحال في أعمال وونغ كار-واي، فنشير، نولان، أو فيلينوف. ولكن لتحدث هذه اللغة بسهولة، تحتاج أولا إلى فهم اللغة.

أين تبدأ عمل الألوان في الواقع؟ كيف نعرف ما هو الألوان "الحقيقية" على الإطلاق؟ وكيف يمكنك ترجمة الهدف الإبداعي إلى العمل التقني؟

Spoiler: لا يبدأ مع LUT أو مسحوق.يبدأ مع الأهداف الألوان، والتقييم، وبلاطين المختارة بعناية.. .

في هذه السلسلة، سنستعرض:

• ما هي الألوان في المستوى الأكثر أساسية؟
• لماذا الحد من منصة الويب الخاص بك هو ميزة وليس غرامة
• كيف تعمل خرائط الألوان (وماذا يهمها)
• كيفية بناء أداة التقييم الخاصة بك في المتصفح - مع React و بعض الرياضيات البسيطة.

لن ننسى ذلك فقط، سنعرفه.وسوف تكون قادرًا على التجربة، وربما لأول مرة في الواقع.seeما هي الألوان التي تم إنتاجها

What is Color Grading, and Why Start with Color Targets?

إعداد الألوان هو عملية تعديل وتصميم صورة لتحقيق لونًا عجيبًا محددًا، أو تأثيرًا عاطفيًا، أو معيارًا تقنيًا.

• التوازن في الضوء والطريق الأبيض؛
• إصلاح تغيرات اللون التقني؛
• تصميم نمطًا عجيبًا مع التناقضات والألوان والألوان.

ولكن التقييم ليس فقط عن "تجعلها جميلة"، بل هو عن السيطرة - على المزاج، والتركيز للمرء، واللغة المرئية لجميع القصة.

قبل تطبيق أي نظر إبداعي ، تحتاج إلى إرسال الصورة إلىneutral stateوهذا يعني :

• إصلاح الألوان غير المرغوب فيها (إصلاح الألوان)
• تعزيز الصورة إلى مساحة الألوان القياسية (مثل Rec.709 أو sRGB).
• تكييف المواد من الكاميرات المختلفة إلى خطة أساسية متوازنة.

وبالإضافة إلى ذلك، فإن الألوان تستخدمcolor targetsمثل هذه **ColorChecker،كروموسوم** أو أرقام أخرى.

هدف الألوان هو مكتبة من صفحات الألوان معالقيمة المحددةهذه القيم ليست عاطفية - يتم الحصول عليها من خلال قياسات الفلكية في بيئات مراقبة باستخدام المعدات المهنية مثل X-Rite أوKonica Minolta الهواتف الذكية.

واحدة من الأهداف الأولى التي أجريت على نطاق واسع هيكوداك غراي Scale- لقطة من الألوان الخضراء المستقلة المستخدمة لسيطرة الإضاءة. بعد ذلك جاءت أرقام متقدمة مع الألوان الكاملة - مثلMacbeth ColorCheckerتم إنشاؤه في عام 1976 (الذي يطلق عليهX-Rite ColorCheckerويحتوي على 24 لونًا من الألوان التي تم تصميمها لتثبيت الألوان الحقيقية المشتركة: الجلد البشري، السماء الأزرق، الخشب الأخضر، وأكثر.

مع ظهور الصورة الرقمية والتلفزيون الرقمي، أصبحت الهدفات الألوان أكثر أهمية.إنها الآن أدوات أساسية لتقييم ليس فقط الكاميرات، ولكن أيضًا الشاشات والرسائل والسيارات المحمولة، وأي جهاز يعمل مع الألوان.إنها تستخدم في تقييم الألوان، وتحديد الملفات، والتوازن الدائري لعمليات العمل - من إنتاج الأفلام إلى التصوير العلمي.

اتخذ X-Rite ColorChecker، على سبيل المثال. كل ملف يتم قياسه تحت إضاءة قياسية (عادةًD65أوD50) ، مع النتائج المكتوبة فيCIE XYZ coordinates- نموذج لون مستقل من الجهاز، ثم يتم تحويل هذه الترتيبات إلىRGB valuesاعتمادًا على مساحة الألوان العملية الخاصة بك (مثلsRGB،Rec.709أو أوAdobeRGB)

لذلك ، فإن المجموعات RGB التي نستخدمها في تطبيقنا ليست فكرة ، بل هي ممثلات رقمية دقيقة من الملفات المعتمدة ، التي يتم قياسها بشكل طبيعي.

إذا تم تحديد ملصق الجلد في ColorChecker Classic على [194, 150، 130] في RGB ، فهذا هو الطريقة التي يجب أن تبدو عليها في الظروف المناسبة.

The Catch: Color Charts Are Just the Beginning

الأهداف الملونة هي ضرورية للتقييم - ولكن هذا هو كل ما هو عليه.1 بدءلا تتحمل المسؤولية عن:

• كيف تتصرف الألوان في الارتفاع أو الشمعة
• الخصائص الفريدة للفيلم أو الألوان؛
• أو الهدف الإبداعي خلف نظرة معينة.

في الأدوات المهنية مثلديفيز حلأوالمقاومةوبالتالي ، فإن أرقام الألوان هي خطوة واحدة فقط في خطوط طويلة. من هناك ، يمكنك التحرك إلى العمليات المتقدمة مثل التعبير عن الأفلام ، وتصوير الألوان ، والخضروات ، والتشويق ، والتغيرات النمطية الأخرى. لذلك من المهم فهم:a chart is a calibration tool — not a style.

CinePalette: A Minimal Tool for Exploring Color Palettes

لكي نتعرف على كيفية تأثير اختيار الخلايا على الصورة ، قمنا بتصميمCinePalette- تطبيق ويب بسيط يظهر ما يحدث عندما تقوم بتحديد مساحة الألوان (العملية المعروفة باسمتخفيض البلاستيك)

What You Can Do with CinePalette:

• تحميل أي صورة؛
• اختيار صفحة (ColorChecker ، Portra ، Sepia ، وما إلى ذلك) ؛
• إعادة تثبيت كل كيلومتر إلى الألوان الأكثر قوة في هذا الملعب.
• مقارنة قبل و بعد مع التلاعبات التفاعلية؛
• حفظ النتيجة؛
• أو بناء ملابسك الخاصة من الصفر.

How It Works in Code

تطبيقنا يعمل بالكامل في المتصفح باستخدامReactوأيضاًCanvas APIالمشروع - يطلقCinePalette- ستكون مفتوحة على مصدر مفتوح ومتوفرة على GitHub (الانترنت في نهاية سلسلة).

نبدأ مع مجموعة من الخلايا المحددة، ولكن يمكن للمستخدمين أيضا إنشاء وتخزين أنفسهم.Kodak Portra 400البلاستيك تبدو:

"Portra 400": [
  [75, 60, 50],     // shadows
  [160, 130, 110],  // skin tones
  [220, 200, 180],  // highlights
  [60, 100, 80],    // foliage
  [180, 150, 100]   // neutral
],

يحدد الخلايا المختارة ما هي الألوان التي "تسمح" بظهورها في الصورة النهائية، وهي تصبح لغة المرور للكاميرا - الألوان الأساسية التي تحدد موهبتها وأسلوبها.

عندما يقوم المستخدم بإرسال صورة ويختار الخلايا ، هذا ما يحدث تحت القفز:

1. يتم إنشاء الصورة إلى <canvas> مخفية - وهذا يوفر لنا الوصول على المستوى الكتروني للتعامل مع البيانات.
2. نحن نختار مصطلح ImageData ، الذي يحتوي على مجموعة حيث يتم تصنيف كل مقطوع من قبل أربعة قيمة: [R، G، B، A].
3. نحن نضيف من خلال كل مقطوعة ، استخراج لونها RGB.
4. بالنسبة لكل مقطع ، نجد الألوان المرتبطة الأقرب من الخلايا المختارة ، باستخدام المسافة اليكليدية في مساحة RGB - وتبديلها.

دعونا نلتحق بطاقة شيرلي وحاول تطبيق بطاقات مختلفة - سوف ترى على الفور كيف تختار بطاقة تشكيل الصورة.

الذاكرة تقع في الميزات التي تحققeach individual pixelولعل العثور علىclosest matching colorمن الخلايا المختارة:

const findClosestColor = (r, g, b) => {
  let minDist = Infinity;
  let closest = [r, g, b];
  for (let [pr, pg, pb] of palette) {
    const dist = Math.sqrt((r - pr) ** 2 + (g - pg) ** 2 + (b - pb) ** 2);
    if (dist < minDist) {
      minDist = dist;
      closest = [pr, pg, pb];
    }
  }
  return closest;
};

ثم نقوم بتبديل اللون الأصلي للكتروني في ImageData باللون الأكثر تفاؤلاً من الخلايا.for every single pixelفي الصورة

for (let i = 0; i < data.length; i += 4) {
  const [r, g, b] = [data[i], data[i + 1], data[i + 2]];
  const [nr, ng, nb] = findClosestColor(r, g, b);
  data[i] = nr;
  data[i + 1] = ng;
  data[i + 2] = nb;
}

بمجرد معالجة جميع المكسرات ، نقوم بإعادة إنتاج النتيجة إلى <canvas> و تحويلها إلى صورة باستخدام .toDataURL().see the result instantly in the browser- و تنزيل الصورة المصفحة بسهولة واحدة.

ctx.putImageData(imageData, 0, 0);
setFilteredImage(canvas.toDataURL());

هنا، نحن نستخدمEuclidean distance in RGB space- طريقة الكلاسيكية لتقييم مدى "قرب" اثنين من الألوان:

const dist = Math.sqrt((r - pr) ** 2 + (g - pg) ** 2 + (b - pb) ** 2);

هنا ، (r ، g ، b) هو لون الكترونات الحالية ، و (pr ، pg ، pb) هو واحد من الألوان في الخلايا.closest visual matchفي الخلفية المختارة.

هذا النهج سهل الاستخدام، ولكن لديه قيود:الفضاء RGB لا يعبر عن كيفية فهم الأشخاص لونًا- على سبيل المثال ، نحن أكثر حساسية إلى الأخضر من الأزرق ، ويمكن أن تكون الاختلافات في الضوء خاطئة.

ونحن نستخدم هذا النهج فيCinePaletteومع ذلك ، حتى في شكلها الحالي ، قد تلاحظ أن بعض الألوان تتبدل بطريقة تشير إلى غير متوقعة أو "الخلفية".

في الإصدارات المستقبلية، ونحن نتطلع إلى إضافة تبادل بينRGB and CIELABمساحة الألوان – تتيح للمستخدمين مقارنة كيف تؤثر النماذج المختلفة على دقة التوافق الألوي.

Why Does This Matter?

يوضح CinePalette خطوة أساسية ولكن أساسية في تقييم الألوان:palette restrictionهذا هو المكان الذي يبدأ كل نمط بصري - مع السؤال:“What if we only used these colors?”.

يوفر مجموعة Portra أصابعًا دافئًا ومثيرة للاهتمام. Pro 400 يشعر بالراحة والترفيه. Teal & Orange يوفر ضربات فيلمية عالية التفاعل. على عكس الأدوات مثل Dehancer أو Resolve، CinePalette لا يثبت الفيزياء من الفيلم.الألوان هي أداة لتصميم النماذج والمسلسل.

What’s Next?

This is just the beginning. In the next parts of the series:

• سوف نضيف CinePalette مع القدرة على اختيار صفحة من صورة المقارنة.
• إضافة استخراج تلقائي لخطوط الألوان من أي نطاق أو صورة؛
• إدخال التبديل بين RGB وLAB للحصول على توازن أكثر دقة من الواقع.
• وتحديد كيف يعمل التوازن اللون - وكيف يمكنك استخدامه في التصنيف في العالم الحقيقي.

الحفاظ على التركيز - وإعداد ليس فقط لتعلم الألوان، ولكن حقا أن ترى ذلك.