Erstellen eines schäbigen, durchscheinenden Web-Portfolio-Design

Aquarellpinselstriche sind nicht nur ein beliebter Trend im modernen Webdesign, sondern auch erweiterte Transparenzschichten (oder was ich als Transluzenz bezeichne). Das neue Envato-Design hat viele Anerkennung für die Verwendung dieses Effekts erhalten. In diesem Tutorial erfahren Sie, wie Sie einen ähnlichen Effekt erzielen und ihn gleichzeitig mit anderen beliebten Webtrends kombinieren.

Endgültige Bildvorschau

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

Tutorial Details

• Programm: Adobe Photoshop CS3+
• Schwierigkeit: Mittelstufe
• Geschätzte Fertigstellungszeit: 2 Stunden

Schritt 1 - Richten Sie die Vorlage ein

Lassen Sie uns unser Dokument einrichten. Ich neige dazu, meine Websites mit einer festen Breite von 960 Pixel und einer variablen Höhe zu erstellen. Für dieses Tutorial habe ich eine Höhe von 800 Pixel gewählt, um sicherzustellen, dass wir genug Platz für alle Inhaltsabschnitte haben, die wir einschließen möchten. Das Erstellen des Originaldokuments in der exakten Größe, die die Site haben soll, erleichtert das Erstellen der Handbücher.

Als nächstes richten wir unsere Guides ein. Ziehen Sie Richtlinien aus den Dokumentlinealen an die vier Kanten Ihres Dokuments.

Jetzt müssen wir etwas Platz für den Hintergrund reservieren, den wir erstellen werden. Gehen Sie zu Bild > Leinwandgröße und erweitern Sie das Dokument auf 1100 x 1000 Pixel. Dies sollte uns viel Raum geben, um unseren einzigartigen Hintergrund auszufüllen.

Fülle die untere Ebene mit Weiß (Umschalt + F5). Benennen Sie diese Ebene in "Hintergrund" um. Ihr Dokument sollte jetzt wie im Bild unten aussehen.

Schritt 2 - Erstellen Sie den Verlaufshintergrund

Klicken Sie mit der rechten Maustaste auf die Ebene "Hintergrund" und wählen Sie Angleichung-Optionen. Wir werden unserer "Hintergrundebene" eine VerlaufsIneinanderkopieren hinzufügen. Ich habe einen dreifarbigen Farbverlauf mit einigen Blau- und Bräunungsfarben gewählt. Sie können jedoch im Wesentlichen alle gewünschten Farben auswählen. Das Schöne an der Verwendung der Mischoptionen für den Hintergrund ist, dass Sie jederzeit problemlos die Farben austauschen und den Farbverlauf nach Geschmack anpassen können.

Ihr Dokument sollte jetzt folgendermaßen aussehen:

Vielleicht möchten Sie diesen Schritt überspringen, aber ich denke, der scharfe Farbverlauf ist für dieses Design etwas zu glänzend. Wir werden etwas Rauschen hinzufügen, um es etwas abzumildern.

Erstellen Sie eine neue Ebene. Benennen Sie diese Ebene in "Rauschen" um. Als nächstes füllen Sie die Ebene mit Weiß (Bearbeiten > Füllen). Sobald Sie die Ebene mit Weiß gefüllt haben, müssen Sie etwas Rauschen hinzufügen, indem Sie Filter > Rauschen > Rauschen hinzufügen anwenden. Stellen Sie den Betrag auf 400% ein, mit einer gleichmäßigen Verteilung und nicht monochromatisch. Alle Farben des Rauschens geben uns viel mehr Tiefe in unseren Hintergrund.

Stellen Sie die Ebene "Rauschen" auf Multiplizieren und die Deckkraft auf 5%. Dies sollte uns gerade genug Körnigkeit geben, um den Gradienten abzuschwächen.

Schritt 3 - Fügen Sie die Textur (Pinselstriche) zum Hintergrund hinzu

Zuerst müssen Sie einige Pinselstrichpinsel herunterladen, falls Sie diese noch nicht haben. Hier sind einige, die ich in der Vergangenheit verwendet habe: "Pinselkontur".

