Photoshop für Webmaster – erste Schritte bei der Bildbearbeitung

In Zeiten von Instagram und Facebook werden Bilder für Websites immer wichtiger, denn kaum ein Nutzer möchte sich noch durch den sprichwörtlichen „Wall of Text“ wühlen. Da nicht jeder von uns mit künstlerischem Talent gesegnet ist, lautet die einfachste Lösung für dieses Problem: Stock-Fotos. Und obwohl generische Bilder besser als keine sind, wäre es deutlich besser für Sie und Ihre Nutzer, wenn Sie sich die Zeit nehmen um eigene, einzigartige Grafiken zu erstellen. In diesem Artikel möchten wir Ihnen daher die ersten Schritte mit Adobe Photoshop zeigen. Bitte beachten Sie, dass die grundsätzlichen Anweisungen und vor allem die Shortcuts und Tastenkombinationen auf die Windows-Version bezogen sind. Grundsätzlich sollte die Vorgehensweise auf MacOS aber dieselbe sein.

Was ist Adobe Photoshop?

Adobe Photoshop ist das bekannteste Bildbearbeitungsprogramm der Welt, wird seit 1987 entwickelt und erschien erstmals im Jahre 1990. Entwickler ist das US-Amerikanische Softwareunternehmen Adobe Systems. Inzwischen befindet sich das Programm in der Version CC (Creative Cloud) 2018. Je nach Zählweise handelt es sich hierbei um die 19. Version von Photoshop. Das Programm gilt als Industriestandard und stellt aufgrund der hohen Bekanntheit inzwischen einen Gattungsbegriff für das Bearbeiten von Bildern dar („etwas oder jmd. photoshoppen“). Im Gegensatz zu einfacheren Bildbearbeitungsprogrammen basiert Photoshop auf dem sogenannten Ebenensystem. Das bedeutet, dass einzelne Schichten erstellt werden können die sich, je nach Reihenfolge, überlagern und überdecken. Zusätzlich zu dieser Grundfunktion besitzt Photoshop hunderte Filter und Einstellungsoptionen. Für die meisten Experten gilt es daher als das umfangreichste Bildbearbeitungsprogramm auf dem Markt. Weltweit besitzt Photoshop ungefähr 10 Millionen Kunden. Das Programm ist für Windows und MacOS verfügbar.

Erste Schritte mit Photoshop

Bevor Sie Photoshop kaufen empfehlen wir Ihnen die kostenlose Testversion. Hiermit haben Sie die Möglichkeit das Programm 30 Tage lang unverbindlich auszuprobieren. Danach müssen Sie sich zwischen verschiedenen Abonnements entscheiden. Die gesamte Creative Cloud, inklusive vielen anderen nützlichen Tools wie Acrobat Pro oder Videobearbeitungsprogrammen wie Premiere oder After Effects, kostet für Einzelanwender knapp 60 Euro im Monat. Als Student oder Unternehmer können Sie auf spezielle Angebote zurückgreifen. Vorerst reicht es aber wie gesagt auch die Testversion zu verwenden in der alle Funktionen vorhanden sind.

In den Vorgabedetails von Photoshop lassen sich die Breite, Höhe und Auflösung Ihres gewünschten Bildes einstellen.

Folgen Sie den Installationsanweisungen und öffnen Sie nach der erfolgreichen Einrichtung das Programm. Sie landen jetzt im neuen Willkommens-Bereich der Creative Cloud. Rechts werden Ihre zuletzt verwendeten Dateien angezeigt, links können Sie ein neues Bild erstellen oder ein

