Erstellen Sie ein Photoshop-Grunge-Design für Ihre Site

In dieser Welt der Farbverläufe, Logo-Reflexionen, horizontalen Streifen und abgerundeten Kanten ist das Web mit Websites aufgebläht, die davon besessen sind, Web 2.0 zu sehen, obwohl der Begriff für reine Ästhetik bedeutungslos ist. Gegen die strahlend weißen Websites und ihren uninspirierten Glanz zu kämpfen, ist der sogenannte „Grunge“ -Look. Eine Ästhetik, die sich mehr für schmutzige, abgenutzte, zerkratzte und gezackte Texturen interessiert. Es ist ein schlammiger Doc Martens-Boot angesichts der Ordentlichkeit von Web 2.0. Es ist jedoch nicht einfach, ein authentisches Erscheinungsbild zu erzielen, und viele verlieren sich auf dem Weg dahin, wie man eine Site „durcheinander bringt“, deren Design eine anständige, solide Struktur aufweist. Gut weiterlesen!

Ich habe zwei Worte für dich: Dreck und Verfall. Diese sind die Schlüsselkomponenten der Grunge-Ästhetik und sie sind überall um uns herum, da die Natur der meisten Objekte der realen Welt im Laufe der Zeit abnimmt. Es ist die fehlerhafte Qualität des Verfalls, die diesen Look wirklich von Designs unterscheidet, die nach steriler Sauberkeit riechen.



Cheat-Pinsel - komplettes Set frei

Und das ist die Aufgabe dieses Problems: Erstellen Sie ein sauberes Website-Design in Photoshop 'Grunge' und setzen Sie dabei etwas Sahnehäubchen auf den Kuchen. Oder sollte das Schlamm sein?



1. Photoshop-Grunge

Erstellen Sie zunächst ein neues Photoshop-Dokument mit einer Breite von 910 Pixel und einer Höhe von 700 Pixel. Fügen Sie einige vertikale Hilfslinien (Ansicht> Neue Hilfslinie) mit 50 und 860 Pixel hinzu, sodass eine Innenbreite von 810 Pixel vorhanden ist.

2. Erstellen Sie drei Spalten

Fügen Sie weitere neue Hilfslinien hinzu, diesmal mit 320 und 590 Pixel. Dies ergibt drei zentrale Spalten mit gleicher Breite (270 Pixel). Dies erinnert an ältere Zeitungen und unterscheidet sich vom Standard-Weblayout ungleich breiter Spalten.



3. Der Inhaltsbereich

Öffne eine neue Ebene und nenne sie 'Wrapper'. Treffen Sie mit dem Auswahlrechteck eine Auswahl, die sich über die Höhe des Dokuments von der ersten vertikalen Führung bei 50 bis zur letzten bei 860 erstreckt. Füllen Sie es mit einer flachen Farbe. Diese zentrale Spalte sollte die Breite der Minisäulen umfassen.

4. Pflanzen Sie einen Baum

Öffnen Sie 'tree.jpg' und ziehen Sie es auf Ihr Dokument. Benennen Sie die Ebene 'Baum' um. Verwenden Sie die freie Transformation (Strg / Befehlstaste + T), bis das Bild etwas schmaler als die Leinwand ist. Gehen Sie zu Bild> Anpassungen und stellen Sie von hier aus die Helligkeit auf +10, den Kontrast auf +80 und den Farbton auf -1555 ein.

wie man den Pfad in Photoshop streichelt

5. Grunge-Schriftarten

Fügen Sie eine horizontale Hilfslinie mit 270 Pixel hinzu. Bewegen Sie den Baum so, dass der Boden auf der Führung liegt. Geben Sie 'The Dead Designers' ein. Verschieben Sie die Textebene nach links oben. Ändern Sie die Schriftart - ich habe die von Eduardo Recife verwendet Böse und Shortcut-Schriftarten - oder ziehen Sie die Ebenen aus 'logo.psd'.



6. Navigationstext

Schreiben Sie mit der dunkelroten Shortcut-Schriftart 'News', 'Gigs', 'Musik', 'Info' und 'Kontakt' in eine separate Zeile. Erstellen Sie eine Ebene mit dem Namen 'Linien'. Zeichnen Sie mit dem Pinselwerkzeug und unterschiedlichen Radien kratzige Linien von oben rechts auf der Leinwand zum Baum und unterstreichen Sie den Text.

7. Textur hinzufügen

Öffnen Sie 'Mountains.jpg' und ziehen Sie es auf die Leinwand. Benennen Sie es in 'Berge' um und verschieben Sie es an die Spitze des Ebenenstapels. Ändern Sie den Mischmodus im Dropdown-Menü in der Ebenen-Palette in 'Multiplizieren', und Sie werden sehen, wie alles darunter eine großartige Textur erhält.

8. Schreiben Sie Seitentitel

