Entwerfen Sie eine saubere E-Commerce-Website-Oberfläche in Photoshop

() translation by (you can also view the original English article)

Erinnern Sie sich an das Fashion Store-Werbegeschenk? Heute zeige ich Ihnen, wie Sie diese saubere E-Commerce-Website-Oberfläche in Adobe Photoshop erstellen. Dieses Tutorial ist nicht nur mit vielen Photoshop-Techniken gefüllt, sondern auch mit Designkonzepten, die über den Teil der Anleitung hinausgehen, den Sie sicher nicht verpassen möchten. Also lasst uns anfangen!

Modegeschäft, The Freebie

Zuallererst möchte ich Sunil danken, der diese Schnittstelle tatsächlich entworfen hat. Ich habe einige Änderungen am Layout vorgenommen, z. B. die Neuordnung nach einem Raster.

Skizzieren Sie Ihre Idee

Halten Sie Ihre Skizzen locker und grob.

Bevor wir direkt in Adobe Photoshop einsteigen, sollten wir uns zunächst einen Moment Zeit nehmen, um darüber nachzudenken, wie wir unser Design strukturieren. Nehmen wir Stift und Papier und fangen wir an, unser Drahtmodell zu skizzieren.

Wenn wir ein Wireframe erstellen, skizzieren wir unsere Seite, um verschiedene visuelle Platzierungen für jedes Element auf unserer Seite auszuprobieren. Wir denken also darüber nach, wie Elemente am besten funktionieren, auf der Seite zusammenpassen und wie sie sich am besten zueinander verhalten. Wir überlegen auch, welche Elemente hervorgehoben werden sollen und welche nicht.

An dieser Stelle sollten wir uns keine Gedanken mehr darüber machen, wie bestimmte Elemente angezeigt werden, und uns überlegen, wie das gesamte Website-Design aussehen kann.

Da ich dieses Layout nicht von Grund auf neu erstellt habe, habe ich leider keinen Screenshot des skizzierten Drahtmodells, um es Ihnen zu zeigen. Aber eines sage ich: Halten Sie Ihre Skizzen locker und grob. Sie müssen nicht ausgefallen oder künstlerisch sein.

Wenn Sie neu in diesem Bereich sind, ist hier Ihre erste Aufgabe: Versuchen Sie, dieses endgültige Design oder eine andere vorhandene Website zu skizzieren, die Ihnen gefällt. Dies wird Ihnen helfen, die Beziehung der Elemente auf einer Webseite zu erkennen.

Weiterlesen:

Erstellen eines Graustufen-Drahtmodells

Jetzt haben wir ein paar Ideen skizziert. Es ist an der Zeit, diese Skizzen in ein solideres Drahtmodell zu verwandeln. Wir beginnen mit der Erstellung eines Graustufen-Drahtmodells, in dem alle Layout- und Typbehandlungen vorhanden sind, jedoch keine Farben, Texturen, Bilder usw.

So sollte unser endgültiges Graustufen-Drahtmodell aussehen:

Layout: Komposition

Bevor wir mit der Arbeit an unserem Wireframe in Adobe Photoshop beginnen, müssen wir einige Entscheidungen treffen.

Zunächst wird unser Layout ein festes Layout sein, das heißt die Abmessungen unseres Layouts werden in einer bestimmten Anzahl von Pixeln angegeben. Unser Layout wird 940px breit sein. Wie Sie im Bild unten sehen können, bleibt seine Größe gleich, egal ob es in einem kleineren oder größeren Fenster angezeigt wird.

Layout: Das Gitter

Die Verwendung eines Rasters macht es so viel einfacher, unsere Elemente auszurichten und ihre Größe zu bestimmen. In diesem Design verwenden wir dieses Grundlinienraster, das von den großartigen Jungs von Teehan + Lax erstellt wurde. Es ist ein 6px-Grundlinienraster, das mit dem 960-Rastersystem gekoppelt ist.

Weiterführende Literatur:

Im weiteren Verlauf werden wir besprechen, wie wir unseren Text und unsere Elemente ausrichten, aber vorerst sollten Sie diesen Artikel lesen, um eine Vorstellung davon zu bekommen, wie Sie dieses Raster verwenden.

Schneller entwerfen mit einem Basislinienraster

Layout: Weißraum

Weißer oder negativer Raum ist der Raum zwischen den Elementen in unserer Benutzeroberfläche. Der Raum zwischen den Hauptelementen wird als Makro-Weißraum bezeichnet. Micro White Space ist der Leerraum zwischen Elementen wie Listenelementen, dem Abstand zwischen einer Beschriftung und einem Bild oder dem Abstand zwischen Wörtern und Buchstaben.

White Space hilft bei der Positionierung von Marken, und Designer verwenden White Space normalerweise in ihren Designs, um ihnen ein Gefühl von Raffinesse und Luxus zu geben. Es ist also etwas, um das wir uns kümmern sollten, während wir entwerfen.

Typografie: Schriften

Wir sollten unsere Schriftarten/Fonts immer sorgfältig auswählen. Die Auswahl der richtigen Schriftart ist gar nicht so einfach, und Sie müssen viele Aspekte berücksichtigen, von der Auswahl einer Schrift mit Persönlichkeit, die die richtige Botschaft vermittelt, bis hin zum Aussehen im Browser. Ich werde nicht ins Detail gehen, sondern möchte einige Beiträge erwähnen, die ich sehr interessant fand:

Weiterlesen:

In unserer Benutzeroberfläche verwenden wir die folgenden drei Schriftarten: Helvetica, eine saubere und moderne Schriftart, die alles sagt. Georgia, eine Schrift, die an Könige erinnert und einen ernsten Ton hat. Bebas, eine Schrift, die Autorität hat und wie eine kühne Aussage ist, die immer einen Punkt macht.

Helvetica Neue: Fließtext (Standardschrift).
Bebas: Überschriften (hier herunterladen).
Georgia: Andere Kopfzeilenelemente (Standardschriftart).

Typografie: Hierarchie

"Typografische Hierarchie" beschreibt einfach, wie unterschiedliche Schriftarten, Schriftstärken und Schriftgrößen ein Dokument strukturieren.

Was die Schriftgrößen angeht, so ist das von uns gewählte Grundlinienraster so konzipiert, dass es mit Standardschriftgrößen kompatibel ist, deshalb bleiben wir bei ihnen. Diese Größen erweisen sich als äußerst nützlich, wenn sie mit einer aus drei abgeleiteten Führung kombiniert werden. Hier sind die wichtigsten Pixelgrößen für unsere Benutzeroberfläche:

24px: H1-Überschriften.
18px: H2-Überschriften.
14px: H3 und Navigationsüberschriften.
12px: Fließtext – mit einem Leitwert von 18px.

In den Seitenleisten-Bannern und im Bereich mit empfohlenen Inhalten werden wir jedoch am Ende einige andere Größen verwenden (schließlich werden diese Anzeigen mit der Zeit ersetzt), aber es handelt sich um Standardschriftgrößen.

Was die Gewichte angeht, gehe ich von römischen Kleinbuchstaben zu Fett Kleinbuchstaben. Nichts wirklich kompliziertes.

Typografie: Leading, Kerning & Tracking

Wie ich bereits sagte, verwenden wir führende (Zeilenabstand) Werte, die aus dem Raster gesteuert werden, und zwar: 18px und 21px.

Unser Kerning wird Metriken für Fließtext und Optisch für Überschriften sein (siehe weiterführende Literatur). Und schließlich verwenden wir die Standard-Tracking-Werte (0) für den gesamten Text.

Weiterlesen:

Metriken versus optisches Kerning

Typografie: Anti-Aliasing

Hier ist ein wirklich toller Artikel. Diese musst du lesen! Ich werde kein einziges Wort sagen, außer dass wir für Fließtext (kleine Punktgrößen) Sharp verwenden und für Überschriften (größere Punktgrößen) Crisp verwenden.

Die Schwächen des typografischen Anti-Aliasing

Schritt 1: Einrichten des Dokuments

Nachdem wir nun einige Entscheidungen getroffen haben, ist es an der Zeit, Adobe Photoshop zu öffnen und tatsächlich mit der Erstellung unseres Wireframes zu beginnen! Öffnen Sie also das zuvor heruntergeladene Grid-Dokument "grid2.psd". Als erstes wählen wir alle vorhandenen Ebenen im Dokument aus – mit Ausnahme des Ordners „Marks“ – und entfernen sie oder gruppieren sie in einem Ordner und blenden sie vorerst aus. Bevor wir fortfahren, wählen wir den Ordner "Marks" aus und klicken im Ebenenbedienfeld auf die Schaltfläche "Alle sperren".

Jetzt müssen wir die Höhe unseres Dokuments ändern, da unser endgültiges Design höher ist als das vorhandene Dokument. Dazu gehen wir zu Bild > Leinwandgröße, ändern die Höhe auf 1540px und stellen sicher, dass der Anker auf Top Center gesetzt ist.

Klicken Sie dann auf Ansicht > Extras (um unsere Hilfslinien anzuzeigen), Lineale (um die Lineale anzuzeigen) und Ausrichten (damit die Objekte, die wir erstellen, an den Hilfslinien ausgerichtet werden können).

Schritt 2: Erstellen des Hintergrunds

Wir beginnen damit, unseren Hintergrund zu erstellen. Erstellen Sie eine neue Ebene, geben Sie ihr einen Namen ("bg") und greifen Sie dann zum rechteckigen Auswahlwerkzeug (M). Erstellen Sie eine Auswahl über die gesamte Leinwand, und um sie zu füllen, klicken Sie auf Umschalt+Rücktaste, Verwenden: Farbe... und füllen Sie die Auswahl mit diesem Farbwert: #f5f5f3. Beachten Sie, dass die Farbwerte, die wir im Graustufen-Drahtmodell verwenden, nicht die endgültigen Werte sind, aber wir verwenden sie, um unsere Seitenelemente zu unterscheiden.

Schritt 3: Erstellen der oberen Leiste

Jetzt erstellen wir die obere Leiste. Ergreifen Sie erneut das Rechteckige Auswahlwerkzeug (M), erstellen Sie eine Auswahl von 1260x45px und füllen Sie sie dann mit diesem Farbwert: #2d2d2d.

Wählen Sie das Horizontal Type Tool (T), geben Sie Ihre Navigationselemente ein und wenden Sie dann die folgenden Zeicheneinstellungen darauf an:

Schriftart: Helvetica Neue LT Std.
Gewicht: 55 Römer.
Größe: 12px.
Kerning: Metriken.
Farbe: #767676.
Anti-Aliasing: Scharf.

