Photoshop und Websafe Colors

[B1eistift]

Hallo Macuser,

ich möchte ein Bild in eine Website einbauen. Dazu muss es an einem Rand genau die gleiche Farbe haben, wie die Website in diesem Bereich.
Also habe ich einen Screenshot gemacht, in PS geöffnet und die Farbe ausgewählt. Es war ein helles grau, #F1F2F6. Also habe ich den entsprechenden Bereich in meinem Bild mit dieser Farbe gefüllt, gespeichert und das Bild hochgeladen. Leider war ein leichter Unterschied zu erkennen.
Ich habe einen Screenshot von dem Übergang gemacht, und wieder in PS geöffnet. Mein Bild war weiterhin #f1f2f6, der Ballken daneben aber #edeff4.
Neuer Versuch, mein Bild verändert und wieder hochgeladen- es ist immer noch ein Unterschied zu erkennen. (ich habe die Bilder immer als .png exportiert)
Wie krieg ich das hin?

lG Bleistift

 

[martinibook]

Also das Problem dort ist das Farbprofil. Wenn du es als Websafe exportierst, dann hast du nur sehr wenige Farben zur Auswahl und kannst den einen genauen Ton nicht treffen.

Versuche es doch mal mit "Für Web Exportieren", wenn du das noch nicht gemacht hast.

Außerdem ist es nicht die schicke Art Farben in Bilder direkt reinzutun, sondern diese durchsichtig zu lassen und dann den Hintergrund mit CSS zu machen.

 

[Isegrim242]

martinibook hat absolut recht, Du solltest Bilder für's Web
grundsätzlich ohne Profil abspeichern, es sei denn, die ent-
sprechende Seite benutzt eines und ja…Safari und Firefox
(seit 3.5 ist es aktiviert) benutzen Colourmanagement,
dennoch würde ich sie immer weglassen.

Wenn Du das Bild aber sowieso als PNG abspeicherst, be-
nutze doch einfach dessen Transparenz-Option.

 

[B1eistift]

Gute Idee,
die Website scheint durchsichtige pngs aber nicht zu unterstützen, ist das möglich? Der durchsichtige Bereich wird einfach weiß angezeigt...

 

[Isegrim242]

Öhh…das ist afaik eigentlich nicht möglich. Hast Du
denn den Haken bei Transparenz im »Für web und
Geräte speichern«-Dialog gesetzt?

 

[martinibook]

Transparenz klappt auch im Internet Explorer 6 nicht, das geht erst ab 7.

 

[B1eistift]

Das Bild ist auf dem Mac transparent, nur im Internet nicht. Das liegt nicht an Firefox3, sondern vermutlich am hochladen...vielleicht wird das Bild beim Upload kopiert, per php verändert, sowas...

 

[Isegrim242]

Das kann natürlich sein. Hast Du die Möglichkeit ein Bild
(z.B. über HG anzeigen o.ä.) runterzuziehen? Wenn Du
dieses dann in PS öffnest, würdest Du nachschauen können
ob ein und wenn ja welches Farbprofil eingebettet ist.

 

[martinibook]

Wie lädst du das denn hoch? Wenn da ein CMS dran herumdoktort, ist der Alphakanal vielleicht weg …

 

[ThoRic]

Dazu muss es an einem Rand genau die gleiche Farbe haben, wie die Website in diesem Bereich.
Also habe ich einen Screenshot gemacht, in PS geöffnet und die Farbe ausgewählt. Es war ein helles grau, #F1F2F6.

Das geht entschieden leichter und vor allem weniger Fehleranfällig:

Dienstprogramme -> DigitalColor Farbmesser starten und Farbe im Browser am Bildschirm ansteuern

Wenn du bei den Farben RGB als HEX Wert 8 Bit eingestellt hast, kannst du an der richtigen Stelle den Wert ablesen oder per
Apfel-Shift-C den Farbwert kopieren, oder eine Art Screenshot machen per Apfel-Alt-C.

 

[B1eistift]

Super Programm, kannte ich gar nicht danke
Also laut Digital Colors ist die Farbe der Website EDEFF4, wenn ich allerdings im PS im Farbwähler EDEFF4 eintippe, ist es laut DC eine etwas andere Farbe, nämlich E9EBF1... anscheinend liegt das Problem im PS...

 

[martinibook]

Das Problem ist das ColorManagement/Farbprofil. Du musst überall das gleiche haben, damit das passt.

 

[B1eistift]

