Erstellen Sie eine Werbe-iPhone-App-Site in Photoshop

In diesem Tutorial setzen wir diese Serie mit der Erstellung einer iPhone-App-Werbeseite fort, indem wir unser zuvor von Fireworks erstellten Drahtmodellen verwenden und Farbe, Textur, Bilder und Effekte hinzufügen, um dieses Design in Photoshop zu verbessern. Wir werden einige interessante Elemente verwenden, wie iPhone-Bilder und eine stilvolle Aurora-Vektor-Hintergrundillustration. Wir werden mit einem professionellen Site-Design fertig sein, das bereit ist, codiert zu werden! Lasst uns anfangen!

Endgültige Bildvorschau

Schauen Sie sich das Website-Design an, das wir erstellen werden. Sie können die endgültige Bildvorschau unten oder das Bild in voller Größe hier anzeigen.

Schritt 1 - Dokumenteinrichtung

Holen Sie sich das "wireframe_final.psd", das wir in unserem letzten Tutorial in dieser Reihe exportiert haben (Erstellen Sie ein Wireframe für eine iPhone App-Werbewebsite in Fireworks). Benennen Sie diese Datei in "final.psd" oder Ihren bevorzugten Namen um.

Beachten Sie unten, wie die importierte Datei in Photoshop ziemlich gut geöffnet wird. Es gibt jedoch ein Problem mit den Textfeldern, die länger als das Dokument sind (zweites Bild unten, beachten Sie, wie lang das Feld ist und am unteren Rand des Dokuments fortgesetzt wird). Ich kenne keinen schnellen Weg, um das zu beheben. Es ist eine Besonderheit, die ich im letzten Tutorial erwähnt habe. Wenn jemand eine gute Lösung kennt, lass es mich auf jeden Fall wissen. Kopieren Sie also den Text jedes Elements, erstellen Sie ein neues Textfeld und fügen Sie den Text wieder ein oder lassen Sie ihn einfach unverändert.

Löschen Sie auch den Ordner "Notizen", da wir die Notizen hier nicht benötigen.

Schritt 2 - Erstes dominantes visuelles Element

Ich arbeite oft zuerst an den dominanten (und wichtigeren) visuellen Elementen des Designs und baue dann von dort aus. Beginnen wir also mit dem Bereich "Werbung".

Wir werden hier eine Aurora-Illustration zum Hintergrund hinzufügen. Ian Yates hat ein fantastisches Illustrator-Tutorial zum Erstellen eines Aurora Borealis-Vektorhimmels in Illustrator geschrieben. Die Verwendung einer Vektorgrafik bietet hier einige Vorteile. Eines ist, dass es sich stilistisch durch einen einzigartigen Look auszeichnet. Wir können es auch für andere Markenbereiche verwenden.

Nach Abschluss des Aurora Borealis-Vektor-Tutorials importieren Sie Ihr einzigartiges Ergebnis in Photoshop. Sie können sehen, dass die einzige Änderung, die ich vorgenommen habe, das Umdrehen des Designs war. Sie sollten natürlich Ihre eigenen für Ihre Arbeit erstellen. Ich habe die Abbildung als Pixel eingefügt, da ich nach dem Einfügen keine Änderungen an der Vektorquelldatei vornehmen muss, sodass kein Smart-Objekt verwendet werden muss.

Ziehen Sie nun die Vektormaske aus unserer Werbe-Hintergrundform auf unser Aurora Borealis-Design.

Dadurch wird die Vektormaske wie unten gezeigt angewendet. Stellen Sie einfach sicher, dass sie so ausgerichtet ist, wie Sie es möchten.

Schritt 3 - Hinzufügen eines iPhone-Bildes

