Entwerfen Sie in Adobe Photoshop ein professionelles, sauberes Community-Blog-Thema

In diesem Tutorial erfahren Sie, wie mit einfachen und unkomplizierten Designtechniken ein sauberes Community-Blog-Thema in Adobe Photoshop erstellt werden kann. Einige in diesem Lernprogramm behandelte Techniken umfassen die Verwendung des richtigen Abstands, der richtigen Typografie, der richtigen Farben und der richtigen visuellen Hierarchie - einige wichtige Werkzeuge in der Werkzeugbox eines erfolgreichen Designers. Lass uns anfangen!

Über das Design

Heute schauen wir uns das Design für Alex Pascals "Revolution Magazine" -Thema für WordPress an. Die vollständig codierte Version ist als WordPress-Blog-Thema auf ThemeForest verfügbar.

Das Revolution Magazine ist ein sauberes, modernes Premium-WordPress-Magazin, das auch als Community-Blog, persönliches Blog oder für was auch immer Sie es verwenden möchten, dient. Wenn Sie nach dem Funken gesucht haben, um Ihren einfachen alten Blog in ein beliebtes Magazin zu verwandeln, haben Sie ihn gefunden.

Alles beginnt jedoch mit dem Design, und Alex wird uns zeigen, wie er sich der Designphase dieses Projekts näherte. Da dies nur ein Design-Tutorial ist, wird er nicht auf die Themencodierung eingehen, aber denken Sie daran, dass Sie das Revolution-Thema bei ThemeForest lesen können, um ein Live-Beispiel zu sehen. Es gibt auch eine Reihe großartiger WordPress Theme Coding Tuts bei Nettuts (wie dieses hier). Wir hoffen es gefällt euch - lasst uns eintauchen!

Schritt 1

Gehen Sie zu Datei > Neu > und stellen Sie die Höhe auf ca. 2000 Pixel, die Breite auf 1400 Pixel und die Auflösung auf 72 dpi ein.

Wir müssen auch sicherstellen, dass unsere Herrscher und Führer angezeigt werden. Wir gehen also zu Ansicht > Extras/Lineale/Fang (damit unsere Objekte in Übereinstimmung mit unseren Hilfslinien einrasten).

Wir müssen jetzt einige Kurzanleitungen einrichten, die später im Entwurf verwendet werden sollen. Gehen Sie zu Ansicht > Neue Anleitung... > Aktivieren Sie "Vertikal" und geben Sie die folgenden Werte ein. Drücken Sie nach jedem "OK", um sie einzufügen. Wir möchten Richtlinien mit 220px, 250px, 380px, 420px, 830px, 860px, 880px, 1155px und 1180px.

Füllen wir nun unseren Hintergrund mit einer Volltonfarbe. Wählen Sie das Layer "Hintergrund" aus, klicken Sie mit der rechten Maustaste darauf, wählen Sie "Layer aus Hintergrund" und geben Sie ihr einen Namen. Erstellen Sie nun mit dem Rechteckigen Auswahlwerkzeug (M) eine Auswahl über die gesamte Leinwand und füllen Sie die Auswahl mit #d0d0d0.

Schritt 2

Wir werden jetzt einen Header-Hintergrund erstellen. Erstellen Sie ein neues Layer und nennen Sie sie "Kopfzeile". Nehmen Sie dann Ihr rechteckiges Auswahlwerkzeug (M) und treffen Sie oben auf Ihrer Leinwand eine Auswahl, die 175 Pixel hoch und vollständig über die Leinwand verteilt ist, und füllen Sie sie mit einer beliebigen Farbe. Doppelklicken Sie auf das Layer, die Sie gerade erstellt haben, und klicken Sie auf "Gradientsüberlagerung" > Vorhandenes Gradientsbild > setzen Sie dann die Farbe ganz rechts auf #383838. Positionieren Sie die linke Farbe bei ca. 60% und ändern Sie die Farbe in #2D2D2D.

