Entwerfen Sie eine schlanke, dunkle Mobile App-Website

In diesem Tutorial verwenden wir Adobe Photoshop, um eine schlanke Weboberfläche zu erstellen, die für jede Website für mobile Apps verwendet werden kann. Wir werden eine Reihe von Techniken abdecken, darunter Formen, Texturen, Masken, benutzerdefinierte Symbole, Typografie und vieles mehr, die einfach angepasst und auf Ihre eigenen Webdesigns angewendet werden können.

Über dieses Design

Dieses Tutorial basiert auf dem dunklen, sauberen Website-Design von Leaflet, einer iPhone-App für Envato-Marktplatz-Publisher. Eric Alli von Trilab Media hat geholfen, die Seite zu entwerfen und zu programmieren, so dass er uns Schritt für Schritt durch das Tutorial führt. Egal, ob Sie ein ähnliches Design für Ihre eigenen Projekte verwenden oder einfach nur sehen möchten, wie es gemacht wurde, es gibt viele hervorragende Tricks und Techniken in diesem Tutorial, die Sie in Angriff nehmen können. Genießen!

Schritt 1

Beginnen wir mit dem Erstellen eines neuen Photoshop-Dokuments, indem Sie Datei > Neu auswählen.

Legen Sie die Breite und Höhe des Canvas auf 1100px, die Auflösung auf 72 und den Hintergrundinhalt auf Weiß fest.

Als Nächstes müssen wir zwei Hilfslinien erstellen, die als Container für unsere Seite dienen.

Wählen Sie Ansicht > Neuer Leitfaden ...

Stellen Sie für die erste Anleitung die Ausrichtung auf Vertikal und die Position auf 70 px ein.

Wählen Sie für die zweite Anleitung erneut  Ansicht > Neue Anleitung und erstellen Sie eine weitere vertikale Vorlage mit einer Position von 1030 Pixel.

Wir sollten jetzt einen umrissenen Raum mit einer Breite von 960 px für unsere Seite haben.

Schritt 2

Der nächste Schritt ist der Hintergrund. Wähle das Farbeimer-Werkzeug (G) und setze das Vordergrund-Farbfeld auf "1e1e1e". Klicken Sie dann auf eine beliebige Stelle auf der Leinwand, um die Farbe auf unsere Hintergrundebene anzuwenden.

Fügen Sie unserem Hintergrund etwas Textur hinzu, indem Sie Filter> Noise> Add Noise ... auswählen.

Setzen Sie den Betrag auf 2.5 und klicken Sie auf OK.

Schritt 3

Als Nächstes werden wir ein Spotlight erstellen, das den Fokus auf den oberen Bereich unserer Seite bringt.

Wählen Sie das Pinsel-Werkzeug (B) und ändern Sie den Master-Durchmesser auf 400px und setzen Sie die Härte auf 0%.

Erstellen Sie eine neue Ebene, indem Sie Ebene > Neu > Ebene ... auswählen und den Namen "Spotlight" eingeben.

Ändern Sie Ihr Vordergrundfarbfeld in "FFFFFF" (weiß) und erstellen Sie mit dem Pinsel-Werkzeug einen Kreis nahe dem oberen Rand der Zeichenfläche.

Um das Spotlight in den Hintergrund zu mischen, können Sie der Spotlight-Ebene etwas Rauschen hinzufügen, indem Sie Filter> Rauschen hinzufügen ... auswählen.

Setzen Sie den Betrag auf 20, markieren Sie Monochromatic und klicken Sie auf OK.

Wählen Sie Filter> Weichzeichnen> Gaußscher Weichzeichner ...

Setzen Sie den Radius auf 50,0 und klicken Sie auf OK.

Setzen Sie schließlich die Deckkraft auf der Spotlight-Ebene auf etwa 25%.

Schritt 4

Als nächstes werden wir unsere Telefongrafiken hinzufügen. Für dieses Tutorial werde ich die iPhone Grafik von dem großartigen Vector iPhone 4 PSD von Psdtuts + verwenden, das hier kostenlos heruntergeladen werden kann. Bedenken Sie auch, dass Sie jede Telefongrafik verwenden können, die Ihren speziellen Bedürfnissen entspricht (Android, Blackberry, etc ...).

