Photoshop für Webdesign: 20 Profi-Tipps

Seite 1 von 2: Seite 1

Für viele Webdesigner ist Adobe Kreative Wolke Suite - und insbesondere Photoshop - spielen eine wichtige Rolle bei der Erstellung der Website. Ob Sie erstellen Webseite Modelle Photoshop ist eine großartige Option, um einzelne Site-Elemente zu entwerfen.

Hier sind einige Tipps zum Webdesign, von denen Sie vielleicht nicht wussten, dass Adobe ehrwürdig ist Foto Editor war in der Lage - und könnte sich für Ihr nächstes Projekt als sehr nützlich erweisen.

01. Verwenden Sie Rastersysteme

Rastersysteme für Photoshop



Es gibt eine Reihe von Tools, mit denen Sie Raster in Photoshop verwenden können

Grid-Systeme können im Webdesign viele Kopfschmerzen ersparen. Versuchen Sie es mit Ressourcen wie Cameron McEfees GuideGuide Photoshop-Erweiterung, um benutzerdefinierte Raster einfach und genau zu gestalten.

02. Hol alles raus

Eine der besten Methoden für erfolgreiches Webdesign (und Zeitmanagement) besteht darin, alle Ihre Elemente auf Ihrer Photoshop-Leinwand zu platzieren, bevor Sie sich mit dem Design beschmutzen.

Webdesigner springen oft direkt in einen bestimmten Bereich, ohne den Rest der Seite und das Gewicht des Inhalts zu berücksichtigen. Wenn Sie das grobe Framework frühzeitig einsetzen, können Sie intelligentere Entscheidungen treffen und später größere Änderungen vermeiden.

03. Erkunden Sie benutzerdefinierte Dokumentvoreinstellungen

Photoshop-Webvoreinstellungen

Photoshop wird mit einer Reihe von webbezogenen Voreinstellungen geliefert. Schau sie dir an!

Schlagen cmd + N. um das Fenster Neues Dokument zu öffnen. Das Preset-Menü enthält grundlegende Web- und Mobile-Presets, es fehlen jedoch viele gängige Dimensionen für eine Vielzahl von Rastersystemen, Bannern, iOS- und Android-Geräten. Nehmen Sie sich einen Moment Zeit, um die fehlenden Bereiche zu füllen.

was zu einem Grafikdesign-Interview zu tragen

04. Passen Sie den Standardtyp an

Schließen Sie alle geöffneten Dokumente. Öffnen Sie die Zeichenpalette, um Ihre bevorzugte Schriftfamilie, Gewichtung, Abstand und Farbe auszuwählen. Keine Standard-Myriade mehr!

05. Machen Sie Ihre Vektoren knackig

Halten Sie Ihre Vektorobjekte scharf. Mit dem Rechteck-Werkzeug ( U. ) ausgewählt, öffnen Sie das Menü Geometrieoptionen in der Optionsleiste. Aktivieren Sie die Option An Pixeln ausrichten.

06. Erstellen Sie gepunktete Linien

Gepunktete Linien in Photoshop

Erstellen Sie gepunktete Linien in Photoshop. Es ist eines dieser Dinge, die Sie immer tun müssen.

Wählen Sie das Pinselwerkzeug ( B. ), öffnen Sie dann die Palette Pinselvoreinstellungen, gefolgt vom Dropdown-Menü in der oberen rechten Ecke. Wählen Sie Quadratische Pinsel und klicken Sie auf Anhängen.

Wählen Sie nun den Pinsel Hard Square 1 Pixel. Wechseln Sie zur Pinsel-Palette und drücken Sie auf Pinselspitzenform, um den Abstand auf 300% einzustellen. Halten Sie auf Ihrer Leinwand Verschiebung Ziehen Sie den Pinsel horizontal oder vertikal, um eine gestochen scharfe Linie zu erhalten.

07. Text einfach umbrechen

Mithilfe einer schnellen Problemumgehung kann Photoshop Textumbruchfunktionen anwenden, die denen von InDesign ähneln. Wählen Sie das Rechteck-Werkzeug ( U. ). Stellen Sie in der Optionsleiste die Füllung auf Pfade ein, stellen Sie die Form auf das Rechteck-Werkzeug ein und wählen Sie 'Zum Pfadbereich hinzufügen' (oder drücken Sie + ).

Zeichnen Sie auf Ihrer Leinwand ein großes Rechteck über den Inhaltsbereich. Ändern Sie in der Optionsleiste 'Zum Pfadbereich hinzufügen' in 'Vom Pfadbereich subtrahieren' (oder drücken Sie - - ). Zeichnen Sie auf Ihrer Leinwand mit dem Umriss des ursprünglichen Rechtecks ​​ein sich überschneidendes Rechteck, in das der Text eingeschlossen wird.

Wählen Sie das Textwerkzeug ( T. ) und klicken Sie in das große Rechteck, um die Form in einen Typarbeitspfad zu konvertieren, der mit Typ gefüllt werden soll. Sie können die Bemaßungen für den Arbeitspfad mit dem Rechteck-Werkzeug weiter verfeinern ( U. ) und das Direktauswahl-Werkzeug ( ZU ).

08. Erstellen Sie schnelle Farbfüllungen

Schnelle Photoshop-Füllung

Bestimmte Tastenbefehle sind immer wieder nützlich. Schnelle Befüllung ist eine davon

Schlagen Alt + Löschen um Text, Formen und Ebenen mit der ausgewählten Vordergrundfarbe zu füllen. Drücken Sie cmd + Löschen um einen Bereich mit der ausgewählten Hintergrundfarbe zu füllen. Schlagen D. Um zum Standard-Schwarzweiß zurückzukehren, drücken Sie X. um die Vordergrund- und Hintergrundfarben zu tauschen.

09. Bleib organisiert

Benutzen cmd + G. um Ebenen zu gruppieren und Ihnen zu helfen, organisiert und konzentriert zu bleiben. Wenn Sie Ihre Inhaltsbereiche und Komponenten - wie Navigation, vorgestellte Inhaltsbereiche, unterstützende Komponenten und Fußzeilen - separat gruppieren, ersparen Sie sich Kopfschmerzen während des gesamten Entwurfs- und Entwicklungsprozesses eines Projekts.

Wo ist Hack mein Leben gefilmt

10. Werde schlau

Verwenden von Smart-Objekten (gehen Sie zu 'Filter> Für Smart-Filter konvertieren' und Strg oder Rechtsklick 'Ebene> In intelligentes Objekt konvertieren') kann Ihren Workflow während des gesamten Designprozesses mit Bedacht verbessern. Beim Konvertieren größerer Fotos und Vektorobjekte in Smart Objects bleibt die ursprüngliche Bildqualität nach dem Skalieren, Drehen und Neigen erhalten.

Nächste Seite: 10 weitere Webdesign-Tipps für Photoshop ...

  • 1
  • zwei

Aktuelle Seite: Seite 1

Nächste Seite Seite 2