Um sicherzustellen, dass unser Text gut am Hintergrund ausgerichtet ist, wählen Sie beide Ebenen (die Textebene und die Hintergrundebene) aus und klicken Sie in der Steuerleiste auf Vertikale Zentren ausrichten.

Schritt 4: Erstellen des Anmeldeformulars

Geben Sie das Wort "Anmelden" mit dem horizontalen Textwerkzeug (T) ein, wenden Sie die folgenden Zeicheneinstellungen darauf an und stellen Sie sicher, dass es wie in der Abbildung unten ausgerichtet ist.

Schriftart: Helvetica Neue LT Std.
Gewicht: 75 Fett.
Größe: 12px.
Kerning: Metriken.
Farbe: #ffffff.
Anti-Aliasing: Scharf.

Jetzt erstellen wir die Eingabefelder. Erstellen Sie mit dem Werkzeug für abgerundetes Rechteck (U) zwei abgerundete Rechtecke, von denen jedes 127 x 26 Pixel groß sein sollte, mit einem Radius von 15 Pixel. Füllen Sie sie mit diesem Farbwert: #767676 und richten Sie sie wie im Bild unten aus.

Geben Sie die beiden Wörter "Benutzername" und "Passwort" in die beiden Felder ein, wobei die folgenden Zeicheneinstellungen darauf angewendet werden, und richten Sie sie dann gemäß der Abbildung unten aus:

Schriftart: Helvetica Neue LT Std.
Gewicht: 55 Römer.
Größe: 12px.
Kerning: Metriken.
Farbe: #ffffff.
Anti-Aliasing: Scharf.

Wir erstellen unseren "Go"-Button mit dem Rounded Rectangle Tool (U), aber diesmal ein 33x25px Rechteck mit 25px Radius. Geben Sie dann das Wort "Go" mit den gleichen Zeicheneinstellungen wie im vorherigen Bild ein, ändern Sie jedoch die Gewichtung auf 75 Fett.

Nimm das Linienwerkzeug (L), erstelle eine Linie von 1x25px und fülle sie mit Weiß. Geben Sie dann das Wort "Sign Up" mit den gleichen Zeicheneinstellungen ein, die in der folgenden Abbildung gezeigt werden, und richten Sie auch alle Elemente, die wir in diesem Schritt erstellt haben, entsprechend aus.

Schritt 5: Erstellen einer Werbefläche

Lassen Sie uns das Rechteckige Auswahlwerkzeug (M) verwenden, um ein Rechteck von 480x60px zu erstellen, es mit #767676 zu füllen und es wie in der Abbildung unten auszurichten. Dies sollte als Platzhalter für eine Werbefläche funktionieren.

Dann geben Sie dieser Schicht einen Strich. Das Bild unten zeigt die gewünschten Einstellungen.

Schritt 6: Logo erstellen

Praktisch sollte unser Logo nicht hier in Adobe Photoshop entworfen werden, sondern wir erstellen es vorerst einfach hier. Nehmen Sie also das Ellipsenwerkzeug (U), erstellen Sie einen Kreis von 60x60px, füllen Sie ihn mit diesem Farbwert: #2d2d2d und richten Sie ihn wie in der Abbildung unten gezeigt aus.

Geben Sie den Buchstaben "F" mit den folgenden Zeicheneinstellungen ein und richten Sie ihn gemäß der folgenden Abbildung aus:

Schriftart: Avant Quelombre.
Größe: 53,65 Pixel.
Farbe: #ffffff.
Anti-Aliasing: Knackig.

Geben Sie dann das Wort "Mode" ein und wenden Sie die folgenden Zeicheneinstellungen darauf an:

Schriftart: Avant Quelombre.
Größe: 30px.
Kerning: Optisch.
Farbe: #2d2d2d.
Anti-Aliasing: Knackig.

Und "Store" mit folgenden Zeicheneinstellungen:

Schriftart: Georgien.
Gewicht: Normal.
Größe: 12px.
Kerning: Metriken.
Farbe: #767676.
Anti-Aliasing: Scharf.

Stellen Sie sicher, dass Sie beide gemäß dem Bild unten platzieren.

Schritt 7: Erstellen der Navigationsleiste

In diesem Schritt erstellen wir unsere Navigationsleiste. Fahren Sie fort und nehmen Sie das Rechteckige Auswahlwerkzeug (M), erstellen Sie eine Auswahl von 940 x 48 Pixeln, füllen Sie sie mit diesem Farbwert: #c3c3c3 und setzen Sie 20 Pixel unter die Werbefläche wie in der Abbildung unten.

Wir gehen weiter und greifen zum Horizontal Type Tool (T) und geben die Titel unserer Unterseiten mit den folgenden Zeicheneinstellungen ein:

Schriftart: Bebas.
Gewicht: Normal.
Größe: 14px.
Kerning: Optisch.
Farbe: #2d2d2d/#ffffff.
Anti-Aliasing: Knackig.

Trennen wir nun die Titel, die wir gerade erstellt haben. Erstellen Sie mit dem Linienwerkzeug (U) eine vertikale Linie zwischen jeweils zwei Titeln, füllen Sie sie mit diesem Farbwert: #b4b4b4 und stellen Sie sicher, dass zwischen jedem Titel und jeder vertikalen Linie 20px stehen.

Schritt 8: Erstellen des Dropdown-Menüs

Lassen Sie uns jetzt ein Dropdown-Menü erstellen, sollen wir? Nehmen Sie das rechteckige Auswahlwerkzeug (M), erstellen Sie eine Auswahl, die den Raum zwischen den beiden umgebenden Zeilen des Wortes "WOMEN" ausfüllt, und füllen Sie es mit diesem Farbwert: #2d2d2d. Erstellen Sie dann eine weitere Auswahl von 340x147px, füllen Sie sie mit demselben Farbwert und richten Sie sie gemäß der Abbildung unten aus. Dies dient als Hintergrund für unser Dropdown-Menü.

Drücken Sie die Taste (T) auf Ihrer Tastatur, um das horizontale Textwerkzeug (T) auszuwählen, und beginnen Sie mit der Eingabe der Elemente des Untermenüs mit den folgenden Zeicheneinstellungen:

Schriftart: Helvetica Neue LT Std.
Gewicht: 55 Römer.
Größe: 12px.
Kerning: Metriken.
Führend: 30px.
Farbe: #767676.
Anti-Aliasing: Scharf.

Stellen Sie abschließend sicher, dass sie wie in der folgenden Abbildung ausgerichtet sind.

Was wir jetzt tun werden, ist, einen Rahmen für ein Bild zu erstellen (wo wir ein Bild einer Frau platzieren, nur um dem Benutzer mitzuteilen, dass Sie den Abschnitt "Frauen" ausgewählt haben). Nehmen Sie also das Rechteckige Auswahlwerkzeug (M), erstellen Sie eine Auswahl von 139 x 105 Pixeln und füllen Sie sie mit #1f1f1f, erstellen Sie dann eine weitere Auswahl von 121 x 87 Pixeln und füllen Sie sie mit #767676. Stellen Sie sicher, dass die Mitten der beiden Rechtecke horizontal und vertikal ausgerichtet sind.

Schritt 9: Erstellen der Suchleiste

Lassen Sie uns fortfahren und ein Eingabefeld für unsere Suchleiste erstellen. Nehmen Sie das abgerundete Rechteck-Werkzeug (U), erstellen Sie ein Rechteck von 123 x 26 Pixeln mit einem Radius von 15 Pixeln und füllen Sie es mit Weiß. Vergessen Sie nicht, es wie in der Abbildung unten gezeigt auszurichten.

Geben Sie mit dem fantastischen horizontalen Textwerkzeug (T) das Wort "Suchen" in das abgerundete Rechteck ein und wenden Sie die folgenden Zeicheneinstellungen darauf an:

Schriftart: Helvetica Neue LT Std.
Gewicht: 55 Römer.
Größe: 12px.
Kerning: Metriken.
Farbe: #767676.
Anti-Aliasing: Scharf.

Suchen Sie ein Symbol einer Lupe und platzieren Sie es auf der rechten Seite der Suchleiste, stellen Sie sicher, dass es mit #929292 gefärbt und gemäß der Abbildung unten ausgerichtet ist.

Schritt 10: Erstellen der Suchleiste

Beginnen wir mit der Erstellung des Bereichs "Featured Content". Beginnen Sie mit der Erstellung einer Auswahl von 640 x 315 Pixeln mit dem rechteckigen Auswahlwerkzeug (M) und füllen Sie sie mit #c3c3c3.

Lassen Sie uns nun diese Leiste erstellen, in der eine Nachricht über das vorgestellte Produkt angezeigt wird. Nehmen Sie das rechteckige Auswahlwerkzeug (M), erstellen Sie eine Auswahl von 480x33px, füllen Sie sie mit diesem Farbwert: #767676 und richten Sie sie wie in der Abbildung unten gezeigt aus.

Wählen Sie das horizontale Textwerkzeug (T) und geben Sie eine Nachricht mit der folgenden Zeicheneinstellung ein:

Schriftart: Helvetica Neue LT Std.
Gewicht: 55 Römer.
Größe: 14px.
Kerning: Metriken.
Farbe: #ffffff.
Anti-Aliasing: Scharf.

Vergessen Sie nicht, den Text und den Hintergrund wie gezeigt auszurichten.

Es ist Zeit, einen einleitenden Text einzugeben. Nehmen Sie das horizontale Textwerkzeug (T) und geben Sie das Wort "Sammlung" mit den folgenden Zeicheneinstellungen ein:

Schriftart: Georgien.
Gewicht: Fett.
Größe: 18px.
Kerning: Optisch.
Farbe: #2d2d2d.
Anti-Aliasing: Knackig.

Geben Sie dann das Wort "Sommer" mit den folgenden Zeicheneinstellungen ein:

Schriftart: Georgien.
Gewicht: Fett.
Größe: 48px.
Kerning: Optisch.
Farbe: #ffffff.
Anti-Aliasing: Knackig.

Geben Sie schließlich "Helfen, cool auszusehen" mit den folgenden Zeicheneinstellungen ein:

Schriftart: Helvetica Neue LT Std.
Gewicht: 55 Römer.
Größe: 18px.
Kerning: Optisch.
Farbe: #2d2d2d.
Anti-Aliasing: Knackig.

Achten Sie darauf, unseren Text wie in der Abbildung unten gezeigt auszurichten.

Schritt 11: Erstellen des Sale-Tags

Jetzt erstellen wir unser Sale-Tag. Verwenden Sie das Ellipsenwerkzeug (U), um einen 80x80px-Kreis zu erstellen, füllen Sie ihn mit diesem Farbwert: #2d2d2d und platzieren Sie ihn dann wie in der Abbildung unten gezeigt.

