Für Web speichern in Photoshop

Das "Speichern für Web" öffnet ein Dialogfeld, in dem ihr die Datei besonders stark komprimieren könnt, ohne allzu viel an Qualität zu verlieren. Photoshop reduziert in diesem Dialog vor allem Details, die bei Betrachtung des Motivs auf dem Monitor sowieso kaum zu sehen wären. Nutzt diesen Dialog aber nur, wenn das Ergebnis ausschließlich für Webnutzung vorgesehen ist. Die Arbeitsmaterialien zu diesem Tutorial findet ihr beim ersten Film dieses Grundlagentrainings.

Hinweis: Dieses Tutorial ist die im Rahmen unseres Vertextlichungsaufrufs entstandene Textversion des zugehörigen Video-Trainings von Uli Staiger. Die Texte können daher durchaus auch einen umgangssprachlichen Stil aufweisen.

Wir empfehlen:
Photoshop-Video-Training - Basics & Tricks

Neben dem normalen Speichern gibt es noch einen weiteren interessanten Befehl, den ich euch in diesem Tutorial einmal zeigen möchte.

Schritt 1

Dazu müsst ihr natürlich zunächst euer gewünschtes Bild öffnen.

Schritt 2

Wenn man ein Bild speichert, dann speichert man normalerweise so, dass man auf Datei und dann entweder auf Speichern oder Speichern unter… geht. Aber es gibt noch eine dritte Möglichkeit zu speichern, die man immer dann benutzt, wenn es für irgendeine Art der Internetnutzung ist: also Für Web speichern…

Schritt 3

Ich würde euch empfehlen, das nicht mit wirklich großen Bildern zu machen, da diese meist nicht für die Nutzung im Internet vorgesehen sind.

In meinem Beispiel benutze ich ein Bild mit der Bildgröße 1500 x 1000 Pixel, was für die Bildschirmauflösung natürlich gut ist, aber beim Druck maximal für eine Postkartengröße ausreichen würde.

Schritt 4

Ich gehe nun also auf Datei>Für Web speichern… und dann öffnet sich ein toller Dialog, in dem bei mir GIF als Vorgabe zu sehen ist.

GIFs braucht man eigentlich dann, wenn man eine Webgrafik speichern möchte. Für unseren Fall, in dem wir ein Halbtonbild haben, ist GIF jedoch nicht wirklich geeignet, zumindest nicht auf den ersten Blick, weswegen ich hier erst einmal mit JPEG anfangen möchte.

Ich komme aber gleich noch mal auf das GIF zurück, da es auch dort ein paar Kleinigkeiten gibt, die euch durchaus zusagen könnten.

Schritt 5

Wenn ich möchte, dass mein Bild möglichst verlustfrei gespeichert wird, also so, dass man keine größeren Schäden sieht, wie es bei GIF in unserem Beispiel schon anhand von Schlieren im Himmel zu sehen ist, dann gehe ich dazu auf JPEG. Ihr werdet sehen, dass es beim JPEG schon viel besser in der Auflösung ist und auch die Dateigröße deutlich runtergeht, hier von 800 KB auf nur noch 333 KB.

Schritt 6

Die Qualität könnt ihr oben aus dem Drop-down-Menü der Vorgaben auswählen, also zum Beispiel JPEG niedrig mit einer Qualität von 10, wo ihr schnell hässliche Flecken im Bild sehen werdet, die wir so nicht haben wollen.

Allerdings hat das Bild dann auch nur noch 103 KB Dateigröße, was schön sein kann, wenn ich das Bild nur mal schnell jemandem zeigen möchte.

Schritt 7

Wenn ihr die Qualität erhöhen wollt, dann könnt ihr mit der Maus auf das Wort Qualität gehen und bekommt einen Slider, mit dem ihr bei gedrückter linker Maustaste durch Ziehen nach rechts die Qualität soweit erhöhen könnt, wie ihr wollt, um die nötige Qualität zu erreichen.

Schritt 8

Bei meinem Bild, würde ich sagen, ist eine Qualität von 50 bis 60 perfekt – und ihr seht, wir haben nun eine Dateigröße von 310 KB. So würde ich das Bild speichern.