Duplizieren Sie nun das Layer "Kopfzeile" und verschieben Sie sie direkt unter die erste Kopfzeile. Doppelklicken Sie erneut auf das Layer und gehen Sie zu "Gradientsüberlagerung" > vorhandenes Gradientsbild > und setzen Sie die Farbe ganz rechts auf #e0e0e0. Positionieren Sie die linke Farbe bei ca. 50% und ändern Sie die Farbe in #d0d0d0.

Klicken Sie nun auf "Inneren Schatten" und ändern Sie die Farbe in #EEEEEE, die Opazität auf 100%, den Abstand auf 1px, die Drossel auf 100% und die Größe auf 0px. Ändern Sie den Winkel auf 90 Grad und deaktivieren Sie "Globale Beleuchtung", da im gesamten Thema unterschiedliche Lichtwinkel verwendet werden.

Nachdem wir den Hintergrund fertig haben, erstellen wir ein Logo für unsere Website! Erstellen Sie mit dem Horizontal Type Werkzeug (T) ein neues Layer, die etwa 40 Pixel von oben entfernt und an der ersten Hilfslinie ausgerichtet ist. Geben Sie den Namen Ihrer Site in Ihrer bevorzugten Schriftart ein (Demobilder zeigen Helvetica Neue LT Std, aber reguläre Helvetica oder Arial funktioniert gut). Fahren Sie mit dem Ändern der Layerstile fort, wie im folgenden Beispiel gezeigt.

So sollte Ihr Header bisher aussehen.

Schritt 3

Eine Website ist nichts ohne Navigation, und eine gute dazu! Lassen Sie uns nun eine Navigationsleiste erstellen, die sich in unseren vorhandenen Header-Hintergrund einfügt.

Navigation

Erstellen Sie ein neues Layer und nennen Sie sie "Vertikaler Gradient ". Nehmen Sie das Rechteckige Auswahlwerkzeug (M) und treffen Sie eine Auswahl von 960 x 40 Pixel (115 Pixel) oben auf der Leinwand. Lassen Sie etwa 20 Pixel unter der Auswahl für den Hintergrund und füllen Sie sie mit einer beliebigen Farbe . Anschließend können Sie die im Bild unten gezeigten Layerstile zu dem gerade erstellten Layer hinzufügen.

Duplizieren Sie nun das soeben erstellte Layer und benennen Sie sie in "Horizontaler Gradient" um. Ändern Sie die Layerstile gemäß dem folgenden Bild.

Erstellen Sie abschließend eine 960 x 1 Pixel große Linie in einem neuen Layer namens "Darklight" direkt über den beiden vorherigen Layers und füllen Sie sie mit #1d1d1d. Ihre Navigation sollte jetzt ungefähr so aussehen wie im Bild unten.

Lassen Sie uns nun versuchen, eine benutzerdefinierte "Home" -Link-Schaltfläche zu erstellen, die sich von den übrigen Links in der Navigation abhebt. Erstellen Sie ein neues Layer und treffen Sie mit dem abgerundeten Rechteck-Werkzeug (U) eine Auswahl von etwa 50 x 60 Pixel vertikal, gefüllt mit #444444, und füllen Sie die unteren abgerundeten Kanten aus, sodass die Auswahl nur oben abgerundet wird.

Laden Sie dieses Startsymbol herunter, öffnen Sie es in Photoshop und importieren Sie es in Ihre vorhandene Leinwand. Ändern Sie die Größe auf ca. 18 x 17 Pixel und füllen Sie es mit #999999. Zentrieren Sie es in dem vorherigen Layer, die Sie erstellt haben, und jetzt haben Sie einen stilvollen Home-Link!

Als nächstes werden wir unserer Navigation Navigationselemente hinzufügen! Nehmen Sie Ihr horizontales Textwerkzeug (T), stellen Sie die folgenden Stile ein und geben Sie einen Menüpunkt ein. In unserem Beispiel ist der erste Punkt "Dokumentation" mit einer Beschreibung von "Theme Support & Guide". Fügen Sie so viele Elemente hinzu, wie Sie möchten, und lassen Sie zwischen jedem Menüelement einen Abstand von 20 Pixel.

Sozial-Medien-Symbole

Für den nächsten Schritt benötigen wir Sozial-Medien-Symbole. Zunächst laden wir dieses Set der Sozial-Medien-Symbole von KomodoMedia herunter, platzieren dann vier Symbole und entsättigen sie (Umschalt + Strg + U) wie im Bild unten.

Herzliche Glückwünsche! Der Header unserer Seite ist jetzt vollständig! Fahren wir mit dem Hauptteil der Site fort.

Schritt 4

Nachdem der gesamte Header fertig ist, fahren wir mit dem Hauptteil unserer Site fort.

Hauptkörper

Für den Anfang werden wir den Körper in zwei Hälften teilen - eine für den Hauptkörperinhalt und die andere für die Seitenleiste. Erstellen Sie ein neues Layer, nennen Sie sie "Hauptteil" und treffen Sie eine Auswahl mit dem Rechteckigen Auswahlwerkzeug (M) mit einer Breite von 640 Pixel und einer beliebigen Höhe (mindestens 1000 Pixel oder so), beginnend direkt unter dem Hintergrund der Kopfzeile. Füllen Sie diese Auswahl mit #ffffff. Erstellen Sie nun ein neues Layer, nennen Sie sie "Seitenleiste" und treffen Sie eine Auswahl mit einer Breite von 320 Pixel rechts neben dem Layer "Hauptkörper" und machen Sie sie so hoch wie der Hauptkörper. Füllen Sie es mit #e6e6e6.

Als nächstes geben wir der Seitenleiste auf der linken Seite einen leichten inneren Schatten, um eine "eingerückte" Illusion zu erzeugen. Fügen Sie die Layerstile unten zu Ihrer "Seitenleisten"-Layer hinzu.

Besondere Slider

Erstellen Sie ein neues Layer und treffen Sie mit dem Rechteck-Auswahlrechteck (M) eine Auswahl von 960 x 360 Pixel ganz oben auf unserem Körper direkt unter der Navigation und füllen Sie sie mit #e6e6e6. Erstellen Sie ein weiteres Layer und lassen Sie innerhalb der vorherigen Auswahl auf allen Seiten einen Rand von 25 Pixel. Treffen Sie eine Auswahl von 910 x 312 Pixel und füllen Sie sie mit #ffffff. Fügen Sie unter Layerstile dieses Layers einen inneren Strich von 1 Pixel #dddddd hinzu.

Für den nächsten Schritt benötigen wir ein Beispielbild als Platzhalter. Jedes Bild von irgendetwas wird funktionieren, also finden Sie einfach etwas mit einer Größe von 580 x 300 Pixel und legen Sie es in ein neues Layer, wobei Sie es 5 Pixel von jeder Seite des Containers entfernt anbringen, den wir gerade erstellt haben.

Erstellen Sie ein neues Layer und nennen Sie sie "tab_hover". Nehmen Sie das Rechteck-Auswahlwerkzeug (M) und treffen Sie eine Auswahl von 320 x 41 Pixel direkt rechts neben dem Bild in der oberen rechten Ecke des weißen Schiebereglers. Fülle es mit einer beliebigen Farbe. Klicken Sie mit dem Polygonalen Lasso-Werkzeug 20 Pixel links neben dem Rechteck, genau in der Mitte vertikal, und halten Sie die Strg-Taste gedrückt, während Sie diagonal nach oben und rechts ziehen, bis Sie die obere linke Ecke des Rechtecks erreichen. Halten Sie die Strg-Taste gedrückt, ziehen Sie nach unten, bis Sie die untere linke Ecke erreichen, und kehren Sie schließlich in die Ausgangsposition zurück. Füllen Sie diese Auswahl mit einer beliebigen Farbe.

Fügen Sie die im Bild unten gezeigten Stile zum Layer "tab_hover" hinzu.

Treffen Sie nun mit dem Rechteck-Auswahlrechteck (M) direkt unter der Registerkarte eine Auswahl von 320 x 92 Pixel, fügen Sie sie in ein neues Layer mit dem Namen "tab_space" ein und wenden Sie die im Bild beschriebenen erforderlichen Layerstile an.

Wiederholen wir nun die Schritte, um den Rest der Registerkarten zu erstellen, wobei wir leicht unterschiedlichen Stilen folgen, um den "aktiven" Status vom Rest der Registerkarten zu unterscheiden.

Schließlich sollten wir uns etwas einfallen lassen, das ähnlich aussieht und bereit ist zu gehen!

Schritt 5

Wütend! Wir sind fast da! Mit dem schwierigsten Teil aus dem Weg gehen wir weiter zum Körper unserer Site. In diesem Schritt werden wir Schlüsseltechniken wie den Abstand diskutieren.

Beginnen wir unseren Abschnitt "Letzter Beitrag" mit einem Beitrag. Lassen Sie uns einen Rahmen erstellen, indem Sie mit dem Rechteck-Auswahlrechteck (M) eine Auswahl von 615 x 210 Pixel treffen, ihn mit einer beliebigen Farbe in einem neuen Layer namens "Rand" füllen und dann einen im Bild unten beschriebenen Gradient hinzufügen. Sobald wir damit fertig sind, fügen Sie ein Bild mit einer Größe von 610 x 200 Pixel ein und lassen Sie 5 Pixel im Rahmen. Das Bild ist nicht wichtig, also können Sie wieder alles verwenden, was Sie als Platzhalter möchten!

Der richtige Abstand ist für ein erfolgreiches Design unerlässlich. Unser Community-Blog-Thema demonstriert seine Stärke in Bezug auf Konsistenz und Abstand, indem es rund um die Post-Elemente kongruente Ränder aufweist, damit das Auge des Lesers leicht über die Seite fließen kann. Schauen wir uns anhand einiger Richtlinien an, wie unser Beitrag aussehen wird!

Der nächste Teil ist relativ erklärend. Geben Sie mit dem Horizontal Type Werkzeug (T) eine Überschrift, Metainformationen und einen Auszug für Platzhalter ein (Sie können den im Demobild verwendeten Text verwenden, um Zeit zu sparen), und verweisen Sie auf das vorherige Bild, um Hilfe bei Abstand und Ausrichtung zu erhalten. In der Abbildung unten finden Sie die erforderlichen Textstile. Wenn der gesamte Text hinzugefügt wurde, greifen Sie zum abgerundeten Rechteck-Werkzeug (U) und erstellen Sie einige Schnellschaltflächen (ca. 120 x 32 Pixel). Richten Sie sie an der linken Seite des Beitrags aus und fügen Sie die im Bild unten gezeigten Stile hinzu. Sie sollten jetzt einen attraktiven Beitrag haben, den Sie immer wieder duplizieren können, bis Sie zufrieden sind!

Schritt 6

Fast so wichtig wie jeder andere Teil eines Community-Blog-Themas, die Seitenleiste! Zu Demonstrationszwecken werden wir nur ein paar generische Widgets entwerfen - natürlich wäre es unmöglich, ein benutzerdefiniertes Design für jedes Widget da draußen zu erstellen, aber die meisten davon lassen die kreativen Säfte fließen, um mehr zu erstellen!

Für diesen Teil müssen wir der kostenlose Symbol-Pack von Graphic River herunterladen und die Symbole RSS 48x48px und Twitter 48x48px in unser Projekt importieren. Positionieren Sie diese Symbole 20 Pixel von der linken Seite der Seitenleiste entfernt und stellen Sie sicher, dass sie vertikal zum ersten Pfosten links ausgerichtet sind.

Nehmen Sie das Horizontal Type Werkzeug (T) und geben Sie eine Zufallszahl für die Abonnenten und Follower in der Schriftart Georgia und den Wörtern "Abonnenten" und "Follower" in Arial ein, wie in der folgenden Abbildung beschrieben.