Geben Sie Text in diesen Kreis ein (z. B. 40% Rabatt) und wenden Sie die folgenden Zeicheneinstellungen darauf an:

Schriftart: Georgia.
Gewicht: Normal / Fett.
Größe: 48px / 14px.
Kerning: Metriken.
Farbe: #ffffff.
Anti-Aliasing: Knackig.

Schritt 12: Erstellen des Hauptinhaltsbereichs

Machen wir weiter und beginnen mit der Erstellung unseres Hauptinhaltsbereichs. Wir beginnen mit dem Titel, greifen Sie also zum Horizontal Type Tool (T), geben Sie einen Titel ein und wenden Sie die folgenden Zeicheneinstellungen darauf an:

Schriftart: Bebas.
Gewicht: Normal.
Größe: 24px.
Kerning: Optisch.
Farbe: #2d2d2d.
Anti-Aliasing: Knackig.

Vergiss nicht, es 20px unter dem Bereich mit empfohlenen Inhalten zu platzieren.

Geben Sie, während das horizontale Textwerkzeug (T) immer noch ausgewählt ist, eine Kurzbeschreibung für diesen Titel mit den folgenden Zeicheneinstellungen ein:

Schriftart: Helvetica Neue LT Std.
Gewicht: 55 Roman.
Größe: 12px.
Kerning: Metriken.
Farbe: #767676.
Anti-Aliasing: Scharf.

Und natürlich sollte es am Grundlinienraster ausgerichtet sein, wie in der Abbildung unten gezeigt.

Erstellen Sie mit dem Linienwerkzeug (U) eine Linie mit einer Breite von 640 Pixeln und färben Sie sie mit diesem Wert: #e5e5e5.

Schritt 13: Erstellen der Produktbilder

Nehmen Sie das rechteckige Auswahlwerkzeug (M), erstellen Sie eine Auswahl von 200 x 152 Pixeln, füllen Sie sie mit #2d2d2d und richten Sie sie 20 Pixel unter der gerade erstellten Linie aus.

Erstellen Sie ein weiteres Verkaufs-Tag wie das, das wir in Schritt 11 erstellt haben, aber machen Sie diesmal den Kreis 45x45px und füllen Sie ihn mit Weiß. Und der Text sollte 24px/14px groß und mit #767676 gefüllt sein.

Verwenden Sie das horizontale Textwerkzeug (T), um den Namen und den Preis des Produkts mit den folgenden Zeicheneinstellungen einzugeben:

Schriftart: Helvetica Neue LT Std.
Gewicht: 55 Roman.
Größe: 12px.
Führend: 21px.
Kerning: Metriken.
Farbe: #767676 / #000000.
Anti-Aliasing: Scharf.

Wir füllen diesen leeren Raum zwischen dem Text mit einem Symbol - falls Sie sich fragen.

Platzieren Sie ein Symbol eines Einkaufswagens, platzieren Sie es an der leeren Stelle, die wir im vorherigen Schritt gelassen haben, und richten Sie es wie in der Abbildung unten gezeigt aus.

Wenn das Symbol farbig ist, gehen Sie zu Ebene> Neue Einstellungsebene> Schwarzweiß..., um es in Graustufen zu ändern.

Wählen Sie alle in diesem Schritt erstellten Produktvorschauelemente aus, gruppieren Sie sie und duplizieren Sie diesen Ordner dann fünfmal. Richten Sie die sechs Produktvorschauen wie in der Abbildung unten gezeigt aus.

Schritt 14: Erstellen des großen Sidebar-Banners

Jetzt arbeiten wir an unserer Seitenleiste. Wir beginnen mit dem großen Banner, greifen Sie also zum Rechteckwerkzeug (U), erstellen Sie ein 280x314px-Rechteck und füllen Sie es mit #2d2d2d. Erstellen Sie bei noch ausgewähltem Werkzeug ein weiteres Rechteck von 280x41px und füllen Sie es mit #767676, dann richten Sie beide aus, wie in der Abbildung unten gezeigt.

Geben Sie mit dem Horizontal Type Tool (T) einen Titel für dieses Banner mit den folgenden Zeicheneinstellungen ein:

Schriftart: Bebas
Gewicht: Normal.
Größe: 18px.
Kerning: Optisch.
Farbe: #ffffff.
Anti-Aliasing: Knackig.

Drücken Sie die Taste (U), um das Ellipsenwerkzeug (U) auszuwählen, erstellen Sie einen Kreis von 210 x 210 px, füllen Sie ihn mit #7676767 und versuchen Sie, ihn irgendwie wie in der Abbildung unten auszurichten.

Um nun den Teil des Kreises loszuwerden, der aus dem Bannerhintergrund herausgeht, öffnen Sie das Ebenenbedienfeld, platzieren Sie die Ebene des Kreises ("tag_bg") direkt über der Ebene des Bannerhintergrunds ("box_bg"). Klicken Sie dann mit der rechten Maustaste auf die Ebene des Kreises> Schnittmaske erstellen.

Geben Sie nun mit dem horizontalen Textwerkzeug (T) Text in diesen Kreis ein und verwenden Sie dabei die folgenden Zeicheneinstellungen:

Schriftart: Georgia
Gewicht: Normal.
Größe: 18px / 14px / 24px / 30px.
Kerning: Optisch.
Farbe: #ffffff.
Anti-Aliasing: Knackig.

