20 Photoshop-Tricks für Webdesigner

Wahrscheinlich hat jeder Webdesigner da draußen seine eigenen Lieblings-Photoshop-Tricks im Ärmel. Aus gutem Grund. Die leistungsstarke Bildbearbeitung von Adobe ist aus der Webdesign-Welt nicht mehr wegzudenken. Nur sehr wenige Programme auf dem Markt können mit dieser hervorragenden Software und ihrer breiten Palette von Funktionen mithalten.

Obwohl sich die meisten Webdesigner mit Photoshop auskennen, können Sie immer noch mehr lernen. Schließlich ist das Programm nicht nur mächtig, sondern auch komplex. Außerdem werden regelmäßig neue Inhalte über Updates hinzugefügt.

Aus diesem Grund ist es eine gute Idee, Ihr Lieblingswerkzeug weiter zu erkunden. Um Ihnen dabei zu helfen, werden wir uns in diesem Artikel einige der besten Photoshop-Tricks ansehen. Dinge, die Ihren Workflow verbessern, die Arbeit und das Leben erleichtern, Zeit sparen und Ihnen helfen, die bestmöglichen Websites zu erstellen.

Sind Sie bereit, mehr über Photoshop zu erfahren? Dann lies weiter.

Photoshop-Tricks, die Sie zu einem Webdesign-Assistenten machen

Die folgenden Tipps reichen vom Anfängerniveau bis hin zu komplexerem Material. Jeder von ihnen wurde ausgewählt, um Ihnen zu helfen, der beste Webdesigner zu sein, der Sie sein können.

1. Optimieren Sie Ihren Arbeitsplatz

Beginnen wir mit den Grundlagen. Das erste, was Sie tun müssen, um Ihren Workflow zu verbessern, besteht darin, Photoshop so einzurichten, dass es Ihre Verwendung unterstützt. Schließlich wird die Arbeit mit einem schärferen Werkzeug einfacher.

Aus diesem Grund ist unsere erste Station Fenster > Arbeitsbereich > Grafik und Web . Wenn Sie diese Option wählen, werden die verfügbaren Tools zu denen geändert, die Sie am wahrscheinlichsten für das Webdesign verwenden.

Danach gehen Sie zu Bearbeiten > Einstellungen . Einer der wichtigsten Stopps ist hier Units & Rulers. Unabhängig davon, welche Messung Sie hier auswählen (höchstwahrscheinlich Pixel), wird dies der Standardwert für alle kommenden Dokumente sein.

(Kurzer Hinweis: Um Lineale für einzelne Dokumente zu ändern, klicken Sie einfach mit der rechten Maustaste darauf und wählen Sie Ihre gewünschte Maßeinheit.)

Gehen Sie danach zu Preferences > Performance > History & Cache und klicken Sie auf Web / UI Design .

Dadurch werden die Cache-Einstellungen geändert, um kleinere Dateien mit vielen Ebenen zu bevorzugen, mit denen Sie hauptsächlich arbeiten werden.

An derselben Stelle können Sie auch die Anzahl der Verlaufszustände auswählen. So viele Schritte können Sie zurückgehen, wenn Sie etwas rückgängig machen möchten.

Beenden Sie abschließend die Einstellungen, schließen Sie alle Dokumente und drücken Sie die T- Taste auf Ihrer Tastatur. Dadurch wird das Schriftartenmenü oben auf dem Bildschirm angezeigt. Was Sie hier einstellen, ist fortan Standard für neue Dokumente. Denn niemand mag Myriad Pro so sehr.

2. Tastenkombinationen lernen

Für jedes Programm, das Sie regelmäßig verwenden, ist das Erlernen der Tastenkombinationen im Allgemeinen ein guter Rat.

Zum Beispiel verwende ich Strg+Alt+2/3 , um h2- und h3-Überschriften zu erstellen, während ich diesen Beitrag schreibe. Es ist viel schneller, als die Editor-Symbolleiste dafür zu verwenden, da ich meine Hände nicht von der Tastatur nehmen muss.

Das gleiche gilt für Photoshop. Zu wissen, wie man Aktionen mit einfachen Tastenanschlägen ausführt, ist unendlich schneller als das Klicken durch die Menüs.

