Was muss ich beim Entwerfen für das Web in Bezug auf das Farbprofil tun?


15

Ich habe diesen Artikel von Doug Avery gelesen, in dem er erklärt, wie man das Farbmanagement in Adobe Photoshop deaktiviert, und den Folgeartikel als Reaktion auf den Aufruhr der Kommentatoren, die dagegen argumentieren und sRGB unterstützen, obwohl ich immer noch nicht davon überzeugt bin, welche Technik ich verwenden soll sollte in meinem persönlichen Workflow gelten.
Nach dem, was ich beim Lesen des Artikels gesammelt habe (bitte korrigieren Sie mich, wenn ich mich irre), besteht die richtige Möglichkeit darin, dass Photoshop die Farben als sRGB verwaltet und bei Bedarf Proof Colors verwendet "getreue" Vorschau auf Ihre Arbeit.

Im Moment habe ich ein ganzes Website-Projekt, das mit deaktivierten Farbprofilen entworfen wurde. Ich habe auf diese Weise damit begonnen, weil ich vor Monaten bemerkt hatte, dass die von Photoshop gerenderten Farben, obwohl sie vom Photoshop-eigenen Eyedropper-Tool korrekt gemeldet wurden , nicht den in Google Chrome angezeigten Farben entsprachen, als ich das als exportierte Bild öffnete PNG.
Nach einer kurzen Suche stieß ich auf den Beitrag, den ich zuvor zitiert hatte, und wandte seine Vorschläge blind an (ohne das Follow-up zu bemerken oder über die Probleme damit zu lesen). Seitdem habe ich keine Probleme mehr: Ich mache Screenshots meiner Arbeit in Photoshop und lade sie hoch, damit der Entwickler sie nutzen kann. Er sieht dieselben Farben, die ich bei der Entwicklung des Designs verwende, und ich muss nicht durch die Reifen springen, um zu sehen, was ich eigentlich tue.

Meine Fragen:

  • Ist es wirklich notwendig, sRGB in einem Webdesign zu verwenden (ich verstehe die Auswirkungen, wenn Sie es nicht in etwas wie Fotografie oder Druck verwenden), wenn es Ihnen nur mehr Arbeit einbringt, indem Sie dazu gezwungen werden, Proof Colors zu verwenden ? (So ​​sehe ich das. Bitte korrigieren Sie mich, wenn ich falsch liege.)

  • Da das Speichern mit einem ICC-Profil dazu führt, dass einige Browser das Profil korrekt anwenden, während andere es ignorieren, ist es wahrscheinlich die beste Idee, nur mit sRGB zu entwerfen und dann ohne das ICC-Profil zu speichern . Hat das nicht den Zweck, das Farbprofil überhaupt zu verwenden, zunichte gemacht? Oder interpretiere ich falsch, was der Artikel sagt?


1
Ich denke nicht, dass Marc Edwards 'Antwort richtig ist. Wenn Sie Ihr Farbprofil auf "Monitor" einstellen, wird Ihre Farbe nur für eine Person gut aussehen: für Sie! Mit sRGB kann ein breiteres Spektrum von Personen konsistenter angezeigt werden. Lesen Sie diesen Link. Es bietet die besten Informationen, die ich bisher zu diesem Thema gefunden habe. gballard.net/psd/saveforwebshift.html

Antworten:


5

Meine (manchmal kontroverse) Meinung: Leute, die die Verwendung von sRGB für die Benutzeroberfläche und das Webdesign empfehlen, sind verrückt. Hier ist der Grund.

Damit das Farbmanagement für das Bildschirmdesign funktioniert, müssen drei wichtige Dinge geschehen.

  1. Das Image muss mit dem richtigen Workflow erstellt werden.
  2. Das Bild muss mit dem richtigen ICC-Farbprofil gespeichert werden.
  3. Das Bild muss korrekt angezeigt werden und dem Bildprofil und der Umgebung entsprechen, in der es angezeigt wird (Browser und Betriebssystem usw.).

Wenn Sie nicht alle drei haben, funktioniert das Farbmanagement überhaupt nicht. Ein oder zwei dieser Dinge bedeuten, dass die gesamte Kette unterbrochen ist.

Und hier ist der Haken: Alle in Photoshop gespeicherten PNGs und GIFs können keine ICC-Profile haben, daher ist Nummer 2 in den meisten Fällen nicht möglich (JPEGs können jedoch Profile haben). Und viele Browser verhalten sich nicht richtig, so dass Nummer 3 auch in vielen Fällen nicht verfügbar ist.