Stellen Sie außerdem sicher, dass "Faux Bold" im Zeichenfenster ausgewählt ist.

Schritt 15: Erstellen eines kleineren Sidebar-Banners

Nehmen Sie das Rechteckwerkzeug (U) und erstellen Sie ein Rechteck von 280x144px, füllen Sie es mit #2d2d2d und platzieren Sie es gemäß der Abbildung unten.

Lassen Sie uns nun die Schaltfläche "Mehr wissen" erstellen. Verwenden Sie das rechteckige Auswahlwerkzeug (M), um eine Auswahl von 120x30px zu erstellen und mit #767676 zu füllen.

Nehmen Sie dann das horizontale Textwerkzeug (T) und geben Sie "Know More" mit den folgenden Zeicheneinstellungen in das Rechteck ein:

Schriftart: Helvetica Neue LT Std.
Gewicht: 55 Roman.
Größe: 18px.
Kerning: Optisch.
Farbe: #ffffff.
Anti-Aliasing: Knackig.

Geben Sie, während das horizontale Textwerkzeug (T) immer noch ausgewählt ist, Text wie in der Abbildung unten mit den folgenden Zeicheneinstellungen ein:

Schriftart: Helvetica Neue LT Std.
Gewicht: 55 Roman.
Größe: 14px / 24px / 18px.
Führend: 24px.
Kerning: Optisch.
Farbe: #ffffff.
Anti-Aliasing: Knackig.

Das Bild unten zeigt Ihnen, wie Sie den Text ausrichten.

Erstellen Sie eine Kopie dieses Banners und lassen Sie zwischen ihnen 20 Pixel vertikalen Abstand.

Schritt 16: Erstellen des Abschnitts "Twitter Updates"

Erstellen Sie mit dem rechteckigen Auswahlwerkzeug (M) eine Auswahl von 280 x 235 Pixeln, füllen Sie sie mit Weiß und platzieren Sie sie 20 Pixel unter dem Banner.

Nehmen Sie das horizontale Textwerkzeug (T) und geben Sie einen Titel mit den folgenden Zeicheneinstellungen ein:

Schriftart: Bebas.
Gewicht: Normal.
Größe: 18px.
Kerning: Optisch.
Farbe: #2d2d2d.
Anti-Aliasing: Knackig.

Erstellen Sie mit dem Linienwerkzeug (U) eine 240px breite Linie und füllen Sie sie mit diesem Farbwert: #e5e5e5.

Suchen Sie ein Symbol/eine Illustration des Twitter-Vogels und platzieren Sie es wie im Bild unten. Stellen Sie außerdem sicher, dass Sie wie in einem vorherigen Schritt Graustufen erstellen.

Nehmen Sie das Horizontal Type Tool (T) und geben Sie Text als Beispiel für einen Tweet ein, und wenden Sie dann die folgenden Zeicheneinstellungen darauf an:

Schriftart: Helvetica Neue LT Std.
Gewicht: 55 Roman.
Größe: 12px.
Führend: 18px.
Kerning: Metriken.
Farbe: #2d2d2d / #767676.
Anti-Aliasing: Knackig.

Geben Sie dann "More Tweets" mit den folgenden Zeicheneinstellungen ein:

Schriftart: Helvetica Neue LT Std.
Gewicht: 55 Roman.
Größe: 12px.
Kerning: Metriken.
Farbe: #2d2d2d.
Anti-Aliasing: Knackig.

Vergessen Sie nicht, im Zeichenfenster auf „Unterstreichen“ zu klicken.

Schritt 17: Erstellen des Abschnitts "Andere Produkte"

Schnappen Sie sich das Rechteckwerkzeug (U) und erstellen Sie ein Rechteck von 940x264px, füllen Sie es mit #ffffff und platzieren Sie 20px unter dem Abschnitt "Twitter-Updates".

Erstellen Sie einen Titel für diesen Abschnitt, der genau dem Titel entspricht, den wir im vorherigen Schritt erstellt haben. Verwenden Sie dann das Linienwerkzeug (U), um eine 898px breite Linie zu erstellen und diese mit #e5e5e5 zu füllen.

Verwenden Sie das Rechteckwerkzeug (U), um ein Rechteck von 178 x 113 Pixeln zu erstellen. Machen Sie drei Kopien davon und richten Sie sie gemäß der Abbildung unten aus.

Geben Sie erneut einige Informationen zum Produkt ein und wenden Sie die folgenden Zeicheneinstellungen auf Ihren Text an:

Schriftart: Helvetica Neue LT Std.
Gewicht: 55 Roman.
Größe: 12px.
Führend: 18px.
Kerning: Metriken.
Farbe: #2d2d2d/#767676.
Anti-Aliasing: Knackig.

Vergessen Sie nicht, "Jetzt kaufen" unterstrichen zu machen.

Suchen Sie ein Pfeilsymbol und platzieren Sie es wie im Bild unten, versuchen Sie, die Größe auf etwa 28x28px zu ändern, und füllen Sie es mit diesem Farbwert: #2d2d2d. Machen Sie eine weitere Kopie dieses Symbols und platzieren Sie es auf der rechten Seite.

Schritt 18: Erstellen des Fußzeilenbereichs

Nehmen Sie das rechteckige Auswahlwerkzeug (M) und erstellen Sie eine Auswahl von 1260x122px, dann füllen Sie sie mit #2d2d2d.