Sorry, ich checks nicht.
Egal was ich in PS=>Bearbeiten=>Farbeinstellungen für ein Profil auswähle, die Farbe im Farbwähler bleibt laut DigitalColors die gleiche. EDEFF4 eingestellt, E9usw kommt raus.
Und auch wenn in der Vorschau die richtige Farbe im Bild ist, ist sie nach dem hochladen wieder ganz eine andere (dritte) Farbe. Vielleicht doch das CMS schuld?

 

[ThoRic]

benutzt du irgendwo eine Option 'websichere Farben'.
Das sind etwas mehr als 200 der 16,7 Mio Möglichen 8 Bit RGB Komnbinationen.

Dann istklar das hinten nie das herauskommt, was du erwartest.

Ansonsten gilt für den Colorpicker oder Screenshots, das alles was nicht gecolormanaged wird, sind genau die Werte die drauf stehen, also wenn du per HTML ein Fläche von #EDEFF4 anlegst dann wird die in Safari auch aufgenommen. Bei FF mit aktiviertem CM siehts schon wieder anders aus, denn das colormanaged ja auch profillose Bilder und Seiteninhalte, da findet dann eine Transformation von sRGB in MonitorRGB statt.

Mal zur Probe was vergleichbares: Was gibt dir der DigitalColor Farbmesser für das hiesige MU Logo aus?

Hier in Safari 4.0.3: #7482B2
in FF 3.5.4: #8389B6

Das PNG aus der Seite gezogen und in PS geöffnet und per PS Pipette gemessen: #7482B2

Dem mein Monitorprofil zugewiesen und und per Digitalcolormesser gemessen, wieder #7482B2, dann in PS sRGB zugewiesen und der DigitalColor Farbmesser gibt wie in FF #8389B6. Während die Infopalette in PS natürlich durchgehend #7482B2 angezeigt hat, weil wir haben janichts gewandelt.

Alles hochgradig reproduzier- und vorherhsehbar.

Und wie siehts bei dir aus?

Nachtrag: leg doch mal eine Fläche der Farbe an, mach wie die ganze Zeit auch ein png davon und lad sie mit deinem nächsten Beitrag hier hoch, dann sehen wir ja ob du was anderes siehst/misst als wir.

 

[B1eistift]

Also das MU Logo ist bei mir in FF 3.0.15 und Safari 4.0.3 #7482B2. Die 200 Websafe Colors benutze ich nicht.
Ich bin inzwischen sicher dass die Veränderung beim hochladen passiert. Auf dem Schreibtisch hat das Bild noch die richtige Farbe, nach dem hochladen und dann auf den Schreibtisch ziehen eine andere. Hier mal ein Vorher-Nachher vergleich.
Trotzdem möchte ich das ganze jetzt verstehen
Ich glaube nämlich ich verwechsle zwei Dinge:
Einmal kann man ja bei den Systemeinstellungen ein Farbprofil verwenden. Das hat aber nichts mit meinem Problem zu tun oder? Der Mac Farbmesser misst nämlich immer die gleiche Farbe, egal was dort eingestellt ist.

Das zweite ist in PS=>Bearbeiten=>Farbeinstellungen. Da gibt es verschiedene Profile. Welches ist das Standard-Profil, das die meisten Browser (abgesehen von speziellen Einstellungen in FF) verwenden? sRGB? Oder das Monitor-RGB? Sprich, wenn ich eine Seite ansurfe und die Farbe messe, misst er einen sRGB Wert? Also sollte ich einfach in PS auch sRGB als Arbeitsprofil einstellen, und die Farben sind exakt die selben.

 

[ThoRic]

Einmal kann man ja bei den Systemeinstellungen ein Farbprofil verwenden. Das hat aber nichts mit meinem Problem zu tun oder?

Dann musst du aber ein verdammt altes System verwenden. Die Option einen allgemeinen RGB und CMYK Systemarbeitsfarbraum vorzugeben, gibt es m.W. seit 10.4 nicht mehr. Das einzige was man nach wie vor eingeben kann, ist das zu verwendende Monitorprofil. Dies getrennt für jedes angeschlossene Display in den Systemeinstellungen -> Monitore > Reiter Farben.

Der Mac Farbmesser misst nämlich immer die gleiche Farbe, egal was dort eingestellt ist.

Würde er nicht, wenn du einen Browser verwendest der Colormanagement nicht nur für Bilder anwendet, so wie ich es oben für FF 3.5 beschreiben habe. Wenn du deinen FF 3.0 nicht konkret das Colormanagement aktiviert hast, kann er übrigens auch gar keins, sollte sich als Verhalten wie Opera, IE und der Rest.