Es gibt ein spektakuläres Werbegeschenk für ein iPhone-Bild mit vielen iPhone-GUI-Grafiken. Laden Sie das iPhone GUI PSD 3.0 herunter. Öffnen Sie die Datei und ziehen Sie das iPhone-Bild in Ihr Arbeitsdokument. Skalieren Sie es dann und richten Sie es mit den Hilfslinien aus, wie im zweiten Bild unten gezeigt. Stellen Sie sicher, dass Sie das Bild wie gezeigt aufnehmen. Die einzige Bildschirmkomponente, die außer dem Telefon erfasst wird, ist eine transparente, abgewinkelte Bildschirmblendung.

Jetzt fügen wir dem iPhone die Illustration Aurora Borealis hinzu. Dies macht das Design nur ein wenig interessanter. Auf der endgültigen Website würde hier eine Videodatei gut aussehen, die die App jedoch in Aktion zeigt. Bringen Sie eine weitere Kopie der Aurora Borealis-Illustration mit. Sie können diesmal eine kleinere Version davon einbringen, da wir einen kleineren Raum füllen. Fügen Sie es erneut als Pixel ein.

Gehen Sie nun mit der Abbildung über dem iPhone an der gewünschten Position und der ausgewählten Abbildung zu Ebene > Vektormaske > Alle anzeigen. Nehmen Sie dann das Rechteck-Werkzeug (U), stellen Sie sicher, dass es in der oberen linken Ecke auf Pfade eingestellt ist, und zeichnen Sie Ihren Bildschirm. Wenn Sie beim ersten Mal nicht genau die Größe erhalten, die Sie benötigen, drücken Sie Befehlstaste + T und ändern Sie die Größe der Rechteckvektormaske nach Bedarf.

Stellen Sie sicher, dass Ihre Ebenen organisiert sind, während wir dieses Design weiterentwickeln.

Schritt 4 - Arbeiten an unserem Farbschema

Wir haben gerade zwei dominante Elemente auf der Seite hinzugefügt. Außerdem ist die von uns hinzugefügte Aurora-Illustration eine großartige Quelle, um Farbe zu gewinnen und das Farbschema dieser Seite zu erstellen. Doppelklicken Sie auf die Standardebene "Background", um sie zu entsperren, nennen Sie sie "background" und legen Sie sie in einem neuen Ordner "background" ab.

