Farbmanagement beim Export aus Photoshop fürs Web

[Winter]

Hallo liebes Forum.
Ich hoffe, ich bin im richtigen Bereich!? Ich habe folgendes Problem.

Ich arbeite an einem Hardwareprifiliertem Arbeitsplatz.
Arbeitsfarbraum ist ECI-RGB im RGB und ISO im CMYK.
Programme: Adobe CS1.

Solange ich Bilder/Fotos bearbeite oder herstelle ist alles i.o. Auch Layoutdokumente im InDesign sind kein Problem. Die Farben stimmen extrem genau überein.
Nur wenn ich Grafiken für das Web erstellen möchte haut nix mehr hin.
Nun weiß ich, dass einige Browser Profile akzeptieren, andere wiederum nicht. Daher bin ich mir im klaren, dass es wohl nicht möglich ist (bisher) browserübergreifend/systemübergreifend die gleichen Farben auf den Schirm zu zaubern. Das ist wohl auch nicht wichtig, da jeder normale Benutzer wohl keinen profilierten Bildschirm nutzt. Mein Problem liegt auch an einer anderen Stelle. Folgendes Beispiel:
Ich weiß, dass die Hintergrundfarbe einer Seite #b0b6de ist. Ich erstelle also in PS eine Grafik die genau diese Farbe besitzt. Speichere für Web und erhalte ein sehr seltsames Ergebnis. Via Art Directors Toolkit lasse ich mir die Farben ausgeben. Zum einen wird aus der Farbe #b0b6de, welche in der css definiert wurde #9AACD0. Und aus meiner definierten Farbe in Photoshop wird #92ACC8.
Ich habe versucht komplett ohne Profil mit der Datei zu arbeiten. Das Ergebnis wird extrem schlecht. Dass es mit ECI-RGB nicht klappen kann ist mir bewusst. Arbeite ich im sRGB wird das Ergebnis am besten. Aber eben noch lange nicht genau.
Auch wenn ich eine betehende Datei eines Partners bearbeite passen die Farben hinterher nicht mehr, obwohl es vorher gepasst hat. Ich mach die Datei nur auf, und sage für Web speichern. Schon ist alles im Eimer.
Woran liegt das und welche Einstellungen muss ich fürs Web fahren?

Danke sehr, Winter

PS: Kann einer der Mods den Titel noch einmal bearbeiten bitte? Farbmanagement und Internet oder ähnlich? Sorry!

 

[2nd]

Im Webexport Modul von PS ist oben rechts im Fenster ein kleiner Button, so ein Dreieck, wenn Du darauf klickst, kommt das hier:

Dort kannst Du das Zielfarbprofil einstellen.

Ich arbeite für das Web immer mit Farbmanagement AUS und dem Dokument-Farbprofil beim Export.

2nd

P. S.: Habe den Threadtitel mal geändert

 

[Larzon]

Wenn man im Web Farbverbindlich arbeiten will, dann kann man sich derzeit doch eigentlich nur auf die 212 websicheren Farben verlassen, der Rest ist von zuvielen Einflüssen abhängig und man kann da keine halbwegs übereinstimmenden Farben erwarten.

sRGB ist da eigentlich schon ok. Kleinster Farbraum und eigentlich bei fast jedem annähernd gleich (abgesehen von Alter,Helligkeit,Kontrasteinstellungen des jeweiligen Monitors).

 

[2nd]

Im Prinzip geht es ja nicht um das Farbprofil an sich sondern um eine Kompatibilität zwischen einer WebSeite Hintergrundfarbe und der Hintergrundfarbe eines Bildes mit Elementen.

2nd

 

[Larzon]

Ja das stimmt, aber dazu denke ich sollte man sich, wie gesagt an die 212 websicheren Farben halten... dann kann man nichts falsch machen odeR?

 

[Winter]

Vielen Dank für die Hilfe.
Leider bekomme ich das Menü nicht. Hast Du die CS2? Ich arbeite in der CS1. Das Dreieck habe ich, ich bekomme jedoch nicht das von Dir gezeigte Menü.

Äh, erledigt. Ich habe das Menü gefunden. Da war noch ein drittes Dreieck. Ich versuche das mal. Gebe dann Feedback.

 

[Winter]

Leider kein Unterschied. Ich habe mal einen Screenie mit drangehangen.
In der CSS lautet die Farbe des Hintergrundes #b0b6de.

Was draus wird seht ihr im Anhang.

 

[Larzon]

In dem Fall würde ich doch ein transparentes .gif empfehlen...

 

[Winter]

Das löst das Problem leider nicht.
Und in diesem Fall funktioniert auch leider ein transparentes gif oder png nicht. Die Schrift im Logo ist dermaßen klein, dass sie nicht mehr vernünftig dargestellt werden kann. Deswegen habe ich die Fläche dahintergelegt.

Und als Nachtrag: Verwende ich ein jpg, so funktioniert der oben von 2nd reality beschriebene Weg. Bei png oder gif versagt er jedoch.

 

[Difool]

wechsel einmal rüber zu ImageReady und exportiere damit das .gif

 

[2nd]

ImageReady bringt in dem Fall nichts, da PS das ExportModul von IR verwendet. Das ist derselbe Exporter für beide Programme fürs Web der haargenau dieselben Dateien/-größe erzeugen Habe ich selbst ausprobiert.

Bei PNGs müsste es mit 16 Bit Farbtiefe funktionieren (im Gegensatz zu 8 Bit, die Du nimmst?!?). Und GIF kann so nicht funktionieren, da bei mehreren Farben immer ein Dither angewendet wird. Du kannst das aber umgehen, indem Du die Farbe für den Hintergrund festlegst/sicherst, die dann im GIF nicht mehr vom Kompressor angetastet wird. Ich such das gleich mal raus und melde mich nochmal.