Wenn Sie ein Foto im Internet anzeigen, können Sie es am besten destruktiv in sRGB konvertieren und ein sRGB-ICC-Profil einbetten und nur JPEGs verwenden. Wenn Sie Elemente der Webbenutzeroberfläche erstellen, ist es am besten, Photoshop so einzurichten, dass es auf "Geräte-RGB" abzielt (native Farben ohne Profil oder Farbverwaltung).

Der Rat von Doug Avery ist gut. Der wichtige Teil seines Beitrags ist das Raster, mit dem er alle Ergebnisse vergleicht. Was er sucht, ist die Übereinstimmung von HTML, CSS und Farben in Bildern. Das ist genau das Richtige. Dies ist nur möglich, wenn die Farbwerte in Bildern und die in HTML / CSS verwendeten Farbwerte gleich behandelt werden.

Ich habe hier viel mehr zum Thema geschrieben:

Farbmanagement und UI-Design

Und argumentierte ad nausium mit einem Adobe-Ingenieur hier:

Für Web speichern, In sRGB konvertieren sollte für PNGs und GIFs standardmäßig deaktiviert sein

Ist es wirklich notwendig, sRGB in einem Webdesign zu verwenden (ich verstehe die Auswirkungen, wenn Sie es nicht in etwas wie Fotografie oder Druck verwenden), wenn es Ihnen nur mehr Arbeit einbringt, indem Sie dazu gezwungen werden, Proof Colors zu verwenden? (So ​​sehe ich das. Bitte korrigiere mich, wenn ich falsch liege.)

Nein, es ist nicht notwendig. Die Annahme, dass sRGB hilft, zeigt, dass das Thema nicht verstanden wurde. Es gibt Situationen, in denen Sie auf jeden Fall sRGB verwenden sollten, dies gehört jedoch zu einem vollständigen Foto-Workflow: Sie müssen JPEG-Bilder verwenden, sRGB verwenden und ein sRGB-Profil einbetten. Sie können einen Teil davon nicht tun, ohne alles zu tun, und erwarten einen Nutzen aus dem Farbmanagement.

Wenn Sie GIFs oder PNGs aus Photoshop speichern, wird in Ihren Bildern niemals ein ICC-Profil angezeigt. Stellen Sie daher sicher, dass Ihr Workflow dafür eingerichtet ist und wie Browser die Bilder behandeln.

Da das Speichern mit einem ICC-Profil dazu führt, dass einige Browser das Profil korrekt anwenden, während andere es ignorieren, ist es wahrscheinlich die beste Idee, nur mit sRGB zu entwerfen und dann ohne das ICC-Profil zu speichern. Hat das nicht den Zweck, das Farbprofil überhaupt zu verwenden, zunichte gemacht? Oder interpretiere ich falsch, was der Artikel sagt?

Denk daran, dass:

  • GIFs können keine ICC-Profile haben.
  • Von Photoshop gespeicherte PNGs können keine ICC-Profile haben.
  • PNGs können Profile haben, aber es kommt selten vor, dass sie mit ihnen gespeichert werden.
  • JPEGs können Profile haben.
  • Das Browser-Rendering von Bildern mit Profilen unterscheidet sich zwischen den Browsern.
  • Bei Farben in HTML und CSS wird häufig davon ausgegangen, dass sie Geräte-RGB oder sRGB sind, und Sie haben keine Kontrolle darüber.

4
Ich habe 6 Computer zu Hause und zwei kalibrierte Monitore bei der Arbeit. Ein kalibrierter Monitor hat einfach keinen anständigen Farbumfang, so dass er selbst bei der Kalibrierung nicht vertrauenswürdig ist. Alle sechs sind zu Hause ab Lager und zeigen alle Farben unterschiedlich an. Dies ist eine Lektion in der Praxis. So habe ich gelernt, mich nicht mehr zu sorgen und es zu lieben.
Horatio

3
Ja. Das Ziel ist die Konsistenz innerhalb der Seite für Benutzeroberflächenelemente und nicht die Konsistenz über verschiedene Anzeigen (was unter den meisten Umständen unmöglich ist).
Marc Edwards

3

Profile werden definitiv benötigt, wenn Sie auf einem Mac entwickeln / gestalten.

Wenn ich meine Bilder in Photoshop als Adobe RGB oder ProPhoto RGB bearbeite (die beiden Profile, die eine gute Kamera verwendet), ändern sich die Farben VIEL, wenn die PSD für das Web gespeichert und auf einem Windows-PC angezeigt wird.