Wir werden in diesem Artikel eine Reihe von Tastenkombinationen erwähnen. Ich empfehle diesen Spickzettel jedoch auch, um die Verknüpfungen zu den gängigsten Photoshop-Operationen zu lernen. Abgesehen davon ist es auch eine gute Idee, es sich zur Gewohnheit zu machen, sich Tastenkombinationen für Dinge anzusehen, die Sie immer wieder tun.

3. Ebenen gruppieren und benennen

Wenn Sie mit Photoshop arbeiten, werden Sie mit unzähligen Ebenen arbeiten. Die meisten Elemente erhalten nicht nur eine eigene Ebene, sondern auch Änderungen wie Helligkeit/Kontrast werden als Ebenen hinzugefügt.

Aus diesem Grund kann es sehr schnell unübersichtlich werden. Glücklicherweise gibt es viele Optionen, um dies zu verringern, darunter zwei die Möglichkeit, Layer zu gruppieren und zu benennen.

Zuerst können Sie durch Doppelklicken auf eine beliebige Ebene ihren Namen beliebig ändern.

Auf diese Weise können Sie leicht erkennen, ob eine Ebene das Hintergrundbild, das Menü oder die Seitenleiste enthält.

Alternativ können Sie auch mehrere Ebenen gleichzeitig auswählen, indem Sie entweder die Strg- Taste gedrückt halten , um einzelne Ebenen auszuwählen, oder die Umschalttaste , um einen Bereich benachbarter Ebenen zu markieren. Strg+G verwandelt sie dann in eine Gruppe.

Alternativ können Sie mit der rechten Maustaste auf die Ebenen klicken und dort die Gruppenoption auswählen. In jedem Fall werden Ihre Ebenen viel organisierter. Außerdem können Sie die gruppierten Ebenen auch benennen!

4. Filterebenen

Das Benennen und Gruppieren von Ebenen ist ein guter Anfang. Wenn Sie jedoch mit Dutzenden oder sogar Hunderten von ihnen arbeiten, können Sie immer noch leicht verwirrt werden.

In diesen Fällen haben Sie auch die Möglichkeit, Ihre Layer zu filtern. Verwenden Sie dazu einfach das Menü oben im Ebenenmenü , um nach Typ, Name, Effekt, Farbe und mehr zu filtern.

Alternativ können Sie eine Ebene direkt auswählen, indem Sie das Verschieben- Werkzeug verwenden, die Strg- Taste gedrückt halten und auf eine Ebene oder ein Objekt klicken.

5. Erstellen Sie ein Raster

Bild von PureSolution / shutterstock.com.

Das Raster ist eines der wichtigsten Prinzipien im Webdesign. Es bringt Ordnung ins Design und hilft Ihnen, Ihre Objekte zu platzieren. Aus diesem Grund ist es nur sinnvoll, auch in Photoshop ein Raster zu erstellen.

Verwenden Sie dazu Ansicht > Neues Hilfslinien-Layout . Alternativ können Sie horizontale und vertikale Hilfslinien erstellen, indem Sie einfach auf ein Lineal klicken und in das Dokument ziehen. Verwenden Sie Strg , um vorhandene Hilfslinien zu verschieben.

6. Farbfelder importieren

Sie können Farbfelder aus HTML-, CSS- oder SVG-Dateien direkt in Photoshop laden. Auf diese Weise haben Sie einen guten Ausgangspunkt für Ihr Farbschema, wenn Sie mit vorhandenen Assets wie einem Logo arbeiten.

Um diesen Photoshop-Trick zu nutzen, öffnen Sie einfach das Farbfeldbedienfeld , klicken Sie auf das Dropdown-Menü in der oberen rechten Ecke und wählen Sie Farbfelder laden . Navigieren Sie nun zu der betreffenden Datei und öffnen Sie sie, um Ihr neues Farbfeld zu importieren.

7. Benutzerdefinierte Formen speichern

Besonders wenn Sie mehrere Seiten für dieselbe Site oder Websites mit ähnlichem Design entwerfen, werden Sie feststellen, dass Sie immer wieder dieselben Objekte und Formen verwenden. Aus diesem Grund ist es sinnvoll, sie als benutzerdefinierte Formen zur schnellen Wiederverwendung zu speichern.