Öffnen Sie die PSD nach dem Herunterladen in Photoshop. Erweitern Sie den Ordner "Phones" im Ebenenbedienfeld, klicken Sie mit der rechten Maustaste auf den Ordner "FRONT" und wählen Sie Gruppe duplizieren ... Geben Sie der Gruppe einen erkennbaren Namen (ich habe "iPhone" verwendet), setzen Sie das Ziel auf "Leaflet" (oder was auch immer es ist, nannten Sie Ihre PSD für dieses Tutorial), und klicken Sie auf OK. Sobald Sie fertig sind, schließen Sie diese PSD.

Positionieren Sie unser erstes iPhone, indem Sie die linke Führung berühren und etwa 100 Pixel von der Oberseite der Leinwand entfernt.

Dies ist auch eine gute Zeit, um den Screenshot innerhalb des iPhone anzupassen.

Ein einfacher Weg dies zu tun, ist den "iPhone" Ordner in unserem Ebenen Panel zu erweitern und dann auf den "SCREEN CONTENTS" Ordner zu klicken. Wählen Sie nun Datei > Platzieren, wählen Sie Ihren Screenshot aus dem Browser und klicken Sie dann auf Platzieren.

Ziehen Sie Ihre platzierte Ebene über das iPhone und passen Sie die Größe an den Bildschirm an. Wenn Sie fertig sind, klicken Sie auf Enter, um die Änderungen zu speichern.

Duplizieren Sie die Gruppe "iPhone", indem Sie "Ebene"> "Gruppe duplizieren" wählen. Geben Sie "iPhone 2" ein und klicken Sie im Dialogfeld auf "OK".

Wählen Sie "Bearbeiten" > "Transformieren" > "Skalieren" und erweitern Sie das duplizierte iPhone auf 107,0% Breite und Höhe. Positioniere das iPhone um 50 Pixel von oben und 200 Pixel von der linken Seite.

Wiederholen Sie den oben genannten Schritt, um den Screenshot im Ordner "iPhone 2" zu ersetzen.

Schritt 5

Der letzte Schliff für unsere iPhones ist, eine Reflexion von ihnen zu schaffen. Beginnen Sie mit der Auswahl beider iPhone-Gruppen ("iPhone" und "iPhone 2") und wählen Sie dann "Ebene" > "Ebenen duplizieren" und klicken Sie auf "OK". Wählen Sie dann "Ebene"> "Ebenen zusammenführen".

Als nächstes müssen wir unsere iPhones auf den Kopf stellen. Wählen Sie "Bearbeiten" > "Transformieren" > "Vertikal spiegeln" und positionieren Sie die umgedrehte Ebene direkt unter den ursprünglichen iPhones.

Fügen Sie eine Ebenenmaske hinzu, indem Sie im Ebenenbedienfeld auf das Symbol Ebenenmaske klicken.

Wähle das Verlaufswerkzeug (G) und wähle ein Schwarz-Weiß-Muster. Zeichnen Sie eine Linie von oben nach unten auf den umgedrehten iPhones, die ungefähr 50px hoch sind.

Verringern Sie abschließend die Deckkraft der Ebene auf 30%.

Schritt 6

Als Nächstes fügen Sie die wichtigsten Details Ihrer App rechts neben unseren Telefonen hinzu. Bevor wir beginnen, fügen wir einen weiteren Leitfaden hinzu, um die Ausrichtung der Dinge zu gewährleisten. Wählen Sie Ansicht > Neue Anleitung ... Wählen Sie "Vertikal" zur Orientierung und 550 px für die Position.

Bei etwa 100px von der Spitze unserer Leinwand werden wir unser Logo hinzufügen. Ich benutze ein Logo, das ich vorher gemacht habe, Sie können einfach Text verwenden oder Ihr eigenes Logo hier einfügen.

Unter dem Logo fügen wir einen Textabschnitt für die Beschreibung unserer App ein. Wählen Sie das horizontale Werkzeug (T) und zeichnen Sie ein Rechteck zwischen der mittleren und der rechten Führung. Legen Sie die Zeicheneinstellungen wie folgt fest:

• Schriftfamilie: Helvetica Neue
• Größe: 16 px
• Stil: Regulär
• Führend: 26 px
• Tracking: -25
• Anti-Aliasing: Knackig
• Farbe: #FFFFFF

Schritt 7

Als Nächstes erstellen wir eine Schaltfläche, über die Besucher unsere App kaufen können. Zeichnen Sie mit dem Abgerundeten Rechteck-Werkzeug (U) ein 240x75px-Rechteck mit einem Radius von 4px. Richten Sie es so aus, dass die linke Seite der Schaltfläche die mittlere Hilfslinie berührt und sich 45 Pixel unter dem Text befindet.