Für einen Mac-Benutzer ist die Verwendung des sRGB-Profils in WORKING-Dateien erforderlich, um Farben plattformübergreifend zu erhalten.

Die endgültig veröffentlichte Datei (für das Web speichern) hat kein Profil, aber die Verwendung von sRGB während der Erstellung ist auf dem Mac erforderlich - zumindest auf unserem, wenn die Farben auf dem Mac und unter Windows ähnlich aussehen sollen.


2

Ich möchte die Aussagen dieser Absätze bestätigen:

Nach dem, was ich beim Lesen des Artikels gesammelt habe (bitte korrigieren Sie mich, wenn ich mich irre), besteht die richtige Möglichkeit darin, dass Photoshop die Farben als sRGB verwaltet und bei Bedarf Proof Colors verwendet "getreue" Vorschau auf Ihre Arbeit.

und

Da das Speichern mit einem ICC-Profil dazu führt, dass einige Browser das Profil korrekt anwenden, während andere es ignorieren, ist es wahrscheinlich die beste Idee, nur mit sRGB zu entwerfen und dann ohne das ICC-Profil zu speichern. Hat das nicht den Zweck, das Farbprofil überhaupt zu verwenden, zunichte gemacht? Oder interpretiere ich falsch, was der Artikel sagt?

Ich unterscheide zwischen der Produktionsumgebung (bekannt und selbstgesteuert) und dem Ausgabegerät und ordne den Workflow entsprechend den besten Einstellungen für Fotos an. Lassen Sie mich erklären:

Wenn ich Fotos von meiner Digitalkamera öffne, habe ich die Möglichkeit, sie mit dem enthaltenen sRGB-Profil zu öffnen. Wenn ich sie ohne das Profil öffne, gehen wichtige Informationen verloren (Farben sehen anders aus). So behalte ich auch das Profil zur weiteren Bearbeitung. Mit dem enthaltenen Profil kann Photoshop die Farben an mein Monitorprofil, an die Profile, auf die ich für Proof-Farben zugreife, an mein Druckerprofil und an alle Profile anpassen, mit denen mein Kollege arbeitet.

Wenn Sie in Ihren Designdateien Fotos verwenden, sollten Sie die leere Leinwand mit einem angehängten Profil erstellen. Und wenn Sie die Designdatei und nicht die endgültigen Grafiken an einen Entwickler übergeben, ist es gut, wenn das Profil noch angehängt ist ...

Ich speichere die endgültigen Dateien ohne Profil und sie sehen wie erwartet aus. Warum ist das so? Ich denke, weil Grafiken ohne Profil so interpretiert werden, als hätten sie ein sRGB-Profil (vielleicht kennt jemand eine Referenz dafür).

Wenn Sie einen Screenshot machen, konvertiert Ihr System die Farben von Ihrem Monitorprofil in sRGB (oder Sie haben einen sehr guten Monitor in der Nähe des sRGB-Farbraums).


1

Die Antwort auf Ihre erste Frage: Wenn Sie im Workflow kein sRGB verwenden, werden alle verwendeten Bilder aus anderen Farbräumen möglicherweise keine korrekten oder sogar beschnittenen Farben im Web haben. Die meisten Bilder ohne Profil, die Sie importieren oder verwenden, funktionieren einwandfrei, da sie bereits im richtigen Farbraum sind (z. B. der Standardspeicherplatz in der Kamera).

2. Frage, ja der Zweck ist gescheitert, weil die Verwendung von Farbprofilen im Web noch nicht so implementiert ist, dass man sie nutzen kann. Browser erwarten sRGB, sodass sie nicht angehängt werden müssen. Dies erhöht lediglich die Dateigröße. Da viele Browser Profile nicht verstehen, ist es keine gute Idee, Bilder mit Profil in anzubieten, z. B. Adobe RGB 1998, da die Farben beschnitten werden.


"Browser 'erwarten' sRGB" - eine Art. Es gibt ein gemischtes Verhalten zwischen den Browsern. Die meisten rendern Bilder ohne Tags als Geräte-RGB (keine Konvertierung). Safari 6 unter OS X geht (fälschlicherweise) davon aus, dass Bilder ohne Tags sRGB sind und konvertiert werden.
Marc Edwards

0

Update für Adobe Photoshop CC (2017):

  1. Übernehmen Sie die Standardeinstellung für Ihren Arbeitsbereich (North American General Purpose 2).

  2. Ändere nichts anderes

Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.