Erstellen Sie eine neue Ebene über Ihren Ebenen "Hintergrund" und "Rauschen". Benennen Sie diese Ebene in "pinsel1" um (wir erstellen mehrere Ebenen wie diese). Setzen Sie diese Ebene auf Multiplizieren. Wählen Sie eine warme Vordergrundfarbe (um die kühlen Töne auszugleichen) in unserem blauen Hintergrund mit Farbverlauf. Ich habe ein warmes Braun gewählt: #996726. Wählen Sie den Pinsel aus, den Sie zeichnen möchten, und platzieren Sie ihn oben links im Dokument. Achten Sie dabei darauf, dass der Pinselstrich außerhalb der Grenzen Ihrer Richtlinien liegt (wir möchten, dass der Hintergrund nach außen erweitert wird).

Stellen Sie die Deckkraft der Ebene auf 50% ein (damit die Körnigkeit durchscheint). Wiederholen Sie die beiden vorherigen Schritte für mehrere Pinsel, um Ihrem Geschmack zu entsprechen. Ihr Hintergrund sollte nun wie im Bild unten aussehen.

Herzlichen Glückwunsch, Ihr individueller, einzigartiger Hintergrund ist vollständig. Da Sie die Pinsel zufällig platziert haben, werden Sie von den Designs unterschieden, die einen ähnlichen Hintergrund gekauft haben.

Schritt 4 - Erstellen Sie den inneren undurchsichtigen/durchscheinenden Behälter

Zuerst müssen wir das abgerundete Rechteck-Werkzeug greifen und den Radius auf 20 Pixel einstellen. Ziehen und zeichnen Sie vor allen Hintergrundebenen (Pinsel + Rauschen + Farbverlauf) ein abgerundetes Rechteck innerhalb der von uns festgelegten ursprünglichen Richtlinien. Ihr Rechteck sollte 960 x 800 Pixel groß sein. Benennen Sie diese Ebene in "Container" um, klicken Sie mit der rechten Maustaste auf die Ebene und wählen Sie Ebene rastern (wir werden später einige Änderungen an dieser Ebene vornehmen, damit wir dies jetzt genauso gut aus dem Weg räumen können).

Damit die Ebene "Container" undurchsichtig aussieht, müssen wir einige Dinge tun:

1. Setzen Sie die Füllung der Ebene "Container" auf 0% (wir verwenden den Ebenenstil "Farbüberlagerung", um ihr etwas Farbe zu verleihen).
2. Schlagschatten hinzufügen: Deckkraft von 41%, Winkel bei 90, Abstand von 0, Ausbreitung von 1 und Größe bei 10
3. Abschrägung und Prägung: Stil der inneren Abschrägung, Technik auf Glatt eingestellt, Tiefe auf 100%, Aufwärtsrichtung, Größe auf 20 Pixel, Erweichen auf 0 Pixel, Winkel auf 135 Pixel, Höhe auf 58 Pixel, Hervorhebungsopazität auf 27% und Schattenopazität auf "Einstellen" fünfzehn%
4. Farbüberlagerung: Weiß mit einer Deckkraft von 73%
5. Strich: Größe von 1 Pixel und Deckkraft bei 100% (um ihm zusätzliche Tiefe zu verleihen)

Sobald Sie alle Ebenenstile festgelegt haben, sollte Ihre "Container" -Ebene folgendermaßen aussehen:

Schritt 5 - Richten Sie die inneren Polsterführungen ein

Um sicherzustellen, dass die Ebene "Container" konsistent aufgefüllt wird (vorausgesetzt, wir möchten unsere Pixel nicht jedes Mal zählen, wenn wir ein Element platzieren), fügen wir Hilfslinien mit 40 Pixel in unsere ursprüngliche Hilfsbox ein.

Schritt 6 - Eine Ausschnittsnavigation

Wie Sie in der endgültigen Vorschau gesehen haben, möchten wir die Navigation so aussehen lassen, als wäre sie eingefallen oder aus der Ebene "Container" ausgeschnitten. Dazu entfernen wir einfach einen Teil der "Container"-Ebene und lassen die Ebenenstile ihre Magie entfalten.

Um die Auswahl für den Ausschnitt zu erstellen, erstellen wir eine neue rechteckige Form in dem Bereich, in dem sich der Navigationsausschnitt befinden soll. Verwenden Sie hier einen Radius von 10 Pixel (das ist die Hälfte des Radius der Ebene "Container"), um sicherzustellen, dass die Ecke dort, wo sie abgerundet ist, einen gleichmäßigen Abstand aufweist.

