ეს მარტივი აპლიკაცია საშუალებას გაძლევთ იხილოთ, თუ როგორ Hollywood გამოიყენებს ფერი თქვენი რეპუტაციაზე

ეს არის

რატომ იმიტომ, რომ ჯოკერი ძალიან რთული და ლურჯი?

ეს არის

Why does Joker feel so unsettlingly green and yellow?

ეს არის

რატომ არის Blade Runner შეჩერებული Teal და Orange?

ეს არის

Why is Blade Runner soaked in teal and orange?

ეს არის

რატომ ხელს უწყობს კანის სინამდვილე და სინამდვილე?

ეს არის

Why does film make skin look soft and warm?

ეს არ არის ფერი, ეს არის ფერი.

და ვინმეს კონტროლი ფერი - კონტროლი ფსიქიკური წონის ფანჯარა. ფერის რეიტინგი არის ვიზიტური ენაზე ფილმი - გზა, რათა დადგინოთ გარემოს, ხელს უწყობს სიტყვას, და დააყენებს ტონით ისტორია. ეს შეიძლება იყოს მახასიათებელი და თითქმის невидимый. ან ცუდი და სტალიზირებული, როგორიცაა სამუშაო Wong Kar-Wai, Fincher, Nolan, ან Villeneuve. მაგრამ ეს ენა განიხილება ფართოდ, თქვენ პირველი უნდა იცოდეთ მისი გრაფიკის.

როგორ ვიცით, რა არის “ესასწორი” ფერი? და როგორ გადაიხადოთ შემოქმედებითი მიზნით ტექნიკური საქმიანობას?

Spoiler: ეს არ იწყება LUTs ან ფილტრები.ეს დაიწყება ფერი მიზნები, კალიბრირება, და მკაცრი არჩევანი პლატფორმაები

ამ სერიაში, ჩვენ გაიგებთ:

ეს არის
• რა ფერები არის ყველაზე ძირითადი დონეზე;
ეს არის
• რატომ შეზღუდვა თქვენი პლატფორმა არის ფუნქცია, არა bug;
ეს არის
• როგორ ფერი გრაფიკები მუშაობს (და რატომ ისინი მნიშვნელოვანია);
ეს არის
• და როგორ შექმნათ თქვენი საკუთარი რეიტინგული ინსტრუმენტი ბრაუზერში - React და ზოგიერთი მარტივი математика.
ეს არის

ჩვენ არ ვცდილობთ, რომ უბრალოდ გაიგოთ. ჩვენ ვცდილობთ, რომ გაიგოთ.და თქვენ შეგვიძლია ექსპერიმენტი, tinker, და ალბათ, პირველად ნამდვილადseeრა ხარისხის ხარისხის ხარისხი შეიცავს.

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

ფერი სტრატეგიის პროცესია, რათა შეესაბამება და სტრატეგიის სურათი, რათა მიღწევა სპეციფიკური ვიზიტური ტონი, ფსიქიკური ეფექტი, ან ტექნიკური სტანდარტი. თუ ფილმი, ფოტო, ან ციფრული წარმოება, სტრატეგიის ჩვეულებრივ მოიცავს:

ეს არის
• შეესაბამება Exposure და White Point;
ეს არის
• ტექნიკური ფერადი ცვლილებები;
ეს არის
• ვიზუალური სტილის შექმნა კონტაქტი, ტონები და ფერი კურსი.
ეს არის

მაგრამ რეიტინგი არ არის მხოლოდ "მუშავება ლამაზი". ეს არის კონტროლის შესახებ - ემოციას, სავარაუდოდ, სავარაუდოდ, ვიზუალური ენაზე მთელი სიტყვას.

ადრე, რაც თქვენ გამოიყენოთ ნებისმიერი შექმნილია ნახვა, თქვენ უნდა მიიღოს სურათი aneutral stateრაც ნიშნავს:

ეს არის
• არჩეული ფერები არჩეული ფერები არჩეული ფერები არჩეული ფერები არჩეული ფერები არჩეული ფერები არჩეული ფერები არჩეული ფერები არჩეული ფერები
ეს არის
• ჩვეულებრივი ფერი ფართობი (გალითად, Rec.709 ან sRGB)
ეს არის
• შეესაბამება მასალები სხვადასხვა კამერები შეესაბამება კონფიგურაცია.
ეს არის

და ამისთვის, ფერები გამოიყენებაcolor targetsროგორც ეს **ColorCheckerდაChromaმონი, ** ან სხვა რეიტინგული გრაფიკები.

ფერი target არის გრაფიკი ფერი patches ერთადზუსტად ზუსტად ზუსტად ზუსტადეს ღირებულება არ არის უარყოფითი – ისინი მიღებული სპექტროფოტამეტრიული ზომები კონტროლირებული გარემოში გამოყენებით პროფესიული მოწყობილობები, როგორიცაა X-Rite ან X-Rite.Konica Minolta Spectrophotometers დატვირთვა.

ერთ-ერთი პირველი ფართოდ აღიარებული მიზნები იყოKODAK GRAY Scale-ის მოწყობილობები- ნედლეული მშრალი ტონა, რომელიც გამოიყენება ექსპლუატაციის კონტროლისთვის. შემდეგ მოდის უფრო მოწინავე გრაფიკები სრული ფერი პაკეტები - როგორიცააMacbeth ColorCheckerდაარსდა 1976 წელს (საწყისში ცნობილია როგორცX-Rite ColorCheckerეს მოიცავს 24 ფერადი სუთები, რომელიც განკუთვნილია საერთო რეალურ სამყაროში ფერები: ადამიანის კანის, Blue Sky, Green Leafage და სხვა.

ციფრული ფოტოების და ციფრული ფილმების გამო, ფერი მიზნები უფრო მნიშვნელოვანია. ისინი ახლა აუცილებელი ინსტრუმენტები არ არის მხოლოდ კამერები, არამედ მონიტორები, პრინტერიები, სენსორები - და ნებისმიერი მოწყობილობა, რომელიც შეეხება ფერი. ისინი გამოიყენება ფერი შეესაბამება, profiling, და ნედლეული შეესაბამება სამუშაო გზა - საინფორმაციო წარმოების და მეცნიერების სურათების.

X-Rite's ColorChecker, მაგალითად. თითოეული პაკეტი შეზღუდულია სტანდარტული განათება (დაახ.D65ანD50) და შედეგები ჩაწერილიCIE XYZ coordinates— მოწყობილობს დამოუკიდებელი ფერი მოდელი. ეს კონვერტატები შემდეგ კონვერტებულიაRGB values, დამოკიდებულია თქვენი სამუშაო ფერადი სართულზე (მაგ.sRGBდაRec.709ანAdobeRGB) და

ასე რომ, RGB array ჩვენ გამოიყენებთ ჩვენი app არ არის დაფიქსირება - ისინი ზუსტი ციფრული რეპუტაცია სტანდარტული, ფიზიკურად ზუსტი patches.

If the skin tone patch in the ColorChecker Classic is defined as [194, 150, 130] in RGB, ეს არის, თუ როგორ უნდა გამოიყურებოდეს სწორი პირობებში. თუ თქვენი სურათები აჩვენებს რაღაც განსხვავებული, ეს არის ნაჩვენები ფერი cast - და დაწყება ეტაპზე შეცვალოს.

The Catch: Color Charts Are Just the Beginning

ფერი მიზნები მნიშვნელოვანია kalibrating - მაგრამ ეს არის ყველა ისინი.1 დაწყებაეს არ არის ანგარიშები:

ეს არის
• როგორ ქმნიან ფერები Highlights ან Shadows;
ეს არის
• უნიკალური თვისებები ფილმი ან ფანჯარა;
ეს არის
• ან შექმნილია კონკრეტული თვალსაზრისით.
ეს არის

პროფესიული ინსტრუმენტები, როგორიცააDAVINCI გადაწყვეტილებებიანDeHancer, ფერადი გრაფიკები მხოლოდ ერთი ნაბიჯი ხანგრძლივი მილის ხაზი. მას შემდეგ, რაც თქვენ გადავწყვიტოს მოწინავე პროცესები, როგორიცაა ფილმები, ტონა რუკირება, გრანები, halation, ბლუს, და სხვა სტილიზული ტრანსპორტირება. ასე რომ, მნიშვნელოვანია, რომ იცოდეთ:a chart is a calibration tool — not a style.

CinePalette: A Minimal Tool for Exploring Color Palettes

იმისათვის, რომ აჩვენოთ, თუ როგორ აირჩიოს პლატფორმა შეიცავს სურათი, ჩვენ აშენდაCinePalette— მარტივი ვებ პროგრამა, რომელიც იმიჯიშება, რა ხდება, როდესაც თქვენ შეზღუდოთ თქვენი ფერი ფართობი (როგზა, რომელიც ცნობილია როგორცPalette შემცირება) და

What You Can Do with CinePalette:

ეს არის
• ჩამოტვირთეთ ნებისმიერი სურათი;
ეს არის
• აირჩიეთ პალიტა (ColorChecker, Portra, Sepia და ა.შ.);
ეს არის
• რა თქმა უნდა, ყველა პლატფორმა უპირატესობად მოიცავს ამ პლატფორმა.
ეს არის
• შედარებით ადრე და შემდეგ ინტერაქტიული slider;
ეს არის
• შეინახეთ შედეგს;
ეს არის
• ან შექმნათ თქვენი საკუთარი პლატფორმა ნაცვლად.
ეს არის

How It Works in Code

ჩვენი პროგრამა სრულიად მუშაობს ბრაუზერში, რომელიც გამოიყენებაReactდა TheCanvas APIპროგრამა - მოვუწოდებთCinePalette— იქნება open-source და ხელმისაწვდომია GitHub- ში (გვერდვა სერია).

ჩვენ დაიწყებთ შეერთებული შეტყობინებები, მაგრამ მომხმარებლები ასევე შეუძლიათ შექმნათ და შენახვა საკუთარი. შეტყობინებები განკუთვნილია როგორც RGB ღირებულებების შეტყობინებები - მაგალითად, აქ არის ის, რაც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> - ეს გთავაზობთ Pixel-Level ხელმისაწვდომობის მონაცემების შეუზღუდავი.
ეს არის
2. ჩვენ ექსტრაქტებთ ImageData მოვლენას, რომელიც შეიცავს მასშტაბით, სადაც თითოეული Pixel შედგება ოთხი ღირებულება: [R, G, B, A].
ეს არის
3. We loop through each pixel, ექსტრაქტი მისი RGB ფერი.
ეს არის
4. თითოეული Pixel- ისთვის, ჩვენ იპოვებთ ყველაზე ახლოს შეესაბამება ფერი შერჩეული პლატში, გამოყენებით Euclidean distance in RGB space - და შეცვალოს იგი.
ეს არის

ატვირთეთ Shirley ბარათი და ცდილობენ სხვადასხვა პლატატების გამოყენება - თქვენ დაუყოვნებლივ ხედავთ, თუ როგორ პლატატის არჩევანი ფორმირებს სურათი.

ძირითადი ფუნქცია არის ფუნქცია, რომელიც შეამოწმოთ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- ში Pixel- ის ორიგინალური ფერი, ჩვენ გადაიხადეთ პლატზე უახლოეს შეესაბამება.for every single pixel in the image.

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;
}