vorhandenes Projekt laden. Um Ihnen die ersten Funktionen von Photoshop näherzubringen erstellen wir zuerst ein neues Dokument. Klicken Sie also links auf „Neu erstellen“ oder verwenden Sie den Shortcut STRG + N. Hier finden Sie links Ihre zuletzt verwendeten Bildeinstellungen. Ihre linke Spalte sollte daher leer sein. Rechts können Sie manuell das neue Format festlegen. In der oberen Leiste erkennen Sie mit „Foto“, „Web“ und ähnlichen Tabs verschiedene Kategorien, in welchen Sie Vorlagen für neue Bilder finden. Zum Beispiel finden Sie unter „Druck“ die DIN-Formate wie A3 oder A4. Wenn Sie also einen DIN A4 Druck vorbereiten möchten müssen Sie nicht extra nach den korrekten Ausmaßen suchen.

Für den Anfang möchten wir ein klassisches Problem lösen. Sie möchten ein Bild zuschneiden um es für Ihre Webseite, zum Beispiel als Beitragsbild für einen neuen Artikel, zu verwenden. Wir gehen davon aus, dass Ihre Bilder dabei die Maße 1000×250 Pixel haben sollten. Stellen Sie zuerst sicher, dass in Photoshop rechts neben der Breite auch das Format Pixel ausgewählt ist. Tragen Sie dann unter Breite 1000 und unter Höhe 250 ein. Die Auflösung darunter ist aufgrund dessen, dass es sich um digitale Bilder handelt mehr oder weniger irrelevant. 72 Pixel/Zoll gilt als Standard. Belassen Sie den Farbmodus auf RGB-Farbe und 8 Bit. Den Hintergrundinhalt sollten Sie der Einfachheit halber auf Weiß belassen, diese Einstellung kann aber jederzeit über das Ebenensystem geändert werden. Wenn Sie wissen, dass Sie dieses Format häufiger benötigen werden, genau dann zum Beispiel, wenn Sie regelmäßig Bilder in dieses Format umwandeln möchten, können Sie jetzt oben unter Vorgabendetails und rechts neben dem Namen auf das Speichern-Symbol klicken. Das Format erscheint dann im Tab „Gespeichert“. Andernfalls klicken Sie unten auf „Erstellen“ um Ihr leeres Dokument im korrekten Format zu generieren.

Bilder transformieren und einfügen

Sie befinden sich jetzt im Arbeitsbereich von Adobe Photoshop. Rechts unten finden Sie die Ebenenansicht. Hier werden alle erstellten Schichten Ihres Bildes angezeigt. Die Reihenfolge bestimmt dabei welche Ebene ganz oben liegt und damit eventuell andere Bereiche überdeckt. Oben finden Sie auch die Deckkraft, mit der Sie eine Transparenz erzeugen können. Links befindet sich die Werkzeugleiste. Die einzelnen Tools lassen sich auch per Tastenbefehl auswählen. Das wichtigste Werkzeug für den Anfang ist das Verschieben-Werkzeug. Zum Auswählen klicken Sie in der Leiste ganz oben auf das Werkzeug oder drücken Sie die Taste V. Das Werkzeug wird jetzt hervorgehoben dargestellt. Mit dem Verschieben-Werkzeug können Sie Bilder und Elemente innerhalb des sichtbaren Bereichs hin- und herschieben. Stellen Sie sich die Arbeitsfläche von Photoshop wie folgt vor: der weiße Bereich in der Mitte ist Ihr Bildausschnitt. Alle Elemente die sich darin befinden werden später beim Speichern auch in das fertige Bild übernommen. Größere Elemente befinden sich nicht mehr im sichtbaren Bereich, existieren aber immer noch. Mit dem Verschieben-Werkzeug können Sie Ihre Elemente so ausrichten, wie Sie es für sinnvoll erachten. Um Ihr Bild jetzt an ihren Bereich anzupassen müssen wir die Datei erst importieren. Das funktioniert am einfachsten per Drag and Drop. Finden Sie das Bild auf Ihrem Computer und ziehen Sie es auf das Photoshop-Icon in der Taskleiste ohne dabei loszulassen. Sobald Sie eine weiße Umrahmung um den Arbeitsbereich sehen können Sie die linke Maustaste loslassen und das Bild wird automatisch eingefügt. Eine weitere Methode ist über das „Platzieren und Einbetten“ Feld unter „Datei“ ganz oben links. Navigieren Sie hier zu Ihrem gespeicherten Bild und klicken Sie auf „Platzieren“. Die Datei befindet sich jetzt in Ihrem Projekt. Automatisch startet Photoshop den Transformationsmodus. Hier können Sie Ihr Bild einfach und schnell auf die gewünschte Größe strecken. Standardmäßig platziert und skaliert Photoshop das eingefügte Bild so, dass das gesamte Bild im Bereich angezeigt wird. In den meisten Fällen ist das nicht wünschenswert, da wir das gewählte Format ausfüllen möchten.