Verschieben Sie die Form bei Bedarf nach rechts oben in die inneren Polsterungslinien. Sobald Sie die Ebene eingerichtet haben, klicken Sie bei gedrückter Befehlstaste auf die Ebene in der Ebenenpalette, damit sie ausgewählt wird. Wählen Sie die Ebene "Container" und klicken Sie auf "Löschen". Sie können jetzt Ihr abgerundetes 10px-Rechteck für die Navigation ausblenden, und auf Ihrer Ebene "Container" wird jetzt ein Ausschnitt angezeigt (siehe unten).

Beachten Sie, wie glatt die abgerundeten Ecken sind. Wenn wir nur eine quadratische Fläche ausgewählt und die Auswahl abgerundet hätten, hätten die ausgeschnittenen Ecken sehr abgehackt ausgesehen. Ist es auch nicht schön, wie die Ebenenstile automatisch auf die Ebene angewendet werden und alle von uns hinzugefügten Abschrägungen und Schatten großartig aussehen?

Jetzt brauchen wir einen Text. Ich habe Rockwell als Schriftart gewählt (es wird standardmäßig mit MS Office geliefert, kann aber auch gekauft werden). Platzieren Sie Ihre Navigationselemente wie gezeigt gleichmäßig im Ausschnitt.

Wir möchten dem Text einen in Stein gemeißelten Effekt verleihen, und dazu fügen wir dem Text einen Schlagschatten hinzu (wir könnten auch einen inneren Schatten hinzufügen, der den Text jedoch dünner erscheinen lässt, als er tatsächlich ist). Hier sind die Schlagschatteneinstellungen, die ich normalerweise verwende.

Schritt 7 - Aktive Navigation durch die Seite gewebt

Um den gewünschten Effekt zu erzielen, erstellen wir eine neue Ebene direkt unter dem Text, den wir für die Navigation hinzugefügt haben. Benennen Sie diese Ebene in "Active Navi" um. Füllen Sie diese Auswahl mit einer beliebigen Farbe (es spielt keine Rolle).

Als nächstes müssen wir der Ebene "Active Nav" einige Ebenenstile hinzufügen. Ich habe sie unten bereitgestellt (Sie benötigen einen Schlagschatten, eine Verlaufsüberlagerung, einen Strich und ein inneres Leuchten).

Duplizieren Sie Ihre Ebene "Active Nav" (Befehl + J) und reduzieren Sie alle Ebenenstile. Benennen Sie diese Ebene in "aktive Navigation abgeflacht" um. Wir werden einige Zuschnitte auf diese Ebene anwenden, und wir möchten die Ebenenstile nicht mehr.

Verwenden Sie Ihr Auswahl-Werkzeug, um den Strich und das innere Leuchten oben und unten in der Ebene "Active Nav Flatted" zu löschen.

Jetzt müssen wir die Schatten hinzufügen, damit die Ebene "Active Nav" so aussieht, als wäre sie durch die Ebene "Container" gewebt. Wir werden diese Schatten mit dem Ellipse-Werkzeug erstellen.

Erstellen Sie eine schwarze Ellipse, die 20 Pixel breiter als die Breite der Ebene "Active Nav Flatted" und ungefähr 5 Pixel hoch ist. Zentrieren Sie Ihre Ellipse am oberen Rand der Ebene "Active Nav Flatted". Klicken Sie mit der rechten Maustaste auf die Ebene und wählen Sie Ebene rastern. Benennen Sie diese Ebene in "oberster aktiver Schatten" um.

Wir müssen die Ellipse ein wenig verwischen, zu Filter > Weichzeichnen > Gaußscher Weichzeichner gehen und mit einem Radius von 2px anwenden. Jetzt, da die Ellipse eher wie ein Schatten aussieht, werden wir die oberen 50% des Schattens löschen.

Passen Sie die Deckkraft der Ebene "oberster aktiver Schatten" auf 75% an. Der obere Schatten ist fertig. Um den unteren Schatten zu erstellen, duplizieren Sie die Ebene (Befehl + J), wenden Sie Bearbeiten > Transformieren > Vertikal spiegeln an und verschieben Sie den Schatten an den unteren Rand der "abgeflachten Ebene der aktiven Navigation".

