Probleme mit Darstellung in div. Browsern

[@pollo]

Aloa guten Abend liebe Apfeltalk Gemeinde, guten Morgen liebe Studenten. Ich habe Probleme mit

A) Der Darstellung des Backgroundes nachfolgender Seite
B) Mit der Formatierung des Textes in div. Browsern

www.impulse-network.org/v6/web-content (Unterschied Background + Page)
www.impulse-network.org/v6/web-content/imprint.html (Textlänge in unte. Browsern + BG)

Je nachdem welchen Browser ich benutze, zeigt mit der IE oder FF einen unterschied zwischen BG und Page an. Bei der Imprint Seite wurde einfach nur unsauber gearbeitet - aber ich dachte indem ich mir den genauen Hex Code der Page ziehe, kann ich das vermeiden bzw. Safari zeigt es ja richtig an. Ist es überhaupt möglich den Übergang fließen zu machen? Möglicherweise ein Stück aus der Page schneiden und repeaten?

Das zweite Problem ist jedoch viel Größer, ich habe im Imprint diese Beispielbox. Je nachdem, welchen Browser ich aufrufe zeigt er mir den Text für zu kurz oder lang für diese Box. Das ist untragbar. Woran kann das liegen? Ich habe eine Schriftartefamilie ausgewählt. Ich würde auch gerne damit weitermachen, schließt das genaue Textlängen aus?

lg jan

 

[mschoening]

Hi,
Safari zeigt dir die richtige Farbe an weil Safari das eingebettete Farbprofil auslesen kann. Du darfst nie ein Farbprofil für Webgrafiken verwenden. Der Workflow sieht vielmehr so aus: Neue Photoshop Datei öffnen Edit>Assign Profile und dann dein Monitor Farbprofil auswählen (bei dir denke ich handelt es sich um iMac). Dann kannst du mit der Pipette und dem integrierten Farbmesser von OS X die HEX werte von Screenshots auslesen und in Photoshop in die Grafiken einbauen (Screenshots, etc. werden bei OS X mit dem Farbprofil erstellt was generell für das OS X definiert ist). Wenn du jedoch bei Photoshop das default Profil (sRGB) eingestellt hast und einen Screenshot mit dem Profil deines Monitors (oder Farben direkt mit der Pipette aulesen willst) hast stimmen die beiden Profile natürlich nicht mehr überein. Deshalb musst du die Photoshop Datei erstmal mit dem Profil des Monitors abgleichen. Dann arbeitest du und vor dem export gehts du hin und stellst die Photoshop Datei wieder über Edit>Assign Profile auf sRGB und gehst auf Save For Web. Hierbei ist wichtig das du das ICC Profile nicht in die Datei mit einfügst!!! Dann sollten sowohl die HEX Werte als auch deine Grafiken die gleichen Farben haben.

P.S: Es ist noch früh (für mich jedenfalls), ich bitte die Unordnung und die schlechte Strukturierung in meinem Post zu vernachlässigen .

MfG,
Max

 

[mschoening]

Achso,
stell dein background-color für das body Element im basic.css Stylesheet auf #f3f2ef, dann klappt es (oder das background-image über Photoshop auf #f0efec).

MfG,
Max

 

[@pollo]

Danke erst einmal für deine schnelle Antwort, ich musste heute morgen ersten mal die Informationen die du mir gegeben hast sammeln. Es ist eigentlich ein Frevel, dass ich mich noch nie mit dem Zusammenhang der Monitor Einstellung / Profil und dem in PS auseinander gesetzt habe.

Ich habe als aller erstes die HEX Datei in CSS geändert (das ging am schnellsten) und werde jetzt versuchen mein Farbprofil in PS auf den des Monitors (ja es war iMac) umzustellen. Danach werde ich die Sachen exportieren und in die Page umbauen.

lg

 

[@pollo]

Wir kann ich das Problem jetzt dauerhaft umgehen?
Welches Profil muss ich wo einstellen, um die Dateien so exportieren zu können, dass sie auch im FF / IE richtig angezeigt werden?

lg

 

[Kenso]

Bearbeiten -> Farbeinstellungen ⌘⇧K


Click for full size - Uploaded with plasq's Skitch


