1. Design & Illustration
  2. Interface Design

Erstellen eines Website-Designs zum Thema Aquarell mit Photoshop

by
Read Time:16 minsLanguages:

German (Deutsch) translation by Katharina Grigorovich-Nevolina (you can also view the original English article)

Aquarell im Grafikdesign ist in den letzten Jahren sehr trendy geworden. Viele Websites und unglaubliche Designer verwenden diesen Stil und bringen ihn auf eine andere Ebene. Selbst wenn man weiß, dass die Technik für diese Art von Design wichtig ist, geht es mehr um Kreativität und Experimentieren. Sie lernen, wie Sie den Kunstverlaufspinsel verwenden und ihn mit benutzerdefinierten Aquarellpinseln kombinieren, um ein schönes Hintergrund-Header-Bild und mehr zu erstellen. Lassen Sie uns anfangen!

Endgültige Bildvorschau

Schauen Sie sich das Bild an, das wir erstellen werden.

Tutorial Details

  • Programm: Adobe Photoshop CS4
  • Schwierigkeit: Mittelstufe - Fortgeschritten
  • Geschätzte Fertigstellungszeit: 4 Stunden
Final ClickFinal ClickFinal Click

Video-Tutorial

Unser Video-Editor Gavin Steele hat dieses Video-Tutorial erstellt, um dieses Text + Bild-Tutorial zu ergänzen.

Bevor Sie beginnen

Dieses Tutorial sollte nicht als Schritt-für-Schritt-Anleitung befolgt werden. Viele der Schritte beschreiben den kreativen Prozess, der bei der Erstellung dieses bestimmten Designstils erforderlich ist. Auch wenn dies kein grundlegendes Tutorial ist, kann es von jedem Photoshop-Benutzer problemlos befolgt werden. Ich überspringe jedoch die Erläuterung sehr grundlegender Anweisungen wie das Hinzufügen eines Handbuchs oder das Erstellen einer Layermaske.

Als Vollzeit-Webdesigner habe ich Erfahrung im Umgang mit Kunden, bei denen ein Design in wenigen Tagen oder sogar Stunden fertiggestellt werden muss. Wenn Ihnen die Zeit ausgeht, ist jede Minute kostbares Gold. Deshalb werde ich versuchen, Ihnen etwas zu geben Zeitsparende Tipps, die später nützlich sein werden.

Nicht alle Designer kennen CSS. Wenn Sie einer von ihnen sind, müssen Sie von Anfang an wissen, dass Sie etwas entwerfen, das in Scheiben geschnitten und in Stücke geschnitten wird. Wiederholte Hintergründe, Textebenen und große Bildhintergründe müssen perfekt im Design platziert werden, um unerwünschte Änderungen zu vermeiden.

Stellen Sie sich vor, was Sie erreichen möchten

Es empfiehlt sich, mit einer Skizze oder einem Drahtmodell zu beginnen, um eine Vorstellung davon zu erhalten, wo die Elemente auf der Leinwand platziert werden sollen. Hier ist mein grober Entwurf:

Für dieses Design werde ich eine feste Breite und mittig ausgerichtete Elemente wählen. Beginnen wir mit dem Entwerfen!

Schritt 1 - Einrichten der Vorlage

Wir werden eine PSD-Vorlage von 960 Grid System herunterladen und die 12-Spalten-Vorlage öffnen. Das ist nicht obligatorisch. Sie können mit der Erstellung eines Dokuments mit einer Breite von 960 Pixel beginnen und einige Hilfslinien darauf zeichnen. Das Herunterladen der Vorlage spart jedoch einige Minuten. Öffnen Sie es und speichern Sie es unter einem beliebigen Namen.

Sie müssen die Breite des Bildes erweitern, um zu sehen, wie Ihr Design bei größeren Auflösungen aussieht. Gehen Sie dazu zu Bild > Leinwandgröße und stellen Sie den Breitenwert von der Mitte bis zu den Seiten auf 1420 Pixel ein. Ich lege alle integrierten Layers der Vorlage in einem Ordner mit dem Namen "Vorlage" ab.