Schritt 8 - Beenden Sie die Kopfzeile mit einem Logo

Bevor wir zum Logo kommen, lassen Sie uns unseren Header ein wenig fertigstellen. Zuerst fügen wir ein paar weitere Anleitungen hinzu. Zeichnen Sie wie gezeigt eine horizontale Hilfslinie 40px unter den unteren Rand des Navigationsausschnitts.

Wir werden unsere Trennlinie erstellen, die den Eindruck erweckt, dass die "Container"-Ebene eine Ätzung aufweist oder an dieser Stelle gefaltet ist. Um diesen Effekt zu erzielen, zeichnen Sie eine horizontale Linie mit einer Höhe von 1 Pixel auf einer neuen Ebene, die über die Breite der Ebene "Container" verläuft. Fülle deine horizontale Linie mit einem dunklen Grün (ich habe meine aus dem Hintergrund ausgewählt). Benennen Sie diese Ebene in "Trennlinie" um.

Um das Ätzgefühl zu erhalten, duplizieren Sie die Ebene "Trennlinie" und füllen Sie diese Ebene mit Weiß. Bewegen Sie diese Ebene 1 Pixel nach unten, sodass die Oberseite die ursprüngliche Ebene "Trennlinie" berührt.

Jetzt müssen wir unser Logo hinzufügen. Ich bin kein großer Logo-Designer, also habe ich einfach eine coole Schriftart (Gill Sans) ausgewählt und in der oberen linken Ecke einen großen Text geschrieben. Treffen Sie genau wie beim Ausschnitt für die Navigation eine Auswahl des Logotextes und löschen Sie ihn dann aus der Ebene "Container". Die Ebenenstile werden erneut an die neue Form angepasst und aktualisiert.

Das Sternchen wurde mit genau der gleichen Technik wie das aktive Navigationselement erstellt, damit es so aussieht, als würde es aus der Ebene "Container" herausragen.

Schritt 9 - Ausgewählte Portfolioelemente

Wir werden wieder dieselbe Ausschnitttechnik verwenden, die wir für den Navigationsabschnitt verwendet haben.

Erstellen Sie ein abgerundetes Rechteck mit einem Randradius von 10 Pixel. Stellen Sie sicher, dass auf allen Seiten ein Abstand von 40 Pixel vorhanden ist (wir haben die Hilfslinien zuvor erstellt, um dies zu unterstützen).

Klicken Sie bei gedrückter Befehlstaste auf die abgerundete Rechteckebene, um sie auszuwählen, wählen Sie dann die Ebene "Container" aus und klicken Sie auf Löschen. Sie können das abgerundete Rechteck entfernen, da wir es nicht mehr verwenden.

Wir müssen dann die Pfeile auf jeder Seite erstellen, damit Sie mehrere Portfolioelemente auf der Startseite haben und in einer Art Diashow durch diese wechseln können. Erstellen Sie dazu mit dem Form-Werkzeug einen Kreis mit einem Durchmesser von 40 Pixel. Bewegen Sie den Kreis auf der linken Seite und zentrieren Sie ihn am Rand des Ausschnitts.

Duplizieren Sie den Kreis für die andere Seite und zentrieren Sie ihn erneut am anderen Rand des Ausschnitts (horizontal und vertikal).

Wichtig

Da wir hier nicht mit Vektormasken arbeiten (und unsere Füllung auf der Ebene "Container" auf 0% festgelegt ist), müssen wir dies vorübergehend anpassen, um sicherzustellen, dass wir der Ebene "Container" hinzufügen können.

Setzen wir also die Füllung der Ebene "Container" auf 100%. Führen Sie nun beide Kreise, die wir für die Pfeile erstellt haben, nach unten (Befehl + E) in der Ebene "Container" zusammen. Nach dem Zusammenführen können Sie die Füllung der Ebene "Container" auf 0% zurücksetzen. Hier ist Ihr gewünschter Effekt:

Beachten Sie, wie die beiden Kreise jetzt Teil der Ebene "Container" geworden sind.

