Web için tasarım yaparken renk profili ile ilgili ne yapmalıyım?


15

Doug Avery tarafından bu makaleyi okudum, burada Adobe Photoshop'ta Renk Yönetimi'ni ve takip makalesini, ona karşı tartışan ve sRGB'yi destekleyen yorumcuların kargaşasına tepki olarak nasıl açıklayacağımı açıkladım , ancak hangi tekniğe hâlâ ikna olmama rağmen kişisel iş akışımda uygulanmalıdır.
Makaleyi okurken topladığımdan (yanlışsam lütfen düzeltin), bununla başa çıkmanın doğru yolu, Photoshop'un renkleri sRGB olarak yönetmesi ve daha fazlasına ihtiyaç duyduğunuzda Prova Renklerini kullanması olacaktır. işinizin "sadık" önizleme.

Şu anda renk profilleri devre dışı bırakılmış olarak tasarlanmış bir web sitesi projem var. Bu şekilde başladım çünkü aylar önce Photoshop'un oluşturduğu renklerin, Photoshop'un kendi Damlalık Aracı tarafından doğru bir şekilde bildirilmesine rağmen , bir ekran görüntüsünden Google Chrome'da gördüğüm görüntüye ölçüldüğünde karşılık gelmediğini fark ettim. PNG.
Hızlı bir aramadan sonra daha önce alıntı yaptığım ve önerilerini körü körüne uyguladım (hatta takip etmeden veya onunla ilgili problemleri okumadan). O zamandan beri sorun yaşamadım: Photoshop'taki çalışmamın ekran görüntülerini alıyorum ve geliştiricinin faydalanması için yüklüyorum. Tasarımı geliştirirken gördüğüm ve kullandığım renkleri görüyor ve aslında ne yaptığımı görmek için çembere atlamak zorunda değilim.

Sorularım:

  • SRGB'yi bir web tasarımında (fotoğraf veya baskı gibi bir şeyde kullanmamanın etkilerini anlıyorum) sadece Prova Renklerini kullanmaya zorlayarak daha fazla iş eklediğinde gerçekten gerekli mi? (Ben böyle görüyorum, eğer yanılıyorsam beni düzeltin)

  • Bir ICC Profili ile kaydetme, bazı tarayıcıların profili doğru şekilde uygulamasına neden olacağından, diğerleri bunu görmezden gelirken, makale ayrıca sadece sRGB ile tasarlayıp ICC Profili olmadan kaydetmenin en iyi fikir olduğunu söylüyor . Bu, renk profilini ilk etapta kullanma amacını bozmuyor mu? Yoksa makalenin söylediklerini yanlış mı yorumluyorum?


1
Marc Edwards'ın cevabının doğru olduğunu düşünmüyorum. Renk profilinizi "izlemek" olarak ayarlarsanız, renkleriniz yalnızca bir kişiye harika görünür: siz! sRGB, daha geniş bir yelpazenin daha tutarlı bir şekilde görüntülemesine olanak tanır. Bu bağlantıyı okuyun. Bu konuda henüz bulduğum en iyi bilgileri sunuyor. gballard.net/psd/saveforwebshift.html

Yanıtlar:


5

Benim (bazen tartışmalı) düşüncem: sRGB'yi kullanıcı arayüzü ve web tasarımı için kullanmanızı öneren insanlar çılgın. İşte nedeni.

Renk yönetiminin ekran tasarımı için çalışması için olması gereken üç önemli şey vardır.

  1. Görüntü, doğru iş akışı kullanılarak oluşturulmalıdır.
  2. Görüntü doğru ICC renk profiliyle kaydedilmelidir.
  3. Görüntünün profiline ve içinde bulunduğu ortama (tarayıcı ve işletim sistemi vb.) Bağlı olarak görüntü doğru bir şekilde görüntülenmelidir.

Her üçüne de sahip değilseniz, renk yönetimi hiç çalışmaz. Bunlardan bir veya ikisine sahip olmak, tüm zincirin kırıldığı anlamına gelir.

