Jak skalibrować kolor w Internecie
Kiedy kolor pomarańczowy jest bardziej czerwony? Projektanci sieci, nawet wybredni, czasami ignorują zmianę koloru na monitorach.
Jak projektant stron internetowych może zarządzać kolorami, gdy ekrany ich użytkowników mogą mieć dowolny rozmiar lub kolor, lub mogą być wyświetlane w każdych warunkach oświetleniowych?
W przeciwieństwie do naprawiania błędów HTML, które mają wpływ na przeglądarki podczas ładowania strony, uzyskanie dokładnego koloru jest częścią procesu pracy projektanta.
Utrzymanie kolorów w projektach jest możliwe po zrozumieniu problemów. Zapoznaj się z wyzwaniami i rozwiązaniami, aby uzyskać jednolity kolor w Internecie.
Czy zauważysz różnicę między zdjęciami poniżej?
Jeden z obrazów jest nieco bardziej niebieski niż drugi. Ta "zmiana koloru" lub ogólny odcień danego odcienia mogą pozostać niezauważone przez przypadkowego obserwatora. W końcu delikatna zmiana odcienia nie powoduje, że kwiat staje się mniejszy, a detale dewdropa mogą umniejszać. To skumulowana zmiana.
Z biegiem czasu obrazy JPEG o maksymalnej jakości i 256-kolorowe ikony PNG pochłaniają cenną przepustowość. Złożoność w HTML zwiększa obciążenie przeglądarki przy każdym ładowaniu strony. W przeciwieństwie do tych problemów, które towarzyszą odwiedzającym podczas przeglądania strony internetowej, zarządzanie kolorami stanowi problem z procesem projektowania . Obrazy utworzone na nieskalibrowanym monitorze stają się niespójne w miarę upływu czasu.
Przesunięcie koloru może mieć inną nazwę: nieuwaga.
Kiedy możemy powiedzieć, że kolor grafiki pasuje do strony wystarczająco blisko? W którym momencie kolor zdjęcia jest zbyt niedokładny? Jakie szczegóły nie mają znaczenia dla projektu jako całości? Każdy może mieć różne odpowiedzi, ale nikt, kto poważnie traktuje obrazy cyfrowe, może zignorować kalibrację kolorów.
Branża drukarska od dziesięcioleci zmaga się z uzyskaniem dokładnych kolorów. Zapewnienie, że dokładnie te same kolory pojawiają się na wszystkich etapach produkcji - w tym na różnych monitorach, drukarkach biurowych i maszynach high-end - stworzyło własną branżę urządzeń do kalibracji, rozwiązań programowych, a nawet norm ISO.
Społeczność projektantów stron internetowych zazwyczaj nie przejmuje się kontrolą prasy. Ale może tak powinno być.
Internet miał problemy z kolorami, ponieważ miał kolor
W latach 90. uzyskanie dokładnych kolorów w Internecie oznaczało użycie palety 216 "bezpiecznych dla sieci" kolorów. Te odcienie i odcienie były (głównie) gwarantowane, aby nie ditherować przy wyświetlaniu na monitorach, które nie mogły obsłużyć więcej niż 8-bitowego koloru.
Powyżej znajduje się gradient zi bez ditheringu. Dziś ogromna większość komputerów może wyświetlać 24-bitowy kolor lub lepszy (zgodnie z te statystyki wyświetlania przeglądarki i śledzenie Google Analytics stron internetowych, w tym składu Webdesigner). Oznacza to, że każdy piksel może wyświetlać jeden z milionów kolorów, co powoduje, że kalibracja jest zarówno skomplikowana, jak i bardziej krytyczna.
Sieć od dawna opiera się na kodach heksadecymalnych, takich jak # F35C23, w celu definiowania kolorów. Te sześcioznakowe łańcuchy mogą wyświetlać szeroki zakres odcieni i wartości z dużą precyzją. Obraz z # F35C23 i tłem CSS w # F35C23 będzie idealnie pasował.
Problem polega na tym, że kod definiuje kombinację czerwonego, zielonego i niebieskiego, ale nie zawsze zapewnia spójny kolor. Ekrany wyświetlacza uwzględniają różnicę.
Biały jest biały, z wyjątkiem kiedy nie jest
Wiele czynników wpływa na dokładność kolorów podczas tworzenia i edycji obrazów cyfrowych. Podobnie jak w przypadku druku, kolor w Internecie zależy od środowiska, w którym obraz jest tworzony. W przeciwieństwie do drukowania, obrazy internetowe mogą się zmieniać za każdym razem, gdy są wyświetlane, ponieważ monitory użytkowników będą się różnić, a kontrola prasy nie będzie w stanie wykryć problemów, które pojawiają się.
Chociaż wiele nowoczesnych przeglądarek internetowych może wyświetlać
Jednak nie wszystkie monitory są zbudowane tak samo, a więc pewien odcień pomarańczy może być niespójny na różnych ekranach. Oto niektóre z przyczyn zmiany koloru:
- Niewielkie zmiany między producentami i modelami powodują niewielkie niedokładności w odcieniach i odcieniach.
- Wiele ekranów (zwłaszcza monitorów kineskopowych ) zmienia kolor na przestrzeni lat i nawet w miarę nagrzewania się w ciągu dnia.
- Do niedawna systemy Mac OS X i Windows używały dwóch różnych "gamma", co oznaczało, że obrazy na komputerach Mac były jaśniejsze niż na PC. Mac OS X 10.6 (Snow Leopard) używa bardziej pospolitej gammy 2.2 , który jest taki sam jak Windows i wiele telewizorów i kamer.
- Ludzie przeglądają strony internetowe z wielu różnych lokalizacji iw różnych warunkach oświetleniowych. Wpływ oświetlenia górnego oraz ilość i kolor naturalnego światła wpływają na wygląd kolorów na ekranie.
Powyżej, inna kalibracja pokazuje, że "biały" jest często założonym kolorem:
- Oryginalny obraz, nakręcony w świetle fluorescencyjnym za pomocą aparatu typu "wskaż i zrób zdjęcie".
- Przybliżona zmiana koloru na komputerze Mac przed systemem Snow Leopard.
- Przybliżona zmiana koloru na starzejącym się monitorze CRT.
- Blisko prawdziwego koloru, jak widać na laptopie, na którym przetworzono zdjęcie.
Lekko czerwony monitor może być inaczej idealnie niebieski, lekko purpurowy lub zielony z żółtym odcieniem. Monitory ustawione zbyt jasno usuną cienie i światła; monitory ustawione zbyt ciemne będą mętne cienie i zwiększą szansę przesunięcia kolorów w najjaśniejszych miejscach. Dla projektantów, którzy dbają o te szczegóły, kontrola jakości jest zdecydowanie wyzwaniem.
Przesunięcie koloru PNG
Mówiąc krótko, wartość gamma zmienia luminancję wyświetlanego obrazu. Zaprojektowany do wyświetlania cyfrowego format obrazu PNG umożliwia projektantom dodawanie korekcji gamma do każdego obrazu. Ale bez znajomości jaskrawości urządzenia wyjściowego (to znaczy bez znajomości rodzaju monitora, na którym pojawi się obraz), projektanci mają trudności z dodaniem dokładnej korekcji gamma.
Ta cecha stała się najbardziej znanym problemem PNG. W Internecie obraz czasami będzie pasował do kolorów heksadecymalnych określonych w CSS, a innym razem nie będzie - nawet jeśli został utworzony z odpowiednim kolorem.
Programy takie jak PNGCrush (Windows) i PNGenie (Mac) może usuwać zbędne informacje z plików PNG, w tym ustawienia gamma, co czyni kolor bardziej niezawodnym.
Inne sprawy
Zapobieganie przesunięciu kolorów może wymagać zmian w sposobie pracy projektantów. Niska kalibracja kolorów będzie się z czasem wyróżniać. To jeden z tych detali, o których się nie mówi i nie powinien zostać zauważony.
Rozwiązania branżowe
Różne rozwiązania wyeliminowały ryzyko związane z zarządzaniem kolorem i zapobieganiem przesunięciom kolorów.
The International Color Consortium (
Profile ICC to pliki, które zawierają informacje o tym, jak różne urządzenia wyświetlają kolor. Drukarki i większość komputerów są dostarczane z wbudowanymi profilami ICC, ponieważ ich producenci dokładnie wiedzą, jak działają. Jednak niestandardowe profile ICC mogą dostosować określone urządzenie do określonych warunków - na przykład, gdy monitor jest używany w świetle fluorescencyjnym, w przeciwieństwie do dużego okna.
Oprócz dopasowywania kolorów na ekranach (i drukowanych) program Adobe Flash Player 10 obsługuje profile ICC , umożliwiając zarządzanie kolorami pomiędzy Flash i drukarkami (zakładając, że drukarka użytkownika końcowego korzysta z profilu ICC).
W 1996 r. Hewlett-Packard i Microsoft zdefiniowali standard czerwony, zielony, niebieski (
Te rozwiązania techniczne są ogólnobranżowymi odpowiedziami od profesjonalnych organizacji. Ale projektanci mogą również podjąć kroki, aby utrzymać spójność swojej pracy z upływem czasu.
Wskazówki, jak przygotować pokój do pracy w kolorze
Jakiego rodzaju światła używasz właśnie teraz? Jeśli czytasz to w głównym obszarze roboczym, a dokładny kolor jest dla Ciebie ważny, możesz teraz podjąć kroki w celu poprawy swojego obszaru roboczego.
- Dziesięć sekund na pół godziny
Zrób szybką przerwę i spójrz na szarą kartę o wartości 18% . Patrzenie na tę samą kartę w tych samych warunkach oświetleniowych jest dobrym sposobem na "zresetowanie" oczu. (Uwaga: purystów poleca 12% szarych kart, są one również dobre, o ile korzystasz z tej samej karty za każdym razem. Chodzi o to, aby spojrzeć na coś spójnego i neutralnego). - Dziesięć minut
Przenieś swój monitor z bezpośredniego światła. Nigdy nie pozwól, aby źródło światła bezpośrednio uderzyło w ekran. - Piętnaście minut
Usuń kolorowe akcesoria biurkowe (kalendarze, znaczniki, zdjęcia, foldery - wszystko, co nie jest szare) z twojej linii wzroku. Jeśli monitor jest odblaskowy, nie trzymaj kolorowych przedmiotów bezpośrednio za sobą. - Dziesięć minut dziennie
Pozwól oczom dostosować się do otoczenia przed rozpoczęciem pracy. Daj swoim oczom czas na dostosowanie się do przestrzeni roboczej, szczególnie jeśli właśnie przyszedłeś z światła słonecznego lub zewnętrznego oświetlenia nocnego. W razie potrzeby użyj timera. - Dziesięć minut w tygodniu
Wyczyść monitor. Użyć niestrzępiąca się szmatka aby delikatnie usunąć kurz i odciski palców lub zapoznaj się z instrukcją obsługi w celu uzyskania instrukcji czyszczenia. Zrób to samo z okularami, jeśli je nosisz. - Dzień lub dwa
Zakrywaj pobliskie okna grubymi ekranami lub zasłonami. Podstawowymi zaletami naturalnego światła są dokładność - trudno jest uzyskać bardziej naturalne niż światło słoneczne i dostępność. Ale naturalne światło zmienia się. Zmienia się przez cały dzień, wraz z pogodą i porami roku. - Weekend
Otaczaj swoją przestrzeń roboczą neutralną szarością. Pomaluj ściany i zastąp ciemne meble czymś nijakim. Najlepiej, jeśli Twój pulpit powinien odzwierciedlać tylko około 60% światła, które go uderza. GTI Munsell Neutral Gray Paint jest popularny wśród fotografów do tworzenia neutralnych środowisk. - Weekend lub czas wysyłki
Jeśli nie możesz dostosować swojego oświetlenia biurowego, zakupić lub zamontować osłonę monitora aby zapobiec odblaskom i zmieniającym się warunkom.
Wskazówki dotyczące kalibracji monitora
Celem kalibracji jest wyeliminowanie przesunięć kolorów i optymalizacja zakresu tonalnego monitora. Cienie powinny być bogate, ale wciąż pokazują szczegóły. Najjaśniejsze światła nie powinny być ani zbyt ciepłe, ani zbyt chłodne. Na dłuższą metę zapewnia to dokładność i spójność kolorów.
Oto ogólne kroki:
- Ogrzej monitor przez co najmniej 30 minut.
- Wybierz gamma (5000-9500 ° K, gamma 1.8-2.2).
- Znajdź najlepsze białe i czarne punkty.
- Równowaga na czerwono, zielono i niebiesko, aby zapobiec odlewaniu kolorów.
- Powtarzaj ten proces co miesiąc.
Wiele programów przeprowadzi Cię przez ten proces. Adobe Gamma to popularne szybkie rozwiązanie do kalibracji wyświetlaczy CRT. Poza tym, że jest łatwy w użyciu, jest bezpłatny za zakup programów Photoshop lub Photoshop Elements. Inne rozwiązania to QuickGamma (Windows) i Datacolor's Spyder kalibrator sprzętowy.
Color Me Picky
Dokładny, spójny kolor to jeden z tych drobnych szczegółów, które większość ludzi - w tym projektanci stron internetowych - postanawia zignorować w obliczu błędów analizy, standardów internetowych, dezinformacji klienta i dobrej terminowej presji.
Ale jest to również jeden z elementów, które zapewniają lepsze ogólne wrażenia. Gdy projektanci zaczną dostrzegać odchylenia w odcieniach i błotnistych cieniach, nie chcąc wykonywać lepszej pracy, staną się niezwykłe.
Napisany specjalnie dla Webdesigner Depot przez Ben Gremillion. Ben jest niezależny projektant stron internetowych który rozwiązuje problemy z komunikacją dzięki lepszemu projektowi.