Um Ihr Bild zu skalieren starten Sie mit der Tastenkombination STRG + T den Transformationsmodus.

Schieben Sie zuerst das Bild in die linke Ecke des Bereichs. Platzieren Sie Ihre Maus an eine der beiden, rechten Ecken des Bildes bis Ihr Zeiger zu zwei diagonalen Pfeilen wird. Klicken und Halten Sie die Ecke und drücken Sie die Umschalt-Taste. Das sorgt dafür, dass Ihre Skalierung das originale Format beibehält. Damit vermeiden Sie ungewünschtes Verzerren. Vergrößern Sie Ihr Bild jetzt solange bis Ihr sichtbarer Bereich gefüllt ist.

Ziehen Sie mit gedrückter Umschalt-Taste an einer der Ecken um das Bild mit gleichbleibendem Format zu vergrößern.

Ihr Bild erstreckt sich jetzt über den gesamten, sichtbaren Bereich. Zuletzt müssen Sie jetzt dafür sorgen, dass die Bildkomposition ansprechend ist. Schieben Sie dafür per gedrückter linker Maustaste einen passenden Abschnitt in Ihren Ausschnitt.

Wenn Ihr Bild den sichtbaren Bereich ausfüllt können Sie mit einem Klick ins Bild und gedrückter linker Maustaste anfangen das Bild auszurichten.

Wenn Sie mit Ihrem Bild zufrieden sind klicken Sie oben auf den Haken oder drücken Sie die Enter-Taste.

Einfache Bildanpassungen: Farben, Helligkeit und Kontrast anpassen

Sie könnten Ihr Bild jetzt abspeichern um es online zur Verfügung zu stellen. Allerdings empfehlen wir Ihnen einige Minuten mehr zu investieren um Ihre Besucher wirklich zu beeindrucken. Photoshop besitzt viele, sehr einfache Tools um Bilder in Sekundenschnelle anzupassen und zu verbessern.

Tonwertkorrektur in Photoshop

Eines dieser Tools ist die sogenannte Tonwertkorrektur. Damit lassen sich die Helligkeit und der Kontrast von Bildern schnell und einfach anpassen. Das Histogramm in der Mitte zeigt Ihnen die Anzahl der Pixel einer gewissen Helligkeitsstufe. Links befinden sich die Tiefen, also dunkle Bereiche, rechts die Lichter und zentral die Mitteltöne. Darunter erkennen Sie drei Pfeile, die sich verschieben lassen. Verschieben Sie den linken Pfeil nach rechts werden alle Tiefen, die links davon liegen zu Schwarz, andersherum werden alle Farben rechts vom rechten Zeiger beim Verschieben weiß. So erhöhen Sie den Kontrast Ihrer Bilder indem Sie sattere Farben erzeugen. Der mittlere Pfeil legt die Helligkeit der Mitteltöne fest. Eine exakte Anleitung zum Bearbeiten Ihrer Bilder mit der Tonwertkorrektur gibt es allerdings nicht, da jedes Bild anders ist. Wir empfehlen Ihnen mithilfe der Informationen aus diesem Text zu testen, welche Einstellungen den gewünschten Effekt bieten. In unserem Beispiel liefern Werte von 25 – 1,08 und 230 ein ordentliches Ergebnis. Optional bietet Photoshop einige Vorgaben, die oben per Dropdown-Menü gewählt werden können.