Jetzt werden wir einige Layer-Stile anwenden. Doppelklicken Sie im Ebenenbedienfeld auf die rechte Seite der Ebene und verwenden Sie das folgende Bild als Referenz.

Um das Apple-Symbol hinzuzufügen, zeichne ein kleines Textfeld in die Schaltfläche mit dem Horizontaltyp-Werkzeug (T), kopiere dann das Symbol und füge es ein:  in das Textfeld und setze die Zeicheneinstellungen wie folgt:

• Schriftfamilie: Helvetica Neue
• Größe: 50 px
• Stil: Regulär
• Anti-Aliasing: Knackig
• Farbe: #000000

Ändern Sie schließlich die Deckkraft auf dieser Ebene auf 30%.

Erstellen Sie ein weiteres Textfeld rechts und fügen Sie 2 Textzeilen hinzu (Beispiel: "Jetzt im App Store herunterladen"). Wende die folgenden Zeicheneinstellungen an:

• Schriftfamilie: Helvetica Neue
• Größe: 11 px (erste Zeile) 24 px (zweite Zeile)
• Stil: Fett
• Führend: 26 px
• Tracking: -25
• Anti-Aliasing: Knackig
• Farbe: #FFFFFF

Fügen Sie diesem Text einen Ebenenstil hinzu, indem Sie das folgende Bild als Referenz verwenden:

Als nächstes fügen wir ein Trennzeichen rechts neben dem gerade hinzugefügten Text hinzu. Markieren Sie das Linienwerkzeug (U), und halten Sie die UMSCHALTTASTE gedrückt, zeichnen Sie eine 1px-Linie vom oberen Rand der Schaltfläche nach unten und ändern Sie dann die Farbe der Linie in "FFFFFF" (weiß).

Ändern Sie die Deckkraft dieser Linie auf 15% und duplizieren Sie sie, indem Sie "Ebene" > "Ebene duplizieren" auswählen und auf "OK" klicken. Ändern Sie die Farbe dieser duplizierten Linie auf # 000000 (schwarz) und ändern Sie die Deckkraft auf 10%. Verschieben Sie dann die duplizierte Zeile 1px nach links.

Das letzte Element, das dieser Schaltfläche hinzugefügt werden soll, ist ein Symbol, das den Download angibt. Beginnen Sie mit der Auswahl des Ellipsenwerkzeugs (U) und erstellen Sie einen Kreis mit einem Durchmesser von 25 Pixeln.

Fügen Sie dann die folgenden Ebenenstile hinzu:

Nimm das Custom Shape Tool (U) und wähle eine Pfeilform (ich verwende eine Standardform namens "Arrow 9"). Erstellen Sie einen kleinen 10px breiten Pfeil innerhalb des Kreises und ändern Sie die Farbe in "FFFFFF" (weiß).

Schritt 8

Erstellen Sie jetzt eine kleine Box, um den Preis Ihrer App anzuzeigen. Wählen Sie das Abgerundete Rechteck-Werkzeug (U), setzen Sie den Radius auf 4px und erstellen Sie ein Rechteck, das unsere Download-Schaltfläche überlappt und eine Höhe von 52px und eine Breite größer als 100px hat.

Ändern Sie die Farbe dieser Box in "2B2B2B" und bewegen Sie sie unter die Download-Schaltfläche im Ebenen-Panel.

Als Nächstes fügen Sie diesem Feld einen Strichschichtstil mit den folgenden Einstellungen hinzu:

Jetzt können wir die tatsächlichen Preisinformationen hinzufügen. Dafür werden wir zwei separate Textfelder erstellen, da der Inhalt darin ein anderes Styling erfordert.

Für das erste Textfeld fügen Sie einen Text hinzu (ich habe "NUR" verwendet) und wenden Sie die folgenden Zeicheneinstellungen an:

• Schriftfamilie: Helvetica Neue
• Größe: 19 px
• Stil: Fett
• Anti-Aliasing: Knackig
• Farbe: #FFFFFF

Fügen Sie für das zweite Textfeld Ihren Preis hinzu (ich habe "1,99" verwendet) und wenden Sie die folgenden Zeicheneinstellungen an:

Schritt 9

Im unteren Teil unserer Seite müssen wir eine Trennung vornehmen. Dazu verwenden wir die Zwei-Linien-Technik, die wir zuvor auf der Download-Schaltfläche angewendet haben, um dem Separator ein "Inset" -Look zu geben.