Schritt 2 - Hauptwiederholung-Hintergrund

Finden Sie eine gute Papierstruktur, ich benutze diese. Dieses Bild wird auf dem gesamten Seitenhintergrund wiederholt, muss jedoch zuvor bearbeitet werden. Wählen Sie mit dem Rechteckigen Auswahlwerkzeug ein Quadrat aus der Papierstruktur aus, kopieren Sie den Bereich und fügen Sie ihn in ein neues Dokument ein (Sie können Zwischenablage aus der Dropdown-Liste Voreinstellung auswählen). Gehen Sie dann zu Filter > Andere > Versatz und ändern Sie dort die horizontalen und vertikalen Werte, um den Versatz der Ränder nahe an der Mitte zu platzieren. Als nächstes fixieren Sie mit dem Klon-Werkzeug die harten Linien in der Mitte. Wenn Sie mit dem Klonen fertig sind, wählen Sie Alle (Befehl + A) und kopieren Sie das bearbeitete Bild in die Zwischenablage.

Schritt 3 - Richten Sie den Wiederholungshintergrund ein

Fügen Sie das Blatt Papier ein und fügen Sie es in das Hauptdokument ein. Fügen Sie mit den Steuerelementen für die freie Transformation die rechte Seite des Bildes über der mittleren Hilfslinie und die linke Seite über der ersten Hilfslinie von links und den oberen Rand ein, der mit der Oberseite des Dokuments übereinstimmt.

Sobald Sie das erste Stück Papier perfekt platziert haben, duplizieren Sie es und platzieren Sie es rechts. Auf diese Weise decken Sie den tatsächlichen 960px-Bereich ab. Duplizieren Sie dann die Papierstücke zweimal links und rechts von den 960px-Grenzen, um die gesamte Leinwandoberfläche abzudecken. Nehmen Sie dann die 4 Papierlayers, duplizieren Sie sie vertikal und platzieren Sie sie unter den vorhandenen. Führen Sie dies so oft wie nötig aus, bis Sie bedecken die gesamte Leinwand. Legen Sie schließlich alle Papierlayers in einem Ordner mit dem Namen "Hintergrundtextur" ab. Wenn Sie das zur einfacheren Bearbeitung wünschen, duplizieren Sie es und führen Sie die Gruppe zusammen, und verbergen Sie dann den ursprünglichen Ordner.

Schritt 4 - Header Hintergrund

Fügen wir nun den Hintergrund der Kopfzeile hinzu. Dazu verwende ich dieses Bild einer Berglandschaft. Wählen Sie mit dem Auswahlrechteck einen großen Teil des Bildes aus, fügen Sie es in das Hauptdokument ein und benennen Sie das Layer "Landschaft".

Jetzt geben wir diesem Bild einen gefälschten HDR-Stil, der es eher wie ein Gemälde als wie eine Fotografie aussehen lässt. Dupliziere es und drücke Befehlstaste + I, um die Farben zu invertieren, setze die Sättigung im Bedienfeld Farbton/Sättigung (Befehl + U) auf -100 und ändere dann den Mischmodus auf Überlagern. Schließlich wählen Sie beide Layers "Landschaft" und "Landschaftskopie" in einer aus.

Schritt 5 - Verwenden des Kunstgeschichtlichen Pinsels

Jetzt verwenden wir den Kunstgeschichtlichen Pinsel, damit unser Bild wie ein Gemälde aussieht. Wählen Sie den Kunstgeschichtlichen Pinselaus, indem Sie im Werkzeugbedienfeld auf das Verlaufspinsel-Werkzeug (Y) klicken und es gedrückt halten. Damit diese wunderbare Funktion funktioniert, müssen Sie zuerst einen Snapshot erstellen, mit dem Sie arbeiten können. Gehen Sie dazu zu Fenster > Geschichte, um die Geschichtsleiste anzuzeigen, und klicken Sie unten auf die Schaltfläche Neuer Snapshot. Wählen Sie dann im Optionsfeld eine unregelmäßige Pinselspitze (ich verwende eine 36-Pixel-Kreidespitze) und stellen Sie den Modus auf Normal, die Opazität auf 25%, den engen Stil, den Bereich 25 Pixel und die Toleranz auf 0% ein. Übermalen Sie dann das Layer "Landschaft". Sie werden sehen, wie sich das Bild ziemlich leicht in ein Gemälde verwandelt.