Das zweite ist in PS=>Bearbeiten=>Farbeinstellungen. Da gibt es verschiedene Profile. Welches ist das Standard-Profil, das die meisten Browser (abgesehen von speziellen Einstellungen in FF) verwenden? sRGB? Oder das Monitor-RGB?

Monitor RGB. Wo bei das nichts allgemeines ist, sondern einfach bedeutet, jeder Monitor macht was er will. Ist er kalibriert und profiliert wirds gut, wenn er Profile zum auswerten an den Bildern vorfindet, ist es irgendein Wald und Wiesen Monitor der sonstwie eingestellt ist, kanns auch ganz anders aussehen. Das 'gute' Aussehen am eigenen Schirm hat keinerlei Relevanz für das aussehen an jeglichem anderen Schirm.

Sprich, wenn ich eine Seite ansurfe und die Farbe messe, misst er einen sRGB Wert

Nein, nicht zwangsläufig. Folgende Fälle sind zu unterscheiden:
1. Bild ohne Profil in Safari oder jedem Browser ohne CM: es werden die Daten die im Bild stehen 1:1 im Monitorfarbraum dargestellt und somit auch gemessen
2. Bild ohne Profil in FF mit aktiviertem CM: ES wird angenommen das Bild wäre sRGB und es werden die dazu passenden RGB Werte für deinen Bildschirm berechnet und somit auch gemessen.
3. nicht-Bild Elemente oder Bildformate die keine Profile verwenden: Siehe 1.
4. Bild mit Profil in Safari oder FF mit aktiviertem CM: ES werden wieder individuell die RGB Wert des Bildes per Bildprofil in dein Monitorprofil konvertiert, um dafür zu sorgen das die Richtige Farbe angezeigt wird, und nicht die richtigen Werte (die sollten indem Fall 2.-rangig sein).
5. Bilder mit Profil in nicht CM fähigen Browsern: Bilder werden mit unveränderten Werten auf dem Schirm ausgegeben, selbiges gilt fürs messen.

Also sollte ich einfach in PS auch sRGB als Arbeitsprofil einstellen, und die Farben sind exakt die selben.

nein, nicht ganz. Die Wandlung in sRGB ist quasi Plan B. Perfekt wäre eben das Bild da zu lassen wo es ist, und das Profil mitzugeben, dass dann mit dem Bildschirmprofil beim Betrachter gemeinsam dafür sorgt, dass die Farben stimmen.

Wird bim Betrachter kein CM verwendet, ist es recht wahrscheinlich dass sein Monitor sich irgendwie ähnlich wie sRGB verhält, so werden die Farben ohne individuell aufbereitet zu werden, ganz passabel dargestellt.

Leider nicht ganz trivial das ganze ;-)

 

[Isegrim242]

Ich häng' mich hier auch nochmal rein.

Wie kann es denn dann sein, dass sich ein Bild, welches
ohne eingebettetes Profil in PS (ohne CM) geöffnet wird,
beim »für's web speichern« (ohne ein Profil einzubetten)
farblich immer weiter verschiebt?

Ist das auch wieder auf die websicheren Farben zurückzu-
führen?

 

[ThoRic]

Nein, das liegt wohl am Upload der irgendwie noch die Finger drin hat, sprich das Bildmaterial durch die Mangel dreht. Das ist ja inzwischen durchaus üblich, so bekommt, man als iphone T-mobilekunde auch nur noch passend herunterskaliertes zu Gesicht.
Sprich indem Fall ist es nicht mal der Seitenbeetreiber oder die eigene Technik die das verursacht sondern der Carrier, der eigentlich für den unversehrten Transport zu sorgen hat.

PS ändert zu mindestens nichts gravierendes wenn man es nicht bestellt. Sprünge um eine oder 2 tonwertstufen können aber immer auch durch die JPEg Kompression auftreten. Verwndet man Ditherinmg, kommen eh komplett neu gemischte Farben zum Einsatz.

 

[Isegrim242]

Ich sprach hier nur von PS. Die Farbverschiebung ist hier
bei einem Beispiel mehr als deutlich zu sehen. Einfach
nur öffnen, speichern usw. und mit jedem mal wird es
schlimmer. Das liegt dann echt an der JPEG Kompression?

 

[ThoRic]

Welches Beispiel?
Wie geöffnet?

Wenn du ein sRGB Bild ohne Profil sicherst, in PS eingestellt hast, das profilloses Material automatisch der Arbeitsraum zugewiesen wird, der nicht sRGB ist, dann hast du natürlich eine Datenkonvertierungsmühle angeworfen, wo nie mehr der anfängliche Datenbestand vorkommt.