Markieren Sie das Linienwerkzeug (U) und zeichnen Sie beim Halten der UMSCHALTTASTE eine 1px-Linie von der linken zur rechten Hilfslinie und ändern Sie dann die Farbe der Linie auf "000000" (schwarz).

Ändern Sie die Deckkraft dieser Linie auf 80% und duplizieren Sie sie, indem Sie "Ebene" > "Ebene duplizieren" auswählen und auf "OK" klicken. Ändern Sie die Farbe dieser duplizierten Linie in "FFFFFF" (weiß) und ändern Sie ihre Deckkraft auf 10%. Dann verschieben Sie die doppelte Zeile 1px nach unten, so dass es unter der schwarzen Linie ist.

Schritt 10

Im Abschnitt unterhalb des Linientrennzeichens, das wir gerade erstellt haben, werden wir zwei Spalten hinzufügen, für Screenshots und eine Liste von Features.

Beginnen Sie mit Screenshots und importieren Sie Ihren ersten Screenshot, indem Sie "Datei" > "Platzieren" auswählen. Wählen Sie unseren Screenshot aus dem Dateibrowser und klicken Sie auf Platzieren. Verkleinere den Screenshot auf 80% Breite und Höhe, dann bewege den Screenshot in die Nähe der linken Hilfslinie und klicke auf Enter.

Wählen Sie die Ebene im Ebenenbedienfeld und klicken Sie zweimal auf die Schaltfläche "Maske hinzufügen", um eine Vektormaske hinzuzufügen.

Wählen Sie nun das Abgerundete Rechteck-Werkzeug (U) und ändern Sie den Radius auf 6px und erstellen Sie ein Rechteck über dem Screenshot mit der Größe 175x120px.

Zu guter Letzt fügen wir einen Strichlayerstil mit folgenden Einstellungen hinzu:

Wiederholen Sie die obigen Schritte für alle Ihre Screenshots und geben Sie ihnen 35 Pixel Abstand voneinander.

Schritt 11

Um unsere Screenshots von den Features zu trennen, zeichne eine 1px-Linie vom oberen Rand des ersten Screenshots bis zum unteren Rand des letzten Screenshots, der etwa 55px von den Screenshots entfernt ist.

Ändere die Farbe der Linie auf "FFFFFF" (weiß) und setze die Opazität auf 5%.

Schritt 12

Fügen wir einen Titel hinzu, der unsere Funktionen beschreibt (ich habe "Leaflet Features" verwendet). Platziere den Text 55px von der linken Trennlinie und verwende folgende Zeicheneinstellungen:

• Schriftfamilie: Helvetica Neue
• Größe: 24 px
• Stil: Regulär
• Tracking: -10
• Anti-Aliasing: Knackig
• Farbe: #FFFFFF

Jetzt erstellen wir unsere Liste der Features und positionieren sie unterhalb des Titels. Erstellen Sie ein Textfeld und fügen Sie fünf oder sechs Linien von Features hinzu und geben Sie ihnen die folgenden Zeicheneinstellungen:

• Schriftfamilie: Helvetica Neue
• Größe: 15 px
• Stil: Regulär
• Führend: 28 px
• Tracking: -10
• Anti-Aliasing: Scharf
• Farbe: #8d8c90

Wiederholen Sie die obigen Schritte, um die Anforderungen der App hinzuzufügen.

Schritt 13

Um unsere Liste der Funktionen hervorzuheben, erstellen wir einige einfache, benutzerdefinierte Aufzählungszeichen.

Beginnen Sie damit, das Textfeld mit den Feature-Optionen 25px nach rechts zu verschieben.

Wählen Sie nun das Ellipsenwerkzeug (U) und erstellen Sie einen Kreis mit einem Durchmesser von 9px links neben dem ersten Merkmal. Ändern Sie die Farbe des Kreises in "bce086".

Fügen Sie dem Kreis den folgenden Ebenenstil hinzu:

Schritt 14

Jetzt müssen wir unsere Kugeln duplizieren und auf jedes Merkmal ausrichten. Beginnen Sie mit der Duplizierung der Kreisebene, indem Sie die Ebene auswählen und dann auf Ebene> Ebene duplizieren ... klicken.

Als nächstes verschieben Sie die duplizierte Ebene um 28 Pixel (die Anzahl der Zeilen, die wir auf die Feature-Liste angewendet haben). Wiederholen Sie die obigen Schritte dreimal.

