Weboptimierung

 

 

 

 

 

Home 
Fotografien 
Zeichnungen 
Kangaroo 
Themen 
Kontakt 
Disclaimer 
Privat / Gast 

 

 

 

Kurze Kniffs 
Freistellen 
Protokollpinsel 
Farbwahl 
Stapelverarbeitung 
Google Maps Art 
Stile 
Augen färben 
Blitz 
Farbe im SW-Bild 
Panini-Bilder 
Panorama 
Text stanzen 
Tiefenschärfe 
Tilt-Shift 
Weboptimierung 
Pixelgrafik 
Englisch-Deutsch 
CD-Label 
Comics 
Zähne  
80er-Neon-Stil 
andere - OS 
CS5 HDR & mehr 
Digitalphoto 
Grüezi!ThemenPhotoshopWeboptimierung

Fotos mit Photoshop (7.01)
fürs Web optimieren

Weboptimierung

Diese Anleitung zeigt Dir, wie Du Fotos mit Photoshop 7.01 für's Web optimierst. Sie wurde aus verschiedensten Quellen erarbeitet. Die Anleitung kann auch für Photoshop CS und Elements verwendet werden. Einige Befehle heissen dort ein wenig anders.

Wahl des richtigen Dateiformats

Für Pixelbilder eignet sich üblicherweise das JPG-Format. Das ebenfalls im Web verbreitete GIF-Format ist eher sinnvoll für flächig eingefärbte, comicartige Grafiken, z.B. Logoabbildungen.

 

Wahl der richtigen Grösse (in Pixeln gemessen)

Bilder werden im Web immer mit der Monitorauflösung, also mit 72 dpi dargestellt (manche Monitore haben eine etwas feinere Auflösung).

Wir müssen uns also nur um die richtige Anzahl der Pixel in horizontaler und vertikaler Richtung kümmern. In der Praxis sollte man sich an 800 Pixel Breite und 600 Pixel Höhe orientieren, um auch Benutzern mit kleinerem Monitor die Chance zu geben, die Bilder anzusehen mit wenig scrollen.

In Photoshop 7.01 wählst Du über Bild > Bildgrösse > Auflösung = 72 Pixel/Zoll die für die Monitordarstellung richtige Grösse.

 

Wahl des richtigen Farbraumes

Innerhalb des RGB-Modus gibt es zwei weit verbreitete Farbrräume: Adobe-RGB und sRGB.

Der Adobe-Farbraum hat den Vorteil, dass er grösser ist, es lassen sich also mehr Farben in ihm darstellen. Er eignet sich zudem besser für die spätere Umwandlung in den CMYK-Modus, wenn das Bild z.B. im Offsetdruck erscheinen soll (Zeitschrift, Prospekt o.ä.).
 
Der Farbraum sRGB hingegen ist deutlich kleiner, sorgt aber für eine relativ gleiche Darstellung der Farben in den gängigen Internetbrowsern. Für die Verwendung im WWW ist es also ratsam, in der Bildbearbeitung auf diesen Farbraum zu wechseln um einen möglichst genauen Eindruck davon zu haben, wie sich das jeweilige Bild auf anderen Rechnern darstellt.
 

So wird's gemacht: Fürs Web speichern

Unschöner Effekt - Wieso?

Arbeitet man mit Adobe-RGB in Adobe-Photoshop und exportiert dann die Bilder mit > Datei > Für Web speichern, so werden die Farben nach sRGB konvertiert. Das Bild wirkt dann heller und die Farben leuchten nicht mehr so kräftig. Um solche bösen Überraschungen zu vermeiden, sollte schon bei der Bearbeitung von Bildern für das Web sRGB in Photoshop Verwendung finden.

Lösung

Unter >Ansicht wählen wir > Proof einrichten und dann >Windows-RGB.

Jetzt müssen wir nur noch darauf achten, dass im "Ansicht"-Menü die Option "Farb-Proof" angewählt ist. Nun werden unsere Farben schon innerhalb von Photoshop so dargestellt, wie sie nach dem "Für Web speichern" aussehen und können gegebenenfalls von uns nachgesteuert werden.

Alternative (weniger empfohlen, da die Bilder wahrscheinlich nicht nur für Webdarstellung Verwendung finden sollen)

Eine weitere Möglichkeit, um unschöne Farbänderungen nach der Aufbereitung von Bildern für das WWW zu vermeiden, besteht darin, von Anfang an im sRGB-Farbraum zu arbeiten. Dies macht jedoch nur dann Sinn, wenn man die Daten nicht später im Offset-Druck, oder auf profilierten Belichtern ausgeben möchte. Dazu wählt man im "Photoshop"-Menü wählt man die "Farbeinstellungen". Dort legt man als Arbeitsfarbraum "sRGB" fest. In den Farbmanagement-Richtlinien wählt man die Option "In RGB-Arbeitsfarbraum konvertieren". Nun arbeitet man generell in sRGB und erlebt beim "für Web speichern" keine bösen Überraschungen mehr.

 

Meine anderen Tipps und Tricks findest Du hier: