Entwerfen Sie ein sauberes und elegantes Blog-Layout in Photoshop CS6
In diesem Tutorial zeige ich Ihnen den Prozess von ein einfaches und sauberes Design-Blog erstellen mit dem neuesten Photoshop. Wir werden das Neue nutzen Zeichenstile und Absatzstile um uns zu helfen, den Prozess zu rationalisieren.
Um diesem Tutorial zu folgen, benötigen Sie die folgenden Ressourcen:
- Kostenlose Font Sansation von Bernd Montag.
- 26 Wiederholbares Pixelmuster aus PSDfreemium.
- Kostenlose Social Media Icons von Daniele Selvitella.
- Demo
Die Leinwand vorbereiten
Schritt 1
In diesem Design werden 960 g als Framework verwendet. Laden Sie die Vorlage von der Hauptseite und innerhalb der ZIP-Datei herunter und suchen Sie nach der Photoshop-Datei. Öffnen Sie die "12 Column Grid" -Datei in Photoshop.
Klicken Sie auf das Augensymbol für die 12 Col Grid-Ebene, um es auszublenden. wir werden es vorerst nicht brauchen.
Schritt 2
Die aktuelle Leinwandgröße ist zu klein. Klicken Bild> Leinwandgröße (oder Strg + Alt + C). Fügen Sie eine größere Größe hinzu und stellen Sie sicher, dass der Ankerpunkt auf die Mitte eingestellt wird.
Schritt 3
Drücken Sie Strg + R, um das Lineal anzuzeigen. Klicken Ansicht> Neu Leitfaden für die Erstellung eines neuen Leitfadens, der uns bei der genauen Gestaltung hilft Wählen Vertikale und bei Position: 185 px um eine vertikale Hilfslinie 185 px aus der oberen linken Ecke der Leinwand zu erstellen.
Schritt 4
Zeichnen Sie an der Position eine weitere vertikale Führung 150 px, 1095 px und 1130 px.
Nachfolgend finden Sie unsere letzte Anleitung in der Leinwand.
Farbthema vorbereiten
Schritt 5
Für dieses Design verwenden wir eine schöne Farbkombination von Colorlouver. Klicken Sie auf den Link Vorschau, um die Farbkombination als JPEG-Datei zu öffnen.
Speichern Sie die Farbkombination und platzieren Sie sie in der Photoshop-Datei. Wenn Sie das Bild direkt auf der Leinwand platzieren, können Sie die Farbe schneller und einfacher abtasten.
Den Hintergrund vorbereiten
Schritt 6
Wählen Hintergrund Schicht Klicken Sie auf das Sperrsymbol oben im Ebenenbedienfeld, um die Sperre aufzuheben. Doppelklicken Sie auf die Miniaturansicht, um ihre Farbe zu ändern.
Klicken Sie auf die zweite Farbe, # 948371, um es auszuwählen.
Schritt 7
Zeichnen Sie eine rechteckige Form auf die Leinwand. Dies wird der zweite Hintergrund sein.
Schritt 8
Lass die Form ausgewählt. In dem Optionsleiste, öffnen Füllen Farbe und dann auf die Farbrad-Symbol. Wenn das Dialogfeld "Farbauswahl" geöffnet ist, klicken Sie auf die erste Farbe, um sie auszuwählen. Für seine Schlaganfall Farbauswahl Keiner.
Schritt 9
Erstellen Sie eine neue Ebene und wählen Sie dann mit dem rechteckigen Auswahlwerkzeug die obere Leinwand aus. Aktivieren Sie das Farbverlaufswerkzeug und fülle es mit radial Gradient von weiß bis schwarz. Stellen Sie sicher, dass der Verlauf auf der Leinwand zentriert ist.
Ändern Sie seine Mischung Modus zu Bildschirm und reduzieren seine Opazität zu 37%.
Schritt 10
Erstellen Sie eine neue Ebene und nennen Sie sie "Schatten"..
Zeichnen Sie eine rechteckige Auswahl am unteren Rand des sekundären Hintergrunds (siehe Abbildung). Klicken Bearbeiten: Füllen. einstellen Benutzen zu Schwarz. Klicken OK um die Auswahl mit schwarz zu füllen.
Schritt 11
Erweichen Sie es mit Gaußscher Unschärfe. Klicken Filter> Unschärfe> Gaußsche Unschärfe.
Schritt 12
Halten Sie die Alt-Taste gedrückt und platzieren Sie den Cursor zwischen Schatten und oberer Hintergrund Schicht. Klicken Sie auf, ohne die Alt-Taste loszulassen wandeln Sie die Ebene in Schnittmaske um. Durch die Umwandlung in eine Schnittmaske wird der Schatten jetzt in den oberen Hintergrund verschoben.
Schritt 13
Bring den Schatten herunter Opazität zu 50% um es subtil zu machen. Unten sehen Sie das Ergebnis in 100% Vergrößerung.
Schritt 14
Es ist immer eine gute Idee, diese Ebenen in einer Gruppe zusammenzufassen. Um dies zu tun, Alle Ebenen auswählen und klicken Sie dann auf Strg + G.
Header
Schritt 15
Zeichnen Sie wie gezeigt ein Rechteck auf der oberen Leinwand.
Schritt 16
In dem Optionsleiste, einstellen Schlaganfall Farbe zu # af9f8e.
Schritt 17
Für seine Füllen Farbe auswählen linearer Gradient von # d0c4b9 bis # a89c91.
Unten ist das Ergebnis in 100% Ansicht.
Name der Site
Schritt 18
Fügen Sie den Namen der Site auf der linken Seite des Designs hinzu. Beachten Sie die Platzierung wie unten gezeigt. Doppelklicken Sie auf den Text und fügen Sie ihn hinzu Schlagschatten. Verwenden Sie als Schriftart Sansation.
Speisekarte
Schritt 19
Zeichnen Sie Menüs auf der anderen Seite der Menüleiste. Verwenden Sie die Schrift Sansation 14 pt. Beachten Sie erneut die Platzierungen.
Schritt 20
Setzen Sie für das aktive Menü den Schriftarttyp auf Fett.
Schritt 21
aktivieren Sie Polygon-Werkzeug und setzen Seiten zu 3. Zeichnen Sie eine Dreiecksform mit Füllen Sie: # 3d3123 und Schlaganfall: Keine. Hinzufügen Ebenenstil > Schlagschatten.
Schritt 22
Lassen Sie uns das aktive Menü betonen, indem Sie darunter eine Linie hinzufügen. Aktivieren Sie das Linienwerkzeug und sein Gewicht auf 5 px. Wählen # f76b6a für seine Füllung, ohne Schlaganfall.
Setzen Sie die Linie direkt unter das aktive Menü und fügen Sie am unteren Rand der Menüleiste 1 px Platz hinzu.
Zeichenstile verwenden
Schritt 23
Speichern Sie die Zeicheneinstellung als Zeichenstil. Diese Funktion ist eine vereinfachte Version von Zeichenstilen in InDesign. Um es zu speichern, aktivieren Sie den Text und klicken Sie auf das Symbol 'Neuer Zeichenstil'.
Doppelklicken Sie auf den neuen Zeichenstil und verwenden Sie die folgende Einstellung.
Schritt 24
Wählen Sie das andere Menü aus und klicken Sie auf den Zeichenstil, um ihn anzuwenden. Wenn Sie ein Pluszeichen neben dem Zeichenstil finden, bedeutet dies, dass der Charakter eine andere Einstellung hat. Um die Einstellungen zu überschreiben, klicken Sie auf das kreisförmige Pfeilsymbol.
Schritt 25
Wiederholen Sie den vorherigen Schritt, um einen neuen Zeichenstil für das aktive Menü zu erstellen.
Schritt 26
Was ist der Sinn der Verwendung von Zeichenstilen? Zeichenstile helfen uns, die Zeicheneinstellung zu zentralisieren. Wir können den Zeichenstil einfach bearbeiten, um jeden Text mit diesem Stil zu bearbeiten. Sehen Sie ein Beispiel unten. Wenn wir den Schrifttyp im Zeichenstil bearbeiten Hauptmenü - Normal Bei Corbel wird das normale Menü automatisch in Corbel geändert.
Schritt 27
Erstellen Sie eine neue Ebene und platzieren Sie sie unter der Menüleiste. Klicken Sie bei gedrückter Strg-Taste auf die Menüleiste, um eine neue Auswahl basierend auf ihrer Form vorzunehmen. Fülle es mit schwarz.
Schritt 28
Auswahl mit Strg + D entfernen. Erweichen durch Hinzufügen Gaußscher Weichzeichner, Filter> Unschärfe> Gaußsche Unschärfe.
Schieberegler
Schritt 29
Zeichnen Sie eine rechteckige Form mit der Breite von 10 Spalten (siehe unten)..
Für seine Füllfarbe wählen # dfd1c2. Für seine Schlaganfall wählen # c8baac mit Größe 10 pt. Klicken Sie auf den kleinen Dropdown-Pfeil neben der Zeilenvorschau und stellen Sie sicher, dass dies der Fall ist Innen ausrichten ist ausgewählt.
Schritt 30
Fügen Sie ein Bild oben in den Rahmen ein. Konvertieren Sie es in Schnittmaske Durch Drücken von Strg + Alt + G. Das Bild wird automatisch in den Rahmen des Schiebereglers verschoben. Bei Bedarf können Sie das Bild verschieben und dessen Größe ändern, ohne den Rahmen zu beeinflussen.
Schritt 31
Zeichnen Sie hinter dem Schieberegler eine weitere rechteckige Form mit derselben Farbe. Stellen Sie sicher, dass es an der äußersten Führung einrastet. Hinzufügen Ebenenstil> Musterüberlagerung unter Verwendung des Pixelmusters von PSDfreemium. Ton herab sein Opazität um es subtil zu machen.
Schritt 32
Zeichnen Sie eine rechteckige Form über der Form mit Füllen Sie: # b3aca5 und kein Schlaganfall. Drücken Sie Strg + T und dann drehen Sie es um 45 °. Ebenenform in konvertieren Schnittmaske.
Schritt 33
Duplizieren Sie die Form und ändern Sie ihre Größe. Ändern Sie seine Füllen zu einer dunkleren Farbe. Ebenenform in konvertieren Schnittmaske.
Schritt 34
Wiederholen Sie den gleichen Schritt, um einen anderen Pfeil auf der anderen Seite zu zeichnen.
Schritt 35
Halten Sie die Strg-Taste gedrückt, um eine neue Auswahl zu treffen. Erstellen Sie eine neue Ebene und konvertieren Sie sie in eine Schnittmaske. Füllen Sie die Auswahl mit schwarz.
Schritt 36
Deaktivieren Sie dann (Strg + D) erweichen es mit Gaußscher Weichzeichner.
Sie können bei Bedarf die Deckkraft für den Schatten reduzieren.
Schritt 37
Zeichnen Sie mit ein abgerundetes Rechteck in die Ecke des Schiebereglers Füllen Sie # c8baac.
Schritt 38
Zeichne einen Kreis innerhalb der Form. Set seine Schlaganfall zu schwarz mit Größe 1 Punkt und Entfernen Sie die Füllung.
Schritt 39
Wähle aus Kreis Pfad mit Pfadauswahl Werkzeug. Halten Sie die Umschalttaste gedrückt und ziehen Sie den Pfad, um ihn zu kopieren.
Wiederholen Sie dies, um weitere Kreise zu zeichnen.
Schritt 40
Wählen Sie einen Kreispfad aus. Drücken Sie Strg + Umschalttaste + J, um es auf eine neue Ebene zu schneiden.
Schritt 41
In dem Optionsleiste, entferne seine Schlaganfall und ändern Sie seine Füllen zu einem radial Farbverlauf von # e38989 bis # bb5c5c. Hinzufügen Ebenenstil> Äußeres Glühen und Schlagschatten.
Schritt 42
Zeichnen Sie eine elliptische Auswahl unter dem Schieberegler. Erstelle eine neue Ebene und fülle sie mit schwarz.
Schritt 43
Heben Sie die Auswahl auf (Strg + D). Erweichen Sie mit Gaußscher Weichzeichner.
Unterer Hintergrund
Schritt 44
Zeichnen Sie eine weitere rechteckige Form für den unteren Hintergrund. Verwenden Sie dasselbe Füllen und Schlaganfall Farbe als Schiebereglerform.
Seien Sie wie immer sehr vorsichtig bei der Platzierung. Wir möchten, dass es jeden Guide auf der Leinwand abdeckt.
Hinzufügen Ebenenstil> Musterüberlagerung.
Unten ist das Ergebnis in 100% Vergrößerung.
Schritt 45
Wählen Sie den oberen Bereich mit dem Rechteck-Auswahlwerkzeug aus.
Schritt 46
Erstellen Sie eine neue Ebene und platzieren Sie sie hinter der Form. Füllen Sie die Auswahl mit schwarz. Drücken Sie Strg + T, klicken Sie mit der rechten Maustaste und wählen Sie Perspektive.
Ziehen Sie die oberen Ecken nach außen.
Klicken Sie erneut mit der rechten Maustaste und wählen Sie Rahmen. Ziehen Sie den oberen Griff nach unten.
Klicken Sie mit der rechten Maustaste und wählen Sie Kette. Linkes und rechtes Segment nach innen ziehen.
Erweichen Sie mit Gaußscher Weichzeichner.
Ton ab Opazität zu 20%.
Schritt 47
Zeichnen Sie ein weißes Rechteck im Hintergrund. Dies wird Hintergrund für den Hauptinhalt der Website sein.
Fügen Sie links, rechts und oben im Hintergrund ein Leerzeichen von 10 px hinzu. Der Abstand sollte einfach sein, da wir die Führung in frühen Schritten erstellt haben. Hinzufügen Ebenenstil> Äußeres Glühen.
Schritt 48
Fügen Sie eine neue Hilfslinie hinzu, 25 px von der oberen Seite der Form.
Abschnittsüberschrift
Schritt 49
Fügen Sie einen neuen Zeichenstil für den Titel des Seitenabschnitts und seine Beschreibung hinzu.
Fügen Sie den Titel und die Beschreibung des Abschnitts mit dem Textwerkzeug hinzu. Wenden Sie Stile an, die wir zuvor erstellt haben. Stellen Sie sicher, dass Sie mit der Hilfe der zuvor erstellten Anleitung von der oberen Seite des Hintergrunds einen Abstand von 25 px hinzufügen.
Schritt 50
Zeichnen Sie eine 5 px-Linie unter der Beschreibung der Site mit Füllen: # 938270 und Schlaganfall: Keine.
Blogeintrag
Schritt 51
Erstellen Sie einen anderen Zeichenstil für den Beitragstitel.
Schritt 52
Fügen Sie einen Beitragstitel hinzu und wenden Sie den vorherigen Zeichenstil an.
Schritt 53
Zeichnen Sie eine Rechteckform mit 4 Spaltenbreite unter dem Titel. einstellen Weiß für seine Füllen und #bebebe für seine Schlaganfall. Hinzufügen Ebenenstil> Kontur.
Schritt 54
Fügen Sie ein Bild über die Form ein. Konvertiere es in eine Schnittmaske (Strg + Alt + G).
Schritt 55
Zeichnen Sie ein abgerundetes Rechteck mit Füllen Sie: # 8e8380 und Schlaganfall: Keine. Konvertieren Sie es in Schnittmaske.
Schritt 56
Erstellen Sie neue Zeichenvorlagen für die Blog-Metadaten.
Schritt 57
Fügen Sie Metadatentext oberhalb der Form hinzu und wenden Sie den zuvor erstellten Zeichenstil an.
Schritt 58
aktivieren Sie Art Werkzeug und klicken und ziehen, um ein Textfeld zu erstellen. Stellen Sie die Breite auf 4 Spalten ein. Klicken Geben Sie> Lorem Ipsum einfügen ein um es mit automatisch generiertem Lorem Ipsum aus Photoshop zu füllen.
Schritt 59
Erstellen Sie einen neuen Absatzstil für den Zeicheninhalt. Klicken Sie im Absatzformatebedienfeld auf das neue Symbol.
Doppelklicken Sie auf den Absatzstil und verwenden Sie die folgende Einstellung.
Schritt 60
Wenden Sie diesen Stil auf den Beitragsinhalt an. Sie können auch mit den Einstellungen für Einzug und Abstand experimentieren.
Deaktivieren Sie für das Webdesign die Silbentrennung.
Schritt 61
Zeichnen Sie ein abgerundetes Rechteck mit Füllen Sie: # 8e8380 und Schlaganfall: Keine. Hinzufügen Ebenenstil> Musterüberlagerung. Verwenden Sie für die Konsistenz das gleiche Muster wie im Schieberegler.
Schritt 62
Fügen Sie eine Schaltflächenbeschriftung hinzu. Ich empfehle Ihnen, es als Zeichenstil zu speichern. Auf diese Weise können wir es problemlos für andere Tasten verwenden.
Schritt 63
Die vorherige Taste ist für den Normalzustand. Lassen Sie uns es duplizieren und seine Farbe in ändern # f76b6a. Setzen Sie außerdem den Etikettentyp auf Fett.
Schritt 64
Platzieren Sie den Beitrag in einer Gruppe und drücken Sie dann Strg + J, um ihn zu duplizieren. Ziehen Sie die Gruppe bei gedrückter Alt-Taste.
Wiederholen Sie den gleichen Schritt, um weitere Beiträge zu erstellen. Denken Sie daran, das Bild und den Titel jedes Beitrags zu ändern.
Schritt 65
Duplikat Weiterlesen und ändern Sie die Beschriftung in Nummer. Wir werden es für die Seitennavigation verwenden. Denken Sie daran, eine der Schaltflächen für den Hover-Zustand einzustellen.
Schritt 66: Fußzeile
Beginnen wir mit der Arbeit an der Fußzeile. Fügen Sie einen Widget-Titel und seine Beschreibung hinzu.
Schritt 67
Fügen Sie einen Link hinzu und zeichnen Sie eine 1 px-Linie darunter. einstellen Füllen: Keine und Schlaganfall: # 8e8380.
Schritt 68
Klicken Mehr Optionen Taste und wählen Sie gestrichelte Linie.
Schritt 69
Fügen Sie weitere Links zum Widget hinzu.
Schritt 70
Duplizieren Sie das Widget.
Schritt 71
Wir müssen auch die Hover-Bedingung hinzufügen. Setzen Sie einen Link auf Fett.
Fügen Sie unter diesem aktiven Link eine 5 px-Linie hinzu. Stellen Sie die Farbe auf # f76b6a. Aus Konsistenzgründen ähnelt das Aussehen dieser Verknüpfung dem aktiven Menü in der Menüleiste.
Schritt 72
Fügen Sie im unteren Bereich ein weiteres Rechteck hinzu. Set seine Füllen zu # 3d3123.
Fußzeileninformationen
Schritt 73
Hinzufügen von Fußzeileninformationen mit Art Werkzeug. Gib es dunkel Schlagschatten Kontrast zum Hintergrund hinzufügen.
Soziales Netzwerk
Schritt 74
Fügen Sie einige Social Media-Symbole von Daniele Selvitella hinzu. Hinzufügen Ebenenstil> Äußeres Glühen.
Schritt 75
Normales Symbol auf verringern 50%. Für den Hover-Zustand behalten wir es einfach bei Opazität beim 100%.
Schritt 76
Schnappen Sie sich ein Freihand-Cursor-Symbol und platzieren Sie den kleinsten Hand-Cursor über dem aktiven oder schwebenden Link.
Endergebnis
Das ist unser Endergebnis. Sie sehen, dass die neueste Photoshop-Version einige interessante Funktionen zum Entwerfen eines Weblayouts bietet. Zeichenstile und Absatzstile sind eine wesentliche Verbesserung für jeden Webdesigner.
- Demo
- Quelle herunterladen
