2

Neues Layout, neuer Header + Making of

neues Layout

Seit gestern ist das neue Bloglayout online. Nachdem ich für länger Zeit Twenty Eleven benutzt habe, habe ich jetzt zu Flounder gewechselt. Das Türkis und das etwas flachere Design gefällt mir sehr gut. Alles in allem sieht die Seite nun etwas aufgeräumter auf und ist vor allem jetzt auch responsive. Ändert einfach mal eure Fenstergröße und ihr werdet sehen, dass sich das Layout anpasst.

neuer Blogheader

Im Detail sieht der neue Header jetzt nun so aus. Hui, das bin ich auf einem Zebra-Einhorn. Leider ist das Horn abgeschnitten, aber ich weiß, dass es da ist und nur darum geht es. Wieder einmal habe ich den Header selber am PC gemalt und dachte mir, dass ich euch bei dieser Gelegenheit auch mal erklären kann, wie ich bei Zeichnungen am PC vorgehe.

Header Making of

Zum malen am PC benutze ich Photoshop CS5 und ein Bamboo Wacom Tablet. Mein Vorgehen sieht meistens relativ gleich aus. Zunächst überlege ich mir was ich zeichnen möchte und fertige eine grobe Skizze auf Papier an. Oft verwende ich, um die richtige Perspektive zu treffen, Fotos als Vorlage, die ich entweder schon vorbereitet habe oder die ich extra für diesen Anlass erstelle.

[übrigens seht ihr die Details sehr viel besser, wenn ihr die Bilder anklickt und euch die großen Versionen der einzelnen Schritte anguckt.]

how to 1

In diesem Fall hatte ich ein altes Foto als Vorlage, welches ich für den Header verwenden wollte. Nachdem mein Konzept feststand habe ich zunächst die groben Farbflächen des Fotos abgemalt. In letzter Zeit mag ich diese Technik mehr, als mit Außenlinien anzufangen, da es einfach sehr viel natürlicher aussieht und hilft dem Bild einen beinahe schon fotorealistischen Effekt zu verleihen. All dies mach ich mit einer mittel-weichen Pinselspitze.

how to 2

Über dieser ersten Ebene (links) erstelle ich dann eine zweite, auf der die ersten Details und Schattierungen angedeutet werden. Hierfür verwende ich weiter die gleiche Pinselspitze.

how to 3

Über die Version mit den groben Details (links) wird wiederum eine neue Ebene erstellt. Nun werden Schatten mit einer weichen Pinselspitze und einer Deckkraft von 20% nach und nach aufgebracht. Dieser Vorgang ist definitiv das aufwändigste an den Zeichnungen, die ich mache. Und Haut ist dabei wirklich ein fieses, fieses Ding. Teilweise füge ich gekörnte Texturen an manchen Stellen (Haut + Beine + Haare) um einen realistischeren Effekt hinzubekommen.

how to 4

Für die letzten beiden Schritte entferne ich mich weit, weit von dem Foto. Zunächst habe ich sehr grob auf einer neuen Ebene skizziert wo sich das Zebraeinhorn befinden soll (links). Danach habe ich es nach und nach gemalt. (Langsam bekomme ich ein Gefühl für die Tiere…)

Für die finale Version des Headers habe ich die Schatten, die das Zebra und die Person werfen, eingefügt und einen simplen Hintergrund erstellt. Insgesamt habe ich knapp fünf Stunden daran rumgemalt. Haut ist bösartig!

0

Design-Challenge: Layout-Mock-up

Manchmal kann man locker vergessen, dass ich eigentlich aus dem Grafik-Bereich komme. Schließlich benutze ich diese Fähigkeit gerade vor allem für die Arbeit und fast gar nicht mehr für diesen Blog. Dies soll sich nun jedoch ändern. Oh Gott, was passiert jetzt???

Jetzt fordere ich einige GFXler zu einer kleinen Challenge heraus. Es geht darum ein Website-Mock-up innerhalb von einer Woche zu erstellen und drei neue GFXler zu taggen.

Mein Mock-up sieht so aus (anklicken für die volle Größe):

Mock up

Es ist ein kleine Miniblog-Layout. Einfach, schlicht und rosa. Die verwendeten Fotos stammen aus Silver Linings Playbook von TWC und das Pattern im Hintergrund von shizoo-design.

Für die ersten Mock-ups tagge ich Nintendo64 von bloody cross, Franzi von unureative und Satsuki von Erdbeerkirsch.