Turuncu ne zaman kırmızıya benzer? Web tasarımcıları, hatta seçici olanlar, bazen monitörler arasında renk değişimini görmezden geliyor.

Bir web tasarımcısı, kullanıcılarının ekranları herhangi bir boyut veya renkte olduğunda veya herhangi bir aydınlatma koşulunda görüntülendiğinde rengi nasıl yönetiyor?

Sayfa yüklenirken tarayıcıları etkileyen HTML hatalarının düzeltilmesinden farklı olarak, doğru renk elde etmek tasarımcının çalışma sürecinin bir parçasıdır.

Sorunlar anlaşıldıktan sonra, renkler arasında projelerin korunması mümkündür. Web'de tutarlı bir renk elde etmek için zorluklar ve çözümler için okumaya devam edin.

Aşağıdaki fotoğraflar arasındaki farkı tespit edebilir misiniz?

iki farklı fotoğraf

Görüntülerden biri diğerinden biraz daha mavi. Bu “renk kayması” ya da belirli bir renk tonunun genel tonu, sıradan gözlemci tarafından fark edilmeyebilir. Sonuçta, tonda ufak bir değişiklik bunu daha az çiçek yapmaz ya da dewdrop'un detayından uzaklaşmaz. Kümülatif bir değişim.

Zamanla, maksimum kaliteli JPEG görüntüleri ve 256 renkli PNG simgeleri değerli bant genişliğini tüketir. HTML'deki karmaşıklık, tarayıcının iş yükünü her sayfa yüküyle artırır. Ziyaretçinin web sitesine göz atmasıyla oluşan bu problemlerin aksine, renk yönetimi tasarım sürecinde bir sorundur. Kalibre edilmemiş bir monitörde oluşturulan görüntüler zamanla tutarsızlaşır.

Renk kayması başka bir isme dayanabilir: dikkatsizlik.

Bir grafiğin renginin sayfayla yeterince eşleştiğini ne zaman söyleyebiliriz? Bir fotoğrafın rengi hangi noktada yanlıştır? Proje için bir bütün olarak hangi detaylar önemli değil ? Herkesin farklı cevapları olabilir, ancak dijital görüntüleri ciddiye alan hiç kimse renk kalibrasyonunu göz ardı edemez.

Baskı endüstrisi onlarca yıldır doğru renk elde etmek için mücadele etti. Üretimin tüm aşamalarında aynı renklerin göründüğünden emin olmak (çeşitli monitörler, ofis yazıcıları ve üst düzey baskı makineleri dahil olmak üzere) kendi kalibrasyon cihazları endüstrisini, yazılım çözümlerini ve hatta ISO standartlarını ortaya çıkardı.

Web tasarım topluluğu genellikle basın kontrolleri konusunda endişelenmez. Ama belki de olmalı.

Web Renk Olduğundan Bu yana Renk Sorunları Oldu

1990'larda web'de doğru renk elde etmek, 216 “web güvenli” renk paleti kullanmak anlamına geliyordu. Bu renk tonları ve gölgeler (çoğunlukla) 8 bitlik renkten daha fazla işleyemeyen monitörlerde görüntülendiğinde dundlanmayacak şekilde garanti edildi.

dithered görüntü çizimi

Yukarıda dithering olan ve olmayan bir gradyan var. Bugün, bilgisayarların büyük çoğunluğu 24 bit renk veya daha iyi gösterebilir. bu tarayıcı görüntü istatistikleri ve Webdesigner Depot dahil olmak üzere web sitelerinin Google Analytics takibi. Yani, her piksel milyonlarca renkten birini gösterebilir, böylece hem karmaşık hem de daha kritik kalibrasyonlar yapılabilir.

Web, renkleri tanımlamak için # F35C23 gibi onaltılık kodlara dayanmıştır. Bu altı karakterli dizeler, çok çeşitli tonları ve değerleri büyük bir hassasiyetle görüntüleyebilir. # F35C23 ve # F35C23'te CSS arka planı olan bir görüntü mükemmel bir şekilde eşleşecektir.

Sorun, kodun kırmızı, yeşil ve mavinin bir kombinasyonunu tanımlaması, ancak her zaman tutarlı bir renk ile sonuçlanmadığıdır. Farkı görüntülemek için ekranlar hesabı.

Beyaz Olduğunda Dışında Beyaz Beyaz

Dijital görüntüler oluştururken ve düzenlerken birçok faktör renk doğruluğunu etkiler. Baskıda olduğu gibi, web üzerindeki renk, görüntünün oluşturulduğu ortama göre değişir. Baskıdan farklı olarak, web tabanlı görüntüler, kullanıcı monitörleri her değiştiğinde değişebilir ve herhangi bir basın kontrolü kesilen sorunları yakalayamaz.

Birçok modern web tarayıcısı görüntüleyebilse de CMYK görüntüleri, web için çoğu görüntü, ek RGB renk modeline dayanmaktadır. Bu model, her bir piksele kırmızı, yeşil ve mavi karışımı uygular.

