Erstellen eines anschaulichen einseitigen Webdesigns mit Photoshop

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

Hallo zusammen! Dies ist mein erstes Tutorial auf dieser tollen neuen Seite der tuts+ Familie. Dieses Mal habe ich für Sie ein sehr detailliertes Tutorial zum Erstellen eines einseitigen illustrativen Webdesigns von Grund auf mit Photoshop. Sie lernen, ein Layout für ein einseitiges Webdesign zu erstellen, illustrative Hintergründe mit einem bestimmten Stil zu erstellen, eine schwebende Navigationsleiste zu entwerfen, mit Texten unter Berücksichtigung von CSS3 zu arbeiten und vieles mehr... Bereit zum Start?

Ein paar Live-Beispiele

In letzter Zeit sind ein paar großartige "vertikal scrollende" Seiten im Netz aufgetaucht. Bevor wir eintauchen, schauen wir uns einige davon an, um zu sehen, wie der endgültige Effekt aussehen wird. Diese helfen dabei, den Rest des Tutorials in einen Kontext zu stellen:

TheGreatBeardedReef.com

Pojeta.cz

OrmanClark.com

DannyBlackman.com

Dreamerlines.lv

Bevor Sie beginnen

Dieses Tutorial erfordert einige Grundkenntnisse der Photoshop-Tools. Ich überspringe einige grundlegende Erklärungen wie das Erstellen einer Ebenenmaske, das Hinzufügen einer Hilfslinie oder das Hinzufügen einer Textebene.

Mein Design basiert auf mehreren Beispielen rund um das Web eines sehr trendigen Stils, einer vertikalen Panorama-Vektorlandschaft als Hintergrund und sauberen Textbereichen, die die wichtigen Informationen zeigen. Stellen Sie sich diese Site als Single-Page-Design als Portfolio-Website eines kreativen Designers oder Illustrators vor.

Wir werden nicht auf den Codierungsteil dieses Projekts eingehen, da wir uns auf die verschiedenen Illustrations- und Layouttechniken konzentrieren werden, aber es basiert auf dem beliebten jQuery.ScrollTo-Plugin, das Sie für Tipps zum Codieren dieser Art von Entwurf.

Lassen Sie uns loslegen, die Assets für dieses Tutorial sind:

Star Brushes von jen-ni
BonvenoCF-Schrift von More Barry Schwartz Fonts
Social Network Icon Pack von Komodo Media

Schritt 1: Erste Schritte

Zuerst müssen wir das Arbeitsdokument einrichten. Ich basiere dieses Layout auf dem 12-spaltigen 960-Rastersystem, das Sie kostenlos herunterladen können.

Als gängige Praxis bei Webdesign-Arbeiten müssen wir diesen Bereich vergrößern, um zu sehen, wie er bei höheren Auflösungen aussieht, aber wir müssen auch eine Standardgröße für die Höhe einrichten, diese Höhe sollte der minimal sichtbare Bereich (über dem Falz) sein. da wir ein einzelnes Seitenlayout entwerfen. Gehen Sie zu Bild > Leinwandgröße und stellen Sie die Breite auf 1420 Pixel und die Höhe auf 750 Pixel ein.

Schritt 2 - Abschnitte abgrenzen

Als nächstes verwenden Sie eine zeitliche Grafik, um das Dokument in Abschnitte zu unterteilen, indem Sie mit dem Rechteck-Werkzeug ein Rechteck von oben nach unten zeichnen (750px Höhe). Erhöhen Sie dann die Leinwandgröße stark (Sie können hier das Freistellungswerkzeug verwenden).

Schritt 3 - Abschnitte abgrenzen

Zeichnen Sie eine Hilfslinie am unteren Rand des Rechtecks und duplizieren Sie sie, dann passen Sie die Oberseite der Kopie an die Unterseite des ersten Rechtecks an und fügen Sie eine Hilfslinie am unteren Rand des zweiten Rechtecks hinzu. Wiederholen Sie diesen Vorgang so oft, wie Abschnitte im Layout vorhanden sind, in diesem Fall benötigen wir 4: Home, Über uns, Portfolio und Kontakt. Löschen Sie dann mit dem Freistellungswerkzeug die zusätzliche Leinwand. Sie sollten eine Leinwand mit einer Höhe von etwa 3000 Pixeln mit 4 Abschnitten mit jeweils 750 Pixeln haben. Löschen Sie die Führungsrechtecke und gehen Sie weiter.

Schritt 4 - Himmelshintergrund

Zeichnen Sie mit dem Rechteckwerkzeug ein Rechteck von oben nach unten im dritten Abschnitt. Fügen Sie dann einen Verlaufsüberlagerungsebenenstil mit den folgenden Farben hinzu: #FFFFFF #6E98C8 #2A3256 und #0C0E1A, stellen Sie den Winkel auf 90° ein (es ist sehr wichtig, da dieser Verlaufshintergrund geschnitten wird, um auf der x-Achse wiederholt zu werden) und klicken Sie auf OK.

Schritt 5 - Grashintergrund

Zeichnen Sie ein Rechteck im vierten Abschnitt des Dokuments und fügen Sie dann einen Ebenenstil > Verlaufsüberlagerung mit diesen Farben hinzu: #486302 #64A500 und #BEDC40. Stellen Sie wie im vorherigen Schritt den Winkel auf 90° ein.

Illustrationen: Die Rakete

Schritt 6 - Raketenkörper

Jetzt beginnen wir mit der Gestaltung der zusätzlichen grafischen Elemente des Hintergrunds. Das erste Element, das wir zeichnen müssen, ist eine Weltraumrakete, die auf dem ersten Abschnitt des Designs platziert wird. Erstellen Sie dazu ein neues Dokument (400px Breite und 600px Höhe) und speichern Sie es unter einem aussagekräftigen Namen wie "Rakete", fügen Sie einen dunkelblauen Hintergrund #181C35 hinzu.

Zeichnen Sie als Nächstes mit dem Zeichenstift-Werkzeug eine weiß gefüllte Form ähnlich der folgenden Abbildung, duplizieren Sie sie und gehen Sie zu Bearbeiten > Transformieren > Horizontal spiegeln und platzieren Sie die Kopie genau neben dem Original, wählen Sie beide Ebenen aus und führen Sie sie durch Drücken von Befehl / zusammen. Control + E. Dies wird der Körper der Rakete sein.

Fügen Sie nun einen Ebenenstil > Verlaufsüberlagerung zur Ebene "Raketenkörper" mit den folgenden Farben hinzu: #0B85DB, #014C83, #2396EF, #004B82 und #1477B8, stellen Sie den Winkel auf 0° und klicken Sie auf OK. Rasterisieren Sie schließlich den Farbverlauf, indem Sie die Ebene "Rocket body" mit einer neuen leeren Ebene zusammenführen.

Schritt 7 - Streifen

Erstellen Sie mit dem Ellipsenwerkzeug drei gelbe Ellipsen und platzieren Sie sie wie in der Abbildung unten gezeigt. Rastern Sie sie (Klicken Sie mit der rechten Maustaste auf die Ebenenminiatur und wählen Sie Rasterisieren). Halten Sie dann die Befehls-/Strg-Taste gedrückt und klicken Sie auf eine Ellipse-Miniatur im Ebenenbedienfeld, um automatisch die Form der Ebene auszuwählen. Bewegen Sie die Auswahl mit den Cursors einige Pixel nach oben und drücken Sie dann die Entf-Taste. Dieser Vorgang erzeugt einen schönen geschwungenen Streifen. Wiederholen Sie die Aktionen mit den anderen Ellipsen.

Schritt 8 - Mehr Streifen

Duplizieren Sie jeden Streifen und platzieren Sie ihn einige Pixel über dem Original. Wählen Sie dann alle Streifen aus und führen Sie sie auf einer Ebene mit dem Namen "Stripes" zusammen. Dann Befehl / Strg auf dem "Raketenkörper", um die Raketenform auszuwählen, dann zu Auswählen > Ändern > Erweitern gehen und 2 Pixel festlegen, dann die Auswahl umkehren, indem Sie Befehl / Strg + Umschalt + I drücken. Als nächstes im Ebenenbedienfeld auf klicken die Ebene "Streifen" und löschen Sie die Auswahl.

Schritt 9 - Stil des Streifens

Wählen Sie die Ebene "Streifen" und fügen Sie einen Ebenenstil > Verlaufsüberlagerung mit den folgenden Farben hinzu: #EFAC00, #BD8401, #C39700, #FFCF2C, #C39700, #BD8401 und #EFAC00 Winkel 0°. Und ein dezenter schwarzer Schlagschatten (Größe:2px).

Schritt 10 - Raketenspitze

Wählen Sie die Ebene "Rocket Body" aus, wählen Sie dann mit dem Elliptical Marquee Tool die Spitze der Rakete aus, wie in der Abbildung unten gezeigt, kopieren Sie die Auswahl und fügen Sie sie über der Raketenebene und unter den Streifen ein, benennen Sie die neue Ebene "Tip". Kopiere den Ebenenstil der Streifen und füge den Stil in die "Spitze" ein.