Danach müssen Sie nur noch die Werte für Opazität, Fläche und Pinselspitze entsprechend Ihren Anforderungen ändern, z.B. Ich verwende eine größere Pinselspitze und vergrößere ihre Fläche, um die Ränder zu übermalen.

Schritt 6 - Aquarelllayermaske

Erstellen Sie eine Layermaske > Alle auf das Layer "Landschaft" anzeigen. Jetzt werden wir versuchen, das Bild mit einigen Aquarellpinseln besser mit dem sich wiederholenden Hintergrund zusammenzuführen. Ich benutze dieses Aquarellpinsel-Set von mcbadshoes. Halten Sie dieses Pinselset bereit, da wir es während des gesamten Vorgangs verwenden werden.

Nehmen Sie einen der Pinsel, stellen Sie die Vordergrundfarbe auf Schwarz und malen Sie einige Markierungen direkt über die Layermaske, was wichtig ist. Diese Pinsel haben unterschiedliche Opazitäten, sodass Sie damit spielen können. Wenn Sie einen anderen Pinselsatz verwenden, müssen Sie die Werte für Pinselopazität und -fluss jedes Mal ändern, wenn Sie eine Markierung malen. Die Idee dieses Schritts ist, die Bildränder mit dem Papierhintergrund einzuschmelzen und zu versuchen, Ihre Aquarellmarkierungen mit einigen Flecken im Bild über den gesamten Rand zu platzieren.

Es spielt keine Rolle, ob sich die Landschaft außerhalb der Vorlagenhandbücher befindet. Sie können den Header beim Codieren als großes Hintergrundbild aufteilen.

Schritt 7 - Fügen Sie einen oberen Farbverlauf hinzu

