Bilder mit Adobe Photoshop webtauglich machen

Für Web speichern

Mit Adobe Photoshop soll im Rahmen unserer kleinen Serie zur Bildbearbeitung fürs Web ein weiteres Grafikprogramm vorgestellt werden. Erfahrene Anwender dieser Profi-Software werden diesem Leitfaden sicher keine nennenswerten Mehrwerte entnehmen können, aber gerade Anfänger sind oftmals mit der Mächtigkeit dieses Programms überfordert.

Übersicht Serie Bildbearbeitung für das Internet

Adobe Photoshop starten und Bild öffnen

Photoshop - Datei öffnen

Starten Sie Adobe Photoshop wie gewohnt über Ihr Startmenü, Desktopverknüpfung oder ähnliches und wählen im Dateimenü „Öffnen…“ bzw. Drücken Sie „Strg + O“ um den Dateidialog zu starten. Die können nun wie gewohnt das Verzeichnis mit dem Bild auswählen und dieses öffnen. Alternativ können Sie die Datei auch direkt über einen Rechtsklick auf die Datei im Explorer/Arbeitsplatz » „Öffnen mit“ » „Adobe Photoshop“ öffnen oder diese per Drag & Drop direkt ins Photoshop ziehen.

Bildausschnitt festlegen

Photoshop - Bild zuschneiden

Photoshop - FreistellenwerkzeugBei großflächig aufgenommenen Bildern reicht für die Webseite oftmals ein Ausschnitt aus. Bei Produkten zum Beispiel können auch Detailansichten gewünscht sein. Diese lassen sich mit Hilfe des „Freistellungswerkzeuges“ erstellen. Wählen Sie dazu das entsprechende Icon in der Werkzeugleiste aus oder drücken Sie dazu einfach die Taste „c“.

In der Menüleiste werden nun zahlreiche Optionen für das Freistellungswerkzeug angezeigt. Sind alle Felder leer, so können Sie einen völlig freien Rahmen zur Beschneidung des Bildes aufziehen. Klicken Sie dazu in das Bild und ziehen die Maus bei gehaltener, linker Taste. Anhand der Anfasser an den Ecken des Rahmens und in den Mitten der Kanten können Sie Ihre Auswahl nachträglich anpassen. Mit der „Esc“-Taste brechen Sie die Auswahl ab. Mit „Enter“ führen Sie den Bescheidungsvorgang aus.

Photoshop - Auswahlrahmen Anfasser

Die Beschneidungsoptionen

Wie bereits erwähnt, stehen Ihnen eine Reihe an Optionen für das Beschneidungswerkzeug zur Verfügung.

  • Eingabe vordefinierter Breite und Höhe à das Bild wird in diesem Zusammenhang zugeschnitten und gleichzeitig auf die angegebene Größe skaliert – achten Sie hier aber auf die Angabe der richtigen Maßeinheit „Px“
  • Weiterhin können Sie die Auflösung des zugeschnittenen Bild mit beeinflussen – das kann u.U. dann interessant sein, wenn die Grafik aus dem Print kommt und mehr als 96 DPI Auflösung hat (allerdings wird dieser Wert beim Speichern fürs automatisch auf die Bildschirmauflösung angepasst und muss hier nicht gesondert angegeben werden)
  • Halten Sie beim Aufziehen des Rahmens die Umschalt-Taste gedrückt, so wird der Auswahlrahmen immer quadratisch sein à das kann zum Beispiel für Thumbnails eine nützliche Funktion sein.

Bildgröße andern

Photoshop - Bildgröße anpassen

Die Bildgröße können Sie über das Dateimenü „Bild“ » „Bildgröße“ oder die Tastenkombination „STRG + ALT + I“ anpassen. Daraufhin öffnet sich ein Dialog, in dem Sie die gewünschten Maße eingeben können.

Achten Sie darauf, dass der Haken bei „Proportionen erhalten“ gesetzt ist, da sonst das Bild gestreckt oder gestaucht wird. Ist der Haken gesetzt, sind die beiden Eingabefelder optisch durch ein Kettensymbol verbunden.

Entscheidend für die Bildgröße sind die Werte im Bereich Pixelmaß. Dort sollte die Einheit entsprechend auf „Pixel“ gestellt sein. Mit „OK“ bestätigen Sie Größenänderung.

Photoshop - Dialog Bildgröße anpassen

Bild speichern

Photoshop - Bild für Web speichern

Um das Bild fürs Web zu speichern gehen Sie über das Dateimenü auf „Für Web speichern…“ oder drücken gleichzeitig „Alt + Umschalt + Strg + S“. Im sich öffnenden Dialog haben Sie die Möglichkeit das Ausgabeformat anzugeben. Wir empfehlen an dieser Stelle JPEG und einen Qualitätswert von 80. In der Vorschau sehen Sie, wie sich die Qualität des Bildes ändert. Je nach Ausgangsqualität können hier auch niedrigere Werte angeben werden. Die Erfahrung hat gezeigt, das Werte größer als 80% meist keinen nennenswerten Einfluss auf die Qualität, aber auf die Dateigröße haben.

Photoshop - Speicherndialog

Nach dem Klick auf den „Speichern“-Button öffnet sich der Dateidialog, in dem Sie das Zielverzeichnis wählen und einen Dateinamen vergeben können.

Wählen Sie den Dateinamen mit Bedacht. Dieser sollte eindeutig sein und das Bild inhaltlich beschreiben. Zum einen hilft das später bei der Dateiverwaltung auf dem Server und zum anderen Unterstützten Sie damit die Suchmaschinen bei der Indizierung Ihrer Webseite.

// Gefällt Ihnen diese Seite oder empfinden Sie den Inhalt als besonders interessant?

Mit einem einfachen Klick können Sie es in Ihrem Sozialen Wunschmedium teilen: [Google+] |  [Facebook] |  [Twitter]

Dieser Eintrag wurde gepostet in Tutorials. Lesezeichen auf diesen Post.

Schreiben Sie eine Antwort

Ihre Mail-Adresse wird nicht angezeigt.

Folgende HTML-Tags und Attribute dürfen verwendet werden: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>