Schritt 11 - Raketenfenster

Zeichnen Sie mit dem Ellipsenwerkzeug eine Ellipse auf der linken Seite der Rakete, nennen Sie sie "Fenster", fügen Sie dann einen Ebenenstil > Verlaufsüberlagerung mit den folgenden Farben hinzu: #777777, #E8E8E8, #ADADAD, #FEFEFE, #C8C8C8 und Winkel:0°.

Dann duplizieren Sie die Ebene "Fenster" und verkleinern Sie sie etwas, platzieren Sie die Kopie direkt über dem Original. Da die Ellipse eine Vektormaske ist, ändern Sie die Farbe ihres Hintergrunds in: #00CCFF und doppelklicken Sie auf den Verlaufsüberlagerungsebenenstil. Ändern Sie im Dialogfeld den Mischmodus auf Bildschirm. Fügen Sie schließlich der Ebene "Fensterkopie" einen subtilen inneren Schatten hinzu und wenn Sie der Ebene "Fenster" einen Schlagschatten hinzufügen möchten.

Schritt 12 - Raketenbasis

Lassen Sie uns die Raketenbasis hinzufügen, zuerst alle Rocket-bezogenen Ebenen (Körper, Spitze, Streifen und Fenster) einfügen und zusammenführen. Zeichnen Sie mit dem Zeichenstift-Werkzeug drei Formen nach dem Beispiel des Bildes unten, eine davon über der neuen Ebene "Körper" und eine darunter. Verwenden Sie diese Füllfarbe für die Formen: #FBCC28.

Schritt 13 - Volumen zur Basis

Fügen Sie der Raketenbasis drei neue Formen hinzu, die Volumen darstellen. Folgen Sie dem Bild unten und verwenden Sie diese Füllfarbe: #AB8204.

Schritt 14

Wenden Sie einen Verlaufsüberlagerungsebenenstil auf die Sockel an, verwenden Sie die folgenden Farben: #FACB2, #FFF393, #FFD952 und #D4A500, stellen Sie den Winkel auf 90° ein und versuchen Sie, so etwas wie das Bild unten zu erhalten.

Schritt 15 - Letzte Details

Alle Ebenen zusammenführen (ich habe immer eine Kopie der Vektorebenen in einer Kopie hinterlassen, nur für den Fall). Erstellen Sie eine Ellipse über der Rakete, die mit dieser Farbe gefüllt ist: #DFF8FF, gehen Sie dann zu Filter > Blur > Gaußian Blur und stellen Sie den Radius auf 23 oder 24 Pixel ein, nennen Sie die Ebene "Light". Befehl / Strg - Klicken Sie auf die Körperebene der Rocket, um ihre Form auszuwählen, Befehl / Strg + Umschalt + I, um die Auswahl umzukehren und die Auswahl aus der Ebene "Licht" zu löschen. Ändern Sie schließlich den Mischmodus in Weiches Licht.

Schritt 16 - Platzieren der Rakete auf der Bühne

Führen Sie alle Rocket-Ebenen zusammen und kopieren Sie sie. Fügen Sie die Rakete auf der rechten Seite von Abschnitt 1 unseres Hauptdokuments ein.

Schritt 17 - Raketenfeuer

Sie können diesen Schritt entweder im Raketendokument oder im Hauptdokument ausführen. Erstellen Sie mit dem Ellipsenwerkzeug zwei Ellipsen, eine kleiner als die andere, wie in der Abbildung unten gezeigt. Verwenden Sie die folgenden Farben: #FF8A02, #FFC801. Verschmelzen Sie beide Ebenen zu einer neuen Ebene namens "Feuer". Dann platzieren Sie es direkt hinter der "Rocket" -Ebene. Wenden Sie dann eine 9-Pixel-Gaußsche Unschärfe an und verwenden Sie die Free Transform Controls, um das Feuer ein wenig zu verzerren und es schmaler zu machen.

Sterne Hintergrund

Schritt 18 - Erstellen Sie eine benutzerdefinierte Pinselvorgabe

Öffnen Sie die Sternpinsel aus den Voreinstellungen und öffnen Sie dann das Pinselvoreinstellungen-Bedienfeld(F5).

Wählen Sie unter Pinselspitzenform den 50px-Stern aus und ändern Sie seine Größe in 25px, aktivieren Sie das Kontrollkästchen Abstand und legen Sie den Wert auf 300% fest.

Unter Scattering stellen Sie Scatter auf 1000% Control: Pen Pressure (falls Sie ein Grafiktablett haben) Count:1 und Count Jitter:100%.