Mit Werten von 25, 1,08 und 230 erreichen wir ein gutes Ergebnis.

Um die Farben Ihres Bildes anzupassen gibt es zwei sehr einfache Möglichkeiten. Erstens wäre das die Nutzung von Presets mit dem sogenannten Color Lookup. Wählen Sie dafür die gewünschte Ebene per Linksklick aus und drücken Sie unter der Ebenenansicht auf den halbgefüllten Kreis in der Mitte (Neue Misch- oder Einstellungsebene erstellen). Wählen Sie hier Color Lookup. Im oberen Feld „Eigenschaften“ können Sie nun unter 3DLUT-Datei im Dropdown-Menü den gewünschten Filter auswählen. In unserem Fall passt Crisp_Warm sehr gut zum Bild. Sehr praktisch ist der Umstand, dass durch die Nutzung von Filtern immer derselbe Effekt erzielt wird. So können Sie beispielsweise alle Bilder Ihrer Webseite im selben Stil bearbeiten um einen gleichbleibenden Eindruck zu erzielen.

Color Lookup ermöglicht gleichbleibende Farbfilter für Ihre Bilder. Damit lässt sich ein universeller Look auf Ihrer Webseite erreichen.

Zweitens können Sie die Farben manuell mit den Werkzeugen „Farbton/Sättigung“ oder „Farbbalance“ selbst einstellen. Für eine genaue Bearbeitung eignet sich letzteres Werkzeug eher. Sie finden beide Optionen im selben Menü wie Color Lookup.

Farbton/Sättigung

Wählen Sie den Effekt aus dem Menü aus. Oben finden Sie jetzt die möglichen Einstellungen. Schieben Sie den Regler unter „Farbton“ nach links oder rechts um die gewünschte Färbung zu erhalten. Es bietet sich hier an nur leichte Veränderungen durchzuführen um das natürliche Aussehen des Bildes beizubehalten. Um starke, farbliche Anpassungen weniger aufdringlich wirken zu lassen, können Sie die Sättigung gleichzeitig reduzieren. Achten Sie darauf, dass bei einer normalen Änderung des Farbtons die Schatten und Lichter nicht gefärbt werden. Wenn Sie dies ändern möchten klicken Sie unten auf die Checkbox „Färben“. Jetzt färbt sich ihr Bild gleichmäßig. Gleichzeitig verlieren Sie so aber auch Details.

Farbbalance

Der unserer Meinung nach einfachere Effekt ist die Farbbalance. Hier lassen sich die Tiefen, Mitteltöne und Lichter getrennt voneinander anpassen. Per Dropdown-Menü können Sie die entsprechenden Stufen auswählen, die sie bearbeiten wollen. Die Einstellungen im Effekt sind mehr oder weniger selbsterklärend. Anhand der Skalen können Sie die Farben in eine Richtung zweier Komplementärfarben verschieben. So wird ihr Bild beispielsweise eher blau als gelb.

Der Einstieg lohnt sich

Dieses Tutorial war natürlich nur ein kleiner Ausschnitt zu den Möglichkeiten die Photoshop bietet. Für Webmaster lohnt es sich auf jeden Fall einen Blick zu wagen und etwas Zeit zu investieren. Mit der Zeit werden Sie immer weitere Möglichkeiten entdecken um Ihre Bilder zu verbessern. Mit den einfachen Anpassungen konnten wir aus unserem generischen Bild einen kleinen Blickfang machen. Insgesamt dauerte diese Bearbeitung nur wenige Minuten. Im Anschluss daran sollten Sie darauf achten, dass Ihre Bilder richtig optimiert werden.