Geben Sie Text in die Fußzeile mit den folgenden Zeicheneinstellungen ein:

Schriftart: Helvetica Neue LT Std.
Gewicht: 55 Roman.
Größe: 12px.
Führend: 21px.
Kerning: Metriken.
Farbe: #ffffff / #767676.
Anti-Aliasing: Knackig.

Platzieren Sie abschließend eine Kopie des Logos und stellen Sie sicher, dass es wie im Bild unten ausgerichtet ist, und das war's!

Farbkombination

Nachdem wir mit unserem Graustufen-Drahtmodell fertig sind, ist es an der Zeit, uns auf die Farbgebung unserer Benutzeroberfläche zu konzentrieren. Farbe ist ein sehr großes Thema, daher gehe ich nur den Teil der Farbkombination durch. Unser Farbschema enthält drei Arten von Farben:

Untergeordnete oder Grundfarbe: Dies ist eine optisch schwache oder untergeordnete Farbe. Es kontrastiert oder ergänzt.
Dominante oder Hauptfarbe: Diese definiert die kommunikativen Werte der Farbkombination.
Akzent- oder Hervorhebungsfarbe: Dies kann mit der Grund- oder Hauptfarbe übereinstimmen. Alternativ können Sie eine Akzentfarbe wählen, die optisch stark ist und mit der Hauptfarbe zu konkurrieren scheint, um Spannung in der Kombination zu erzeugen.

Das folgende Bild zeigt unsere Basis-, Haupt- und Akzentfarben.

Zimmer suchen

Da wir einige Portraits in unserem Design verwenden werden, dachte ich, ich sollte kurz über "Looking Room" sprechen. Im Allgemeinen hat ein Porträtfoto ein Motiv und einen Raum um sie herum. Das visuelle Interesse am Porträt kann durch Bewegung entstehen, so bewegen sich unsere Augen um die Aufnahme herum. Und um das Auge zu bewegen, passt der Fotograf den Raum um das Motiv entsprechend an.

Wie Sie beispielsweise im Bild unten sehen können, erzeugt die Ausrichtung des Motivs auf der linken Seite (1) mit dem weißen Raum (Looking Room) auf der rechten Seite eine Bewegung (3), die unsere Augen in die Richtung blicken lässt wo das Motiv sucht.

Weiterlesen:

Schritt 19: Hintergrund einfärben

Jetzt fangen wir an, unsere Benutzeroberfläche zu färben! Um die Hintergrundebene mit Farbe zu füllen, können Sie auf ihre Miniaturansicht im Ebenenbedienfeld klicken, während Sie die Cmd/Strg-Taste gedrückt halten, um ihre Pixel auszuwählen, und dann auf Umschalt+Rücktaste > Farbe… > #f6f6f4 klicken. Oder Sie können eine Farbüberlagerung hinzufügen.

Schritt 20: Färben der oberen Leiste

Färben Sie das Wort "Sign In" mit diesem Farbwert: #ffffff, "User name/Password" mit: #8e8e8e, die Eingabefelder mit #8e8e8e, den Hintergrund des Buttons und "Sign Up" mit #ea6a53 und die Navigation Text mit #999999.

Füllen Sie die Werbefläche mit einem Bild wie im Bild unten gezeigt und erstellen Sie dafür eine Schnittmaske, wie wir es in Schritt 14 gemacht haben.

Zeit, das Logo einzufärben. Geben Sie dem Kreis und dem Wort "Fashion" diesen Farbwert: #2d2d2d, füllen Sie den Buchstaben "F" mit der gleichen Farbe wie der Hintergrund #f6f6f4 und das Wort "Store" mit #bc3726.

Schritt 21: Einfärben der Navigationsleiste

Wir füllen den Navigationshintergrundtext mit diesem Farbwert: #c3c3c3, den Text mit #2d2d2d, das Wort "WOMEN" mit #f6f6f4 (was den Hover/Selected-Zustand repräsentiert) und die vertikalen Trennlinien mit #b4b4b4.

Um dem Navigationstext mehr visuelles Interesse zu verleihen, fügen wir ihm einen Schlagschatten hinzu. Das Bild unten zeigt die Einstellungen…

In der Suchleiste füllen wir das Eingabefeld mit weißem #ffffff, das Wort "Suchen" mit #a6a6a6 und das Symbol mit #ea6a53.

Jetzt geben wir unserer Unternavigationsleiste ein paar Farben… Füllen Sie den Hintergrund mit #2d2d2d, den Text mit #c4c4c4 und den Rand des Bildes mit #1f1f1f.

Wir machen den Bildrahmen etwas interessanter, indem wir ihm einen Schlagschatten und einen inneren Schatten hinzufügen. Alle Einstellungen sind im Bild unten zu sehen.

Platzieren Sie schließlich ein Bild eines weiblichen Modells, wie in der Abbildung unten gezeigt.

Jetzt ist es an der Zeit, die gestrichelten Linien zwischen den Navigationselementen zu erstellen. Öffnen Sie Adobe Illustrator, erstellen Sie ein neues Dokument, wählen Sie das Liniensegmentwerkzeug (\), erstellen Sie eine 135px breite Linie und füllen Sie sie mit Keine (/). Öffnen Sie dann das Stroke-Panel und passen Sie Ihre Einstellungen gemäß der Abbildung unten an.

Kopieren Sie die gestrichelte Linie und fügen Sie sie in Adobe Photoshop ein, erstellen Sie zwei Kopien davon und füllen Sie sie alle mit diesem Farbwert: #484848.