Klicken Sie dazu mit dem Pfadauswahlwerkzeug (dem schwarzen Pfeil) mit der rechten Maustaste auf die betreffende Form. Wählen Sie dann Benutzerdefinierte Form definieren . Sobald Sie dies getan haben, können Sie auf diese Form über die Optionen der oberen Leiste des Werkzeugs Benutzerdefinierte Form zugreifen. Klicken Sie einfach auf das Dropdown-Menü, in dem Shape: steht, und wählen Sie Ihre gespeicherte Form aus.

8. Wechseln Sie zwischen Hintergrund- und Vordergrundfarben

Zwei wechseln zwischen der Hintergrund- und Vordergrundfarbe hin und her, ohne auf das Symbol zu klicken, drücken Sie einfach X auf Ihrer Tastatur. Wenn Sie möchten, dass die Farben wieder auf einfaches Schwarzweiß zurückgehen, können Sie dies durch Drücken von D tun.

9. Deckkraft über Tastatur ändern

Eine weitere Tastenkombination: Für jedes Werkzeug, das die Deckkraft ändern kann, können Sie dies einfach über die Tastatur tun. Die Zahlen 1 bis 0 setzen die Deckkraft auf einen Wert zwischen 10 % und 100 %. Das gleiche funktioniert auch mit der Deckkraft von Ebenen.

10. Zeichnen Sie gerade Linien

Um mit einem beliebigen Werkzeug eine gerade Linie zu zeichnen, halten Sie einfach die Umschalttaste gedrückt. Danach können Sie eine Linie (sowohl horizontal als auch vertikal) zeichnen, die automatisch nagelgerade ist. Alternativ können Sie auf zwei verschiedene Punkte klicken, um eine gerade Linie zwischen ihnen zu erstellen.

11. Beispielfarbe

Als nächstes in unserer Sammlung von Photoshop-Tricks ist die Möglichkeit, jede Farbe abzutasten. Wenn Sie die Farbe von einem Objekt benötigen, halten Sie die Alt- Taste gedrückt und klicken Sie auf den gewünschten Farbton. Dies funktioniert sowohl mit dem Pinsel , Bleistift , Farbeimer und allen anderen Werkzeugen, die Farben verwenden.

12. Zur Auswahl hinzufügen oder aus der Auswahl entfernen

Sie können eine vorhandene Auswahl erweitern, indem Sie die Umschalttaste gedrückt halten und den Teil auswählen, den Sie einschließen möchten. Um zu subtrahieren, machen Sie dasselbe, aber mit der Alt- Taste.

13. Mehr als einen Schritt rückgängig machen

Der klassische Weg, Ihre letzte Aktion rückgängig zu machen, ist Strg+Z . Dies funktioniert jedoch nur für das allerletzte, was Sie getan haben. Um mehrere Schritte zurückzugehen, verwenden Sie Strg+Alt+Z .

14. Ändern Sie dynamisch Ihre Pinselgröße

Um die Pinselgröße zu ändern, müssen Sie nicht auf das Dropdown-Menü klicken und es auf die richtige Größe ziehen. Halten Sie stattdessen einfach Alt und die rechte Maustaste gedrückt und ziehen Sie dann nach links und rechts, um den Pinsel zu verkleinern und zu vergrößern.

15. Für das Web speichern

Die Verwendung der Safe for Web- Funktion ist unerlässlich, da sie die Bildgröße so klein wie möglich hält. Dies ist sehr wichtig, um die Geschwindigkeit der Website zu verbessern.

In Photoshop können Sie dies über Datei > Exportieren > Für Web speichern tun. Eine schnellere Möglichkeit besteht jedoch darin, Strg+Alt+Umschalt+S zu verwenden . Gern geschehen!

16. Bilder als Ebenen öffnen

Manchmal ist es notwendig, eine große Anzahl von Bildern auf einmal in Photoshop zu importieren. Wenn Sie sie jedoch einfach auf Ihren Arbeitsbereich ziehen, werden Sie aufgefordert, sie manuell zu platzieren.

Eine praktischere Methode dazu ist Datei > Skripte > Dateien in den Stapel laden . Navigieren Sie zu den betreffenden Bildern, markieren Sie sie und klicken Sie zweimal auf OK . Jetzt wird jedes Bild automatisch in eine eigene Ebene importiert.

17. CSS direkt aus Photoshop kopieren

Einer der komfortabelsten Photoshop-Tricks für Webdesigner ist die Tatsache, dass das Programm CSS erstellt, das Sie exportieren können. Sie müssen nicht alles von Hand eingeben oder versuchen, es zu implementieren.