Larzon: Das Vewenden von websicheren Farben und das Festlegen auf GIFs als Exporter ist im Jahre 2006 kein guter Ratschlag. Wenn wir nur die websicheren Farben hätten, wäre es ganz schön fad im Netz


So, Nachtrag:

Mit dem Schluss-Icon machst Du die Farbe sicher.


2nd <- PS CS2 Nutzer (wegen der Frage oben)

 

[Larzon]

@2nd: Das glaub ich dir jetzt einfach mal und komme mir reichlich albern vor, weil ich über derartiges morgen in meiner Abschlussprüfung zum Mediengestalter abgefragt werde und in meinen Büchern/Unterlagen auch nix anderes dazu finde.


Aber wie du sagst, es wäre reichlich langweilig.Zumindest was Bilder etc. angeht, bei Hintergründen undfesten Sachen mags vielleicht noch gehen.

 

[2nd]

@Larzon

Mal aus persönlichem Interesse: Habt Ihr auch Webdesign mit in der Prüfung? Also HTML, CSS etc.?

2nd

 

[Winter]

Ich verwende grundsätzlich kein Dither. Diesen deaktiviere ich immer. Die Farbe auf die es ankommt ist auch immer festgelegt. Via Pipette ausgewählt, angepasst und Schloss dran.
24er pngs aufen ja leider nicht auf allen Browsern, 8er schon. Ich habe es jetzt mit einem gif ausprobiert. Auch hier funktioniert es. Also machen lediglich noch die pngs Probleme.
Auf jeden Fall habt ihr mir sehr weitergeholfen. Das kleine Dreieck oben im Export ist wirklich gold Wert gewesen. Danke 2nd.

Wenn ich zum Thema png noch was finde, dann werde ich das hier mit dranhängen.

Schöne Grüße, Winter

 

[Difool]

ImageReady bringt in dem Fall nichts, da PS das ExportModul von IR verwendet.

Auf die Vorschau innerhalb des "optimierte Datei speichern" wollte ich hinaus.
Kann u.U. sehr hilfreich sein.

 

[2nd]

Ich verwende grundsätzlich kein Dither. Diesen deaktiviere ich immer. Die Farbe auf die es ankommt ist auch immer festgelegt. Via Pipette ausgewählt, angepasst und Schloss dran.
24er pngs aufen ja leider nicht auf allen Browsern, 8er schon. Ich habe es jetzt mit einem gif ausprobiert. Auch hier funktioniert es. Also machen lediglich noch die pngs Probleme.
Auf jeden Fall habt ihr mir sehr weitergeholfen. Das kleine Dreieck oben im Export ist wirklich gold Wert gewesen. Danke 2nd.

Wenn ich zum Thema png noch was finde, dann werde ich das hier mit dranhängen.

Mit Dither meinte ich eher die verlustbehaftete GIF Kompression, also das Angleichen der Farben im Sinne einer besseren Komprimierung. Also wenn es z. B. 3 Rottöne gibt, werden die zu einem zusammengefasst. Die Farbe, die dann Hintergrund ist, geht dabei flöten. Den Extra-Dither meinte ich nicht, sorry fürs saloppe Ausdrücken

24 PNGs sollten schon laufen - bis auf die Transparenz, das kann der IE nicht, da gibt es graue Flächen.

Auf die Vorschau innerhalb des "optimierte Datei speichern" wollte ich hinaus.

Die Vorschau gibt es doch bei beiden Tools. Also 2fach, 4fach usw.?! Oder habe ich was falsch verstanden? Ich arbeite immer mit 2facher Ansicht, links Original und rechts die gedampfte Version. Mit  - + kann man gut reinzoomen und vergleichen

2nd

 

[Winter]

Ok, dann weiß ich was Du gemeint hast.
Das überprüfe ich meist von Hand. Ich fange bei 64 Farben an und fasse über die Pipette jene Farben zusammen, die er zusammenfassen darf. Das gibt die genauesten Resultate. Bei pngs nur eben nicht in der richtigen Farbe
Dann muss ich wohl doch wieder auf die gifs umsteigen. Obwohl ich pngs mehr mag. Meist spart man bei denen noch nen paar byte.

 

[2nd]

PNGs vermeide ich im Moment noch grundsätzlich im Web, bin bei meinen letzten 10 Projekten gut ohne zurecht gekommen.

Obwohl es eines der tollsten Formate ist: 16 Bit Farbtiefe, 8 Bit Alpha Kanal, verlustfreie Kompression.

Hach...

Aber dauert noch bis der IE6 verschwindet. Aber als Austauschformat auf dem Rechner zwischen den Tools ist es perfekt (AfterEffects & Photoshop <-> Flash)

2nd

 

[Larzon]

@Larzon

Mal aus persönlichem Interesse: Habt Ihr auch Webdesign mit in der Prüfung? Also HTML, CSS etc.?

2nd

also ich werde im print bereich geprüft, aber es kommen auch einige fragen aus dem web bereich vor.

die informationen die ich da in der schule erhalten habe waren aber auch so unter aller sau, wie es im unterricht der non printler aussah weiß ich nicht, aber da sie die selben lehrer hatten wage ich einfach mal zu behaupten das es da nicht besser war.

wieso fragst du?

 

[2nd]

Nur allgemeines Interesse. Mich würde interessieren, auf welchem technischen Stand Ihr ausgebildet werdet...

2nd