() translation by (you can also view the original English article)
Aktualisiert mit dem Coding Tut! Dieses Mal habe ich für dich ein lustiges Tutorial für alle. In Teil 1 werden wir ein sehr originelles Design für alle Comicfans da draußen erstellen. Wir werden dieses Blog-Layout mit verschiedenen Tricks in Photoshop von Grund auf neu erstellen, damit es fantastisch aussieht. Dann lernen wir in Teil 2, wie man es in Scheiben schneidet, codiert und bereit macht, um es in ein Blog-CMS-Theme umzuwandeln. Sind Sie bereit?
Die Codierungsphase ist verfügbar
Die Codierungsphase des Tutorials (Teil 2) ist jetzt auf unserer Schwesterseite Nettuts verfügbar! Wenn Sie mit dieser Entwurfsphase fertig sind, gehen Sie zu Nettuts, um sie in HTML/CSS zu schneiden und zu codieren. Vielen Dank für all das Feedback und die Anfragen für das Follow-up an alle!
Bevor Sie beginnen
Lassen Sie es uns beginnen! Um das Lesen zu beschleunigen, werde ich einige der grundlegendsten Erklärungen vermeiden (wie das Erstellen einer Ebenenmaske oder das Bearbeiten der Handler oder Beziers einer Vektorform). Sie benötigen einige Grundkenntnisse über Ebenen, Hilfslinien, Vektor- und Ebenenmasken, Pinsel, das Zeichenstift-Werkzeug und die Arbeit mit Typografie (Zeichen und Absätze).
Die Assets für dieses Tutorial sind:
- Die Papierstruktur - Schrott
- Sunburst-Formen
- Comic-Schriften von Font Squirrel (Komika-Titel und Komika-Text)
- Social Media Icon Pack von Komodo Media
Der erste Schritt besteht darin, ein Modell zu erstellen, zu kritzeln oder einfach nur das Layout auf einer Serviette zu skizzieren. Ein grober Entwurf der Site-Struktur erleichtert das Platzieren der Elemente auf dem Design. Unten sehen Sie eine einfache Skizze mit den folgenden Elementen:
Eine Kopfzeile mit dem Logo, der Suchleiste und den Links zu sozialen Medien neben der Hauptnavigationsleiste.
Ein Banner mit vorgestellten Beiträgen zeigt an, wie der Beitragstext über dem Bild in einer Sprechblase platziert wird, um den "Comic"-Stil darzustellen.
In einem Inhaltsbereich mit einer Liste von Beiträgen, die in zwei Spalten angezeigt werden, ist jedem Beitrag ein Bild zugeordnet, und der Text wird auch in einer Gesprächsblase angezeigt.
Eine Fußzeile mit einer Liste der Kategorien des Blogs, dem Archiv und dem beliebten Beitrag sowie den neuesten Kommentaren und den Copyright-Informationen.
Schritt 1: Einrichten des Dokuments
Öffnen Sie Photoshop, laden Sie die 12-Spalten-Photoshop-Vorlage von 960 Grid System herunter oder erstellen Sie ein neues Dokument 960px mit und zeichnen Sie einige Hilfslinien am linken und rechten Rand.
Erhöhen Sie den Arbeitsbereich, um zu sehen, wie er bei größeren Auflösungen aussieht, und erhöhen Sie auch die Höhe. Ich stelle die Dokumentabmessungen auf 1420 Pixel Breite und 1200 Pixel Höhe ein. Gehen Sie schließlich zu Ebene > Neue Füllebene > Volltonfarbe... und legen Sie einen schwarzen Hintergrund (#000000) für die Leinwand fest.
Schritt 2: Header-Hintergrund
Zeichnen Sie eine horizontale Hilfslinie etwa 450 Pixel vom oberen Rand entfernt. Wir verwenden sie als Referenzhilfe, um oben auf der Seite einen Farbton hinzuzufügen. Zeichnen Sie mit dem Rechteck-Werkzeug ein breites Rechteck mit dieser Farbe als Vordergrund (#AA0001). Wenden Sie dann eine Verlaufsebenenmaske (Schwarz bis Weiß) auf das Rechteck an, um den unteren Teil davon auszublenden.
Tipp: Verwenden Sie niemals eine Verlaufsebene für Hintergründe, da der Hintergrund beim Erhöhen der Höhe der Leinwand (eine im Webdesign sehr verbreitete Praxis) verzerrt wird.
Schritt 1: Fügen Sie dem Hintergrund eine Textur hinzu
Öffnen Sie die "Papierstruktur" aus den Assets. Kopieren Sie sie und fügen Sie sie über der roten Verlaufsebene ein. Skalieren Sie es, damit es in die Grenzen des Designs passt, und ändern Sie die Füllmethode der Ebene in "Linear nachbelichten ". Wir werden dies als großen Bildhintergrund schneiden, aber für breitere Auflösungen müssen wir die Ränder des Papiers subtil mit dem schwarzen Hintergrund zusammenführen. Verwenden Sie dazu mit dem Brennen-Werkzeug die Bereiche nahe dem linken und rechten Rand unseres Papiers Textur. Sie können einen großen und weichen Pinsel (0% Härte) verwenden.
Halten Sie Ihre Ebenen immer organisiert und legen Sie beide Ebenen ("Papier" und "Rechteck") in einem Ordner mit dem Namen "Header Bg" ab.
Schritt 1: Sonnenausbrüche
Lassen Sie uns mit dem Comic-Stil fortfahren und einige Sonnenausbruch-Streifen hinzufügen, um einen dramatischen Hintergrund für das Logo zu schaffen.
Öffnen Sie die "Sonnenausbruch"-Formen aus den Assets. Wählen Sie im Benutzerdefinierte Form-Werkzeug Ihre bevorzugte Sonnenausbruch-Form aus und zeichnen Sie sie über die rote Verlaufsebene. Platzieren Sie die Form nahe am linken Rand der 960-Vorlage (zeigen Sie die Hilfslinien, um die Grenzen zu sehen). Wenden Sie auf die Ebene "Sunburst" eine Radialgradienten-Ebenenmaske an (weiß in der Mitte und schwarz außen). Ändern Sie die Ebenendeckkraft auf 50%. Optional: Malen Sie mit einem unregelmäßigen Pinsel mit Schwarz über die Ebenenmaske, um eine stärkere Verschmelzung zwischen Sonnenausbruch und Hintergrund zu erzielen.
Schritt 1: Halbton
Um den Comic-Stil durchzusetzen, werden wir einige Halbtonpunkte über dem Header-Hintergrund hinzufügen. Erstellen Sie eine neue Ebene über der Ebene "Sunburst" und rendern Sie dort einige Schwarzweißwolken (Filter > Rendern > Wolken). Gehen Sie dann zu Filter > Pixelate > Color Halftone. Ändern Sie die Füllmethode der Ebene "Halbton" in "Multiplizieren" und fügen Sie eine Ebenenmaske > Alle ausblenden hinzu. Malen Sie dann mit einem großen und weichen Pinsel (Farbe: Weiß und Deckkraft und Fluss auf 75%) einige Bereiche der Ebenenmaske, um nur einen Teil des Halbtonmusters sichtbar zu machen.
Schritt 1: Der Titel
Nachdem Sie den Header-Hintergrund fertiggestellt haben, fügen wir das Logo hinzu. Zeichnen Sie zuerst eine Referenzanleitung ca. 180 px unter dem oberen Rand. Das Logo sollte sich nicht unter dieser Anleitung befinden. Geben Sie unter Verwendung der Schriftart "Komika Title" aus den Assets den Titel der Site ein ("Comicastic"). Schriftgröße: 68pt und Vordergrundfarbe: #FFB401. Fügen Sie dann weitere Textelemente hinzu, z. B. das Ausrufezeichen oder den Slogan in Weiß (Schriftgröße 16pt).
Drehen Sie dann mit dem freien Transformation-Werkzeug den Text um einige Grad nach links, damit er weniger formal aussieht. Versuchen Sie, so etwas wie das Bild unten zu erhalten, aber denken Sie daran, kein Element unter der Anleitung zu platzieren. Legen Sie schließlich alle diese Ebenen in einem Ordner mit der Bezeichnung "Logo" ab.
Schritt 7: Logo-Ebenenstile
Fügen Sie der Ebene "Logo" einen Ebenenstil > Verlauf-Ineinnderkopieren (#EA9403 - #FFC501), eine Kontur (Größe: 1 Pixel, Innen, #FCB600) und einen Schlagschatten (Schwarz, 50% Deckkraft, Abstand und Größe: 2 Pixel) hinzu. Verwenden Sie einen ähnlichen Stil wie der Slogan, ändern Sie jedoch die Farben der Verlauf-Ineinanderkopieren in #EDEDED - #FFFFFF und die Kontur in Weiß (#FFFFFF). Wenn Sie das Ausrufezeichen auf dem Logo platzieren, können Sie versuchen, es in eine Form zu konvertieren (Ebene > Typ > In Form konvertieren) und es ein wenig zu verzerren, wie unten im Bild gezeigt.
Ausgewählte Beiträge Banner
Schritt 8: Hintergrund
Verwenden Sie das abgerundete Rechteck-Werkzeug (Radius 5px), um ein breites Rechteck über das gesamte Banner unter dem Logo zu zeichnen, wie im Bild unten gezeigt. Die Höhe, wenn das Rechteck Ihnen entspricht, ist 250px. Wenden Sie dann eine Verlauf-Ineinanderkopieren (Farben: #DA7E00 - #F0AD00, Winkel: 90 °) und eine Kontur (Farbe: #F2AA00, Größe: 1 Pixel, Position: Innen) an.
Schritt 9: Ändern des oberen Banners
Greifen Sie mit dem Direktauswahl-Werkzeug (A) über unserem brandneuen abgerundeten Rechteck die Punkte der oberen linken Ecke und verschieben Sie sie nach rechts (Sie können die Cursor für eine genaue Bewegung verwenden). Bewegen Sie dann die unteren rechten Punkte einige Pixel nach links.
Schritt 10: Hinzufügen des verschiebbaren Bildbehälters
Zeichnen Sie nun mit dem Rechteck-Werkzeug ein graues Rechteck innerhalb des gelben Banners (ca. 630 x 250 Pixel). Sie können den unteren Teil des grauen Rechtecks einige Pixel vom unteren Rand des gelben Banners entfernt lassen, um ein Out-of- zu erstellen. Grenzen Wirkung. Fügen Sie eine Kontur (Größe: 1 Pixel, Position: Innen, Farbe: #FFFFFF) und einen Schlagschatten (Farbe: #000000, Deckkraft: 50%, Abstand: 0 Pixel, Ausbreitung: 0 Pixel, Größe: 5 Pixel) hinzu und versuchen Sie, das Rechteck zu platzieren wie das Bild unten zeigt. Legen Sie abschließend beide Ebenen (graue und gelbe Rechtecke) in einem Ordner mit dem Namen "Top Banner" ab.
Schritt 11: Hauptnavigation
Geben Sie mit der Schriftfamilie "Komika Text" die Seitennavigation oben rechts im oberen Banner ein, stellen Sie die Schriftgröße auf 18 Pixel und die Farbe #FFFFFF ein. Legen Sie es in einem Ordner mit dem Namen "Pages Navigation" ab. Stellen Sie sicher, dass sich dieser Ordner hinter dem "Top Banner" befindet. Zeichnen Sie dann mit dem abgerundeten Rechteck-Werkzeug (Radius: 3 Pixel, Farbe: #EFA800) ein Rechteck direkt hinter dem ersten Wort der Navigation und benennen Sie die Ebene "Ausgewählte Registerkarte". Bewegen Sie anschließend mit dem Direktauswahl-Werkzeug (A) die Punkte unten links, wie im Bild unten gezeigt. Wenden Sie als Nächstes eine Verlauf-Ineinanderkopieren auf die Ebene "Ausgewählte Registerkarte" an (Farben: #F0A900 - #FEBF00, Winkel: 90 °). Wenn Sie möchten, können Sie dem Navigationstext einen sehr subtilen Schlagschatten (Farbe: #000000, Deckkraft: 25%) hinzufügen.
Schritt 12: Fügen Sie die Bannerbilder hinzu
Fügen Sie ein beliebiges Bild über dem Banner ein, um ein aktuelles Beispiel anzuzeigen. Wenn das Bild größer als das Rechteck ist, können Sie eine Schnittmaske verwenden. Fügen Sie dazu das Bild über dem grauen Rechteck ein. Wählen Sie dann/Alt/Alt - Klicken Sie zwischen die beiden Ebenen, um das Bild innerhalb des Rechtecks zu beschneiden, ohne dass ein Zuschneiden erforderlich ist.
Schritt 13: Bannersteuerung
Wählen Sie das Benutzerdefinierte Form-Werkzeug aus, wählen Sie einen der Pfeile aus und zeichnen Sie ein Paar nebeneinander, wobei beide nach links zeigen. Wenden Sie dann sowohl auf eine Verlauf-Ineinanderkopieren (Nr. 6D0004 - Nr. 980000) als auch auf eine Kontur (Größe: 1 Pixel, Position: Innen, Farbe: Nr. B20002) an. Legen Sie beide Pfeile in einen Ordner mit dem Namen "Zurück" und verzerren Sie die Pfeile ein wenig, indem Sie die Steuerelemente für die freie Transformation verwenden und die Befehls-/Strg-Taste gedrückt halten. Duplizieren Sie dann den Ordner und benennen Sie ihn in "Weiter" um, verschieben Sie ihn rechts neben das Banner und gehen Sie zu Bearbeiten > Transformieren > Horizontal spiegeln, um seine Richtung zu ändern. Legen Sie schließlich beide Ordner "Next" und "Prev" in einem neuen Ordner mit dem Namen "Controls" ab.
Schritt 14: Steuerelemente schweben
Duplizieren Sie nun die Ordner "Weiter" und "Zurück" und wenden Sie einen anderen Ebenenstil auf die Pfeile an, um für jeden einen Hover-Effekt zu erstellen. Ich kopiere den Ebenenstil aus dem Ausrufezeichen des Titels.
Schritt 15: Halbtondetails
Erstellen Sie mit dem gleichen Vorgang wie in Schritt 5 eine Halbtonschicht über dem gelben Banner. Wenn die Ebene "Halbton" ausgewählt ist, führen Sie Befehl/Strg aus - Klicken Sie auf das gelbe Banner, drücken Sie dann Befehl/Strg + Umschalt + I, um die Auswahl umzukehren, und löschen Sie die Überschreitung. Ändern Sie die Füllmethode der Ebene "Halbton" auf "Ineinanderkopieren" und die Deckkraft auf 25%. Fügen Sie abschließend eine Ebenenmaske > Alle ausblenden hinzu und übermalen Sie mit einem großen weichen weißen Pinsel einige Bereiche der Ebenenmaske, um nur einige Teile des Musters sichtbar zu machen.
Schritt 16: Ausgewählter Artikel Talking Bubble
Jetzt ist es an der Zeit, ein Feld hinzuzufügen, in das der Inhalt des vorgestellten Beitrags eingefügt wird. Suchen Sie dazu mit dem Benutzerdefinierten Form-Werkzeug nach der Sprechblase mit abgerundeten Ecken und Rechtecken. Zeichnen Sie es über das Banner "Ausgewähltes Bild" und platzieren Sie es rechts, wie im Bild unten gezeigt. Bevor Sie eine dieser Funktionen entwerfen, müssen Sie einige Nachforschungen anstellen, ob es möglich ist, diese Art von Effekt zu erzielen. Auch wenn Sie nicht wissen, wie man codiert, können Sie nach vorhandenen Ajax-Bibliotheken (JQuery / MooWerkzeuge) suchen und sehen, was ist bereits fertig und funktioniert, und passen Sie dann Ihr Design an eine vorhandene Bibliothek an.
Verzerren Sie dann mit dem Direktauswahl-Werkzeug (A) die Form der Blase ein wenig. Zum Schluss einen Schlagschatten auftragen (Farbe: #000000, Deckkraft: 25%, Abstand: 5px, Ausbreitung: 0px, Größe: 10px).
Schritt 17: Empfohlener Beitragstext
Es ist Zeit, den Titel und einen Brief zu unserem vorgestellten Beitrag hinzuzufügen. Verwenden Sie für den Titel "Komika Title", 18pt. #680001. Verwenden Sie für den Text "Komika Text Tight", Größe: 16pt, Farbe: #1B1B1B. Platzieren Sie die Textebenen wie im Bild unten gezeigt rechtsbündig.
Schritt 18: Kommentarfeld und Post Meta
Fügen Sie nun eine weitere Blase hinzu, die diesmal jedoch kleiner ist. Verwenden Sie diese Farbe als Vordergrund: #9C0001 und fügen Sie eine Kontur-Ebenenstil hinzu (Farbe: #D00000, Größe: 1 Pixel, Position: Innen), wie im Bild unten gezeigt, und fügen Sie dann die hinzu Kommentarnummer mit Schriftart "Komika Title", Farbe: #FFFFFF und Größe: 24pt. Und das Wort "Kommentare" mit "Komika-Titel", Größe: 12pt, Farbe: #FFB301.
Fügen Sie zum Schluss eine kleine Meta (Informationen zum Beitrag) unter dem Beitragsbrief mit der Schriftart "Tahoma" hinzu, Größe: 10pt, Farbe: #1B1B1B. Wenn nicht genügend Platz für den Meta-Text vorhanden ist, können Sie das Direktauswahl-Werkzeug verwenden, um die Höhe des vorgestellten Post-Bubble-Box ein wenig zu erhöhen.
Tipp: Transformieren Sie niemals ein Element mit abgerundeten Vektoren mit dem freien Transformationswerkzeug in Photoshop. Dadurch wird die Ecke verzerrt. Wählen Sie die zu verschiebenden Punkte mit dem Direktauswahl-Werkzeug aus und verschieben Sie sie dann.
Schritt 19: Hintergrund des empfohlenen Beitragstitels
Duplizieren Sie die vorgestellte Post-Hintergrundblase, verbergen Sie den Schlagschatten, ändern Sie die Füllfarbe in Gelb (#FFC001) und rastern Sie sie. Wählen Sie dann mit dem Auswahl-Werkzeug für rechteckige Auswahlrechtecke die gesamte gelbe Blase unter der Titelzeile aus und löschen Sie die Auswahl. Fügen Sie als Nächstes eine Rahmenlinie hinzu, wobei die Ebene "Blasentitel" ausgewählt ist. Befehl/Strg - Klicken Sie auf die Vektormaske "Blasenhintergrund". Gehen Sie dann zu Bearbeiten > Ändern > Vertrag und setzen Sie den Wert auf 1px. Drücken Sie abschließend Befehl/Strg + Umschalt + I, um die Auswahl umzukehren und zu löschen.
Dies ist ein guter Zeitpunkt, um alles, was mit dem obersten Banner zu tun hat, in Ordnern anzuordnen und weitere Details hinzuzufügen, wenn Sie möchten. Ich füge eine gelbe Linie zwischen dem Post-Brief und dem Meta hinzu.
Hauptinhalt
Schritt 20: Inhaltshintergrund
Lassen Sie uns nun mit dem Hintergrund des Hauptinhalts fortfahren, einen Ordner mit dem Namen "Seiteninhalt" erstellen und ein weißes (#FFFFFF) Rechteck mit abgerundeten Ecken (Radius 5 Pixel) mit einer Höhe von mehreren Pixeln zeichnen (wenn die ursprüngliche Leinwandgröße zu diesem Zeitpunkt zu klein wird) kann seine Größe erhöhen, stellen Sie einfach sicher, dass der obere Rand unverändert bleibt).
Schritt 21: Bild posten
Es ist Zeit, Inhalte zur Seite hinzuzufügen. In Blogs erstellen wir standardmäßig eine Liste der neuesten Beiträge.
Zeichnen Sie zwei Quadrate (ca. 3 Spalten breit) und platzieren Sie sie wie im Bild unten gezeigt. Wenn Sie den gleichen Vorgang wie in Schritt 12 ausführen, fügen Sie einige Bilder über den Quadraten hinzu und verwenden Sie sie als Schnittmasken. Wählen Sie schließlich das Quadrat aus und fügen Sie ihm einen Kontur-Ebenenstil hinzu (Farbe: #FFB801, Größe: 1 Pixel, Position: Innen).
Wir werden eines dieser Bilder bearbeiten und den Inhalt hinzufügen und es dann so oft duplizieren, wie der Beitrag auf der Homepage angezeigt werden soll.
Schritt 22: Fügen Sie die Titel und Kategorien der Beiträge hinzu.
Zeichnen Sie zwei breite Rechtecke, ein gelbes (#F2AA00) und ein weiteres weißes mit gelbem Rand darunter (#FFB401). Geben Sie über dem gelben Streifen den Titel des Beitrags mit "Komika Title", Farbe: #670003, Größe: 18pt. Geben Sie auf dem weißen Streifen die Kategorienamen mit "Komika Text Tight" ein. Größe: 13pt, Farben #212121 für Links und #670003, wenn Sie mit der Maus darüber fahren.
Schritt 23: Post Brief und Meta
Zeichnen Sie erneut eine sprechende Blase über das Bild und den gelben Streifen, füllen Sie sie mit dieser Farbe: #333333 mit einer 1-Pixel-Kontur (Farbe: #696969) und wenden Sie auch den zuvor verwendeten Schlagschatten auf das Banner an. Fügen Sie dann einen kurzen Beispieltext mit "Komika Text Tight" hinzu. Größe: 14pt, Farbe: #FFFFFF, einen Meta-Beispieltext mit "Tahoma" 10pt Farbe #979797 und wenn Sie eine Linie zwischen beiden Texten (#4B4B4B) möchten.
Schritt 24: Fertigstellen des Hauptinhalts
Um diesen Teil zu beenden, fügen Sie eine Kommentarblase hinzu und wiederholen Sie im Grunde den Vorgang von Schritt 18. Dann legen Sie alles in Ordner. Ich nenne den Beitragsordner "Ein Beitrag". Duplizieren Sie es dann (Befehl/Strg + Ziehen) und platzieren Sie es rechts. Wiederholen Sie den Vorgang mit zwei oder drei Pfostenreihen, wie unten im Bild unten gezeigt. Erhöhen Sie die Höhe des weißen Hintergrunds nach Bedarf, damit alle Pfosten hineinpassen.
Schritt 25: Seiteninhaltsecke
Um den "Comic"-Stil zu verbessern, fügen wir unten rechts auf dem weißen Hintergrund eine einfache Seitenrolle hinzu.
Zeichnen Sie zuerst ein schwarzes Dreieck in der unteren rechten Ecke (Sie können das Zeichenstift-Werkzeug verwenden), duplizieren Sie es dann und verschieben Sie das Dreieck, sodass es zu einem "Reflex" des schwarzen Dreiecks wird. Sie können diese Kopie mit einer anderen Farbe füllen. Als nächstes verziehen Sie das zweite Dreieck und machen es zu einer kleinen Kurve. Wenden Sie dann auf das verzogene Dreieck eine Verlauf-Ineinanderkopieren mit einer schönen Farbmischung an: (#9C0001 - #FE0000 - #9C0001) und ändern Sie den Winkel auf alles, was entsprechend dem Winkel der Locke gut aussieht, in diesem Fall 108 Grad. Malen Sie anschließend mit einem weichen Pinsel (Schwarz, Deckkraft und Durchfluss 50%) einige Schatten in einer neuen Ebene hinter dem verzogenen Dreieck. Wenn Sie möchten, fügen Sie dem verzogenen Dreieck einige Punkte hinzu, um der Spitze eine abgerundete Ecke hinzuzufügen, wie unten im Bild unten gezeigt. Legen Sie abschließend alle Curl-bezogenen Ebenen in einem Ordner mit dem Namen "Page Curl" ab. Halten Sie es griffbereit, da wir es später verwenden.
Schritt 26: Fußzeilenhintergrund
Wir sind fast fertig. Erstellen Sie zuerst einen Ordner mit dem Namen "Fußzeile" und stellen Sie sicher, dass er sich unter dem Ordner "Seiteninhalt" befindet. Zeichnen Sie darin einen roten Kreis (#9C0001) und wenden Sie dann eine Gaußsche Unschärfe mit einem Radius von mindestens 65 Pixel an. Transformieren Sie dann den resultierenden unscharfen Kreis, damit er mit den Begrenzungsführungen übereinstimmt.
Schritt 27: Hintergrund-Sonnenausbrüche
Wählen Sie nun mit dem Benutzerdefinierten Form-Werkzeug eine der Sonnenausbruch-Formen aus und zeichnen Sie eine schwarze in der Mitte. Verringern Sie dann die Deckkraft auf 50%. Fügen Sie dann das Halbtonmuster über dem rot leuchtenden Kreis hinzu, verstecken Sie es mit einer Ebenenmaske und zeigen Sie nur einige Teile davon an. Zum Schluss die Deckkraft des roten Kreises auf 50% senken.
Schritt 28: Hintergrund des Fußzeileninhalts
Wir werden allgemeine Elemente eines Blogs wie Kategorien und Archiv in der Fußzeile hinzufügen.
Fügen wir nun einen Hintergrund für die Fußzeilenelemente hinzu, zeichnen ein abgerundetes Rechteck (Radius 5 Pixel) Farbe: #1A1A1A und setzen den Füllwert auf 50%, sodass er ungefähr 3 Spalten breit ist. Sie können Kopien davon erstellen, um 4 Felder in der Fußzeile anzupassen.
Schritt 29: Inhalt des Fußzeileninhalts - Curl
Wählen Sie das erste Rechteck aus (Sie können die anderen an dieser Stelle löschen). Duplizieren Sie dann den Ordner "Page Curl" und platzieren Sie ihn im Ordner "Footer". Transformieren Sie ihn so, dass er mit der unteren rechten Ecke des Rechtecks übereinstimmt. Ändern Sie dann die Farben des Verlaufs in verschiedene Grautöne. Fügen Sie der Rechteckebene schließlich einen Konturstil hinzu (1 Pixel, Innen, Nr. 242424).
Schritt 30: Kategorien
Fügen Sie nun den Titel des Abschnitts hinzu, in diesem Fall "Kategorien" mit "Komika-Titel", Größe: 14px Farbe: #F2AA00. Verwenden Sie Hilfslinien, um die Titelgrundlinie abzugrenzen. Halten Sie sie mindestens 20 Pixel unter dem Ende des Seiteninhaltshintergrunds. Fügen Sie dann einige Zeilen als Beispielkategorien hinzu, indem Sie "Komika Text Tight", Größe: 16px, Farbe: #FFFFFF und Rot (#EC000A) als Hover-Effekt verwenden. Fügen Sie als zusätzliches Detail für den Hover-Effekt mit dem Benutzerdefinierten Form-Werkzeug einen kleinen gelben Pfeil (#FFB301) hinzu. Legen Sie alle Ebenen in einem Ordner mit dem Namen "Footer Element" ab.
Schritt 31: Duplizieren Sie den Fußzeilenabschnitt
Duplizieren Sie den Ordner "Fußzeilenelement" und verschieben Sie ihn nach rechts. Ändern Sie die Wörter, um diesmal "Archive" darzustellen.
Duplizieren Sie dann den Ordner erneut, aber erweitern Sie diesmal den durchscheinenden Hintergrund, um ihn zweimal breiter zu machen. Geben Sie oben die Titel für "Beliebte Beiträge", "Neueste Beiträge" und "Letzte Kommentare" ein, verwenden Sie Gelb für den ersten und Grau für den andere zwei. Wie Sie sich vorstellen können, hat dies eine ähnliche Funktionalität wie ein Bereich mit Registerkarten. Fügen Sie dann ein kleines gelbes Dreieck hinzu, um die ausgewählte Registerkarte zu markieren.
Schritt 32: Inhalt des Registerkartenbereichs
Da dieser Teil hauptsächlich Listen von Posts enthält, können wir sie hinzufügen. Im Grunde handelt es sich um eine Kombination aus "Komika Title" und "Komika Text Tight" mit verschiedenen Farben (siehe Abbildung unten). Die erste Zeile ist ein Beispiel für das ausgewählte (Hover-) Element. Fügen Sie dazu ein schwarzes (#000000) abgerundetes Rechteck hinter dem Text hinzu und fügen Sie eine Ebenenmaske mit horizontalem Verlauf (Schwarz zu Weiß) hinzu.
Fügen Sie zum Schluss einen kleinen Pager am Ende dieses Abschnitts hinzu.
Schritt 33: Suchleiste
Es ist Zeit, einige Details hinzuzufügen, um unsere Grafik fertigzustellen. Beginnen wir mit der Suchleiste. Erstellen Sie einen Ordner mit dem Namen "Suchleiste" über allem, erstellen Sie ein abgerundetes Rechteck (3 Pixel Radius, Farbe: #000000 mit einem Kontureffekt Größe: 1 Pixel, Position: Innen, Farbe: #7C0000) als Sucheingabe und ein kleines Rechteck für die Suchschaltfläche; Kopieren Sie den Ebenenstil des ausgewählten Elements in die Hauptnavigation und fügen Sie ihn in die Suchschaltfläche ein. Geben Sie für die eigentliche Schaltfläche das Wort "Go!" Überziehen Sie es mit Weiß und wenden Sie denselben Schlagschatten wie den Hauptnavigationstext an (das Recycling von Ebenenstilen spart viel Zeit). Geben Sie in der Sucheingabe das Wort "Auf der Suche nach etwas" mit "Komika Text Tight" ein. Farbe: #F9A600.
Fügen Sie dann ein Rechteck hinter allen Ebenen in der "Suchleiste" hinzu, füllen Sie es mit einem dunkelroten #380001 (Füllung: 50%) und wenden Sie eine Kontur mit dieser Farbe an: #890101. Konvertieren Sie es in ein intelligentes Objekt und wenden Sie eine Ebenenmaske > Alle ausblenden darauf an. Füllen Sie die Maske mit einem reflektierten Schwarz-Weiß-Verlauf, um die Effektshow unten im Bild zu erstellen.
Schritt 34: Social Media-Symbole
Wiederholen Sie den Vorgang des Hintergrunds der Suchleiste, diesmal jedoch mit einer Leiste mit geringerer Höhe und einer deutlich anderen Konturfarbe (#860001). Geben Sie dann das Wort "Follow us" mit "Komika title" ein und fügen Sie alle Symbole ein, die Sie hinzufügen möchten. Sie können die Mini-Symbole aus den Assets verwenden. Vergessen Sie nicht, Ihre Ebenen unter Ordnern zu organisieren.
Schritt 35: Fußgängernavigation und Copyright-Informationen
Nachdem wir die heutige Arbeit beendet haben, fügen wir die Fußzeilennavigation hinzu. Begrenzen Sie den Abschnitt mit einer weißen Linie, die mit einem reflektierten Schwarz-Weiß-Farbverlauf maskiert ist. Geben Sie die Navigationslinks mit Arial, Größe 10px, Farbe: #515151 ein und markieren Sie einen Hover-Effekt mit Gelb: #F2AA00. Fügen Sie dann den Copyright-Text rechtsbündig hinzu.
Schritt 36: Das ist es!
Überprüfen Sie abschließend, ob sich alle Ebenen in ihrem jeweiligen Ordner befinden.
Abschluss
Wir haben den grafischen Teil des Prozesses abgeschlossen. Jetzt ist es Zeit, über NetTuts+ zu springen, um zu sehen, wie dies geschnitten und in HTML+CSS umgewandelt wird. Sind Sie bereit?