Öffnen Sie 'promoBanner.psd' und ziehen Sie alle Ebenen auf Ihr Dokument. Verschieben Sie die Ebene 'Berge' so, dass sie zwischen 'Album kaufen' und 'Weiße Linie' liegt. Schreiben Sie 'buy the album' auf eine neue Ebene und platzieren Sie es in der linken Spalte. Fügen Sie weitere Seitentitel für später hinzu.

Rasteren Sie die Textebenen mithilfe des kleinen Pfeils oben rechts in der Ebenenpalette, fügen Sie sie zusammen und geben Sie der zusammengeführten Ebene einen 1-Pixel-Strich. Verwenden Sie dazu die Ebeneneffekte, die durch Doppelklicken auf die Ebene aufgerufen werden. Geben Sie dem Navigationstext ebenfalls einen Strich, um ihn hervorzuheben.

10. Erhöhen Sie die Leinwand

Wählen Sie Bild> Leinwandgröße und ändern Sie die Leinwandgröße auf 1.400 x 920. Stellen Sie sicher, dass Sie auf den Pfeil in der Mitte oben klicken, um sicherzustellen, dass die Leinwand von diesem Registrierungspunkt aus vergrößert wird.

So importieren Sie Illustrator in After Effects

11. Grunge-Texturen

Öffnen Sie 'background.psd' in Ihren Lernprogrammdateien, reduzieren Sie das Bild und ziehen Sie es in Ihr Hauptdokument. Nennen Sie die Ebene 'bg textures' und platzieren Sie sie am unteren Rand des Ebenenstapels. Löschen Sie den dortigen weißen Standardhintergrund.

12. Unebene Seiten

Öffnen Sie 'pages.psd' und ziehen Sie die Texturen an den oberen Rand des Ebenenstapels. Diese fügen einen ungleichmäßigen Rand an der Seite unseres Inhaltscontainers hinzu. Da sie halbtransparent sind, können Sie den Hintergrund durch die Räume sehen. Beim Scrollen ist dies ein cooler Effekt!

13. Für das Web speichern

Ihre Datei sollte jetzt in Ihren Quelldateien 'complete.psd' ähneln. Blenden Sie alle Ebenen in der PSD aus, mit Ausnahme des Hintergrundbilds. Gehen Sie zu Datei> Für Web speichern und wählen Sie JPEG aus dem Dropdown-Menü. Speichern Sie es in hoher Qualität und nennen Sie es 'body.jpg'.

14. Ohne Styling

Öffnen Sie in einem Texteditor 'step14.html' im Ordner 'site'. Wenn Sie dies in einem Browser in der Vorschau anzeigen, werden Sie feststellen, dass der Inhalt vorhanden ist, aber kein Styling vorhanden ist. Beachten Sie das Markup und achten Sie darauf, wie ich das Dokument strukturiert habe.

wie man für die Kunstschule bezahlt

15. Mit Styling

Öffnen Sie 'step15.html' und Sie werden sehen, dass ich das grundlegende Styling hinzugefügt habe. Die Standardbrowser-Stile wurden zurückgesetzt und ein grundlegendes Layout erstellt. Der Hauptinhalt besteht aus drei Spalten. Zeigen Sie eine Vorschau der Datei in einem Browser an, um zu sehen, wo wir bisher angekommen sind.

16. Meine Änderungen anzeigen

Öffnen Sie 'step16.html'. Die Z-Indizes waren notwendig, um Elemente über anderen zu positionieren. Ich habe das Packshot-Bild durch negative Positionierung außerhalb des enthaltenen Elements verschoben, und die kratzenden Ränder der Fußzeilengrafik spiegeln die im Masthead-Hintergrund wider.

17. Zusätzliches Styling

Öffnen Sie 'step17.html' und beachten Sie das Styling. Die Elemente h2 und h3 wurden durch Bilder ersetzt. Der Text im h1-Element befand sich bereits im Masthead-Hintergrundbild, sodass ich dort keinen Hintergrund deklarieren musste. Stattdessen habe ich den Text außerhalb des Bildschirms verschoben und die Breite / Höhe angegeben, die mit dem Logo im Masthead-Bild übereinstimmt

18. Die Navigation

Öffnen Sie 'step18.html' in einem Texteditor und Browser. Schauen Sie sich das CSS an, das ich hinzugefügt habe: Der Navigationstext wird durch ein Bild ersetzt, und die Hintergrundposition des Bildes ändert sich je nach Linkstatus. Sie sehen einen anderen Teil des Bildes, wenn Sie mit der Maus über den Link fahren.

19. Arbeit erledigt!

Öffnen Sie 'complete.html' und Sie werden sehen, dass einige subtile Ränder, Auffüllungen und einige gut platzierte Ränder auch dazu beigetragen haben, die einzelnen Abschnitte der Seite klarer zu gestalten. Schließlich wurden die Schädelbilder für ein wünschenswerteres und abwechslungsreicheres Aussehen schweben gelassen.