Stellen Sie unter Farbdynamik den Vordergrund-/Hintergrund-Jitter auf 100% ein.

Stellen Sie schließlich die Vordergrundfarbe auf: #E1F5FF und die Hintergrundfarbe auf #FFFFFF und malen Sie auf einer neuen Ebene direkt über der Ebene "Sky". Sie können die Deckkraft der Ebene "Sterne" reduzieren, um sie etwas weniger intensiv zu machen.

Heißluftballon

Schritt 19 - Erstellen der Grundformen

Die zweite zusätzliche Illustration unseres Designs wird mir ein schöner Heißluftballon sein. Erstellen Sie ein neues Dokument mit dem Namen "Balloon" 400px x 600px und füllen Sie es mit einer blauen #476492 Hintergrundebene. Erstellen Sie dann mit dem Zeichenstift-Werkzeug mehrere Formen wie Gänseblümchenblätter, um die Ballonform zu erstellen.

Schritt 20 - Ballonkorb

Zeichnen Sie mit dem Zeichenstift-Wwerkzeug eine Form ähnlich dem ersten Screenshot des Bildes unten, und zeichnen Sie dann mit dem Rechteck-Werkzeug zwei diagonale Balken daneben und einen Querbalken. Zeichnen Sie mit dem Zeichenstift-Werkzeug einen ganz einfachen Korb und geben Sie ihm mit dem Ellipse-Werkzeug etwas Tiefe.

Schritt 21 - Färben des Ballons

Ändern Sie nun die Hintergrundfarbe der Ballonebenen in #FFE305 #D00000 und #0162A7. Wählen Sie dann den mittleren Abschnitt aus und wenden Sie einen Ebenenstil > Verlaufsüberlagerung mit einem reflektierten Schwarz-Weiß-Verlauf an. Ändern Sie den Farbverlaufsmischmodus auf Überlagern und spielen Sie mit dem Winkel, damit er ein wenig holprig aussieht. Wenden Sie dann einen inneren Schattenstil an, indem Sie die im Bild unten gezeigten Werte verwenden. Wichtig ist die Deckkraft, sie sollte etwa 50% betragen. Kopieren Sie den Ebenenstil und wenden Sie ihn auf alle anderen Formen an. Falls die Schattierung nach dem Anwenden nicht gut aussieht, doppelklicken Sie auf den Verlaufsüberlagerungseffekt und klicken und ziehen Sie über die Schattierung, um sie zu verschieben.

Schritt 22 - Färben des Korbes.

Ändern Sie die Farbe der korbbezogenen Ebenen in Braun: #874E21 und fügen Sie den Ebenenstil des vorherigen Schritts ein. Verwenden Sie für die interne Ellipse eine dunklere Farbe: #291700. Und das ist es! Führen Sie alle Ebenen zusammen und verwenden Sie die zum Abwedler-/Nachbelichter-Werkzeuge, um Schatten und Lichter hinzuzufügen.

Schritt 23 - Platzieren der Ballons

Kopieren Sie die Sprechblase und fügen Sie zwei Kopien in den zweiten Abschnitt unseres Dokuments ein, eine größer als die andere. Wählen Sie die kleinere Sprechblase aus und wählen Sie mit dem Lasso-Werkzeug die eigentliche Sprechblase aus. Drücken Sie dann Befehl + U, um die Werte für die Farbtonsättigung anzupassen und sie nach Belieben zu ändern. Außerdem können Sie eine gewisse Schärfentiefe hinzufügen, indem Sie den zweiten Ballon ein wenig verwischen.

Wolken

Schritt 24 - Zeichnen der Wolken

Wenn Sie mit dem Hintergrunddesign vorankommen, ist es an der Zeit, unserem Himmel einige Wolken hinzuzufügen. Erstellen Sie ein neues Dokument mit dem Namen "Clouds" in beliebiger Größe und füllen Sie es mit der gleichen Hintergrundfarbe wie die "balloon"-Datei: #486493. Zeichnen Sie dann mit dem Zeichenstift-Werkzeug einige weiße Wolken, wie in der Abbildung unten gezeigt.

Schritt 25 - Wolkenstile

Wenden Sie auf die Wolkenebenen einen Ebenenstil > Verlaufsüberlagerung mit diesen Farben an: #D1D7E7 - #FFFFFF Winkel:0 Grad und eine innere Leuchtfarbe: #BBD5D6 Mischmodus: Normal, die Größe hängt von der Größe Ihrer Wolken ab. m mit 6px.