Als nächstes müssen wir einige Pfeile hinzufügen. Sie können sie leicht mit Klammern erstellen, ich habe mich jedoch dafür entschieden, meine eigenen zu erstellen.

Erstellen Sie ein abgerundetes Rechteck mit einem Randradius von 3 Pixel, einer Breite von 20 Pixel und einer Höhe von 6 Pixel. und platzieren Sie es genau über der Stelle, an der Sie den Pfeil haben möchten. Transformieren und drehen Sie das abgerundete Rechteck um 45 Grad gegen den Uhrzeigersinn (Befehlstaste + T), damit es gekippt wird. So machen wir den Punkt zum Pfeil.

Duplizieren Sie das abgerundete Rechteck (Befehl + J) und klicken Sie auf Bearbeiten > Transformieren > Vertikal spiegeln. Bewegen Sie die Ebene so, dass die linken Ecken ausgerichtet sind und eine Klammer entsteht. Wählen Sie in der Ebenenpalette beide abgerundeten Rechtecke aus und führen Sie die Ebenen zusammen (Befehl + E). Benennen Sie die Ebene in "Pfeil nach links" um. So sollte Ihr Pfeil aussehen:

Wir müssen dem Pfeil einige Ebenenstile hinzufügen, damit er wie folgt zum Rest des Designs passt:

1. Füllung: 0%
2. Innerer Schatten: Deckkraft von 50%, Winkel bei 120, Abstand von 2, Drossel auf 0, Größe von 3 und Rauschen bei 0

Duplizieren Sie die Ebene "Linkspfeil" (Befehl + J) und klicken Sie auf Bearbeiten > Transformieren > Horizontal spiegeln. Benennen Sie diese Ebene in "Rechtspfeil" um und verschieben Sie sie auf die rechte Seite des Ausschnitts.

Eine letzte Sache, die wir für unseren Bereich mit vorgestellten Portfolio-Artikeln hinzufügen müssen, ist ein Schatten, um ihm etwas Tiefe zu verleihen. Fügen Sie wie gezeigt einen transparenten bis schwarzen Farbverlauf am unteren Rand des Ausschnitts hinzu.

Um überschüssige Farbverläufe außerhalb des Ausschnitts zu entfernen, klicken Sie einfach mit Befehlstaste + Klicken Sie auf die Ebene "Container" und klicken Sie auf "Löschen". Wir werden unsere Screenshots unter dieser Ebene platzieren, um die Illusion von Tiefe zu vermitteln.

Schritt 10 - Hinzufügen eines Portfolioelements

Machen Sie einen Screenshot Ihrer Lieblingsseite (ich habe eines meiner eigenen Portfolios verwendet, ryanscherf.net). Benennen Sie diese Ebene in "Screenshot" um.

Fügen Sie der Ebene "Screenshot" einen Strich und einen inneren Schatten hinzu. Verwenden Sie dazu Ihre Ebenenstile:

Duplizieren Sie die Ebene "Screenshot" und reduzieren Sie alle Ebenenstile (führen Sie die Ebene "Screenshot-Kopie" mit einer neuen, leeren Ebene zusammen). Drehen Sie die Ebene "Screenshot-Kopie" um 45 Grad gegen den Uhrzeigersinn, genau wie bei den Pfeilen in Schritt 9.

Platzieren Sie den Screenshot unten links im Portfolio-Ausschnitt. Achten Sie dabei darauf, dass die Oberseite des Screenshots aus dem Ausschnitt herausragt (wir geben ihm etwas Tiefe) und lassen Sie ihn so aussehen, als ob er sich hinter der Ebene "Container" befindet. Schneiden Sie den Überschuss der "Screenshot-Kopie" wie gezeigt von unten zu.

Nachdem wir unseren Screenshot erstellt haben, fügen wir rechts eine kurze Beschreibung hinzu. Hier ist nichts Besonderes, aber ich versuche immer noch, an unserem Theme Tiefe und Schichten festzuhalten.

Erstellen Sie Text mit einer fast weißen (oder sehr hellblauen/grünen) Farbe. Verwenden Sie dieselbe Schlagschatten-Ätztechnik aus der Navigation (Winkel bei -60 Grad, Abstand 1 Pixel und Größe 1 Pixel).