მას შემდეგ, რაც ყველა Pixels შეუშავებული, ჩვენ გადაიხადოს შედეგს <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) არის ერთ-ერთი ფერები პლატში. ყველა გაქირავებული distances, ჩვენ აირჩიეთ მინიმუმ ერთი —closest visual matchშერჩეული პლატფორმა

ეს მიმოხილვა intuitive და მარტივი განახლება, მაგრამ მას აქვს შეზღუდვები:RGB სფეროში არ არის მნიშვნელობა, თუ როგორ ადამიანები ნამდვილად იპოვებენ ფერი- მაგალითად, ჩვენ უფრო მგრძნობიარე ვართ ლურჯი, ვიდრე ლურჯი, და სიჩქარეის განსხვავებები შეიძლება იყოს შეცდომატი.

ჩვენ ვიყენებთ ამ მეთოდიCinePaletteროგორც მარტივი და ხელმისაწვდომი გზა აჩვენოს ძირითადი პრინციპი ფერი რუკირება. თუმცა, მაშინაც კი, მისი მიმდინარე ფორმაში, თქვენ შეიძლება შეამოწმოთ, რომ ზოგიერთი ფერები შეცვალოს გზა, რომელიც გრძნობს არასამთავრობო ან "მოწყობს".

მომავალი ვერსია, ჩვენ გსურთ დაამატოთ გადახდის შორისRGB and CIELABColor Spaces – საშუალებას გაძლევთ მომხმარებელს შედარებით, თუ როგორ განსხვავებული მოდელები ეფუძნება ფერი შეესაბამების სიზუსტით.

Why Does This Matter?

CinePalette გთავაზობთ ძირითადი, მაგრამ ძირითადი ნაბიჯები ფერი გრანირება:palette restrictionეს არის, სადაც ყველა ვიზუალური სტილის დაიწყება - კითხვა:“What if we only used these colors?”.

Portra პლატფორმა აძლევს სითბოს, nostalgic ტონები. Pro 400 გრძნობს სუფთა და შეუზღუდავი. Teal & Orange უზრუნველყოფს მაღალი კონტაქტის ფილმები. განსხვავებით ინსტრუმენტები, როგორიცაა Dehancer ან Resolve, CinePalette არ იმიტომ, რომ ფიზიკური ფილმი. მაგრამ ის მოპოვებს სინათლის სინათლის:ფერი არის ინსტრუმენტი სტილი და ისტორია.

What’s Next?

ეს არის მხოლოდ დაიწყება. შემდეგი ნაწილები სერია:

ეს არის
• CinePalette- ის გაფართოების საშუალებას გაძლევთ აირჩიოთ პლატფორმა რეკომენდირებული სურათი;
ეს არის
• დამატება ავტომატური ექსპერიმენტი ფერი გრაფიკები ნებისმიერი რკინის ან ფოტო;
ეს არის
• RGB- ის და LAB- ის შორის გადახურვა უფრო პოპულარული შეესაბამებისთვის;
ეს არის
• და გაუქმეთ, თუ როგორ მუშაობს ფერი ჰორმონი - და თუ როგორ შეგიძლიათ გამოიყენოთ ეს რეალურ მსოფლიოში რეიტინგში.
ეს არის

შეინარჩუნეთ გონება - და მზადდება არ არის მხოლოდ სწავლა ფერი, არამედ ნამდვილად იხილოთ.