Wie wäre es mit einem einfachen Werbe-Widget? Sicher! Nehmen Sie das rechteckige Auswahlwerkzeug (M) und treffen Sie eine Auswahl von 280 x 410 Pixel, füllen Sie es mit einfachem Weiß und geben Sie ihm einen inneren Strich von 1 Pixel #dddddd. Nehmen Sie ein paar Beispielanzeigen aus Theme Forest und legen Sie sie in den neuen Container. Lassen Sie zwischen den Anzeigen jeweils 9 bis 10 Pixel Abstand (je nachdem, ob sie sich zwischen dem Rand oder zwischen den einzelnen Anzeigen befinden).

Geben Sie abschließend mit dem Horizontal Type Werkzeug (T) ein schnelles Text-Widget ein, indem Sie die im Bild unten angegebenen Stile verwenden.

Nimm das rechteckige Auswahlwerkzeug (M) und mache einen 280 x 225 Pixel großen Behälter. Füllen Sie es mit #eeeeee und geben Sie ihm einen inneren Strich von 1px #dbdbdb. Neues Layer, erstellen Sie in der oberen linken Ecke des Containers eine Registerkarte mit einer Größe von ca. 84 x 37 Pixel, wobei auf jeder Seite 4 Pixel Platz bleiben. Erstellen Sie dann in derselbem Layer eine weitere Auswahl von 270 x 180 Pixel und füllen Sie sie mit Weiß, um ein Rechteck mit einem kleinen Rechteck zu erstellen oben links herausragen. Geben Sie ihm einen inneren Strich von 1px #e0e0e0. Beenden Sie die anderen 2 Laschen und lassen Sie immer 4px Polster auf jeder Seite. Füllen Sie den Text mit Arial 12px Bold aus. Erstellen Sie eine 3 x 3 Pixel große Kugel, die mit #bbbbbb gefüllt ist, und erstellen Sie so viele Elemente, wie Sie möchten.

Das war's für die Seitenleiste, gehen wir zum Rest der Seite!

Schritt 7

Jetzt schließen wir diese Seite langsam mit... Sie haben es erraten, der Fußzeile! Bereiten wir unsere Fußzeile vor, indem wir einen schnellen Hintergrund dafür erstellen. Nehmen Sie das Rechteck-Auswahlrechteck (M) und erstelle eine Auswahl von 960 x 510 Pixel in einem neuen Layer direkt unter dem Hintergrund des Hauptkörpers. Füllen Sie diese Auswahl mit #2d2d2d. Dies wird als unsere Fußzeile mit 4 Spalten dienen. Treffen Sie direkt unter diesem Farbblock eine Auswahl von 960 x 60 Pixel, füllen Sie sie mit #1d1d1d und legen Sie sie in ein neues Layer. Dies dient als "Copyright"-Teil der Fußzeile und als einfache, aber effektive Möglichkeit, das Ende der Seite zu kennzeichnen.

Auf unserer Website befinden sich in der Fußzeile 4 gerade Spalten mit einer Breite von jeweils 200 Pixel und einem Abstand von jeweils 25 Pixel. Um die Dinge einheitlich zu halten, lassen wir außerdem 25 Pixel oben in unserer Fußzeile. Danach haben wir die Überschriften jeder Spalte. Nehmen Sie das horizontale Textwerkzeug (T) und tippen Sie die Überschriften für jede Spalte mit den im Bild unten beschriebenen Stilen aus. Lassen Sie 20 Pixel unter den Überschriften und geben Sie einen kurzen Absatz oder eine Liste von Elementen ein, die durch einen einfachen gepunkteten Teiler "Ein Pixel ein, ein Pixel aus" getrennt sind.

Abschluss

Herzlichen Glückwunsch, Sie haben gerade ein sauberes Community-Blog-Thema in Adobe Photoshop erstellt. Hoffentlich haben Sie einige Tipps und Tricks zum Entwerfen bestimmter Aspekte sauber organisierter Websites gelernt und können diese Fähigkeiten in Zukunft in eigenen Projekten einsetzen!

Da dies nur ein Design-Tutorial ist, habe ich mich überhaupt nicht mit der Themencodierung befasst, aber Sie können das Revolution-Thema bei ThemeForest ansehen, um ein Live-Beispiel zu sehen.

Viel Glück und danke fürs Lesen! :) :)