Wenn das Bild noch eine andere Größe haben soll, kann ich das vorher auch noch im entsprechenden Dialog angeben.

Schritt 9

Wichtig ist noch, dass ihr das Häkchen bei In sRGB konvertieren setzt. Das ist insofern wichtig, als dass eine Webanwendung normalerweise in diesem Farbraum gespeichert wird. Denn es gibt in diesem Farbraum deutlich weniger Abweichungen bei den verschiedenen Monitoren als beispielsweise bei AdobeRGB.

Schritt 10

So, jetzt hatte ich am Anfang gesagt, man kann sich trotzdem noch einmal das GIF anschauen. Nämlich dann, wenn man nicht einfach nur ein Halbtonbild speichern möchte, sondern dem Ganzen noch einen grafischen Effekt geben möchte. Beim GIF seht ihr, dass ihr in einem Drop-down-Menü die Farbanzahl angeben könnt. Ein GIF wird also so gespeichert, dass das Bild in verschiedene Farben zerlegt wird, die ihr rechts in der sogenannten Farbtabelle sehen könnt.

Schritt 11

Ihr könnt nun zum Beispiel die Farbanzahl einmal auf 4 stellen, sodass nur noch die 4 repräsentativsten Farben in der Tabelle zu sehen sind. Beim Bild seht ihr, dass es jetzt natürlich ganz anders aussieht, aber durchaus gar nicht mal so schlecht.

Es ist eine grafische Wiedergabe dessen, die mich sehr an Photoshop 2 erinnert, wo die Grafiken so ähnlich aussahen.

Schritt 12

Das Tolle ist, ihr könnt mit den Einstellungen noch ein bisschen spielen, also zum Beispiel mit dem sogenannten Dithering. Das seht ihr bei den Übergängen. Mögliche Einstellungen sind Diffusion, was ihr hier seht:

Schritt 13

Oder Muster, bei dem das Ganze so aussieht:

Schritt 14

Oder aber auch Rauschen, bei dem es ein bisschen wilder aussieht:

Schritt 15

Die übliche Art und Weise, wie man das ineinander überblendet, ist die Diffusion, weswegen ich jetzt auch bei der Diffusion bleibe. Aber man kann natürlich auch noch ein bisschen weiter runtergehen und die Farbanzahl auf 2 einstellen. Auf den ersten Blick sieht das Bild nicht aus, als würde es nur aus zwei Farben bestehen, auf den zweiten Blick dann schon, denn ihr seht einfach keine anderen Farben, aber ich finde es als grafischen Effekt eigentlich eine ganz schicke Nummer.

Schritt 16

Experimentiert ruhig ein bisschen damit, geht also zum Beispiel mal auf 8 Farben und nehmt das Dithering raus, wodurch das Bild dann so aussieht:

Schritt 17

Wenn das Bild ein Halbtonbild sein soll, würde ich es in jedem Fall lieber als JPEG speichern, aber wenn ihr ein bisschen experimentieren wollt, dann solltet ihr das mit dem GIF tun.

Wenn euch euer Ergebnis dann so gefällt, klickt ihr einfach auf Speichern und alles ist gut.

Wir empfehlen:
Camera Raw-Video-Training

Unsere Empfehlung für dich

Photoshop für Einsteiger & Aufsteiger

Photoshop für Einsteiger & Aufsteiger

Du möchtest deine Bilder und Fotos bearbeiten, darin einzelne Elemente auswählen und entfernen, bestimmte Effekte erzeugen oder Retuschen durchführen und bei all dem das Programm verwenden, das als Flaggschiff der Bildbearbeitung gilt?!

  • Photoshop für Anfänger: 46 Lektionen in einem 5,5-stündigen Video-Tutorial von Gabor Richter
  • Verschaffe dir Überblick: Menüs und Funktionen, die für deinen Einstieg wichtig sind
  • Verstehe das Prinzip von Ebenen und Masken, lerne alle für dich relevanten Werkzeuge und Filter kennen
  • Inklusive: 35 Übungsdateien zum Mitmachen und zum praktischen Lernen

Zum Training