20 Photoshop-Tipps für das Webdesign
Der Satz 'Ich wünschte, ich wäre besser in Photoshop' wird von jungen und alten Webdesignern ausgesprochen. Mit dieser Aussage stimmt jedoch etwas nicht. Dies bedeutet, dass unsere Kenntnisse in einem Softwareprogramm uns zu besseren Designern machen würden.
Die Realität ist, dass es für Webdesign-Heldentaten ausreicht, nur die Grundlagen von Photoshop zu kennen. Was wäre, wenn wir einen Schritt zurücktreten würden, um Rauschen hinzuzufügen und Text einzufügen, um unsere Effizienz mit Photoshop zu bewerten?
Zu einfach für dich, Level 42 PSD Sage? Nicht deine Tasse Tee, Fireworks Fanboy? Ich bin anderer Ansicht.
01. Skizze zuerst
Ironischerweise besteht der wichtigste Photoshop-Tipp nicht einmal darin, Ihren Computer einzuschalten. Ich kann Ihnen garantieren, dass Sie weniger Zeit mit dem Layout verbringen, indem Sie einige Skizzen anfertigen. Kaufen Sie ein solides Skizzenbuch oder drucken Sie Ihre eigenen Vorlagen aus ( raincreativelab.com/paperbrowser ) und gehe in die Stadt und mache ein paar grobe Layouts. Übersetzen Sie diese Skizzen dann in Photoshop.
02. Verwenden Sie ein Rastersystem
Ausrichtung und Größenverhältnis sind zwei Attribute, die Ihre Entwürfe berücksichtigen sollten. Richten Sie sich von Anfang an mit einem Rastersystem ein. Die meisten Rastersysteme verfügen über PSD-Vorlagen mit Hilfslinien für Säulen und Dachrinnen. Hier ist ein Haufen: 960px , 978px , 1140px .
03. Schalten Sie ein
Es gibt wirklich nichts Schlimmeres, als um ein Pixel versetzt zu sein. Aktivieren Sie das Fangen, indem Sie zu Ansicht> Fangen und dann zu Ansicht> Fangen an> Hilfslinien wechseln. Wenn Sie ein Rastersystem implementiert haben, ist das Einrasten in Hilfslinien genial. Mit weniger Schielen auf dem Bildschirm brauchen Sie diese trendigen Designerbrillen nicht.
04. Organisiere deine PSD
Ist es schwierig, Ihre Ebenen zu benennen und in Ordnern abzulegen? Sicher. Die meisten Designer stimmen der Logik zu, dass Sie mehr Zeit damit verbringen werden, aber es gibt Gründe, die nicht zutreffen. Wenn Sie alleine arbeiten, sparen Sie Zeit bei der späteren Suche nach Dingen. Wenn Sie mit anderen zusammenarbeiten, tun Sie ihnen einen Gefallen, wenn sie suchen. Wenn Sie im Laufe der Zeit Ebenen benennen, ist es nicht schwer, damit Schritt zu halten, anstatt es danach zu tun.
05. Master-Verknüpfungen
Der Schlüssel zum Ruhm von Photoshop ist die Effizienz. Es geht nicht nur darum zu wissen, wie man etwas macht, sondern wie man etwas schnell macht, damit Sie wertvolle Zeit für die Ausführung einer Funktion verwenden. Einige spezifische Verknüpfungen zu wissen? Beginnen Sie mit Save for Web: Cmd + Opt + Shift + S. , Bildgröße: Cmd + Opt + I. , Leinwandgröße: Cmd + Opt + C. . Levels nicht vergessen: Cmd + L. und Farbton / Sättigung: Cmd + U. .
06. Sei subtil - alles in Maßen
Als Designer neigen wir dazu, die Fähigkeit unseres Publikums zu diskreditieren, den Effekt wahrzunehmen, den wir erreichen wollen. Unsere Antwort ist also, zu viel Rauschen hinzuzufügen, scharfe Verläufe zu erzeugen und zu viel Kontrast zu verwenden. Die perfekte Mischung ist, wenn Sie Effekte mit etwas Anmut und vor allem Selbstkontrolle verwenden.
07. Verwenden Sie Layer-Comps und Smart-Objekte
Leider hat Photoshop kein großartiges System für Kompositionen wie Navigationszustände. Sie können jedoch Layer-Comps (Fenster> Layer-Comps) nutzen, um Versionen von Layouts recht gut zu erstellen. Intelligente Objekte (Ebene> Intelligentes Objekt> In intelligentes Objekt konvertieren) kompilieren mehrere Elemente zu einer Datei, die außerhalb Ihrer PSD bearbeitet werden kann.
08. Halten Sie Vektor-Smart-Objekte für integrale Formen
Es gibt nichts Schlimmeres, als das Logo zu vergrößern und zu erkennen, dass dies nicht möglich ist, da es sich um eine gerasterte Grafik in Ihrer PSD handelt, oder zu versuchen, die Größe einer Schaltfläche zu ändern, um festzustellen, dass es sich nicht mehr um eine Form handelt. Die Lösung besteht darin, diese Formen im Vektorformat beizubehalten. Sie können dies tun, indem Sie sie als intelligente Vektorobjekte importieren oder in intelligente Objekte konvertieren, bevor Sie sie rastern.
09. Verwenden Sie Masken intelligent
Das Globalisieren von Masken sorgt für eine süße Photoshop-Effizienz. Wenn Ihr Design beispielsweise fünf Schiebereglerbilder enthält, gruppieren Sie diese und legen Sie anstelle jeder einzelnen Ebene eine Maske auf den Ordner. Es ist eine weitaus bessere Lösung als das Durchsuchen von 20 Masken, ohne zu wissen, welche was tun.
10. Verfeinern Sie die Masken für eine einfache Silhouettierung der Haare
Wer hasst es nicht, Haare silhouettieren zu müssen? Hier ist ein Trick, der bei verschiedenen Bildgrößen gut funktioniert, egal wie verrückt die Frisur ist. Erstellen Sie eine grobe Maske der Person und gehen Sie dann zu Auswählen> Maske verfeinern (Kante verfeinern in Versionen vor CS5). Spielen Sie mit dem Radius und beobachten Sie, wie sich die Magie entfaltet.
11. Schlagschatten genau wahrnehmen
Huckepack auf den letzten Tipp, das Zeichen eines Amateurdesigners ist, wenn Sie Schlagschatten viel zu dunkel sehen. Dies bedeutet, dass das Objekt im Rampenlicht steht. Wahrscheinlich nicht der Fall. Verringern Sie unbedingt die Deckkraft und verwenden Sie noch besser eine Farbe, die einen dunklen Farbton des Hintergrunds anstelle von Schwarz aufweist.
12. Bringen Sie sich das Stiftwerkzeug bei
Es lohnt sich, sich mit dem Stiftwerkzeug vertraut zu machen. Dies ist eines der Dinge, die wir eher vermeiden. Wenn Sie jedoch einige gestochen scharfe Masken abziehen oder Ihren Designs Illustrationen hinzufügen möchten, ist das Stiftwerkzeug die Waffe Ihrer Wahl. Verbessern Sie Ihre Fähigkeiten mit diesem Tutorial.
13. Schärfen Sie Fotos mit Hochpass
Bereit für Photoshop Magic? Sie haben also ein Foto mit niedriger Auflösung von Ihrem Kunden erhalten, und es ist einfach zu verschwommen, um es zu verwenden. Dupliziere die Ebene und gehe dann zu Filter> Andere> Hochpass. Wählen Sie einen niedrigen Wert (ca. 2,0) und stellen Sie den Mischmodus dieser Ebene auf Überlagern. Wenn es zu scharf ist, verringern Sie die Deckkraft. Ergebnisse können variieren.
14. Seien Sie konsequent
Fünf verschiedene Blues, und keiner von ihnen ist der aus dem Markenführer? Überprüfen Sie unbedingt die verwendeten Farben, insbesondere beim Exportieren von Bildern. Ein weiteres nützliches Werkzeug für die Farbgenauigkeit ist 0to255.com , die Hex-Werte liefert, die von einer bestimmten Farbe arharmonisch heller und dunkler sind.
15. Verwenden Sie nicht die Standardeinstellungen
Eines der am schwersten abzuwehrenden Dinge ist die Autonomie von Photoshop. Wenn Sie das Effektfenster wie eine Checkliste der gewünschten Stile behandeln, können Sie deren Einstellungen höchstwahrscheinlich nicht auf einen vernünftigen Zustand bringen. Die Standardeinstellungen sind im Allgemeinen hart, um ihr Erscheinungsbild anzuzeigen. Erweichen Sie die Mengen und ändern Sie die Winkel.
16. Es steckt im Detail
Ein wesentlicher Bestandteil für die Perfektionierung Ihres Handwerks in Photoshop ist es, Ihr Design „pixelgenau“ zu machen. Gehen Sie zurück durch Ihre PSD und suchen Sie nach verschwommenen Kanten auf abgerundeten Rechtecken oder inkonsistenten Strichstärken. Es lohnt sich, sich in Photoshop die Zeit zu nehmen, um Ihr Layout zu perfektionieren (und nicht in HTML / CSS).
17. Schreiben Sie die Geschichte neu
Ist es nicht so schlimm, wenn Sie das Verlaufsfenster öffnen und 21 Schritte zurück benötigen, nur um zu sehen, dass es bei den letzten 20 stoppt? Verhindern Sie, dass dies erneut auftritt, indem Sie zu Einstellungen> Leistung gehen und den Wert für Verlaufszustände erhöhen. Ihre Webdesign-Superhelden müssen das Verlaufsfenster jedoch nicht verwenden, oder?
18. Personalisieren Sie Ihren Arbeitsbereich
Photoshop ist nicht der Boss von dir, Pixelcrafter. Wenn Sie es vorziehen, dass Ihre Werkzeuge rechts angezeigt werden und nur das Ebenenbedienfeld geöffnet ist, tun Sie dies. Sie können sogar die Farbe auf der Leinwand ändern, indem Sie mit der rechten Maustaste darauf klicken. Speichern Sie Ihren Arbeitsbereich über das Menü oben rechts in der Anwendung.
19. Organisieren Sie Ihre Dateien
Ähnlich wie beim Benennen Ihrer Ebenen und Ordner verhindert das angemessene Benennen Ihrer Dateien viel Streit. Ist es nicht schwer zu unterscheiden, welche PSD die 'neueste' ist, wenn sie Deskriptoren wie 'NEWEST_round4.psd' oder 'FINAL_USE_THIS_ONE.psd' haben? Behalte eine PSD und sei fertig damit. Archivieren Sie den Rest, wenn Sie ihn wirklich brauchen.
20. Seien Sie originell und bekämpfen Sie Trends
Die gute Nachricht ist, dass wir Webdesigner Photoshop verwendet haben, um einige schöne Techniken zu erstellen. Das sind auch die schlechten Nachrichten, weil wir dazu neigen, die neue Schärfe des anderen zu kopieren. Photoshop ist ein wunderbares Werkzeug, aber mit Vorsicht zu verwenden. Nur weil Sie einen Farbverlauf auf etwas setzen können, heißt das nicht, dass Sie es tun sollten. Experimentieren Sie mit den Einstellungen und starten Sie Ihre eigenen Trends.
Wörter :: Dan Rose |
Dan Rose ist der Photoshop-Etikette Mann und ein Interface-Designer bei WSOL . Dieser Artikel erschien ursprünglich in Netzmagazin .