Ancak, tüm monitörler aynı şekilde üretilmez ve bu yüzden belirli bir renk tonu farklı ekranlarda tutarsız olabilir. İşte renk değişiminin bazı nedenleri:

  • Üreticiler ve modeller arasındaki hafif değişiklikler, gölge ve tondaki hafif yanlışlıkları hesaba katar.
  • Birçok ekran (özellikle CRT monitörler) yıllar boyunca ve hatta bir gün boyunca ısındığında bile renk değiştirir.
  • Yakın zamana kadar Mac OS X ve Windows iki farklı “gamma” kullandılar, bu da Mac'lerde görüntülerin bilgisayardakilerden daha parlak olduğunu gösteriyordu. Mac OS X 10.6 (Snow Leopard) 2.2'nin daha yaygın gamma kullanır Windows ve birçok televizyon ve kamera ile aynıdır.
  • İnsanlar web’de farklı konumlardan ve birçok farklı ışık koşulundan yararlanabilirler. Havai ışıkların etkisi ve doğal ışığın rengi ve rengi, ekrandaki renk görüntüsünü etkiler.
Farklı ekranlarda simüle renk değişimi

Yukarıda, farklı kalibrasyon “beyazın” genellikle varsayılan bir renk olduğunu gösterir:

  1. Orijinal görüntü, bir nokta ve çek kamera ile floresan ışık altında vurdu.
  2. Snow Leopard'dan önce bir Mac'te yaklaşık renk kayması.
  3. Eskitme CRT monitöründe yaklaşık renk kayması.
  4. Fotoğrafın işlendiği dizüstü bilgisayarda görüldüğü gibi gerçek renklere yakın.

Biraz kırmızı bir monitör, aksi halde mükemmel bir mavisi hafif mor olarak gösterebilir ya da sarı renkte bir yeşil gösterebilir. Çok parlak monitörler gölgeleri ve parlak noktaları temizler; çok karanlık olan monitörler çamurlu gölgeler olacak ve parlak noktalarda renk kayması olasılığını artıracak. Bu ayrıntıları önemseyen tasarımcılar için kalite kontrol kesinlikle bir zorluktur.

PNG Renk Kayması

Basitçe ifade edersek, gamma değeri görüntülenen görüntünün parlaklığını değiştirir. Dijital ekran için tasarlanan PNG görüntü formatı, tasarımcıların her bir görüntüye gama düzeltmesi eklemesini sağlar. Ancak, çıktı aygıtının parlaklığını bilmeden (yani, monitörün türünü bilmeden görüntü belirecektir), tasarımcılar doğru gama düzeltmesi ekleyerek zor bir zaman geçirirler.

Bu özellik, PNG'nin en kötü şöhreti haline gelmiştir. Web'de, bir resim bazen CSS'de belirtilen altıgen renklerle eşleşir ve diğer zamanlarda doğru renkle oluşturulmuş olsa bile olmaz.

PNGCrush gibi programlar (Windows) ve PNGenie (Mac), rengi daha güvenilir kılan gama ayarı dahil olmak üzere PNG dosyalarındaki fazla bilgiyi kaldırabilir.

Diğer sorunlar

Renk değişimini önlemek tasarımcıların çalışma şeklini değiştirebilir. Kötü renk kalibrasyonu zamanla göze çarpacaktır. Bu konu hakkında konuşulmayan ve fark edilmeyen tasarım detaylarından biri.

Endüstri Çözümleri

Çeşitli çözümler, renk yönetimi ve renk değişimini önleme konusunda tahminlerin çoğunu almıştır.

International Color Consortium Uluslararası Renk Konsorsiyumu ( ICC) renk yönetimi için platformdan bağımsız bir standart oluşturmak üzere 1993 yılında kuruldu. Amaç, monitörler, tarayıcılar ve yazıcılar da dahil olmak üzere tüm cihazlarda tutarlı renk sağlamaktı.

ICC profilleri, çeşitli cihazların nasıl renk gösterdiği hakkında bilgi içeren dosyalardır. Yazıcılar ve çoğu bilgisayar yerleşik ICC profillerine sahiptir, çünkü üreticileri tam olarak nasıl çalıştıklarını bilmektedir. Ancak, özel ICC profilleri belirli bir cihazı belirli koşullara uyarlayabilir; örneğin, bir monitör geniş bir pencerenin yanında değil, floresan ışıkları altında kullanılıyorsa.

Ekranlarda (ve baskıda) eşleşen renklere ek olarak Adobe Flash Player 10, ICC profillerini destekler Flash ve yazıcılar arasında renk yönetimi sağlayarak (son kullanıcının yazıcısının bir ICC profili kullandığını varsayarsak).

1996 yılında Hewlett-Packard ve Microsoft, standart kırmızı, yeşil, mavi ( sRGB) ek renk modellerini kullanan cihazlar için uygun bir standart olarak renk alanı. RGB'nin diğer biçimlerinden daha sınırlı olmasına rağmen (renkleri Adobe RGB gibi doygun renklere sahip olamaz), popülerliği monitörler, tarayıcılar, kameralar ve video kameralar tarafından benimsenmişti.

Bu teknik çözümler, profesyonel kuruluşlardan endüstri çapında cevaplardır. Ancak tasarımcılar, işlerini zaman içinde tutarlı tutmak için adımlar atabilirler.

Renk Çalışması İçin Bir Oda Hazırlama Önerileri

Şu an ne tür bir ışık kullanıyorsunuz? Bunu birincil çalışma alanınızda okuyorsanız ve doğru renk sizin için önemliyse, şu anda çalışma alanınızı iyileştirmek için adımlar atabilirsiniz.

  • Yarım saatte on saniye
    Hızlı bir mola verin ve % 18'lik bir gri karta göz atın . Aynı ışık koşullarında aynı karta bakmak, gözlerinizi “sıfırlamak” için iyi bir yoldur. (Not: püristler% 12 gri kart önermektedir. Her seferinde aynı kartı kullandığınız sürece de iyidirler. Önemli olan, tutarlı ve tarafsız bir şeye bakmaktır.)
  • On dakika
    Monitörünüzü doğrudan ışıktan uzaklaştırın. Asla bir ışık kaynağının ekrana doğrudan çarpmasına izin vermeyin.
  • On beş dakika
    Görüş alanınızdan renkli masa aksesuarlarını (takvimler, işaretleyiciler, fotoğraflar, klasörler, gri olmayanlar) çıkarın. Monitörünüz yansıtıcıysa, renkli eşyaları doğrudan arkanızda tutmayın.
  • Günde on dakika
    Çalışmaya başlamadan önce gözlerin çevreye uyum sağlamasına izin verin. Özellikle gün ışığından veya dış gece aydınlatmasından geldiyseniz, çalışma alanına uyum sağlamaya zaman ayırın. Gerekirse, bir zamanlayıcı kullanın.
  • Haftada on dakika
    Monitörünü temizle. Kullanın tüysüz bez Toz ve parmak izi lekelerini yavaşça temizlemek için veya temizlik talimatları için kullanım kılavuzunuza bakın. Giydiğinizde gözlüklerinizle aynı şeyi yapın.
  • Bir gün ya da öylesine
    Kalın perdelere veya perdelere sahip pencereleri kapatın. Doğal ışığın birincil faydaları kesinliktir - güneş ışığından daha doğal olması zor - ve kullanılabilirlik. Fakat doğal ışık değişir. Gün boyunca, hava koşulları ve mevsimler ile değişir.
  • Bir hafta sonu
    Çalışma alanınızı nötr gri ile çevirin. Duvarları boyayın ve koyu mobilyayı mülayim bir şeyle değiştirin. İdeal olarak, masaüstünüz, ışığın sadece% 60'ını yansıtmalıdır. GTI Munsell Nötr Gri Boya tarafsız arka planlar oluşturmak için fotoğrafçılar arasında popüler.
  • Bir hafta sonu veya nakliye süresi
    Ofis aydınlatmanızı ayarlayamıyorsanız, bir monitör kapağı satın almak veya monte etmek parlamayı ve değişen koşulları önlemek için.
Doğru renk çalışması için hazır bir çalışma alanının illüstrasyon

Monitörünüzü Kalibre Etme İpuçları

Kalibrasyonun amacı, renk değişimlerini ortadan kaldırmak ve monitörünüzün ton aralığını optimize etmektir. Gölgeler zengin olmalı, ancak hala detay göstermelidir. En parlak vurgular, ne sıcak ne de çok soğuk olmalıdır. Uzun vadede, bu doğru ve tutarlı bir renk sağlar.

İşte genel adımlar:

  1. Monitörünüzü en az 30 dakika ısıtın.
  2. Gamma'yı seçin (5000–9500 ° K, gamma 1.8-2.2).
  3. En iyi beyaz ve siyah noktaları bulun.
  4. Renk atmalarını önlemek için kırmızı, yeşil ve maviyi dengeleyin.
  5. Bu işlemi aylık olarak tekrarlayın.

Birçok program bu süreç boyunca size yol gösterecektir. Adobe Gamma, CRT ekranlarını kalibre etmek için popüler bir hızlı çözümdür. Kullanımı kolay olmanın yanı sıra, Photoshop veya Photoshop Elements'ın satın alınmasıyla da ücretsizdir. Diğer çözümler QuickGamma (Windows) ve Datacolor'un Spyder'ı donanım kalibratörü.

Renk beni seçici

Doğru, tutarlı renk, web tasarımcıları dahil çoğu kişinin ayrıştırma hataları, web standartları, müşteri yanlış bilgileri ve iyi olmanın son tarihi baskısı karşısında görmezden gelmeyi tercih ettiği küçük ayrıntılardan biridir.

Ama aynı zamanda daha iyi bir genel deneyim için bu unsurlardan biri. Tasarımcılar renk tonu ve çamurlu gölgelerdeki sapmaları fark etmeye başladıklarında, daha iyi bir iş yapmak istememek alışılmadık hale gelir.

Ben Gremillion tarafından Webdesigner Deposu için özel olarak yazılmıştır. Ben bir serbestlik web tasarımcısı iletişim problemlerini daha iyi tasarımla çözer.