Schritt 15

Wenn wir uns dem Fußbereich unserer Seite zuwenden, werden wir erneut die Zwei-Zeilen-Technik anwenden, die wir bereits in Schritt 9 angewendet haben, um eine gewisse Trennung hinzuzufügen.

Schritt 16

Jetzt können wir einige nützliche Links zu unserem Fußbereich hinzufügen. Zuerst müssen wir vier Textfelder nebeneinander erstellen, die unsere Links enthalten.

Beginnen Sie, indem Sie ein Textfeld erstellen, das ungefähr 160x40px ist. Fügen Sie etwas Text hinzu und wiederholen Sie dreimal. Hier ist ein Beispieltext, den Sie verwenden können:

• Box 1: Folgen Sie @mycompany auf Twitter für Neuigkeiten und Updates.
• Box 2: Für Hilfe und Unterstützung besuchen Sie unseren Support-Bereich.
• Box 3: Laden Sie unser Presse- und Medienkit herunter.
• Box 4: Copyright 2010 Meine Firma, LLC.

Verwenden Sie Folgendes für die Zeicheneinstellungen:

• Schriftfamilie: Helvetica Neue
• Größe: 12 px
• Stil: Regulär
• Führend: 20 px
• Anti-Aliasing: Scharf
• Farbe: #5555552

Wie Sie vielleicht bemerken, sind unsere Boxen ungleichmäßig und nicht richtig ausgerichtet, keine Sorge, wir werden das im nächsten Schritt beheben.

Schritt 17

Um unsere Ausrichtungsprobleme zu beheben, platzieren Sie zunächst die vier Textfelder, die wir oben erstellt haben, in einen Ordner und nennen Sie ihn "Fußzeile".

Positionieren Sie zuerst das erste Textfeld 55px von der linken Führungslinie und das letzte Textfeld berühren Sie die rechte Führungslinie.

Wähle nun die vier Textebenen im Footer-Ordner aus und nimm das Verschieben-Werkzeug (V). Klicken Sie auf die Schaltfläche Vertikale Zentren ausrichten, und klicken Sie anschließend in der Symbolleiste Verschieben auf die Schaltfläche Horizontale Zentren verteilen.

Schritt 18

Jetzt können wir einige benutzerdefinierte Symbole hinzufügen, um unsere Links zu betonen.

Wählen Sie das Ellipsenwerkzeug (U) und erstellen Sie neben unserem ersten Textfeld einen Kreis mit einem Durchmesser von 36 Pixeln. Ändern Sie die Farbe dieses Kreises in "FFFFFF" (weiß).

Wählen Sie nun "Ebene" > "Rasterisieren" > "Ebene".

Als nächstes fügen Sie Ihrem Kreis dieses Symbol hinzu. Für das erste Symbol verwende ich das Twitter "t", das ich hier kostenlos heruntergeladen habe.

Nach dem Herunterladen wählen Sie Datei > In Photoshop platzieren, um das Symbol in unser Dokument zu importieren. Nach dem Import ändern Sie die Größe des Symbols auf 28% Breite und Höhe, positionieren Sie es über unserem Kreis und klicken Sie dann auf Enter.

Klicken Sie dann im Ebenenbedienfeld mit der rechten Maustaste auf das Miniaturbild des Twitter-Symbols und wählen Sie Pixel auswählen.

Wählen Sie nun die Kreisebene im Ebenenbedienfeld und dann Bearbeiten > Löschen.

Löschen Sie das importierte Twitter-Symbol, indem Sie es im Ebenenbedienfeld auswählen und auf das Papierkorbsymbol klicken oder ziehen.

Verringern Sie abschließend die Deckkraft auf der Kreisebene auf 15%.

Schritt 19

Für den Rest der oben gezeigten Symbole wiederholen Sie die Schritte in Schritt 18, indem Sie andere Symbole oder benutzerdefinierte Formen in Photoshop verwenden.

Schritt 20

Um unseren Fußzeilenlinks einen letzten Schliff zu geben, können wir ihnen einen Farbstich geben, damit sie sich von anderen abheben.

Markieren Sie mit dem horizontalen Textwerkzeug (T) einen Teil des Textes in jedem Textfeld und ändern Sie die Farbe in "83b546".

Fazit

Das ist alles! Ich hoffe, Ihnen hat dieses Tutorial gefallen und Sie haben einige nützliche Techniken gefunden, die Sie an Ihr nächstes Design anpassen / anwenden können.