Um die Codierung etwas zu erschweren (nur ein Scherz), fügen wir ein vertikales Gradientsfüllungslayer (#96AFCE - #FFFFFF) hinzu und stellen den Mischmodus auf Lineares Brennen ein.

Schritt 8 - Inhaltshintergrund

Stellen Sie mit dem abgerundeten Rechteck-Werkzeug den Eckenradius im Optionsfeld auf 15 Pixel ein und zeichnen Sie ein Rechteck von der zweiten Hilfslinie von links zur vorletzten Hilfslinie auf der rechten Seite. Ich benutze diese Hilfslinien oft nur für den Fall, dass ich später einen Schlagschatten oder einen anderen Effekt zum Hintergrund hinzufügen muss. In diesem Fall lassen wir das abgerundete Rechteck unverändert, ändern lediglich den Füllwert auf 35% und fügen einen 1-Pixel-Inside-Stroke-Stil hinzu. Wenn Sie die Opazität der Füllung ändern, behalten die Layereffekte viel Farbe bei, sodass der Strich wirklich gut aussieht und Sie dennoch etwas Aquarellhintergrund durch die Füllung lassen können. Sie können dieses Layer "Content Bg" nennen.

Es ist wichtig, jeden Stricheffekt innerhalb des Objekts festzulegen. Wenn Sie einen Strich außerhalb hinzufügen, wird die Dimension des Elements vergrößert, und das möchten wir nicht.

Schritt 9 - Denken Sie wie ein Codierer

Sogar unser durchscheinender Hintergrund sieht ziemlich gut aus, die Codierung wird ein bisschen schwierig, aber nicht unmöglich. Es ist einfacher, einen einfarbigen Hintergrund als einen transparenten zu codieren. Duplizieren Sie also das abgerundete Rechteck und platzieren Sie die Kopie darüber. Stellen Sie die Füllung wieder auf 100% und verbergen Sie den Strichstil. Fügen Sie nun Layermaske > Alle ausblenden hinzu und füllen Sie sie mit einem linearen Schwarz-Weiß-Gradient, um die Oberseite des neuen abgerundeten Rechtecks auszublenden. Sie können sich mit ein paar zusätzlichen horizontalen Hilfslinien bedienen.

Wie funktioniert es? Dieser Inhalt muss vertikal scrollbar sein, damit der sich wiederholende weiße Hintergrund leicht nach unten erweitert werden kann. Lassen Sie es uns versuchen!. Nehmen Sie das Direktauswahl-Werkzeug (A) und wählen Sie die unteren Punkte des Vektorrechtecks aus. Bewegen Sie dann mit den Cursorn die Punkte ein paar Pixel nach unten. Es sollte gut funktionieren.

Schritt 10 - Seitennavigation

Fügen Sie mit dem abgerundeten Rechteck-Werkzeug oben im Design ein blaues Rechteck (#3F5060) hinzu, setzen Sie den Füllwert auf 50% und fügen Sie ihm einen 1px blauen (#3F5060) Strich-Layerstil hinzu. Geben Sie mit dem Textwerkzeug die Seiten über der Navigationshintergrundlayer ein. Diesmal verwende ich die Schriftart "Futura Std", kann sie jedoch jederzeit ändern.

Malen Sie als nächstes eine kleine weiße Aquarellmarkierung als Hover-Effekt hinter den Text und ändern Sie die Farbe des ausgewählten Wortes in dunkelblau (#223A54).

Schritt 11 - Schmelzende Hintergründe

Als nächstes rastern Sie das Layer "Content Bg" oder konvertieren sie in ein Smart-Objekt, fügen Sie eine Layermaske hinzu > Alle anzeigen und malen Sie mit einem schwarzen, weichen Pinsel einige Punkte über die Layermaske. Dieser Prozess schmilzt das "Content Bg" mit der Aquarelllandschaft und verleiht dem Design ein poliertes Aussehen.

Schritt 12 - Seitentitel

Fügen wir den Seitentitel hinzu. Ich verwende die Schrift "Futura Std". Ich verwende diese Farben für den Typ: #F2F6FC und #E1EDFF. Malen Sie nun für den Hintergrund eine einzelne blaue (#112C37) Aquarellmarke in ein Layer unter den Logolayers und ändern Sie den Mischmodus in Weiches Licht. Es ist eine gute Idee, unsere Layers in Ordnern zu organisieren, damit wir alle beteiligten Layers in einem Ordner mit dem Namen "Logo" ablegen.

Schritt 13 - Weitere Aquarellmarken

Um die visuelle Wirkung des Hintergrunds zu erhöhen, fügen Sie weitere Aquarellmarkierungen in mehreren Farben hinzu und platzieren Sie sie alle über dem oberen Rand direkt über dem Layer "Landschaft". Ändern Sie dann den Mischmodus in Überlagern. Fügen Sie zum Schluss eine große himmelblaue (#51D3D3) Aquarellmarkierung in ein neues Layer direkt über "Landschaft" und unter "Inhalt B.g" ein. Ändern Sie dann auch den Mischmodus in "Überlagern".

Schritt 14 - Wie wäre es mit dem Hinzufügen eines tatsächlichen Pinsels?

Die Verwendung realer Objekte im Webdesign ist sehr im Trend. Wir werden unserem Design ein aktuelles Pinselbild hinzufügen. Öffnen Sie dieses Bild, extrahieren Sie einen Teil des Pinsels und fügen Sie ihn in das Hauptdesign über der Kopfzeile ein, wobei sich die Spitze nahe der im vorherigen Schritt erstellten Aquarellmarke befindet. Sie können eine Layermaske und einen kleinen, weichen, schwarzen Pinsel verwenden, um die Pinselspitze zu federn.

Schritt 15 - Fügen Sie einen realistischen Schlagschatten hinzu

Duplizieren Sie das Layer "Pinsel", nennen Sie die Kopie "Buschschatten" und legen Sie sie hinter das Original. Wechseln Sie dann zum Bedienfeld "Farbton/Sättigung" und ändern Sie den Helligkeitswert auf -100. Wenden Sie nun eine Gaußsche Unschärfe mit einem Radius von 4 Pixel an und ändern Sie als nächstes die Opazität auf 50%.

Schritt 16 - Ausweichen und Brennen

Ich verlasse Dodge and Burn immer, nachdem ich den Schatten extrahiert und platziert habe.

Schritt 17 - Über uns Box

Beginnen Sie mit dem Hinzufügen des Textes. Ich verwende Futura Std für den Titel, Tahoma (11 Pixel, Scharfzeichnen: Keine) für den Textkörper und eine graue Linie als Teiler (verwenden Sie das Linienwerkzeug, um ihn zu zeichnen).

Fügen wir ein Feld für den kurzen Text hinzu. Zeichnen Sie ein abgerundetes Rechteck mit einem Radius von 15 Pixel und füllen Sie es mit Grün (#434726). Wenden Sie dann einen Stricheffekt mit derselben Farbe an und ändern Sie den Füllwert auf 50%. Konvertieren Sie anschließend das abgerundete Rechteck in ein Smart-Objekt und fügen Sie ihm eine Layermaske > Alle anzeigen hinzu. Verwenden Sie einen großen, schwarzen, weichen Pinsel und malen Sie die Maske an, um einige Teile des Hintergrunds zu verbergen, die wie in Schritt 11 mit der Aquarelllandschaft verschmelzen.

Schließlich können Sie weitere Details hinzufügen, z. B. eine Aquarellmarkierung hinter dem Text "Über uns", wie unten im Bild unten gezeigt.

Schritt 18 - Einige Details

Dies ist ein absolut optionaler Schritt. Sie können dem Logo und den Titeln einige Layerstile hinzufügen, um den Kontrast zwischen ihnen und dem Hintergrund zu erhöhen. Ich werde es diesmal einfach halten, indem ich nur einen wirklich kleinen Schlagschatten hinzufüge. Außerdem hat mir nicht gefallen, wie der Pinsel hinter der Navigationsleiste aussieht, deshalb werde ich ihn nach vorne ordnen, da das für mich besser aussieht, aber Sie können Ihrem Instinkt folgen und dies nach Ihren Wünschen bearbeiten.

Schritt 19 - Haupt-Ajax-Banner

Oft ist es notwendig, mehr als eine relevante Information auf der Startseite anzuzeigen. Deshalb nehmen wir Ajax in die Hand und erstellen einen Bildschieberegler. Es ist sehr wichtig zu bedenken, dass nicht jedes Design einfach codiert werden kann. Beginnen Sie mit der Recherche auf einigen Websites, auf denen Ajax-Bibliotheken aufgelistet sind, um herauszufinden, welche mit Ihrem Design gut funktionieren können.

In diesem Fall fügen wir ein großes Bild als aktives Banner hinzu, das um acht Spalten der Vorlagenhandbücher platziert ist. Unten finden Sie vier bis fünf quadratische Miniaturansichten der restlichen Banner. Fügen Sie schließlich ein blaues Dreieck (#5D8CB6) hinzu (Sie können es mit dem Polygon-Werkzeug zeichnen), das auf das aktive Banner zeigt.

Tipp: Verwenden Sie echte Bilder und nicht nur Bildplatzhalter.

Bannertext (optional)

Einige vorhandene Bibliotheken bieten die Möglichkeit, Text über das sich ändernde Banner hinzuzufügen. In diesem Fall verwende ich Futura Std Light Condensed für den Titel und Tahoma 11px für den Inhalt. Verwenden Sie ein weißes Rechteck, füllen Sie 50% und 1px weißen Strich als Hintergrund.

Schritt 20 - Hintergrund der Seitenleiste

Gehen wir weiter, die meisten schwierigen Teile des Prozesses sind bereits abgeschlossen, aber es sind noch einige wichtige Bereiche übrig, wie z. B. die Seitenleiste. Wir beginnen mit einem einfachen Hintergrund. Zeichnen Sie mit dem Abgerundetes Rechteck-Werkzeug (Radius 5 Pixel) ein weißes Rechteck, das die leeren 4 Spalten auf der rechten Seite des Hauptbanners abdeckt.

Beachten Sie, dass ich den Hintergrund der Seitenleiste 20 Pixel vom Hauptbanner und 20 Pixel von dem Layer "Content Bg" trenne. Ändern Sie das Fülllayer auf 25% und fügen Sie einen 1px weißen Strich-Layerstil hinzu. Es ist keine weitere Bearbeitung erforderlich, da es mit dem Layer "Content Bg" ziemlich gut zu schmelzen scheint.

Schritt 21 - Hintergrund der empfohlenen Beiträge

Wir haben viel Platz unter dem Bannerbereich, wir werden dort einige vorgestellte Beiträge platzieren. Aber zuerst fügen wir einige pastellfarbene Aquarellmarkierungen in ein neues Layer ein, die offensichtlich über dem Hintergrund des Inhalts liegt. Jede Farbe ist in Ordnung, aber sie muss sehr hell sein, fast weiß.

Schritt 22 - Ein Beitrag

Jetzt werden wir einen einzelnen Beitrag hinzufügen. Verwenden Sie Futura Std Condensed Light für den Titel, Tahoma für den Brief und das Meta sowie eine 1px-Höhenlinie als Teiler. Dies ist überhaupt nicht schwierig. Zeichnen Sie in ein neues Layer und zeichnen Sie eine einzelne blaue Markierung mit einem Aquarellpinsel als Hintergrund für die Kommentare. Geben Sie die Kommentarnummer mit Futura und das Wort "Kommentare" mit Tahoma ein.

Das ist wirklich einfach und schnell, einige Tipps:

  • Verwenden Sie für den Textkörper aufgrund der schwierigen Lesbarkeit niemals Schwarz (#000000). Sie können sich selbst helfen, indem Sie einige Farbrichtlinien für die Textfarben hinzufügen (ich füge sie in die Quelldatei ein) oder das Farbfeldbedienfeld verwenden, auch wenn Sie helfen können selbst mit einem Add-On wie Kuler.
  • Platzieren Sie Ihre Layers immer in Layergruppen (Ordnern) oder intelligenten Objekten, da sie einfacher zu ändern und zu duplizieren sind. Wir werden es jetzt tun, den Ordner duplizieren, in dem Sie Ihren vorgestellten Post-Inhalt abgelegt haben (ich habe ihn "Post" genannt), und ihn dreimal duplizieren und dann die Kopien an ihren jeweiligen Stellen nach einem zweispaltigen Layout unter Verwendung der Vorlagenhandbücher als Referenz platzieren.

Schritt 24 - RSS-Symbol

Es ist Zeit, Inhalte zur Seitenleiste hinzuzufügen, und wir beginnen mit der RSS-Schaltfläche. Laden Sie zuerst diese von TheG-Force handgezeichneten Soziale Symbole herunter. Öffnen Sie das RSS-Symbol, kopieren Sie es und fügen Sie es in das Design ein. Fügen Sie den RSS-bezogenen Text hinzu: E-Mail, Feed-Abonnement, Anzahl der Leser und eine Linie mit einer Höhe von 1 Pixel als Teiler.

Schritt 25 - Suchformular

Fügen Sie zuerst einige Aquarellmarkierungen als Hintergrund hinzu. Zeichnen Sie darüber ein abgerundetes Rechteck (Radius 5 Pixel), das mit der folgenden Farbe gefüllt ist: #1D1D1D. Fügen Sie einen 1px weißen Strich hinzu und setzen Sie den Füllwert auf 50%. Das wird unser Hintergrund für die Sucheingabe sein. Verwenden des Type Werkzeugs und der Suchanweisungen für Tahoma-Schriftarten über das Suchfeld. Laden Sie dieses Aquarell-Symbolpaket dank Tutorial9 herunter und fügen Sie das Lupensymbol als Suchschaltfläche ein. Fügen Sie all dies in eine Gruppe mit dem Namen "Suchen" oder so ein und fahren Sie mit dem nächsten Schritt fort.

Schritt 26 - 125 x 125 Anzeigen

Das Standardformat für kreative Anzeigen ist 125 x 125 Pixel, daher werden einige davon in der Seitenleiste hinzugefügt.

Tipp: Um Zeit zu sparen, können Sie ein Dokument mit einer Größe von 125 x 125 Pixel erstellen und einen schönen Platzhalter für Werbung entwerfen. Anschließend können Sie es in ein Smart-Objekt konvertieren und irgendwo speichern. Sie können es für viele Designs verwenden, ohne es jedes Mal neu gestalten zu müssen. Wenn Sie genügend Zeit haben, finden Sie hier eine Liste mit den meisten Standardanzeigengrößen (über den Anzeigensinn von Google). Erwägen Sie, an einer PSD mit einigen Platzhaltern für sie zu arbeiten?.

Schritt 27 - Twitter

Als großer Fan von Twitter habe ich beschlossen, einen prominenten Link direkt unter den Anzeigen zu platzieren. Fügen Sie einen Aquarellhintergrund hinzu und kopieren Sie das Twitter-Symbol aus der in Schritt 24 beschriebenen Bibliothek. Geben Sie einen Text ein, der sich auf den kleinen blauen Vogel bezieht, wie "Follow me" oder Ihre Follower- und Update-Nummer. Fügen Sie alle diese Layers in eine Gruppe mit dem Namen "Twitter" ein.

Schritt 28 - Ein Fenster mit Registerkarten in der Seitenleiste

Zeichnen Sie mit dem abgerundeten Rechteck-Werkzeug ein weißes Rechteck mit einem grauen Strich von 1 Pixel (#979797) direkt unter dem Bereich "Twitter". Zeichnen Sie nun drei kleinere Rechtecke dahinter. Dies sind die Registerkarten. Zeichnen Sie ein kleines weißes Rechteck zwischen einer der Registerkarten und dem Hintergrund, um eine ausgewählte Registerkarte zu entwerfen.

Schritt 29 - Hinzufügen der Inhalten zu den Registerkarten

Ändern Sie die Hintergrundfarben der nicht ausgewählten Registerkarten. Fügen Sie den Registerkarten einige Titel hinzu. Ich verwende eine mutigere Version der Futura-Schrift. Für den Inhalt werde ich auf der ersten Registerkarte einige aktuelle Beiträge hinzufügen. Wenn Sie möchten, entwerfen Sie den Inhalt für die anderen Registerkarten und legen Sie sie in einem Ordner ab, um Ihr Design zu organisieren.

Schritt 30 - Endlich die Fußzeile

Diese Fußzeile ist sehr einfach. Malen Sie einfach einige zufällige Aquarellmarkierungen mit Pastellfarben. Wiederholen Sie dann die Schritte 8 bis 9, zeichnen Sie ein paar abgerundete Rechtecke und schmelzen Sie sie mit dem Aquarellhintergrund ein. Zum Schluss fügen Sie den Fußzeilentext, eine kleine Navigationsleiste und die Copyright-Informationen hinzu. Außerdem füge ich eine 1px-Linie als Teiler hinzu und wende eine Reflektierte Gradientslayermaske darauf an.

Wenn Sie möchten, können Sie auch eine erweiterte Fußzeile entwerfen.

Schlussfolgerung

Hoffe es hat euch gefallen! Natürlich ist dieses Tutorial nur eine kleine Auswahl dessen, was Sie mit diesem Stil im Webdesign tun können. Sie können gerne mit der Technik experimentieren und uns mit etwas Neuem überraschen!

Final ClickFinal ClickFinal Click
One subscription.
Unlimited Downloads.
Get unlimited downloads