Fügen Sie in Abschnitt 2 unseres Hauptdokuments hinter den Ballons einige Wolken hinzu, wenn Sie der Landschaft etwas Tiefes hinzufügen möchten, um einige entfernte Wolken ein wenig zu verwischen.

Schritt 26 - Mehr Wolken

Fügen Sie in Abschnitt 3 des Hauptdokuments weitere Wolken neben dem Horizont hinzu, ändern Sie die Farben ein wenig, verwenden Sie für das Innere Glühen #FFFFFF und für die Verlaufsüberlagerung: #DBE1F1 - #FFFFFF. Sie sollten so etwas wie das Bild unten erhalten.

Schritt 27 – Zeit für eine Pause

Wir haben gerade den Himmel fertig gestellt, denken Sie daran, wichtige Elemente nicht neben den Rand zu legen und alle Ebenen zu organisieren. Wir sind auf halbem Weg, es ist eine gute Zeit, einen Kaffee zu trinken!

Berge

Schritt 28

Fügen wir die Berge hinzu, diesmal arbeite ich direkt am Hauptdokument und zeichne mit dem Zeichenstift-Werkzeug eine bergähnliche Form, wie in der Abbildung unten gezeigt. Wenden Sie dann einen Ebenenstil > Verlaufsüberlagerung mit den folgenden Farben an: #557200 - #88B707 und stellen Sie den Winkel so ein, wie es für Sie besser passt, in diesem Fall 99 Grad. Dann duplizieren Sie den Berg, platzieren ihn hinter dem ersten Berg und machen ihn etwas größer und ändern die Farben seines Verlaufs-Overlays auf: #415800 - #8AB00B, um ihn etwas dunkler zu machen.

Schritt 29 - Licht und Schatten

Erstellen Sie eine neue Ebene über dem Big Mountain und nennen Sie sie "Shadows" mit einem großen weichen Pinsel und dieser Farbe: #527300 male einige Schatten. Dann Befehl / Strg- Klicken Sie auf die Bergebene, um eine Auswahl zu erstellen, drücken Sie dann Befehl / Strg + Umschalt + I, um die Auswahl umzukehren und die Auswahl aus der Ebene "Schatten" zu löschen. Wiederholen Sie den Vorgang, indem Sie mit einem hellgrünen Pinsel eine Ebene namens "Lights" erstellen, um den Bergen einige Lichter hinzuzufügen.

Bäume

Schritt 30 - Zeichnen der Bäume

Zeichnen Sie mit dem Zeichenstift-Werkzeug den Baumstamm und einige Äste. Zeichnen Sie dann auf einer neuen Ebene eine stilisierte Form mit den Blättern. Fügen Sie auf der Stammebene einen Verlaufsüberlagerungsebenenstil mit diesen Farben hinzu: #574E00, #957800 Der Winkel hängt stark von Ihrer Form ab. Verwenden Sie für die Blätter die folgenden Farben für die Verlaufsüberlagerung: #577E01, #8DDA00. Fügen Sie dann weitere Blätter an kleinen Büschen vor den Zweigen hinzu.

Erstellen Sie mehrere verschiedene Formen und fügen Sie, wenn Sie möchten, eine kleine unscharfe dunkle Ellipse an der Basis jedes Baums hinzu. Rastern Sie jeden Baum und gehen Sie vorwärts.

Schritt 31 - Platzieren der Bäume auf dem Hintergrund

Platzieren Sie die Bäume über den Bergen und über dem grünen Feld auf den Abschnitten 3 und 4 unseres Hauptdokuments, machen Sie die Bäume am unteren Rand des Bildes größer als die neben den Bergen, um eine Tiefenschärfe-Illusion zu erzeugen, außerdem verwischen kleinste Bäume ein wenig.

Verwenden Sie schließlich die Abwedler-/Nachbelichter-Werkzeuge bei den größten Bäumen, um die Intensität der Schatten zu erhöhen.

Schritt 32 - Beenden des Hintergrunds

An dieser Stelle haben Sie ein schönes illustratives Hintergrunddesign. Legen Sie alle mit dem Hintergrund verbundenen Ebenen in einen Ordner mit dem Namen "Hintergrund".

Seitentitel (Logo)

Schritt 33 - Seitentitel

Fügen wir den Seitentitel hinzu, indem wir mit dem Type Tool zwei Textebenen hinzufügen, auf der ersten Art "Webdesign" und auf der zweiten: "Tutsplus" (Natürlich können Sie diese Wörter durch Ihre eigenen ersetzen). Stellen Sie dann im Zeichenfeld die Schriftart auf Futura Book (Sie können jede andere verwenden) Für die erste Zeile setzen Sie die Größe auf 42pt, Kerning:0pt, markieren Sie die Option All Caps und setzen Sie die Vordergrundfarbe auf White #FFFFFF. Für die zweite Zeile verwende ich auch Futura Book, Size 18pt und 1250pt of Kerning, setze die Vordergrundfarbe auf #FFD001 und markiere auch die Option All Caps.