Um dies zu nutzen, klicken Sie einfach mit der rechten Maustaste auf eine Ebene und wählen Sie CSS kopieren . Verwenden Sie alternativ das Ebenenmenü , um dieselbe Option zu finden. Jetzt haben Sie alle notwendigen Stile, die Sie einfach in Ihr Stylesheet oder jedes andere von Ihnen verwendete Programm einfügen können.

18. Design für mehrere Geräte und Ausrichtungen gleichzeitig

Für das Web zu designen bedeutet heutzutage, für eine Vielzahl unterschiedlicher Geräte zu designen. In Zeiten, in denen mobile Geräte Desktop-Computer überall auf der Welt in den Schatten stellen, ist die Implementierung von mobilem Design ein Muss.

Quelle: ComScore

Glücklicherweise verfügt Photoshop über Zeichenflächen und intelligente Objekte, mit denen Sie Ihr Design ganz einfach auf verschiedene Formate skalieren können.

Ich könnte beides hier im Detail beschreiben, Phlearn hat jedoch ein ausgezeichnetes Tutorial dazu gemacht, das viel besser funktioniert, als ich es jemals tun könnte:

19. Verwenden Sie die automatische Verarbeitung für sich wiederholende Aufgaben

Eine weitere großartige Photoshop-Funktion ist die automatische Verarbeitung. Das bedeutet, dass Sie aufgezeichnete Aufgaben immer wieder wiederholen können, ohne sie manuell ausführen zu müssen. Dies ist sehr nützlich, wenn Sie beispielsweise viele Bilder für das Web speichern müssen.

So funktioniert das. Öffnen Sie zunächst Ihre Datei. Öffnen Sie dann Aktionen ( Alt + F9 ), suchen Sie Neue Aktion erstellen und klicken Sie darauf. Vergeben Sie einen Namen und weisen Sie ihm optional eine Tastenkombination und eine Farbe zu.

Um Ihre Aktionen aufzuzeichnen, drücken Sie Aufzeichnen . Führen Sie dann den Vorgang aus, den Sie wiederholen möchten. In meinem Fall öffne ich ein Bild aus einem Ordner und speichere es für das Web in einem anderen Ordner.

Wenn Sie fertig sind, beenden Sie die Aufnahme. Jetzt können Sie diese Aktion für alle anderen Bilder wiederverwenden und sparen so viel Zeit. Weitere Informationen darüber, was Sie in Photoshop automatisieren können, finden Sie in diesem Artikel.

20. Vorschau auf dem Gerät

Schließlich bietet Adobe neben Photoshop auch eine App, mit der Sie Ihre Arbeit auf mehreren iOS-Geräten in der Vorschau anzeigen können. Das Beste: Sie können Änderungen am Gerät beobachten, während Sie diese am Computer vornehmen.

Installieren Sie dazu die App und verwenden Sie die Gerätevorschau , um Photoshop über USB oder WLAN mit einem externen Gerät zu verbinden. Sie finden die Option unter Fenster > Gerätevorschau .

Was sind deine Lieblings-Photoshop-Tricks?

Photoshop ist eines der am häufigsten verwendeten Webdesign-Tools. Seine leistungsstarken Funktionen machen es perfekt für die Gestaltung hochwertiger Websites und Assets.

Mit großer Leistung geht jedoch auch große Komplexität einher und gerade für Anfänger kann es einige Zeit dauern, die Software zu beherrschen.

Um die Lernkurve zu verkürzen, haben wir oben eine Reihe nützlicher Photoshop-Tricks für Webdesigner bereitgestellt. Sie erleichtern vieles, vom allgemeinen Workflow bis hin zur automatischen Dateiverarbeitung.

Photoshop in- und auswendig zu kennen ist eine großartige Investition in Ihr Endergebnis. Wenn Sie in der Lage sind, Dinge schneller zu erledigen, können Sie mehr Arbeit übernehmen und somit mehr Umsatz erzielen. Und das kann nie schlecht sein.

Was sind einige Ihrer Lieblings-Photoshop-Tricks? Bitte lassen Sie es uns im Kommentarbereich unten wissen, damit wir uns alle gegenseitig helfen können.

Miniaturansicht des Artikels von Creative Stall / shutterstock.com