Ve işte ovmak: Photoshop'tan kaydedilen tüm PNG ve GIF'lerin ICC profilleri olamaz, bu nedenle çoğu durumda 2 sayısı mümkün değildir (JPEG'lerde profiller olabilir). Ve birçok tarayıcı doğru davranmıyor, bu nedenle birçok durumda 3 sayısı da var.

Web'de bir fotoğraf görüntülüyorsanız, en iyi seçeneğiniz yıkıcı bir şekilde sRGB'ye dönüştürmek ve bir sRGB ICC profili gömmek ve yalnızca JPEG'leri kullanmaktır. Web kullanıcı arabirimi öğeleri oluşturuyorsanız, Photoshop'u "cihaz RGB" yi (profil veya renk yönetimi olmayan yerel renkler) hedefleyecek şekilde ayarlamaktır.

Doug Avery'nin tavsiyesi iyidir. Görevinin önemli kısmı, tüm sonuçları karşılaştırmak için kullandığı ızgaradır. Neyin peşinde olduğu resimlerdeki HTML, CSS ve renkleri eşleştirmektir. Bu, yalnızca resimlerdeki renk değerleri ve HTML / CSS'de kullanılan renk değerleri aynı şekilde ele alınırsa mümkündür.

Burada konuyla ilgili çok daha fazla şey yazdım:

Renk yönetimi ve kullanıcı arayüzü tasarımı

Ve burada bir Adobe mühendisi ile reklam mide bulantısı tartıştı:

Web için Kaydet, sRGB'ye Dönüştür PNG'ler ve GIF'ler için varsayılan olarak kapalı olmalıdır

SRGB'yi bir web tasarımında (fotoğraf veya baskı gibi bir şeyde kullanmamanın etkilerini anlıyorum) sadece Prova Renklerini kullanmaya zorlayarak daha fazla iş eklediğinde gerçekten gerekli mi? (Ben böyle görüyorum, eğer yanılıyorsam lütfen beni düzeltin)

Hayır, gerekli değil. Aslında, sRGB'nin bu konuyu anlamadaki eksikliğini göstermeye yardımcı olduğunu varsaymak. Kesinlikle sRGB kullanmanız gereken durumlar vardır, ancak tam bir fotoğraf iş akışının bir parçasıdır: JPEG görüntüleri kullanmanız, sRGB kullanmanız ve bir sRGB profili gömmeniz gerekir. Her şeyi yapmadan bunun bir parçası olamaz ve renk yönetiminden herhangi bir fayda beklemezsiniz.

Photoshop'tan GIF veya PNG kaydediyorsanız, resimlerinizde asla bir ICC profili olmayacaksınız, bu nedenle iş akışınızın bunun için ayarlandığından ve tarayıcıların resimlere nasıl davranacağından emin olmanız gerekir.

Bir ICC Profili ile kaydetme, bazı tarayıcıların profili doğru şekilde uygulamasına neden olacağından, diğerleri bunu görmezden gelirken, makale ayrıca sadece sRGB ile tasarlayıp ICC Profili olmadan kaydetmenin en iyi fikir olduğunu söylüyor. Bu, renk profilini ilk etapta kullanma amacını bozmuyor mu? Yoksa makalenin söylediklerini yanlış mı yorumluyorum?

Unutmayın:

  • GIF'lerin ICC profilleri olamaz.
  • Photoshop tarafından kaydedilen PNG'lerin ICC profilleri olamaz.
  • PNG'lerde profiller olabilir, ancak bunlarla birlikte kaydedilmesi nadirdir.
  • JPEG'ler profiller içerebilir.
  • Görüntülerin tarayıcıyla oluşturulması, tarayıcılar arasında farklılık gösterir.
  • HTML ve CSS'deki renklerin genellikle cihaz RGB veya sRGB olduğu varsayılır ve bunun üzerinde kontrolünüz yoktur.

4
Evde 6 bilgisayarım ve iki kalibre monitörüm var. Kalibre edilmiş bir monitörün iyi bir gamı ​​yoktur, bu yüzden kalibrasyonda bile güvenilir değildir. Evdeki altı ürünün tümü raftan stoklanmış ve hepsi renkleri farklı gösteriyor. Bu gerçek dünya kullanımında bir derstir. Endişelenmeyi bırakmayı ve sevmeyi böyle öğrendim.
horatio

3
Evet. Amaç, farklı ekranlar (çoğu durumda imkansız) arasında tutarlılık yerine, kullanıcı arayüzü öğeleri için sayfa içindeki tutarlılıktır.
Marc Edwards

3

Mac üzerinde geliştirme / tasarım yapıyorsanız profiller kesinlikle gereklidir.

Photoshop'ta görüntülerim üzerinde Adobe RGB veya ProPhoto RGB olarak çalışırsam (iyi bir kameranın kullandığı 2 profil), PSD web için kaydedildiğinde ve bir Windows PC'de görüntülendiğinde renkler LOT'u kaydırır.

Mac kullanıcıları için, platformlardaki renkleri korumak için ÇALIŞMA dosyalarında sRGB profilini kullanmak gerekir.

Yayınlanan son dosyanın (web için kaydet) profili yoktur, ancak Mac'te Windows'ta oluşturma sırasında sRGB kullanmak gerekir - renklerin Mac ve Windows'da benzer görünmesini istiyorsanız en azından bizim üzerimizde.


2

Bu paragrafların ifadelerini onaylamak istiyorum:

Makaleyi okurken topladığımdan (yanlışsam lütfen düzeltin), bununla başa çıkmanın doğru yolu Photoshop'un renkleri sRGB olarak yönetmesi ve daha fazlasına ihtiyaç duyduğunda Prova Renklerini kullanması olacaktır. işinizin "sadık" önizleme.

ve

Bir ICC Profili ile kaydetme, bazı tarayıcıların profili doğru şekilde uygulamasına neden olacağından, diğerleri bunu görmezden gelirken, makale ayrıca sadece sRGB ile tasarlayıp ICC Profili olmadan kaydetmenin en iyi fikir olduğunu söylüyor. Bu, renk profilini ilk etapta kullanma amacını bozmuyor mu? Yoksa makalenin söylediklerini yanlış mı yorumluyorum?

Üretim ortamını (bilinen ve kendi kendini kontrol eden) ve çıktı aygıtını ayırt ediyorum ve iş akışını fotoğraflar için en iyi olana göre ayarlıyorum. Açıklamama izin ver:

Fotoğrafları dijital fotoğraf makinemden açtığımda, bunları içerdiği sRGB profiliyle açma seçeneğim var. Onları profil olmadan açarsam önemli bilgileri kaybederim (renkler farklı görünür). Bu yüzden profili daha ileri işlemler için saklıyorum. İçerdiği profille Photoshop renkleri monitör profilime, prova renkleri için eriştiğim profillere, yazıcı profilime ve meslektaşımın birlikte çalıştığı tüm profillere uyarlayabilir.

Tasarım dosyalarınızda fotoğraf kullanıyorsanız, ekli bir profille boş tuval oluşturmalısınız. Ayrıca, tasarım dosyasını değil, son grafikleri bir geliştiriciye teslim ederseniz, profilin hala eklenmiş olması iyidir ...

Son dosyaları profil olmadan kaydediyorum ve beklendiği gibi görünüyorlar. Neden böyle? Bence profili olmayan grafikler, kendilerine bağlı bir sRGB profili varmış gibi yorumlandığından (belki birisi bunun için bir referans biliyor).

Ayrıca, bir ekran görüntüsü aldığınızda sisteminizin renkleri monitör profilinizden sRGB'ye dönüştürdüğünü de tahmin ediyorum (veya sRGB renk alanına yakın çok iyi bir monitörünüz var).


1

İlk sorunuzun cevabı: İş akışında sRGB kullanmıyorsanız, diğer renk alanlarından kullanılan tüm görüntülerin sonunda web'de doğru veya kırpılmış renkleri olmayacaktır. İçe aktardığınız veya kullandığınız profili olmayan görüntülerin çoğu zaten doğru renk alanında olduğu için iyi olur (örneğin, kameralardaki standart alan).

2. soru, evet amaç yenildi çünkü renk profillerinin kullanımı henüz web'de bunları kullanabileceğiniz şekilde uygulanmadı. Tarayıcıların beklediği 'sRGB, bu yüzden onları eklemenize gerek yok, bu sadece dosya boyutunu artırır. Birçok tarayıcı profili anlamadığından, Adobe RGB 1998 gibi profil içeren görüntüler sunmak iyi bir fikir değildir, çünkü renkler kırpılacaktır.


"Tarayıcıların beklediği 'sRGB" - bir çeşit. Tarayıcılar arasında karışık davranışlar var. Çoğu etiketsiz görüntüleri cihaz RGB'si olarak dönüştürür (dönüşüm yok). OS X'teki Safari 6, etiketsiz görüntülerin sRGB olduğunu ve dönüştürüldüğünü (yanlış) varsayar.
Marc Edwards

0

Adobe Photoshop CC Güncellemesi (2017):

  1. Çalışma alanınızı varsayılana bırakın (Kuzey Amerika Genel Amaç 2)

  2. Başka bir şeyi değiştirme

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.