Layout der Startseite gestalten. Photoshop Tutorial

Es ist die erste von zweiteilige Serie über die Gestaltung vom Startseite Layout. Hier erfährst du, wie man nicht nur ein Design Element, sondern ein ganzes Website Design vornimmt. Das Tutorial ist nützlich für Photoshop Anfänger, besonders für alle, die Photoshop entdecken. Ich bin sicher, Du schaffst alles. Aufgrund der zahlreiche Screenshots und Beschreibungen habe ich dieses Tutorial in zwei Teile geteilt. Den zweiten Teil veröffentliche ich am Montag. Verpasse nicht!

Also… Bald feiern wir Halloween und wahrscheinlich hast Du schon das gratis HTML Theme gesehen und getestet. Falls Du wissen willst, wie wir es gemacht haben, folge die unten angegebenen Schritte.

Achtung, fertig, los!

Schritt 1. Als erstes erstelle ein neues Dokument. Unseres Halloween Startseite Layout hat die Große 1600x1322px. Jetzt wähle die Farbe #322b36 und fülle den Hintergrund mit ihr.

Schritt 2. Unser Design ist flat. Das heißt es keine übermäßig komplizierten Elementen gibt. Flat Design kombiniert die Einfachheit und die Möglichkeit jedem zufriedenzustellen. Jetzt kannst Du es selber sehen. Erstelle ein neues Layer Shift+CTRL+N, wähle Rectangular Marquee Tool( Auswahlrechteck) und zeichne dein oberes horizontales Navigationsmenü. Fülle es mit der Farbe #fe8c21(ALT+Backspace).

Schritt 3. Mit Hilfe vom Type Tool( Font-Editor) und vonMarvel Schrift nenne die Navigation Buttons. Die Farbe #000000. Marvel Schrift: regulär, scharf, 24pt.

Schritt 4. Jetzt zeigen wir das Highlight, was darauf hindeutet, dass das Menü Button aktiv ist. Mache die gleichen Maßnahmen, wie beim Schritt 2. Erstelle ein neues Layer, wähle Rectangular Marquee Tool und zeichne den Button. Fülle ihn mit der Farbe #fcb31b (ALT+Backspace).

Schritt 5. Jetzt zeichne die Suchoption (das gleiche Prinzip wie bei den vorherigen Schritte und auch dieselbe Farbe #fcb31b). Ich empfehle aber jetzt die Opazität zu verändern, damit es ein bisschen beschränkt wird. Opazität sollte 79% sein.

Schritt 6. Mit der rechten Maustaste klicke auf das Layer mit der Suchleiste und wähle Blending Options (Fülloptionen) aus. Geben wir jetzt den Kontur, Farbe #ff5136. Du sollst die folgende Parameter festlegen:

Schritt 7. Füge ein Magnifier Custom Shape, das Du hier finden kannst. Das Ergebnis sollte so aussehen:

Schritt 8. Unser Header ist fast fertig. Mit Hilfe von Type Tool schreiben wir nun noch “Boo House” mit der Farbe #fe8c21. MarvelSchriftart: regulär, kein, 60pt.

Schritt 9. Und jetzt erstelle ein quadratisches Block, wo soll unser Countdown stehen. Erstelle ein neues Layer, verwende Rectangular Marquee Tool, Farbe #8a2680, Opazität 41%.

Schritt 10. Die Wörter: Tage, Stunden, Minuten werden mit der Arial Schrift geschrieben: 14pt, scharf, Farbe #d5d5d5..

Schritt 11. Der jQuery Countdown Timer kannst Du auch aus hier herunterladen.
Er ist kostenlos. Du kannst gerne ihn herunterladen. Das Ergebnis sollte so aussehen.

Schritt 12. Es ist die Zeit die Erstellung vom Inhalts-Teil anzufangen. Ihn machen wir auch mit dem Rectangular Marquee Tool. Zeichne den Bereich für die Textdarstellung. Erstelle ein neues Layer und fülle es mit der Farbe #423d60.
Schritt 13. Jetzt erstellen wir noch ein neues Layer. Nehme das Pencil Tool, lege das Große auf 1px und zeichne die Linie mit der Farbe #e85441. Falls Du diese Linie höher oder niedriger stehen lassen willst, bewege sie mit dem Move Tool. Ich empfehle Dir diese Linie auf einem anderen Layer zeichnen, damit Du sie stehen lässt, wo Du willst.

Schritt 14. Der Inhalt Text hat man mit der Arial Schrift geschrieben. Schriftfarbe #d5d5d5, kein, 12pt. Die wichtigste textliche Teile markiere mit der anderen Farbe

Schritt 15. Ich schlage vor drei Blöcke zu darstellen. Das Design ist dasselbe. Die Linien hat man mit den Farben #e85441, 5b93f2, 738a17 gezeichnet. Der Haupttext wird mit der Arial Schrift geschrieben: 14pt, scharf, Farbe #d5d5d5. Die Schlagzeilen werden mit Marvel Größe 24, regulär, scharf, Farbe #fe8c21 geschrieben.

Schritt 16. Die verschiedene schöne Halloween Icons wartenhier auf Dich. Lade die herunter und füge die auf neu erstellten Halloween Blog. Mir der gedrückten CTRL+T kannst du ihre Große ändern.

Schritt 17. Jetzt lade die Typogami Schriftart, damit wir das Wort “Halloween” schreiben.

* * *

Es ist der erste Teil von zweiteiliger Serie. Ich hoffe, dass sie Schritte leicht verständlichen waren. Nächste Woche gehen wir weiter mit dem Photoshop Tutorial. Alles Liebe! Bis zum nächsten Mal!