7 Photoshop Tipps zum Entwerfen von sauberen und modernen Websites
Sauberes, elegantes und schönes Webdesign ist oft eine Frage der persönlichen Perspektive. Ich schaue mir jede Woche Hunderte von Websites an, und einige von ihnen fallen mir auf, aber nicht alle von ihnen sind notwendigerweise effektiv.
Zu oft bringen Designer ein Konzept zu weit nach unten und erzeugen ein endgültiges Design, das nichts anderes als Text und Raster ist. Während diese minimalen Designs ihre ästhetische Anziehungskraft haben, insbesondere wenn sie mit einer ausgezeichneten Typografie gepaart sind, riskieren sie, dass sie kurz erscheinen.
Abgesehen von persönlichen Meinungen, gibt es bestimmte Merkmale eines Designs, die es erlauben, stolz als sauber oder modern gekennzeichnet zu werden und seine Benutzerfreundlichkeit und Sympathie auf einer universellen Ebene zu verbessern. Einfachheit ist kein Designtrend, sondern eine Eigenschaft guten Designs.
Photoshop bietet uns ein vielseitiges Set an Werkzeugen, um Tiefe und Interesse zu erzeugen, und lädt uns ein, subtile Details zu integrieren, wo wir einen leeren Raum hinterlassen würden. Sie benötigen nur eine Handvoll dieser Werkzeuge, um die Qualitäten modernen Designs in ein Layout einfließen zu lassen. Indem Sie sie beherrschen, können Sie saubere Designs erstellen, die die Funktionalität klar und effektiv ausdrücken.
1. Platz
White Space ermöglicht die visuelle Trennung von Designelementen ohne den Einsatz von Boxen, Linien oder zusätzlichen Grafiken und ist möglicherweise der wichtigste Aspekt des modernen Designs. Es ist wichtig für die Präsentation und Lesbarkeit des Inhalts. Bei korrekter Verwendung verleiht Leerraum Ihrem Layout ein sauberes und elegantes Gefühl.
Hilfslinien und Raster sind in Photoshop verfügbar, damit Sie Elemente präzise positionieren können. Das Raster überlagert Ihr gesamtes Dokument, während die Hilfslinien manuell eingestellt werden können. Verwenden Sie Richtlinien frühzeitig, um unsichtbare Ränder, Ränder und Abstände festzulegen, die zum Definieren Ihres Leerraums verwendet werden.
Erstellen Sie eine Hilfslinie, indem Sie Strg + R (Win) oder Cmd + R (Mac) drücken, um das Lineal zu aktivieren. Klicken Sie dann auf das obere oder linke Lineal, um eine Hilfslinie an die gewünschte Position zu ziehen. Im Folgenden finden Sie einige zusätzliche Verknüpfungen, mit denen Sie während der Arbeit Leitfäden verwalten können:
- So verschieben Sie eine Richtlinie: Strg (Win) oder Cmd (Mac) und klicken Sie auf den Leitfaden
- Guides anzeigen / ausblenden: Hit Strg +; (Win) oder Cmd +; (Mac)
- Raster anzeigen / ausblenden: Drücken Sie Strg + '(Win) oder Cmd +' (Mac)
Aktivieren Sie Ihre Smart Guides unter Ansicht> Anzeigen> Smart Guides . Intelligente Hilfslinien werden automatisch beim Zeichnen einer Form, beim Ausrichten von Text oder beim Erstellen einer Auswahl oder Folie angezeigt. Dadurch sparen Sie sich die Arbeit, Richtlinien für diese Elemente im Voraus zu erstellen.
Das Ausrichten von Objekten mit Hilfe von Hilfslinien und Gittern vereinfacht das Design und verleiht dem Gesamtergebnis ein glänzenderes Aussehen.
2. Tiefe
Tiefe, die mit Licht und Schatten erzeugt wird, lässt Ihre Elemente knackig und real erscheinen. Schatteneffekte können auf jedes Objekt, jede Auswahl oder jede Textebene angewendet werden, aber der Trick besteht darin, eine Farbe zu wählen, die dem Hintergrund entspricht und auf das Standard-Schwarz verzichtet.
Nicht alle Schatten müssen dunkel sein. Kombinieren Sie den Effekt "Innerer Schatten" mit einem weißen oder hellen Schlagschatten, um ein versunkenes oder "Buchdruck" -Feeling mit Text- oder Formularfeldern zu erzeugen.
3. Detail
Sowohl das Gradienten-Tool als auch die Gradienten-Layer-Effekte spielen eine große Rolle für sauberes und modernes Design. Farbverläufe sind in jedem Aspekt des modernen Stylings vorhanden, von Schatten und Lichtern bis zu Hintergründen und Knöpfen.
Um auf das Verlaufswerkzeug zuzugreifen, drücken Sie Umschalt + G. Um einen Verlauf zu erstellen, klicken Sie auf die Leinwand, ziehen Sie sie und lassen Sie sie los. Dieses Werkzeug wird am besten für große Bereiche wie Hintergründe, Lichter oder radiale Schatten verwendet. Wenn Sie mit einzelnen Elementen wie Abschnitten, Schaltflächen oder Symbolen arbeiten, ist der Ebeneneffekt "Ebenenüberlagerung" ein effizienteres Mittel zum Erstellen von Oberflächenstilen oder Texturen. Sie können auf dieses Werkzeug zugreifen, indem Sie auf die Elementebene doppelklicken und das Kontrollkästchen "Verlaufsüberlagerung" aktivieren.
Verwenden Sie diesen Effekt, um Ihren Knöpfen und Navigationsleisten eine subtile Dimension zu geben oder den Stil und die Struktur von Papier oder Metallen zu imitieren.
4. Definition
Indem Sie Ränder und Ränder überdefinieren, stellen Sie sicher, dass Ihre Elemente einen korrekten Kontrast haben.
Der Strich-Ebeneneffekt wird Elemente wie Text oder Schaltflächen umranden, wo Sie auf allen Seiten eine gleich gewichtete Kontur benötigen. Wenn Sie diesen Effekt verwenden, werden die Schatten "Inner" und "Schlag" frei, um Ihre Optionen zu erweitern.
Es ist verlockend, nach dem Zeichenstift-Werkzeug zu suchen, um gerade Linien und horizontale Regeln zu zeichnen. Wenn Sie jedoch Verläufe oder Schatten auf die Linie anwenden möchten, ist es einfacher, das Einreihige-Auswahlwerkzeug zu verwenden, das diskret hinter dem Rechteck-Auswahlwerkzeug versteckt ist . Verwenden Sie das Werkzeug "Einzelne Zeile" auf einer neuen Ebene und einen weißen oder hellen Schlagschatten, um Hervorhebungslinien entlang von Abschnittsrändern oder Trennlinien zu erstellen, bei denen Sie keinen Effekt auf das Element selbst anwenden können.
5. Interesse
Sauber und modern muss nicht langweilig, weiß oder minimal sein. Clevere Verwendung von Textur und Muster wird Ihr Design hervorheben, während Stil und Marke kommunizieren. Verwenden Sie subtile Techniken wie das Hinzufügen von Rauschen (Filter> Rauschen hinzufügen) oder den Effekt "Strukturüberlagerung" auf Hintergrundbereiche oder Oberflächenelemente, um sie voneinander zu unterscheiden. Je realer und klarer ein Element erscheint, desto verlockender ist es für den Betrachter.
6. Perspektive
Die Perspektive ist die am wenigsten genutzte Technik im modernen Webdesign, einfach deshalb, weil laufende Trends konsequent auf Symmetrie und Raster ausgerichtet sind. Durch die Anwendung von Perspektiven auf Bilder und Elemente in Ihrem Design können Sie Tiefe, Dimension, Modernität und Interesse für Ihr Design in einem einfachen Schritt einführen.
Sie können einer beliebigen Form oder einem Bild eine Perspektive geben, indem Sie die Option "Frei transformieren" im Kontextmenü auswählen und auf die Schaltfläche "Verkrümmen" in der Werkzeugleiste klicken.
Die Illusion der Perspektive kann auch erzeugt werden, indem asymmetrische Formen oder Rahmen erzeugt werden und Gradienten und Schatten in geeigneter Weise verwendet werden, um die Objekte auseinander zu setzen.
7. Lesbarkeit
Starker Typ ist in der Design-Community sehr beliebt und eine noch stärkere Komponente für sauberes Design. Es kann Bilder und Grafiken ersetzen, die ansonsten ein Design überkomplizieren und das gesamte Wesen der oben genannten Techniken auf einfache und direkte Weise vermitteln.
Um Texturen zu Text hinzuzufügen, wandeln Sie Ihre Textebene zunächst in ein Smart-Objekt um, indem Sie mit der rechten Maustaste auf die Ebene klicken und "In Smart-Objekt konvertieren" auswählen. Standardmäßig ist der Effekt auf Ebeneneffekte beschränkt, es sei denn, Ihr Text wird gerastert. auch beim Design für den Bildschirm. Wenn Sie in Smart Objects konvertieren, können Sie Filter und andere Techniken auf den Text anwenden und gleichzeitig Ihre Bearbeitungsfunktionen beibehalten, falls Sie den Text später ändern müssen.
Denken Sie daran, dass Sie beim Einrichten von Textelementen Tracking- und Kerning-Optionen zur Verfügung haben. Selbst wenn Ihr Text in CSS reproduziert werden soll, sollten Sie frühzeitig mit dem Zeilen- und Buchstabenabstand experimentieren, um besser zu visualisieren, wie Ihr Inhalt in dem von Ihnen vorgegebenen Raum erscheint. Denken Sie auch daran, den Text "Crisp" oder "Sharp" zu verwenden, um die Definition und Klarheit zu erhalten.
Wie du deine Inhalte in sauberem Design präsentierst, ist wichtiger als jeder andere Stil, einfach weil es visuell weniger dazu kommt, den Betrachter abzulenken. Wenn Sie die obigen Tipps verwenden, um Text und Objekte angemessen zu platzieren, um Definition und Interesse hinzuzufügen und den Inhalt von der Oberfläche zu unterscheiden, wird Ihr Design eine optimale Effektivität erzielen.
Was denkst du über diese Tipps und hast du andere, die du regelmäßig benutzt? Bitte teilen Sie unten ...