Schritt 22: Färben des großen Sidebar-Banners

Wir beginnen diesen Schritt, indem wir ein Bild platzieren, das den Hintergrund des Banners ausfüllt. Gehen Sie zu Datei > Platzieren… > Wählen Sie ein Bild aus > Platzieren.

Lassen Sie uns fortfahren und den Kreis mit dem Text darin ausmalen. Die Farbwerte, die wir verwenden sollten, sind im Bild unten gezeigt.

Um die Zahl "50" etwas hervorzuheben, wenden wir einen Schlagschatten auf die Ebene an, die ihn enthält. Die Einstellungen sind im Bild unten zu sehen.

Zeit, am Titel zu arbeiten… Füllen Sie den Hintergrund mit diesem Farbwert: #000000 und den Text mit diesem Farbwert: #c3c3c3. Erstellen Sie dann zwei gestrichelte Linien (wie die, die wir in Schritt 21 erstellt haben), füllen Sie sie mit #414141 und platzieren Sie sie wie in der Abbildung unten gezeigt.

Lassen Sie uns dem Hintergrund des Titels etwas visuelles Interesse verleihen, indem wir ihm eine subtile Grunge-Textur hinzufügen. Laden Sie dieses erstaunliche Pinselset herunter: "Function Subtle Grunge Brushes", das von den tollen Jungs von WeFunction erstellt wurde, oder jedes andere Pinselset, das Sie bevorzugen. Erstellen Sie eine neue Ebene direkt über der Hintergrundebene des Titels, während Sie sie ausgewählt haben, übermalen Sie den Titel mit einem der Pinsel mit dem Pinselwerkzeug (B) (oder verwenden Sie stattdessen eines der enthaltenen PNGs), füllen Sie ihn mit Weiß, Reduzieren Sie dann die Deckkraft der Ebene auf 30%. Klicken Sie abschließend mit der rechten Maustaste darauf> Schnittmaske erstellen…

Schritt 23: Einfärben des hervorgehobenen Inhaltsbereichs

Wir füllen den Hintergrund des vorgestellten Inhaltsbereichs mit einem Farbverlauf, um ihn interessanter aussehen zu lassen. Also schnapp dir das Verlaufswerkzeug (G), öffne den Verlaufseditor über das Steuerungsbedienfeld und stelle deine Farbwerte von #b6a397 bis #9d8a83 ein.

Wir müssen den Bereich angeben, der mit dem Farbverlauf gefüllt werden soll, und wir tun dies, indem wir eine Auswahl darüber treffen. Gehen wir also zum Ebenenbedienfeld, klicken Sie auf die Miniaturansicht der Hintergrundebene, während Sie die Cmd/Strg-Taste gedrückt halten, um eine Auswahl darüber zu treffen, und wählen Sie bei weiterhin ausgewähltem Verlaufswerkzeug (G) Radialer Verlauf aus und ziehen Sie wie in der . gezeigt Bild unten, während Sie die Umschalttaste gedrückt halten, um den Engel einzuschränken.

Die Farbwerte der Elemente in diesem Abschnitt sind in der Abbildung unten dargestellt.

Suchen Sie schließlich ein Foto eines weiblichen Models, platzieren Sie es in unserem Dokument und richten Sie es gemäß dem Raster aus, wie in der Abbildung unten gezeigt.

Schritt 24: Färben der kleinen Sidebar-Banner

Auch hier platzieren wir ein weiteres Bild als Hintergrund für unser Banner und verwenden die im Bild unten gezeigten Farbwerte, um unsere Elemente einzufärben.

Um unseren Text ein wenig mehr hervorzuheben, geben wir ihm einen Schlagschatten. Die Einstellungen sind im Bild unten zu sehen.

Und das gleiche machen wir mit dem anderen Banner…

Lassen Sie uns nun dem Abschnitt "Twitter Updates" einige Farben geben... Das Bild unten enthält alle Farbwerte, die wir für diesen Abschnitt verwenden sollten.

Schritt 25: Färben des Hauptinhaltsbereichs

Wir beginnen mit dem Titel, füllen ihn mit diesem Farbwert: #2d2d2d, dann die Beschreibung mit diesem Wert: #858585, dann die Zeile mit #e5e5e5.

Zur Produktvorschau wechseln… Platzieren Sie zuerst ein Bild des Produkts und färben Sie dann alle Elemente mit den Werten aus, die im Bild unten angezeigt werden.

Die Elemente im Abschnitt "Andere Produkte" werden mit den gleichen Werten wie im vorherigen Schritt eingefärbt, stellen Sie jedoch sicher, dass der Hintergrund mit weißem #ffffff und das Pfeilsymbol mit #040707 gefüllt ist.

Einfärben des Fußzeilenbereichs

Füllen Sie den Hintergrund der Fußzeile mit diesem Farbwert: #2d2d2d und den Text mit #a0a0a0 und #ffffff.

Und schließlich werden die Farben des Logos im folgenden Bild gezeigt…

Abschluss

Und das ist es so ziemlich! Ich hoffe, Sie hatten Spaß beim Lesen dieses Tutorials und, was noch wichtiger ist, Sie fanden es nützlich. Wenn Sie Fragen haben, zögern Sie bitte nicht, einen Kommentar zu hinterlassen, und ich werde mein Bestes tun, um Ihnen zu helfen.