Schritt 34 - Details zum Seitentitel

Zeichnen Sie mit dem Linie-Werkzeug eine blaue Linie (#9AA4D9), fügen Sie einen weißen Outer Glow-Effekt hinzu und rastern Sie die Linie (verschmelzen Sie sie mit einer schwarzen Ebene darüber oder darunter), wenden Sie dann eine Ebenenmaske an > Alle ausblenden und füllen Sie die Maske mit ein schwarz/weiß reflektierter Farbverlauf.

Stellen Sie sicher, dass sich der Titel in der Nähe der zweiten Hilfslinie von links befindet, d. h. 10 Pixel rechts vom 960-linken Rand.

Navigationsleiste

Schritt 35 - Navigationshintergrund

Zeichnen Sie mit dem Rechteckwerkzeug ein schmales weißes Rechteck im oberen rechten Winkel des Abschnitts 1, setzen Sie den Füllwert auf 25% und fügen Sie dann eine weiße 1-Pixel-Kontur hinzu, Deckkraft: 50%. Rastern Sie die Ebene, indem Sie sie mit einer schwarzen Ebene darüber oder darunter zusammenführen, fügen Sie eine Ebenenmaske > Alle ausblenden... hinzu und füllen Sie sie mit einem reflektierten Schwarz / Weiß-Verlauf. Versuchen Sie, so etwas wie den unteren Rand des Bildes unten zu erhalten.

Schritt 36 - Navigationslinks

CSS3 ermöglicht es uns, Schriftarten auf unserer Website einzubetten, es gibt einige kostenlose Schriftverzeichnisse, die kostenlose Schriftarten zur Verfügung stellen, die auf unserem Design verwendet werden können, wir werden die schöne Schriftart namens "Bonveno" in die Hand nehmen. Geben Sie die Navigationslinks mit Bonveno, Größe:12pt, Großbuchstaben und Vordergrund: Weiß ein. Wählen Sie den HOME-Link aus und markieren Sie ihn mit dem gelben #FFCF00. Fügen Sie einen lehrreichen Text hinzu: "Jump to" mit bonveno, Größe 8px und grauem Vordergrund.

Schritt 37 – Details zur Navigationsleiste

Um einen schöneren Hintergrund zu haben, duplizieren Sie die Ebene "Nav" und verschieben Sie die Kopie um ein paar Pixel nach unten links. Ändern Sie schließlich die Deckkraft jeder Ebene auf 50%. Legen Sie alle navigationsbezogenen Ebenen in einen Ordner mit dem Namen "Navigation".

Schritt 38 - Hinzufügen von Effekten zum Titel

Um dem Site-Namen mehr Nachdruck zu verleihen, wählen Sie das große Wort aus und wenden Sie eine subtile Verlaufsüberlagerung (#C5C5C5 - #FFFFFF) und einen kleinen Schlagschatten (Abstand und Größe 2 px) an. Wenden Sie den kleinen Schlagschatten auf die zweite Zeile an sowie.

Begrüßungstext

Schritt 39 - Fügen Sie den Titel hinzu

Fügen wir den Begrüßungstext hinzu, wir beginnen mit dem Hinzufügen des Titels. Da es sich bei den Titeln um reinen Text handeln sollte, verwenden Sie die Bonveno-Schriftart und den gelben Vordergrund (#FFCF00). Wenden Sie den im vorherigen Schritt gezeigten Schlagschatten an. Zögern Sie nicht, mehrere Leitfäden zu verwenden, um Ihren Inhalt zu markieren. In diesem Fall erstelle ich Leitfäden 10 px über und unter dem Begrüßungstitel, um mir beim Hinzufügen des Absatztextes und seines Hintergrunds zu helfen.

Schritt 40 - Hintergrund der Willkommensbox

Verwenden Sie das Rechteck-Werkzeug, um eine Box als Hintergrund für den Begrüßungstext zu zeichnen, verwenden Sie diese Farbe #0E1122 für die Box und verringern Sie ihre Füllung auf 25%. Fügen Sie außerdem eine 1px-Kontur mit dieser Farbe #4E6575 hinzu.

Schritt 41 - Gestalten Sie den Texthintergrund

Rastern Sie die Box (verschmelzen Sie sie mit einer leeren Ebene), wenden Sie dann eine Ebenenmaske an und füllen Sie sie mit einem Schwarz-Weiß-Verlauf. Sie können einen großen weichen Pinsel verwenden und über die Ebenenmaske malen, um einige Bereiche auszublenden, damit die Überblendung weicher aussieht. Schließlich, genau wie bei der schlechten Navigation, duplizieren Sie den Boxhintergrund und verschieben Sie ihn um einige Pixel nach unten links, um einen Stil zu erstellen, der dem unten im Bild unten gezeigten ähnelt.

Schritt 42 - Fügen Sie den Begrüßungstext hinzu

Zeichnen Sie mit dem Textwerkzeug ein Feld mit Absatztext und füllen Sie es mit Lipsum-Text, verwenden Sie "Lucida Sans - Regular" als Schriftart, Größe 11px, Zeilenabstand:19pt und Vordergrundfarbe: Weiß. Schließlich, da CSS3 es uns ermöglicht, diese Art von Details hinzuzufügen, fügen Sie dem Textabsatz einen 2px schwarzen Schlagschatten hinzu.

Schritt 43 - Social-Media-Links

Verwenden Sie die gleichen Anweisungen wie in den Schritten 40 und 41, um einen Hintergrund zu erstellen, jedoch diesmal kleiner. Öffnen Sie die Social Network Icons aus den Assets und fügen Sie die folgenden Icons ein: RSS, Twitter und Facebook, Sie können gerne die Icons Ihrer Wahl hinzufügen. Schreiben Sie schließlich mit der Schriftart "Bonveno" das Wort "Network" als Titel und verwenden Sie "Helvetica" (Arial funktioniert auch gut), um einige weiße Zahlen von Abonnenten, Followern und Likes hinzuzufügen.

Schritt 44 – Überprüfung der Willkommensseite

An dieser Stelle haben wir den Abschnitt 1 abgeschlossen, der die eigentliche Willkommensseite (oder Homepage) ist. Es ist ein guter Zeitpunkt, um zu überprüfen, ob alles in der richtigen Position ist, versuchen Sie, das Gleichgewicht mit dem Tempo der Weißen zu halten, z. B. der Abstand zwischen dem linken Rand und dem Begrüßungstext und dem rechten Rand mit den Netzwerksymbolen ist gleich. Die Arbeit mit weißem Raum (der natürlich nicht wörtlich "weiß" ist) ist wirklich kompliziert.

Abgesehen davon, dass alle Ihre Ebenen organisiert sind, befindet sich unten im Bild unten eine Ordnerstruktur, die ich erstellt habe. Einer der wichtigeren Ordner hier ist "Nav". Ich habe vor, eine schwebende Navigation mit JavaScript zu erstellen, aber für Mock-Up-Zwecke müssen wir sie einige Male duplizieren, um zu sehen, wie die anderen "Seiten" oder Abschnitte aussehen.

Über uns

Schritt 45 - Abschnitt über uns

Wiederholen Sie für diesen Abschnitt grundsätzlich den Vorgang der Schritte 39-42, platzieren Sie die Ebenen jedoch auf der rechten Seite des zweiten Abschnitts und ändern Sie den Titel in "Über uns". An dieser Stelle hatte ich geplant, eine Registerkartenfunktion hinzuzufügen, aber die Registerkartenpositionen nach unten zu ändern, indem Sie die Schriftart "Bonveno" verwenden, um die Registerkarten unter dem Absatz "Über uns" zu schreiben. Verwenden Sie diese Vordergrundfarbe für die Registerkarten: #C3DFFF und Weiß für die ausgewählte Registerkarte. Zeichnen Sie schließlich mit dem Polygon-Werkzeug ein himmelblaues #D5E5F2-Dreieck, um die Auswahl zu markieren.

Schritt 46 - Duplizieren Sie die Navigationsleiste

Um zu sehen, wie es aussieht, duplizieren Sie den Ordner "Nav" des vorherigen Abschnitts, markieren Sie jedoch das Wort "Über uns" in den Navigationslinks. Stellen Sie sicher, dass sich der gesamte Inhalt zwischen den Rändern des Abschnitts befindet, und organisieren Sie die Ebenen in Ordnern.

Portfolio

Schritt 47 - Portfolio-Bereich

Wiederholen Sie die Anweisungen der vorherigen Schritte, um eine Inhaltsbox zu erstellen, aber verwenden Sie anstelle von Gelb für den Titel Blau: #336A91 und verwenden Sie die folgende Farbe für den Hintergrund der Box: #7FA5D2 und einen weißen Konturebenenstil.

Schritt 48 – Platzhalter für Portfolioelemente

Für diesen Abschnitt werden wir eine sehr einfache Portfolio-Galerie entwerfen, indem wir mit dem Rechteck-Tool einige hellblaue Quadrate links neben der kürzlich erstellten Inhaltsbox zeichnen. und ein großes Rechteck auf der linken Seite. Fügen Sie jedem Feld einen Ebenenstil > Kontur, 1px und Weiß hinzu. Zeichnen Sie mit dem Rechteckwerkzeug kleine Quadrate unten rechts auf dem großen Quadrat, die wie Miniaturansichten aussehen, um eine Art Übergangseffekt zu steuern, und fügen Sie dann über jedem Quadrat einen Dummy-Text hinzu, um anzuzeigen, welcher Inhalt dort platziert werden soll. Sie können tatsächlich Beispielbilder verwenden, wenn Sie möchten.

Schritt 49 - Soziales Portfolio

Fügen Sie nach dem gleichen Verfahren wie in Schritt 43 einige Links für das Social Media-Portfolio wie Flickr oder LinkedIn hinzu. Verwenden Sie für den Titel die Schriftart "Bonveno" und diese Farbe: #034D8A.

Schritt 50 – Überarbeiten Sie, dass alles vorhanden ist

Duplizieren Sie den Ordner "Nav" noch einmal und markieren Sie das Wort "Portfolio". Stellen Sie sicher, dass sich alles innerhalb der Grenzen von Abschnitt 3 befindet, und organisieren Sie Ihre Ebenen.

Kontaktieren Sie uns

Schritt 51 - Kontakthintergrund und Etiketten

Wir sind fast fertig, jetzt fügen wir einen Container für das Kontaktformular hinzu. In diesem Fall sollte das Rechteck grün #67A802 und die Kontur heller grün #B8D942 sein. Der Titel des Abschnitts sollte "Kontakt" lauten und ich verwende einen weißen Vordergrund, um den Kontrast zum Hintergrund zu erhöhen. Blenden Sie die Box ein wenig aus und duplizieren Sie sie, um den Doppellinieneffekt aus den vorherigen Inhaltsboxen zu erstellen.

Schließlich verwenden Sie weißen Vordergrund und eine kleinere "Bonveno"-Schriftart, um die Etiketten des Kontaktformulars zu schreiben. Wenden Sie den Schlagschatten, den wir für die Titel verwenden, auch auf diese Labels an.

Schritt 52 - Zeichnen Sie die Eingabefelder

Zeichnen Sie mit dem Werkzeug für abgerundetes Rechteck (5px Radius) die folgenden Formen, die die eigentlichen Eingabebereiche unseres Kontaktformulars werden. Wenden Sie dann die unten gezeigten Ebenenstile Inner Shadow, Color Overlay (#4B6800) und Kontur (#A8D02F) an.

Schritt 53 - Eingabetext hinzufügen

Mit der Schriftart "Bonveno" geben Sie einige Dummy-Wörter in die Eingabefelder ein. Ich verwende diese Farbe als Vordergrund: #AFD437. Unter den Eingabefeldern können Sie auch eine Telefonkontaktlinie hinzufügen (Sie können die Informationen nach Belieben ändern).

Schritt 54 - Kontakttaste

Schließlich fügen wir die Kontaktschaltfläche hinzu, indem wir mit dem abgerundeten Rechteck (5px Radius) eine Schaltfläche zeichnen. Wenden Sie einen Schlagschatten, eine Verlaufsüberlagerung (#B17F02 - #FFD101) und einen Konturstil (#FFDB04) an.

Schritt 55 - Text der Kontaktschaltfläche

Für den Text des Buttons verwende ich die Schriftart "Futura Black", aber Sie können auch jede andere Schriftart verwenden. Dann wende einen Inner Shadow, ein Color Overlay (#564100) und eine Kontur (#F0C401) auf die Textebene an. Sie sollten unten im Bild unten etwas sehr Ähnliches haben.

Schritt 56 - Überarbeiten Sie den Kontaktbereich

Nachdem Sie eine neue Instanz des Navigationsmenüs dupliziert haben, markieren Sie diesmal das Wort "Kontakt". Stellen Sie schließlich sicher, dass sich der gesamte Inhalt der Kontaktseite innerhalb der Grenzen des vierten Abschnitts des Designs befindet, und organisieren Sie Ihre Ebenen.

Abschluss

Und das ist es! Ich hoffe, Ihnen hat dieses Tutorial gefallen, jetzt sind Sie an der Reihe, Ihr eigenes illustratives, einseitiges Webdesign auszuprobieren!