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

Why does Joker feel so unsettlingly green and yellow?

Why does Joker feel so disturbingly green and yellow?

Why is Blade Runner შეჩერებული ტურში და ტურში?

Why is Blade Runner შეჩერებული Teal და Orange?

Why does film make skin look soft and warm?

რატომ ფილმი ხდის კანის სინათლის სინათლისთვის?

ეს არ არის magic. ეს არის ფერი.

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

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

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

ამ სერიაში ჩვენ შეამოწმოთ:

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



ჩვენ არ ვთქვათ, რომ ეს მხოლოდ გააჩნია. და თქვენ შეგვიძლია ექსპერიმენტი, Tinker, და, ალბათ, პირველ რიგში ნამდვილად დაწვრილებით რა ფერი გრიალება მზადდება.

ჩვენ არ ვთქვათ, რომ ეს მხოლოდ გააჩნია, ჩვენ ვთქვათ. იხილეთ

What is Color Grading, და რატომ უნდა დაიწყოს Color Targets?

What is Color Grading, და რატომ უნდა დაიწყოს ფერი მიზნები?

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




• ბალანსი და თეთრი ტკივილი;
• ბალანსი და თეთრი ტკივილი;
• ბალანსი და თეთრი ტკივილი.
• ბალანზაციის ექსპლუატაცია და თეთრი ტკივილი;
• კერმის ცვლილებების ტექნიკური შეცვლა;
• ბეჭდვა ვიზუალური სტილი კონტაქტი, ტონები, და ფერები curves.




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








დაწვრილებით, სანამ თქვენ გამოიყენოთ ნებისმიერი შექმნილია ნახვა, თქვენ უნდა bring the image to a neutral state, რაც იმას ნიშნავს:

უნიკალური სახელმწიფო




• კორტიფიკაცია უპირატესობრივი ფერები (კორტიფიკაცია);

• normalizing სურათის სტანდარტული ფერადი სფეროში (გალითად, Rec.709 ან sRGB);

• კორტიფიკაცია მასალები სხვადასხვა კამერები შეესაბამება კონფიგურაცია.

  
  

• პროგორიფიკაცია უპირატესობრივი ფერები (პროგორიფიკაცია ფერები);

დაწვრილებული ფერადი casts (კერების შეცდომა);

• normalizing სურათის სტანდარტული ფერი სართული (გალითად, Rec.709 ან sRGB);

ნორმალური სურათის სტანდარტული ფერი სართულზე (გალითად, Rec.709 ან sRGB);

• მაგონება მასალები სხვადასხვა კამერების ერთგული ბაზარზე.

  
  

დაწორება მასალები სხვადასხვა კამერები ერთგული ბაზარზე.




And for that, colorists use color targets like the **ColorChecker, ChromaDuMonde,**or other reference charts.


ფერი მიზნებიColorCheckerChromaDuMonde


A color target is a chart of color patches with precisely measured values. These values aren’t arbitrary — they’re obtained through spectrophotometric measurements in controlled environments using professional equipment like X-Rite or Konica Minolta spectrophotometers.

სახლებული ღირებულებაKonica Minolta spectrophotometers.Konica Minolta spectrophotometers




One of the first widely adopted targets was the Kodak Gray Scale — a strip of neutral gray tones used for exposure control. Later came more advanced charts with full-color patches — like the Macbeth ColorChecker, introduced in 1976 (now known as the X-Rite ColorChecker). It features 24 color swatches designed to represent common real-world colors: human skin, blue sky, green foliage, and more.

Kodak Gray ScaleKodak Gray Scaleმკბეს ColorCheckerX-Rite ColorChecker




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











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




D65D50CIE XYZ კონტაქტიRGB ღირებულებაsRGB Rec.709AdobeRGB




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




თუ ColorChecker Classic- ის კანის ტონლის პაკეტი RGB- ში [194, 150, 130]- ს განმარტებულია, ეს უნდა იყოს სწორი პირობებში. თუ თქვენი სურათები აჩვენებენ რაღაც განსხვავებული, ეს არის შერჩევის ნაბიჯა - და დასაწყისში რედაქტირება.




The Catch: Color Charts Are Just the Beginning

The Catch: Color Charts Are Just the Beginning

კერების მიზნები მნიშვნელოვანია kalibrators - მაგრამ ეს არის ყველა ისინი. სწყობა. ისინი არ შეიცავს:

სამთავრობო დაწყება.
• როგორ ფერები ქმნიან სიჩქარით ან შავიში;
• ფილმები ან ობიექტების უნიკალური თვისებები;
• ან სპეციფიკაციური მიზნით.
• როგორ ქმნის ფერები Highlights ან Shadows;
• ფილმების ან ობიექტების უნიკალური თვისებები;
• ან კონკრეტული თვალსაზრისით შექმნილი მიზნით.




In professional tools like DaVinci Resolve or Dehancer, color charts are just step one in a long pipeline. From there, you move into advanced processes like film emulation, tone mapping, grain, halation, bloom, and other stylistic transformations. So it’s critical to understand: a chart is a calibration tool — not a style.

DaVinci ResolveDaVinci ResolveDehancerDehancer გრაფიკი არის kalibrating ინსტრუმენტი — არა სტილი.

CinePalette: A Minimal Tool for Exploring Colour Palettes

CinePalette: მინიმალური ინსტრუმენტი ფერების პლატფორმაების შესწავლა

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

CinePalette მახასიათებლებიმომცველი შეზღუდვა




What You Can Do with CinePalette:

What You Can Do ერთად CinePalette:
• upload ნებისმიერი სურათი;
• pick a pallet (ColorChecker, Portra, Sepia, და ა.შ.);
• remap თითოეული პაკეჟი ყველაზე ახლოს ფერი ამ პაკეჟში;
• Comparate before & after with an interactive slider;
• save the result;
• build your own palette from scratch.
• upload ნებისმიერი სურათი;
• აირჩიეთ პლატფორმა (ColorChecker, Portra, Sepia და ა.შ.);
• Remap თითოეულ Pixel უახლოეს ფერი ამ პლატფორმა;
• Comparate before & after ერთად ინტერაქტიული slider;
• save შედეგები;
• ან შექმნათ თქვენი საკუთარი პლატფორმა დასაწყისში.




როგორ მუშაობს კოდი

HOW IT WORK IN CODE





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

რეაგირებაCanvas APICinePalette მახასიათებლები




ჩვენ დაიწყებთ შეერთებული პლატატების კომპლექტი, მაგრამ მომხმარებლები ასევე შეუძლიათ შექმნათ და გადარჩენა საკუთარი. პლატატები განკუთვნილია RGB ღირებულების კომპლექტი - მაგალითად, აქ არის, თუ როგორ გამოიყურება Kodak Portra 400 პლატატები:

Kodak Portra 400

"ფორტი 400": [ [ [75, 60, 50], // სინათები [160, 130, 110], // კანის ტონები [220, 200, 180], // Highlights [60, 100, 80], // ფურცელი [180, 150, 100] // უნიკალური ], 

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




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




როდესაც მომხმარებლის ჩამოტვირთვა სურათი და აირჩიეთ პლატფორმა, აქ არის, რაც ხდება ქვეშ კაბა:

1. სურათი განიხილება Hidden <canvas> - ეს გთავაზობთ Pixel-level ხელმისაწვდომობის მონაცემების გაფართოებისთვის.
2. ჩვენ მივიღებთ ImageData Object, რომელიც შეიცავს მასშტაბით, სადაც თითოეული Pixel შედგება ოთხი ღირებულება: [R, G, B, A].
3. ჩვენ განიხილებთ თითოეული Pixel, მივიღებთ მისი RGB ფერი.
4. თითოეული Pixel, ჩვენ იპოვებთ უახლოესი შეესაბამება ფერი შერჩეული პლატში, გამოყენებით Euclidean distance in RGB space
5. სურათი განიცდიან <canvas> - ეს გთავაზობთ მოკლე დონეზე ხელმისაწვდომობა მონაცემების გაქირავებისთვის.
მომარაგება გამოქვეყნდა Hidden <canvas>
6. ჩვენ ექსტრაქტებთ ImageData Object, რომელიც შეიცავს მასშტაბით, სადაც თითოეული Pixel შედგება ოთხი ღირებულება: [R, G, B, A].
ჩვენ ატვირთეთ ImageData Object
7. We loop through every pixel, ატვირთოთ მისი RGB ფერი.
We loop through every pixel
8. თითოეული Pixel- ისთვის ჩვენ იპოვებთ უახლოესი შეესაბამება ფერი შერჩეული პლატში, გამოყენებით Euclidean distance in RGB space - და შეცვალოს იგი.
თითოეული Pixel- ისთვის ჩვენ იპოვებთ ყველაზე ახლოს შეესაბამება ფერი შერჩეული პლატფორმადან




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








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

თითოეული პიქსელისახლებით შეესაბამებული ფერი

const findClosestColor = (r, g, b) => { let minDist = Infinity; let closest = [r, g, b]; for (let [pr, pg, pb]) { const dist = Math.sqrt((r - pr) ** 2 + (g - pg) ** 2 + (b - pb) ** 2); თუ (dist < minDist) { minDist = dist; closest = [pr, pg, pb]; } გადაიხადოს უახლოეს; }; 

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




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

თითოეული პიქსელისთვის

for (let i = 0; i < data.length; i += 4) { const [r, g, b] = [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; } 

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(). ეს საშუალებას გაძლევთ მომხმარებელს ნახოთ შედეგს instantly ბრაუზერში - და ჩამოტვირთოთ ფილტრებული სურათს ერთი კლიკებით.




იხილეთ შედეგს დაუყოვნებლივ ბრაუზერი




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

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




აქ, ჩვენ გამოიყენებთ Euclidean distance in RGB space — კლასიკური მეთოდი შეამციროს, თუ როგორ “კარი” ორი ფერები არიან:

Euclidic სიჩქარე RGB სფეროში

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

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




აქ, (r, g, b) არის ფერი ამჟამად მოდული, და (pr, pg, pb) არის ერთი ფერები პლატში. ყველა გაქირავებული distances, ჩვენ აირჩიეთ მინიმუმ ერთი — სახლესი ვირტუალური შეესაბამება within the selected palette.

საწყისი ვიზუალური კონტაქტი




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

RGB ფართობი არ იმიტომ, რომ ადამიანები ნამდვილად იმიტომ, რომ ფერი





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

CinePalette მახასიათებლები




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

RGB და CIELAB

Why Does This Matter?

რატომ ეს მნიშვნელოვანია?

CinePalette გთავაზობთ ძირითადი, მაგრამ ძირითადი ნაბიჯს ფერების რეიტინგში: პალიტის შეზღუდვა. ეს არის ადგილი, სადაც ყველა ვიზუალური სტილი დაიწყება - კითხვები: “ რა იქნება, თუ მხოლოდ ამ ფერებს გამოიყენებთ?

პალიტის შეზღუდვა " რა, თუ მხოლოდ ეს ფერები გამოიყენება?"




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

color არის ინსტრუმენტი სტილის და Storytelling.








რა არის შემდეგი?

რა არის შემდეგი?

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

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




თეძლოთ და მზადდებათ, რომ არ მხოლოდ იპოვოთ ფერი, არამედ ნამდვილად see იგი.

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