Click for full size - Uploaded with plasq's Skitch


Click for full size - Uploaded with plasq's Skitch

Ggf. musst du den letzten Schritt bei jedem Start von Photoshop ausführen.

Tipp: Zum Speichern der Datei am besten den „Für Web und Geräte speichern...“ Dialog nutzen.


Click for full size - Uploaded with plasq's Skitch


Click for full size - Uploaded with plasq's Skitch

 

[mschoening]

@Kenso: Wenn er jetzt mit dem Digital Color Meter von OS X eine Farbe auswählt (so wie er das warscheinlich gemacht hat) und er den HEX Code in Photoshop verwendet stimmen die Farben nicht überein! Sein Bildschirm ist nämlich nit auf sRGB Profil gesetzt (warum auch?!) sondern auf iMac.

 

[Kenso]

@mschoening

willst du ihm eine Lösung anbieten, mit der er die Farben auf SEINEM Bildschirm perfekt sieht, oder willst du ihm eine Lösung bieten, mit der er die Farben auf MÖGLICHST VIELEN Bildschirmen perfekt sieht? sRGB wurde meines Wissens extra dafür entwickelt, dessen Farben auf allen Bildschirmen identisch aussehen zu lassen (soweit dies eben möglich ist). Natürlich, er kann den Farbproof von Photoshop auch auf Mac-Monitor stellen und als Arbeitsfarbraum das iMac-Profil angeben, und er wird glücklich sein, denn auf seinem iMac sieht dann (hoffentlich) alles wunderbar aus.
Aber ich mag nicht sagen, dass sein Freund im Nachbarort, der die Seite mal anschaut, auf seinem PC -Monitor die selben Farben sieht! Ok, mit sRGB gibts dafür auch keine Garantie, weil es ja noch von ganz anderen, nicht zu beeinflussenden Faktoren abhängt, aber allgemein gilt sRGB als das sicherste Farbprofil, wenn es um Internetgeschichten geht.

 

[mschoening]

Hi,
du hast micht falsch Verstanden! Dein Ansatz ist auf jeden Fall der richtige! Ich habe nicht gesagt das es falsch sei. Stellen wir uns mal folgendes vor:

1. Er stellt Photoshop so ein wie du gesagt hast und had folglich als Working Space sRGB.
2. Er surft mit seinem entzückenden iMac (Farbprofil iMac) durchs Web auf der Suche nach Inspiration (http://www.cssmania.com).
3. Er findet eine Seite, die Farben gefallen ihm so außerordentlich gut, dass er sie übernehmen möchte (das würde natürlich niemand machen, das ist ja Diebstahl).
4. Er startet den Farbmesser (Digital Color Meter, unter Utilities nativ bei Mac OS X zu finden) und notiert sich die Farbe.
5. Er öffnet jetzt sein nagel neues konfiguriertes Photoshop (stolz wie Oskar) und verwendet den notierten Code um ein wünderschönes Rechteck zu zeichnen.
6. Er speichert es (wie du schon richtig gesagt hast) über Save For Web und selbstverständlich ohne ICC Profile.
7. Jetzt codet er noch schnell mit seinem lieblings Editor (Coda natürlich) das Stylesheet (mit dem oben notierten HEX Code).
8. Er trommelt die ganze Familie zusammen um sein Projekt gebührend zu feiern, doch siehe da: die Farben stimmen nicht überein! So ein Mist!

Für alle die nicht dumm sterben möchten: http://athleticsnyc.com/blog/entry/color-management-for-web-designers-and-developers

WICHTIG: Für Photoshop CS3 nutzer der Follow Up Artikel http://athleticsnyc.com/blog/entry/color-management-amendment

 

[Kenso]

cool, danke für die Artikel

 

[mschoening]

No problemo, achte auf den follow-up Artikel sonst funktioniert das nicht! Nur wenn du CS3 hast!

 

[mschoening]

Hi,
ich habe einen etwas besseren Artikel gefunden der bei uns in der Agentur große Zuneigung gefunden hat:
http://www.viget.com/inspire/the-mysterious-save-for-web-color-shift/

P.S: Der Blog selbst ist auch sehenswert.