Photoshop-Cafe.de :: Dein Photoshop-Forum

Photoshop-Cafe.de :: Dein Photoshop-Forum (https://www.photoshop-cafe.de/forum/index.php)
-   Werkzeuge, Bedienfelder und sonstige Grundlagen (https://www.photoshop-cafe.de/forum/forumdisplay.php?f=29)
-   -   Photo fürs Web speichern (https://www.photoshop-cafe.de/forum/showthread.php?t=3744)

phoenix 22.11.08 08:16

Photo fürs Web speichern
 
Nicht jeder surft mit VDSL, Modemzeiten sind glücklicherweise grossenteils vorbei, dafür leben wir heute im Zeitalter mobiler Datendienste. Die sind praktisch alle wieder volumenorientiert und auch die Geschwindigkeit bleibt selten konstant. Also möchte man nicht auf jedes Bild erst 5 Minuten warten bis es fertig geladen ist.

Dafür gibt es in Photoshop den 'Für Web speichern' Dialog. Zu finden im Menu Datei oder direkt per :ctrl:+:shift:+:alt:+S aufrufbar.

http://www.photoshop-cafe.de/phoenix/tutorial/fws/001.jpg

Es können verschiedene Bildformate zur Speicherung ausgewählt werden. Die beiden wichtigsten dürften JPG und GIF sein. JPG für Photos, GIF für Animationen und Bilder mit wenig Farben und grossen Flächen. Screenshot´s von Menüs zum Beispiel eigenen sich gut als GIF. JPG komprimiert die Bilder einstellbar, bei Texten ist bei starker Komprimierung kaum mehr was zu lesen. Die Verluste sind dann als JPG-Artefakte gut sichtbar. PNG kommt man meistens ohne aus.

http://www.photoshop-cafe.de/phoenix/tutorial/fws/002.gif

Siehts so aus, wurde JPG anstatt GIF ausgewählt.

http://www.photoshop-cafe.de/phoenix/tutorial/fws/011.gif

Das für Web speichern Fenster bietet verschiedene Ansichtsmodi. Bis zu 4 Versionen kann man gleichzeitig anzeigen. Für jede Ansicht werden Inforamtionen über Kompressionsrate und Grösse direkt angezeigt.

http://www.photoshop-cafe.de/phoenix/tutorial/fws/003.jpg

Des weiteren gibt es eine Lupe zum zoomen, die Hand um den sichtbaren Bildbereich zu verschieben, die Pipette für Farbinfos und das Slicewerkzeug. Wer mit Slices arbeitet, kann direkt in diesem Fenster für jedes Slice eigene Speichereinstellungen definieren.

http://www.photoshop-cafe.de/phoenix/tutorial/fws/004.gif

Des weiteren gibt es zu jedem Bildformat verschiedenste Einstellungsmöglichkeiten. Somit lassen sich z.b. für das GIF Format Transparenz und Animationseinstellungen definieren.

http://www.photoshop-cafe.de/phoenix/tutorial/fws/005.gif

Soviel zur Oberfläche. Möchte man nun konkret ein Photo fürs Web, sprich für die Ausgabe am Bildschirm (bei Drucksachen bitte Finger weg von diesem Dialog) abspeichern, kann man wie folgt vorgehen.

Als Format wird JPG eingestellt. Mit dem Schieberegler bei der Qualität, wird die Kompressionsrate eingestellt. Normalerweise ist hier ein Wert von 65% - 75% ausreichend. Nur bei ultrascharfen, hochaufgelösten Photos macht es Sinn darüber zu gehen. Ein Problem stellt Text dar, z.b. für Banner oder Buttons in Webseiten. Da muss man halt etwas rumprobieren. Hat das Photo wenig Farben, lohnt sich auch immer ein kurzer Grössenvergleich zu GIF (Format auf GIF umstellen).

Wählt man eine zu starke Kompression, sieht man z.B. anhand der 2fach-Ansicht sofort, das man nachjustieren sollte.

http://www.photoshop-cafe.de/phoenix/tutorial/fws/006.jpg

Also dreht man solange an dem Schieberegler, bis man keinen Unterschied mehr ausmachen kann und mit der Bildgrösse zufrieden ist.

http://www.photoshop-cafe.de/phoenix/tutorial/fws/007.jpg

Warum man auf PNG verzichten sollte, wird schnell deutlich. PNG speichert verlustfrei, es komprimiert Bilder nicht. Entsprechend Gross werden dann auch die Bilddateien. Meine Schlange als PNG.

http://www.photoshop-cafe.de/phoenix/tutorial/fws/008.gif

Ein Modemuser wartet also 457 Sekunden, bis das Bild fertig geladen ist. Die Schlange als 70% JPG.

http://www.photoshop-cafe.de/phoenix/tutorial/fws/009.gif

Immer noch über eine Minute, aber wesentlich besser als die PNG Version, obwohl man optisch keinen Unterschied ausmachen wird. Man kann sich die benötigte Downloadzeit übrigens für verschiedene Bandbreiten anzeigen lassen.

http://www.photoshop-cafe.de/phoenix/tutorial/fws/010.gif

Es gibt noch einige weitere Einstellungsmöglichkeiten, gerade bzgl. Farbprofil. Einfach mal reinschaun und ausprobieren. Durch die Vorschau bekommt man ein gutes Gefühl dafür, welche Einstellung was bewirkt.

Wie man seine Bilder nun speichert, muss jeder selber wissen. Man sollte aber einen Grund dafür haben, wenn ein Bild 10x Grösser ist, als es sein müsste ;)

Have fun.

(C)Copyright Photoshop-Cafe.de

Ylloh 22.11.08 14:19

schöne und vor allem sehr nützliche Anleitung!

Zusätzliche Informationen zu den einzelnen Bildformaten: Thread: Bildformate

Silvia 09.01.09 15:35

Sehr informativ.... lieben Dank dafür !

digger_one 15.01.09 15:20

Jepp, gut geschrieben. Vieln Dank .......


Alle Zeitangaben in WEZ +2. Es ist jetzt 22:35 Uhr.

Powered by vBulletin® Version 3.8.7 (Deutsch)
Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.
©2005-2020 photoshop-cafe.de

Seite wurde generiert in 0,01825 Sekunden mit 9 Queries