Kuinka kalibroida väriä Webissä
Milloin on oranssi enemmän kuin punainen? Web-suunnittelijat, jopa nerokkaat, eivät aina ota huomiota värivalikoimasta näytöissä.
Miten web-suunnittelija hallitsee värejä, kun niiden käyttäjien näytöt saattavat olla kooltaan tai väreiltään tai niitä voidaan tarkastella missä tahansa valaistusolosuhteissa?
Toisin kuin HTML-virheiden korjaaminen, jotka vaikuttavat selaimiin sivun latautuessa, tarkka väri on osa suunnittelijan työprosessia.
Värien ylläpitäminen eri projekteissa on mahdollista, kun ongelmat ymmärretään. Lue haasteet ja ratkaisut - saada tasaista väriä verkossa.
Voitko havaita eron alla olevien kuvien välillä?
Yksi kuvista on hiukan sinistä toista. Satunnainen tarkkailija ei voi huomaamatta tätä "värinsiirtoa" tai tietyn värisävyn yleistä sävyä. Loppujen lopuksi vähäinen sävyn muutos ei muuta tätä kukaan tai heikentää kastepuun yksityiskohtia. Se on kumulatiivinen muutos.
Ajan myötä korkealaatuiset JPEG-kuvat ja 256-väriset PNG-kuvakkeet syövät arvokasta kaistanleveyttä. HTML-kompleksisuus lisää selaimen työtaakkaa jokaisella sivun latauksella. Toisin kuin näistä ongelmista, jotka kerääntyvät kävijöinä selaamaan verkkosivustoa, värienhallinta on suunnitteluprosessin ongelma. Kalibroimattomalla näytöllä luotu kuva muuttuu epäyhtenäiseksi ajan myötä.
Värinvaihto voisi mennä toisella nimellä: huomaamattomuus.
Milloin voimme sanoa, että graafin väri vastaa sivua riittävän lähelle? Missä vaiheessa kuvan väri on liian epätarkka? Mitkä yksityiskohdat eivät ole koko hankkeen kannalta merkityksellisiä? Jokaisella voi olla erilaisia vastauksia, mutta kukaan, joka ottaa digitaalisia kuvia vakavasti, voi jättää värikalibroinnin huomiotta.
Tulostusteollisuus on kamppaillut saamaan tarkkaa väriä vuosikymmenien ajan. Sen varmistaminen, että täsmälleen samat värit näkyvät kaikissa tuotantovaiheissa, mukaan lukien erilaiset näytöt, toimistotulostimet ja korkealaatuiset puristimet, on tuonut markkinoille oman kalibrointilaitteidemme, ohjelmistoratkaisujensa ja jopa ISO-standardiensa.
Web-suunnitteluyhteisö ei yleensä ole huolissaan lehdistötarkastuksista. Mutta ehkä se pitäisi.
Webissä on ollut väriasiat, koska se oli värjätty
1990-luvulla tarkan värin hankkiminen verkossa merkitsi 216 "web-safe" -värin palettia. Nämä sävyt ja sävyt olivat (enimmäkseen) taattuja, etteivät ne näyttäneet näytöille, jotka eivät voineet käsitellä yli 8-bittisiä värejä.
Ylempi on kaltevuus, jossa on ja ilman dithering. Nykyään suurin osa tietokoneista voi näyttää 24-bittistä väriä tai parempaa (mukaan nämä selaimen tilastotiedot ja verkkosivustojen Google Analytics -seuranta, mukaan lukien Webdesigner Depot). Eli jokainen pikseli voi näyttää miljoonista väreistä, jolloin kalibrointi on monimutkaista ja kriittisempi.
Verkko on pitkään luotu heksidektaalisiin koodeihin, kuten # F35C23, värien määrittelemiseksi. Nämä kuuden merkkiset merkkijonot voivat näyttää suuren määrän sävyjä ja arvoja tarkasti. Kuva, jolla on # F35C23 ja CSS-tausta # F35C23, sopii täydellisesti.
Ongelmana on, että koodi määrittelee punaisen, vihreän ja sinisen yhdistelmän, mutta se ei aina johda tasaiseen väriin. Näytöt vaikuttavat eroon.
Valkoinen on valkoinen, paitsi milloin se ei ole
Monet tekijät vaikuttavat väritarkkuuteen digitaalisten kuvien luomisessa ja muokkaamisessa. Kuten tulostettaessa, verkossa oleva väri riippuu ympäristöstä, jossa kuva luodaan. Toisin kuin tulostus, web-pohjaiset kuvat voivat muuttua joka kerta, kun ne näytetään, koska käyttäjien näytöt vaihtelevat, eikä lehdistötarkastus voi saada ongelmia.
Vaikka monet nykyaikaiset verkkoselaimet voivat näyttää
Mutta kaikki näytöt eivät ole samat, joten erityisen oranssinvärinen sävy saattaa olla epäyhtenäinen eri näytöissä. Seuraavassa on joitain värimuutoksen syitä:
- Kevyet muutokset valmistajien ja mallien välillä ovat vähäisiä epätarkkuuksia varjossa ja sävyssä.
- Monet näytöt (erityisesti CRT- näytöt) vaihtavat väriä vuosien varrella ja vaikka ne lämmenevät päivän aikana.
- Viime aikoihin asti Mac OS X ja Windows käyttivät kahta eri "gammaa", mikä tarkoitti, että Macissa olevat kuvat näyttävät kirkkaammilta kuin PC: t. Mac OS X 10.6 (Snow Leopard) käyttää yleisempää gamaa 2.2 , joka on sama kuin Windows ja monet televisiot ja videokamerat.
- Ihmiset selata verkkoa monista eri paikoista ja monissa eri valaistusolosuhteissa. Valonheittimien vaikutus ja luonnonvalon määrä ja väri vaikuttavat kaikkiin väriin näytöllä.
Yllä, eri kalibrointi osoittaa, että "valkoinen" on usein oletettu väri:
- Alkuperäinen kuva, kuvattu fluoresoivalla valolla pistekuva-kameralla.
- Arvioitu värien muutos Macissa ennen Snow Leopardia.
- Arvioitu värinsiirto ikääntyvälle CRT-näytölle.
- Lähellä todellista väriä, kuten näkyy kannettavassa tietokoneessa, johon kuva käsiteltiin.
Hieman punainen näyttö saattaa näyttää muutoin täydellisen sinisen hieman purppuranpunaisena tai näyttää vihreää keltaisella värillä. Näytöt, jotka on asetettu liian kirkkaiksi, peittävät varjot ja kohokohdat; näytöt, jotka asetetaan liian tummiksi, muuttuvat mutaisina varjoina ja lisäävät mahdollisuuksia vaihtaa värejä kohokohdissa. Suunnittelijoille, jotka huolehtivat näistä yksityiskohdista, laadunvalvonta on ehdottomasti haaste.
PNG-värinsiirto
Yksinkertaisesti sanottuna gamma-arvo muuttaa näytetyn kuvan luminanssia. Suunniteltu digitaaliseen näyttöön PNG-kuvamuodossa suunnittelijat voivat lisätä gamma-korjauksen kuhunkin kuvaan. Mutta tuntematta tulostuslaitteen valotehoa (ts. Tietämättä, minkä tyyppisen monitorin kuva tulee näkyviin), suunnittelijoilla on vaikea lisätä tarkkaa gamma-korjausta.
Tämä ominaisuus on tullut PNG: n tunnetuin ongelma. Webissä kuva vastaa joskus CSS: ssä määriteltyjä heksadesimaaleja ja muina aikoina se ei ole - vaikka se luotiin oikealla värillä.
Ohjelmat, kuten PNGCrush (Windows) ja PNGenie (Mac) voi poistaa ylimääräisiä tietoja PNG-tiedostomuodoista, mukaan lukien gamma-asetus, mikä tekee värit luotettavammaksi.
Muut ongelmat
Värinsiirron estäminen voi vaatia muutoksia tapaan, jolla suunnittelijat toimivat. Huono värikalibrointi erottuu ajan myötä. Se on yksi niistä suunnittelun yksityiskohdista, joita ei puhuta eikä saa tulla huomaamaan.
Teollisuusratkaisut
Erilaiset ratkaisut ovat ottaneet suuren osan arvailuista värin hallitsemisesta ja värinsiirron estämisestä.
International Color Consortium International Color Consortium (
ICC-profiilit ovat tiedostoja, jotka sisältävät tietoa eri laitteiden värin näyttämisestä. Tulostimet ja useimmat tietokoneet toimittavat sisäänrakennetut ICC-profiilit, koska niiden valmistajat tietävät tarkasti, miten ne toimivat. Mutta mukautetut ICC-profiilit voivat mukauttaa tiettyä laitetta tiettyihin olosuhteisiin - esimerkiksi silloin, kun monitoria käytetään loisteputkissa, toisin kuin suuren ikkunan vieressä.
Adobe Flash Player 10 tukee näytön (ja tulostuksessa) vastaavia värejä lisäksi ICC-profiileja , mikä mahdollistaa värinhallinnan Flashin ja tulostimien välillä (olettaen, että loppukäyttäjän tulostin käyttää ICC-profiilia).
Vuonna 1996 Hewlett-Packard ja Microsoft määrittivät standardin punaisen, vihreän, sinisen (
Nämä tekniset ratkaisut ovat alan ammattilaisten vastauksia. Mutta suunnittelijat voivat myös ryhtyä toimiin pitääkseen työnsä ajan tasalla.
Vihjeitä valmistelemaan tilaa värityöhön
Millaista valoa käytät juuri nyt? Jos luet tätä ensisijaisessa työtilassasi ja jos tarkka väri on tärkeä sinulle, voit ryhtyä toimiin työtilan parantamiseksi juuri nyt.
- Kymmenen sekuntia puolen tunnin ajan
Ota nopea tauko ja hämmästytä 18% harmaalla kortilla . Kun katsot samaa korttia samojen valaistusolosuhteiden alla, on hyvä tapa nollata silmäsi. (Huomaa, että puristit suosittelevat 12% harmaita kortteja, ja he ovat hienoja, kunhan käytät samaa korttia joka kerta.) Tarkoitus on tarkastella jotain johdonmukaista ja neutraalia. - Kymmenen minuuttia
Siirrä näyttösi suoralta valolta. Älä koskaan anna valolähteen suoraan osua näyttöön. - Viisitoista minuuttia
Poista värilliset kirjoituspöydän lisävarusteet (kalentereita, merkkejä, valokuvia, kansioita - kaikki ei harmaita) näkökentästäsi. Jos monitori on heijastava, älä säilytä värikkäitä esineitä suoraan takanasi. - Kymmenen minuuttia päivässä
Anna silmäsi sopeutua ympäristöön ennen työn aloittamista. Anna silmäsi aika sopeutua työtilaan, varsinkin jos olet juuri tullut auringonvalolta tai ulkoilman yövalaistuksesta. Käytä tarvittaessa ajastinta. - Kymmenen minuuttia viikossa
Puhdista monitori. Käytä nukkaamaton kangas poista pöly ja sormenjälkimaiset tahrat varovasti, tai puhdista ohjeet omistajan käsikirjasta. Tee sama silmälaseillesi, jos käytät niitä. - Päivä tai niin
Peitä lähellä olevat ikkunat, joissa on paksut näytöt tai verhot. Luonnon valon ensisijaiset edut ovat tarkkuus - on vaikeaa saada luonnollisempaa kuin auringonvalo ja saatavuus. Mutta luonnonvalo vaihtelee. Se muuttuu koko päivän, säällä ja vuodenaikoina. - Viikonloppu
Tyhjennä työtilanne neutraalilla harmaalla. Maalaa seinät ja korvaa pimeät kalusteet jotain hiljaa. Ihanteellisesti työpöydän pitäisi heijastaa vain noin 60% valosta, joka iskee sen. GTI Munsell Neutraali harmaa maali on suosittu valokuvaajien mielestä neutraalien taustojen luomiseen. - Viikonloppu tai toimitusaika
Jos et pysty säätämään toimistovalaistusta, ostaa tai koota näytön huppu estää häikäisyä ja muuttaa olosuhteita.
Vihjeitä kalibroida näyttöä
Kalibroinnin tarkoitus on poistaa värien muutokset ja optimoida näyttönne sävyalue. Varjojen tulisi olla rikkaita, mutta silti yksityiskohtaisia. Valoisimmat kohokohdat eivät saa olla liian lämmin eikä liian viileä. Pitkällä aikavälillä tämä tekee tarkan ja tasaisen värin.
Tässä ovat yleiset vaiheet:
- Lämmitä näyttöäsi vähintään 30 minuuttia.
- Valitse gamma (5000-9500 ° K, gamma 1.8-2.2).
- Etsi parhaat valkoiset ja mustat pisteet.
- Tasapaino on punainen, vihreä ja sininen, jotta värikuvat eivät esty.
- Toista tämä prosessi kuukausittain.
Monet ohjelmat vievät sinut läpi tämän prosessin. Adobe Gamma on suosittu nopea ratkaisu CRT-näyttöjen kalibrointiin. Sen lisäksi, että se on helppokäyttöinen, se on ilmainen hankkimalla Photoshop tai Photoshop Elements. Muita ratkaisuja ovat QuickGamma (Windows) ja Datacolor's Spyder laitteistokalibraattori.
Väri Me Picky
Tarkka, johdonmukainen väri on yksi niistä vähäisistä yksityiskohtia, joita useimmat ihmiset - myös web-suunnittelijat - päättävät jättää huomioimatta jäsentämisvirheet, web-standardit, asiakkaiden harhaanjohtaminen ja hyvän olosuhteiden paineet.
Mutta se on myös yksi niistä elementeistä, jotka tekevät paremman kokonaiskokemuksen. Kun suunnittelijat alkavat havaita poikkeamia sävyissä ja mutaisissa varjoissa, ei halua tehdä parempaa työtä tulee epätavalliseksi.
Kirjoitettu yksinomaan Ben Gremillionin Webdesigner Depotille. Ben on freelance nettisivujen suunnittelija joka ratkaisee viestinnän ongelmat paremmalla suunnittelulla.