Nehmen Sie das Farbeimer-Werkzeug (G) und ändern Sie die Vordergrundfarbe in ein dunkles Blaugrau (#536475), das ich aus der Abbildung ausgewählt habe. Ändern Sie nun den primären Navigationshintergrund im Ordner "header" in ein dunkelblaues (#212b3f), das ebenfalls aus der Abbildung entnommen wurde. Geben Sie dem Hintergrund des "bottom" Bereichs die gleiche dunkelblaue Farbe für den Hintergrund.

Wir werden an dieser Stelle auch die Farbe einiger unserer Navigationsschaltflächen ändern. Das Bild unten zeigt, wo wir uns in diesem Design bisher befinden. Ändern Sie die Hintergrundfarben der primären Navigationsschaltfläche in ein etwas helleres Graublau (#5e7285) als den Seitenhintergrund, mit Ausnahme der aktuellen Seitenschaltfläche. Wir möchten der aktuellen Seitentaste den Eindruck geben, hineingedrückt zu werden. Stellen Sie also die gleiche Farbe wie auf der Seite ein (#536475). Wir werden dies etwas später im Tutorial erheblich verbessern, wenn wir das Styling hinzufügen.

Wählen Sie im Bereich "secondary_nav" den größeren Hintergrund hinter dem Aurora-Symbol aus und ändern Sie die Farbe in ein Graublau (#475665), das etwas dunkler als der Seitenhintergrund ist. Wieder werden wir diesen Look eingerückt machen. Verwenden Sie außerdem dasselbe hellere Graublau (Nr. 5e7285) wie die primären Navigationsschaltflächen auf den Fußzeilentasten.

Schritt 5 - Änderung der unserer Textfarbe und der Grundstile

Sie können sehen, wie die Dunkelheit mit unserem Seitendesign schmerzlich deutlich macht, dass es Zeit ist, an den Textfarben zu arbeiten. Wir haben den Text für das Drahtmodell meistens mit dunklem Licht gestaltet, aber jetzt müssen wir mit dunklem Licht hell werden. Ändern Sie den größten Teil Ihres Textes in Weiß. Ich werde auf die wenigen Ausnahmen unten hinweisen. Bereinigen Sie außerdem Text, positionieren Sie Elemente neu und experimentieren Sie dabei mit der Schriftgröße.

Ich setze einen Teil des Textes in Myriad Pro, obwohl ich in Bereichen, die codiert werden und keine Bilder, häufig Helvetica für dieses Design verwendet habe, das auf Computersystemen allgegenwärtig ist. Ich habe Helvetica auch für einige Bereiche verwendet, in denen ich ein etwas anderes Aussehen haben wollte als die verwendete Myriad Pro. Ich habe den Namen Aurora in Futura Condensed Extra Bold festgelegt, wo er für das Branding verwendet werden soll.

Sie können den Text in den meisten "header", "secondary_nav", "promotion" und "body" sehen, die weiß sind. Einige Ausnahmen sind der Logo-Bereich (der vorerst nur ein Platzhalter ist), der dunkelblaue "Aurora App"-Text (#131828), um ihn hervorzuheben, und die Überschriften für den Körper, die gleich dunkelblau sind .

Wir müssen auch am Text des "bottom" Abschnitts arbeiten. Ich habe alle Überschriften in Myriad Pro Bold auf 20pt gesetzt. Die Farbe ist ein helles Babyblau (#85a1bc). Ich habe das gleiche Blau für die Textlinks verwendet. Ich habe den Rest des Textes mit einer kleineren Helvetica Bold in Weiß gesetzt.

Die "footer" hat nur ein paar Farbänderungen. Die Links wurden in ein noch helleres Babyblau (#97b8d8) geändert, mit Ausnahme des aktiven Links, der weiß und unterstrichen ist. Der Copyright-Text ist 12pt Helvetica und dunkelblau (#212b3f).

Schritt 6 - Einbringen des Logo-Designs

Machen Sie zunächst einen Screenshot unserer PSD-Datei des Bereichs, in dem das Logo platziert werden soll (wobei der Text des Logo-Platzhalters deaktiviert ist). Starten Sie Illustrator. Platziere den Screenshot auf einer eigenen Ebene und sperre ihn. Ich habe auch die Sichtbarkeit der Zeichenfläche deaktiviert (Umschalt + Befehl + H). Erstellen Sie nun eine Ebene für Ihr Logo und fügen Sie den Text "iLoveMyApps" ein, der als Firmenname für dieses Tutorial dient. Stellen Sie den Text in Cooper Std Black Italic auf 30pt ein und füllen Sie ihn weiß, wie unten gezeigt. Gehen Sie nun bei ausgewähltem Text zu Text > Konturen erstellen und heben Sie die Gruppierung des Texts auf (Umschalt + Befehl + G). Löschen Sie auch das "o", da wir das durch ein Herz ersetzen werden.

Lassen Sie uns nun an der Herzform arbeiten. Schalten Sie zuerst das Raster ein (Befehl + ") und dann Am Raster ausrichten (Umschalt + Befehl +"), damit Sie die Form einfach zeichnen können. Erstellen Sie mit dem Stiftwerkzeug eine Halbherzform. Gehen Sie nun zu Objekt > Transformieren > Reflektieren und wenden Sie eine Kopie mit den unten gezeigten Einstellungen an. Richten Sie nun den inneren Rand beider Halbherzformen aus und klicken Sie in der Pathfinder-Palette auf Zusammenführen, um eine endgültige Herzform zu erhalten.

Skalieren Sie nun die Herzform und platzieren Sie sie wie gezeigt. Arbeiten Sie auch daran, jeden Buchstaben des Textes so weit auseinander zu halten, bis er für Sie richtig aussieht. Ich wollte, dass der gesamte Text als einer angezeigt wird, aber ich habe jedes Wort ein wenig voneinander entfernt, um die Lesbarkeit zu verbessern. Es liest sich immer noch als ein Wort. Kopieren Sie nun das endgültige Logo und fügen Sie es als Smart Object in Photoshop ein.

Schritt 7 - Beginnen Sie, unserem Design Stil hinzufügen

Wir werden uns weiterhin von oben nach unten nach unten arbeiten, aber denken Sie daran, dass Sie beim Entwerfen möglicherweise mehr in verschiedene Bereiche des Designs springen und mit verschiedenen Looks und Stilen experimentieren, was großartig ist und sich frei anfühlt das zu tun.

Wählen Sie im Abschnitt "header" den Hintergrund aus und wenden Sie die unten gezeigten Ebenenstile an. Dies gibt der Oberseite des Körperbereichs ein kleines Highlight und ein subtiler Schatten wird auf den Kopfbereich geworfen, der ihn etwas zurückschiebt.

Wenden Sie nun die unten gezeigten Stile auf unser Logo an. Für die Verlaufsüberlagerung wechselt der Verlauf von grau (#c0c4c9) zu hellgrau (#e3e5e7).

Schritt 8 - Hinzufügen von Stil zu unserer primären Navigation

Zuerst werden wir an den nicht aktiven Hintergrundstilen für primäre Links arbeiten, dh alle außer dem Link "Apps". Wenden Sie die unten gezeigten Stile an und verwenden Sie Farben, die für Sie richtig aussehen. Hinweis: Ich habe mich von der Meta Lab-Website für diesen Teil des Designs sehr inspirieren lassen. Ich liebe die Arbeit dieser Firma. Schauen Sie sich das Folio an, während Sie dort sind.

Es ist immer wichtig, sich vorzustellen, wo sich die Lichtquelle in Ihrem Design befindet. Wir wenden einige subtile Lichteffekte an, die diesem Design ein modernes Gefühl verleihen, obwohl wir immer noch die Lichtquelle im Auge behalten müssen.

Stellen Sie sich vor, dass oben auf der Seite eine Lichtquelle direkt nach unten schießt, die uns die Lichtrichtung für viele der Stile gibt, die wir hinzufügen werden. Natürlich können Sie sich mehr als eine Lichtquelle vorstellen, und Sie können etwas davon abweichen. Wenn Sie jedoch die primäre Lichtquelle im Auge behalten, können Sie die von Ihnen angewendeten Stile sinnvoll gestalten und visuell zusammenarbeiten.

Wenden Sie nun die unten gezeigten Stile auf den Linkhintergrund "Apps" an, der unser aktiver Link ist und ihn so aussehen lässt, als wäre er gedrückt.

Wenden Sie nun den folgenden Abschrägungs- und Prägestil auf den Text in der primären Navigation an, um ihn etwas hervorzuheben. Die Wirkung auf den Text ist subtil, aber spürbar.

Schritt 9 - Stil auf unsere sekundäre Navigation anwenden

Fügen wir zunächst unsere iPhone-App-Symbole hinzu. Verwenden Sie für das Haupt-Aurora-Symbol dieselbe Aurora-Abbildung wie im Werbebereich. Ziehen Sie die Vektormaske, die derzeit als graues Quadrat angewendet wird, auf eine verkleinerte Version der Aurora-Abbildung. Weitere Informationen hierzu finden Sie in Schritt 2. Fügen wir hier nun einen Stil hinzu. Fügen Sie dem Symbol die folgenden Ebenenstile hinzu.

Wenden Sie auf den äußeren Symbolhintergrund dieselben Stile an wie auf die Hintergrundschaltfläche "Apps" in Schritt 7. Klicken Sie bei gedrückter Ctrg-Taste auf die Ebenenminiatur des Hintergrunds der Schaltfläche "Apps" und wählen Sie Ebenenstile kopieren. Wählen Sie dann den äußeren Hintergrund aus, klicken Sie bei gedrückter Ctrg-Taste auf die Miniaturansicht der Ebene und wählen Sie Ebenenstil einfügen (siehe Abbildung unten).

Schritt 10 - Anwenden von Stil auf unsere sekundäre Navigation Fortsetzung

Jetzt werden wir unseren anderen Anwendungssymbolen einen gewissen Stil hinzufügen. Dies sind nur Platzhalter, um dem Kunden zu zeigen, wohin andere Symbole gehen würden. Deshalb möchte ich ihnen ein ähnliches Aussehen wie das Aurora-Symbol geben, sie aber nicht besonders hervorheben. Beginnen wir also damit, sie mit einem Muster zu füllen. Zuerst machen wir das Muster.

Öffnen Sie ein neues 4x4 Pixel großes Dokument, das für das Web eingerichtet wurde. Nehmen Sie das Bleistift-Werkzeug, stellen Sie die Pinselgröße auf 1 Pixel ein und malen Sie vier Rechtecke wie unten gezeigt. Das dunkelste Rechteck ist #05020a und das hellste ist #251440 dieser Farbe. Drücken Sie Befehlstaste + A, um Alle auszuwählen, gehen Sie dann zu Bearbeiten > Muster definieren und nennen Sie es "Purple Rain". Ja, ich habe in den achtziger Jahren in der Grundschule ein Hemd mit diesem Muster darauf gemacht.

Wählen Sie das erste Platzhaltersymbol. Beachten Sie, dass es sich derzeit um eine Formebene handelt. Das müssen wir rastern. Gehen Sie also zu Ebene > Rastern > Füllinhalt, wodurch unsere Vektormaske erhalten bleibt, die Füllung jedoch gerastert wird. Beachten Sie, dass das Ergebnis eine gerasterte Ebene ist, auf die eine Vektormaske angewendet wird - schnell und einfach. Gehen Sie durch und tun Sie dies für jedes Platzhaltersymbol.

Nehmen Sie das Farbeimer-Werkzeug (G) und wählen Sie in der oberen linken Ecke Muster aus der Dropdown-Liste aus. Stellen Sie sicher, dass unser Muster "Purple Rain" ausgewählt ist, und klicken Sie dann einmal auf jedes Platzhaltersymbol, um das Muster anzuwenden. Klicken Sie nun bei gedrückter Ctrg-Taste auf die Miniaturansicht des Aurora-Symbols, kopieren Sie den Ebenenstil und fügen Sie ihn in jedes Platzhalter-Anwendungssymbol ein. Passen Sie außerdem den Abstand der Anwendungsnamen an, um Platz für die Stile zu schaffen.

Passen wir auch unsere Standard-Platzhalterschaltfläche für den App Store rechts in diesem Abschnitt an. Eine einfache Möglichkeit, diese Schaltfläche besser in unser Design einzufügen, besteht darin, die Hintergrundfarbe zu ändern. Gehen Sie zu Bild > Anpassungen > Farbton/Sättigung und übernehmen Sie die unten gezeigten oder die von Ihnen gewählten Einstellungen.

Schritt 11 - Stil auf unseren Werbebereich anwenden

Beginnen wir mit dem Hintergrund und den Schaltflächen. Zuerst wenden wir Stil auf unseren großen Hintergrundbereich an. Wählen Sie die Aurora-Abbildung aus und wenden Sie die folgenden Ebenenstile an. Dies gibt uns ein Highlight oben und einen Strich in der Umgebung.

Wenden Sie jetzt dieselben Stile auf den Hintergrund des Preisbereichs oben rechts an, fügen Sie jedoch auch die unten gezeigten Stile hinzu. Die für die lila Farbverlaufsüberlagerung verwendeten Farben werden aus der Aurora-Grafik entnommen. Die Farben des Verlaufs wechseln von lila (#68448f) zu dunklerem lila (#320580) und dann zurück zu einem mittleren lila Farbton (#65428c).

Wenden Sie auf unsere Hauptüberschrift "Light Up Your iPhone" dieselben Ebenenstile an wie in Schritt 7. Sie können den Ebenenstil von dort aus kopieren und einfügen. Wenden Sie auf den Preistext und die Unterüberschrift denselben Abschrägungs- und Prägestil an, wie wir ihn in Schritt 7 auf den primären Navigationstext angewendet haben. Möglicherweise möchten Sie die Deckkraft des Hervorhebungsmodus oder des Schattenmodus für die Schattierung ändern. Experimentieren Sie jedoch mit dem, was für Sie am besten aussieht. Wählen Sie außerdem die horizontale Regel aus, bei der es sich um eine 1 Pixel hohe Form handelt, und ändern Sie die Farbe in Schwarz. Wenden Sie auch die unten gezeigten Einstellungen darauf an.

Schritt 12 - Anwenden von Stil auf unsere Hauptaufforderung zum Handeln

Wenden Sie nun die folgenden Ebenenstile auf unsere Hauptschaltfläche zum Aufrufen von Aktionen an. Wir haben einen Schlagschatten darauf gelegt, damit er sich mehr vom Hintergrund abhebt. Es hat eine helle Farbe, die Aufmerksamkeit erregen wird. Die Platzierung zieht auch die Aufmerksamkeit auf sich. Die Verlaufsüberlagerung hat ähnliche Farben wie die für den Preishintergrund verwendete, es werden jedoch nur zwei Farben angewendet, die von lila (#68448f) bis dunkelviolett (#320580) reichen. Wir werden gleich einen Pfeil hinzufügen, um ihn ebenfalls hervorzuheben.

Nehmen Sie nun das Ellipsen-Werkzeug (U) und erstellen Sie damit eine Formebene wie unten gezeigt. Die Farbe spielt keine Rolle, da die Stile sie sowieso überlagern. Ordnen Sie den Schaltflächentext neu an, um ihn mit dem hinzugefügten Element auszugleichen. Wir werden diesen Kreis verwenden, um in Kürze einen Download-Pfeil darin zu platzieren. Wenden Sie die folgenden Ebenenstile auf die Schaltfläche an (die Farben in der Verlaufsüberlagerung reichen von #9cc67e bis #3a4f66).

Jetzt erstellen wir unseren Pfeil, platzieren ihn in Photoshop und formatieren ihn.

Öffnen Sie Illustrator und erstellen Sie ein Webdokument. Aktivieren Sie Ansicht > Raster anzeigen und Ansicht > Am Raster ausrichten. Verwenden Sie das Stiftwerkzeug, um mithilfe des Rasters einen Pfeil zu zeichnen. Die Größe spielt keine Rolle. Ändern Sie nun die Größe auf eine Form, die ungefähr der Größe des unten gezeigten größeren Pfeils entspricht. Gehen Sie nun zu Effekt > Stil > Runde Ecken und wenden Sie sie mit einem Radius von 0,139 Zoll an. Kopieren Sie nun den Pfeil und fügen Sie ihn in Photoshop als Vector Smart Object ein. Hinweis: Ich verwende unten zu Demonstrationszwecken Schwarz, aber der Pfeil sollte weiß sein.

Wenden Sie nun die gleichen Stile auf den Pfeil an, wie wir unser Logo in Schritt 7 erstellt haben, und skalieren Sie sie so, dass sie in den Raum passen. Das Ergebnis ist im zweiten Bild unten dargestellt.

Folgendes haben wir bisher. Das Oberteil sieht gut aus. Lassen Sie uns nun als nächstes auf den Körper übergehen. Wir haben jetzt den Großteil der Website gestaltet. Von hier aus wird es reibungslos laufen.

Schritt 13 - Anwenden von Stilen auf unseren Körperbereich

Es gibt nicht zu viele Stile, die hier angewendet werden müssen - nur einige. Beginnen wir mit den Titeln. Wir möchten, dass sie eingerückt aussehen, indem wir die inneren unteren Zeichenkanten hervorheben. Dies ist ein Stil, der häufig auf Apple-Websites verwendet wird. Wenden Sie den unten gezeigten Stil auf den Titeltext "Aurora" an. Wenden Sie denselben Stil auch auf die Titel "Screenshots" und "Features" an. Ändern Sie bei diesen beiden späteren Titeln die Deckkraft auf 40% (alles andere in diesem Schlagschatten-Ebenenstil ist gleich).

Wenden Sie den gleichen Ebenenstil auf die Aufzählungspunkte in der Spalte "Feature" an, der auf den Titel angewendet wird. Die bisherigen Ergebnisse sind nachstehend aufgeführt.

Kopieren Sie nun die horizontale Regel aus dem Abschnitt "promotion", ändern Sie die Farbe in Dunkelblau (#131828) und skalieren Sie sie so, dass sie in den Bereich über dem Titel "Screenshots" passt. Beachten Sie, wie der Stil beibehalten wird.

Kopieren Sie nun dieselbe horizontale Regel und verwenden Sie mehrere Kopien davon in der letzten Spalte dieses Abschnitts, wie unten gezeigt. Stellen Sie sicher, dass Sie die vorhandenen nicht gestalteten horizontalen Regeln löschen.

Befolgen Sie nun für diese Platzhalterbilder die gleichen Schritte wie in Schritt 10. Wenden Sie die gleichen Ebenenstile und die Hintergrundmusterfüllung "Purple Rain" an. Dies ist nur eine schnelle Möglichkeit, diesen Bereich für die Kundenbewertung gut aussehen zu lassen, bevor Sie die tatsächlichen Fotos erhalten, die später dort abgelegt werden. Der letzte Abschnitt "body" ist unten gezeigt.

Schritt 14 - Stil auf den unteren Bereich anwenden

Wenden wir zunächst auf unsere Titel denselben Ebenenstil für Abschrägen und Prägen an wie auf den Text in unserer primären Navigation in Schritt 8. Ziehen Sie nun vier Kopien unserer stilisierten horizontalen Regel nach unten und ändern Sie die Größe nach Bedarf, oder wenden Sie dieselben Stile und an Färben Sie die vorhandenen horizontalen Linien wie im Abschnitt "body".

Ersetzen Sie die verbleibenden horizontalen Regeln dieses Abschnitts durch Bindestriche. Hierfür können Sie das Type Tool und den Dash Key verwenden. Ich habe dafür Myriad Pro mit 14pt verwendet. Dies wird in CSS codiert, aber wir möchten sicherstellen, dass wir dies im Design effektiv kommunizieren.

Wenden Sie auf unsere Schaltflächen dieselben Ebenenstile an wie in unserer primären Navigation. Kopieren Sie einfach diese Ebenenstile nach unten. Stellen Sie sicher, dass Sie auch den Text der Schaltflächen stilisieren. Ersetzen Sie jetzt unseren Twitter-Vogel durch eine Vollfarbversion, die Sie kostenlos im Practika Icon-Paket des Smashing Magazine herunterladen können.

Wenden Sie die folgenden Ebenenstile auf den Hintergrund des "bottom" Abschnitts an und wir sind fertig!

Abschluss

Es gibt viele kreative Website-Lösungen, die Sie mit nur einer Handvoll ausgewählter Elemente, einem interessanten Farbschema, der Verwendung geeigneter Stile und der Beachtung subtiler Lichteffekte erstellen können. Das endgültige Bild ist unten. Sie können hier eine größere Version anzeigen.