Erstellen Sie ein undurchsichtiges Quadrat hinter dem Text. Ich habe eine komplett schwarze Schicht mit 30% Deckkraft verwendet. Der Effekt sollte folgendermaßen aussehen:

Wir brauchen einige Navigationspunkte wie die iPhone-Ansichten. Wir erstellen einen aktiven Punkt, der genau die gleichen Ebenenstile wie die Ebene "Active Nav" verwendet (hoffentlich haben Sie ihn nicht gelöscht), und einen inaktiven Punkt, der die Ebenenstile aus der Ebene "Linkspfeil" verwendet.

Hinweis: Die Wiederverwendung von Ebenenstilen ist nicht nur wichtig, da dadurch Zeit gespart wird, ähnliche Stile neu erstellen zu müssen, sondern auch, weil Ihr Design durchgehend konsistent bleibt.

Erstellen Sie mit dem Form-Werkzeug einen Kreis mit einem Durchmesser von 20 Pixel (ich mag meine Navigationspunkte groß, da sie manchmal zu schwer zu klicken und zu navigieren sind). Klicken Sie mit der rechten Maustaste auf die Ebene "Active Nav" und wählen Sie "Ebenenstil kopieren". Wählen Sie den Kreis aus Ihrer Ebenenpalette aus, klicken Sie mit der rechten Maustaste und wählen Sie Ebenenstil einfügen.

Wiederholen Sie diese Schritte für so viele inaktive Punkte, wie Sie möchten, und stellen Sie sicher, dass Sie den Ebenenstil aus der Ebene "Pfeil nach links" verwenden.

Schritt 11 - Beschriften Sie es mit einem Band

Wir müssen unsere Besucher genau wissen lassen, was wir hier präsentieren. Wir erstellen ein Menüband mit genau der gleichen Technik wie für die Ebene "Active Nav", die oben in Schritt 7 beschrieben wurde.

Der einzige Unterschied besteht darin, dass ich dem Schlagschatten eine etwas höhere Deckkraft hinzugefügt habe, um sicherzustellen, dass er so aussieht, als ob er weit über allem anderen ruht.

Um diesen Abschnitt abzuschließen, möchten wir unsere in Schritt 8 erstellte Ebene "Trennlinie" duplizieren (Befehl + J) und 40 Pixel unter den Ausschnitt der Portfolioelemente verschieben. Das ist es!

Schritt 12 - Erstellen Sie den Hauptinhaltsbereich

Wir werden zuerst weitere Hilfslinien erstellen, um sicherzustellen, dass wir drei gleiche Spalten haben. Haben Sie keine Angst, aber wir müssen hier etwas rechnen:

960px breite Site - 80px Innenpolsterung=880px verfügbarer Platz für unsere Säulen. Wir möchten auch eine 40-Pixel-Auffüllung zwischen den Spalten hinzufügen, sodass im Wesentlichen 800 Pixel für unsere 3 Spalten verfügbar sind.

800px geteilt durch 3 entspricht 266px pro Spalte (ich habe meine Spalten von links nach rechts als 267px, 266px, 267px ausgewählt, um das Gleichgewicht aufrechtzuerhalten). Zeichnen Sie die Hilfslinien in diesen Intervallen, und achten Sie darauf, dass Sie die 40-Pixel-Polsterung auf jeder Seite der mittleren Spalte berücksichtigen.

Schritt 13 - Neueste aus der Blog-Spalte

Erstellen Sie eine neue Gruppe in der Palette Ihrer Ebene mit dem Namen "Neueste aus dem Blog". Hier werden alle Ebenen dieses Abschnitts gespeichert.

Erstellen Sie einen Text für die Überschrift. Ich habe wieder einmal die Rockwell-Schriftart mit denselben Ebenenstilen zum Ätzen verwendet, die ich für die Navigation verwendet habe. Falls Sie es vergessen haben, wird dies in Schritt 6 beschrieben.

Wählen Sie eine benutzerdefinierte Form aus, um jede Seite des Texts zu verankern. Ich habe eine benutzerdefinierte Standardform für Photoshop ausgewählt, aber es gibt buchstäblich Tausende von benutzerdefinierten Formen, die Sie Ihrer Bibliothek hinzufügen können.

Wir müssen den Formen einige Ebenenstile hinzufügen, damit sie etwas dreidimensionaler aussehen:

1. Farbineinanderkopieren : #0e696a
2. Innerer Schatten: Deckkraft bei 63%, Winkel bei 120 Grad, Abstand von 1 Pixel und Größe von 1 Pixel

Das Endprodukt sollte ungefähr so aussehen wie das folgende Bild.

Wir brauchen unten einen Text für unsere Blog-Beiträge. Stellen Sie sicher, dass Ihre Textfarbe einen hellen Farbton des Blau/Grüns des Hintergrunds aufweist. Wir können so viele verschiedene Schattierungen dieses Blau/Grüns verwenden, wie wir möchten, und es wird sicherlich unseren Text hervorheben.

Um den Text noch einmal geätzt aussehen zu lassen, werden wir die frühere Technik etwas anders ausprobieren. Bevor wir oben links im Text einen schwarzen Schlagschatten hinzugefügt haben, fügen wir unseren Schlagschatten unten rechts mit Weiß hinzu, da wir einen etwas helleren Text verwenden. Sie können den Effekt unten sehen:

Ich habe die benutzerdefinierte runde Form für die Aufzählungszeichen verwendet und den Ebenenstil aus den benutzerdefinierten Formen wiederverwendet, die wir in der Kopfzeile dieses Abschnitts hinzugefügt haben.

Schritt 14 - Neueste Twitter-Updates

Dieser Abschnitt sollte ziemlich einfach sein. Duplizieren Sie die Gruppe "Neueste aus dem Blog" und benennen Sie das Duplikat in "Twitter-Updates" um.

Passen Sie den Text so an, dass er eher auf ein Twitter-Update hinweist (Links, Erwähnungen, Zeitstempel usw.). Verschieben Sie diese Gruppe in die mittlere Spalte - und fertig!

Schritt 15 - Newsletter-Anmeldeformular

Duplizieren Sie die Gruppe "Twitter-Updates" und benennen Sie sie in "Newsletter" um. Verschieben Sie diese Gruppe in die rechte Spalte.

Passen Sie den Inhalt so an, dass er eher einem beschreibenden Absatz ähnelt, und entfernen Sie alle Aufzählungszeichen (einleitende Absätze benötigen im Allgemeinen keine Aufzählungszeichen).

Um das E-Mail-Formular zu erstellen, erstellen wir ein abgerundetes Rechteck mit einem Randradius von 10 Pixel und einer Höhe von 40 Pixel. Die Breite sollte 266px betragen (oder was auch immer Sie als Breite Ihrer rechten Spalte gewählt haben). Benennen Sie diese Ebene in "Eingabeformular" um und legen Sie die Ebenenstile wie folgt fest:

Zuletzt benötigen wir eine Schaltfläche, um das Formular zu senden. Wir werden unsere Ebenenstile aus der Ebene "Active Nav" für die Schaltfläche verwenden, da wir das konsistente Erscheinungsbild aller unserer Elemente beibehalten möchten.

Erstellen Sie ein weiteres abgerundetes Rechteck mit einer Höhe von 40 Pixel, einer Breite von 140 Pixel und einem Randradius von 20 Pixel. Benennen Sie diese Ebene in "Schaltfläche" um.

Kopieren Sie den Ebenenstil aus der Ebene "Aktive Navigation" und fügen Sie ihn in die Ebene "Schaltfläche" ein.

Duplizieren Sie den Text aus der Navigation (Befehl + J) und ändern Sie ihn in "Abonnieren". Verschieben Sie den zu zentrierenden Text innerhalb der Schaltfläche. Das Ergebnis sollte wie im Bild unten aussehen.

Schritt 16 - Copyright-Informationen hinzufügen

Kunden werden es immer anfordern, und Sie sollten es immer hinzufügen. Fügen Sie außerhalb und unterhalb Ihrer "Container" -Ebene einige Copyright-Informationen hinzu. Verwenden Sie die Ätztechnik erneut, um ihr Tiefe zu verleihen.

Abschluss

Ich hoffe, dies hilft jedem, mit seinen eigenen Designs neue Grenzen zu erkunden. Wie Sie gesehen haben, sind viele der hier diskutierten Techniken einfach und doch elegant. und sollte einfach in Ihre eigenen Designs zu implementieren sein.