Menu Close

Header Illustration {how to}

Ich hoffe, ihr seid nicht so ganz in Stress, dass ihr nicht mehr schlafen könnt und nicht mehr esst, weil ihr so viele Klausuren und Prüfungen und Abgaben habt. Bei mir wechselt sich gerade totaler Stress mit furchtbarer Langeweile ab. Aber heute bin ich mal produktiv: Heute gibt es hier ein wenig was zum Nachmachen. Wie versprochen zeige ich euch, wie ihr ganz einfach Illustrationen vom Papier auf euren Computer bekommt und diese auch für z.B. Header verwenden könnt. So wie in meinem Header auch.

Ein bisschen was zur Idee: Ich habe mal vor ein paar Monaten mein Kontaktbild so entworfen, wie es heute ist und mir gefielen die Farben gut. Im Winter, als das neue Layout kam, gab es dann diesen Header hier. Das ist dasselbe blau, wie im Kontaktbild. Nur etwas transparenter. Aber so ein winterlicher Header ist natürlich nichts für das ganze Jahr.

Kontaktbild 2012
Kontaktbild 2012
Header Winter 2012
Header Winter 2012

Daher möchte ich euch heute auf drei Wegen zeigen, wie ihr so etwas auch selbst machen könnt. Einmal so wie ich es gemacht habe: Mit Photoshop und Illustrator. Allerdings funktioniert es auch ohne Illustrator nur mit Photoshop oder GIMP (extra dafür runtergeladen und ausprobiert!). Habe versucht, alles so ausführlich wie möglich zu screenshotten. Falls ihr Fragen habt und ich was wichtiges vergessen habe (bin ja auch nur ein Mensch!) schreibt mir gerne einen Kommentar, per Mail oder auf Facebook, ich bessere es dann auch aus. Lasst euch zudem nicht verwirren, ich habe einen Mac, da sieht es ein wenig anders aus wie in Windows. Aber die Funktionsbezeichnungen sollten ja stimmen. Also auf auf!

Aufgrund des deprimierenden Wetters draußen und dadurch, dass Januar&Ferbruar meiner Meinung nach ziellos zwischen der schönen Weihnachtszeit und dem Frühling liegen, habe ich mir gedacht, dass es Zeit ist für einen neuen, fröhlich-frühlinghaften Header. Da ich kein Pink-Fan bin (vor allem nicht als Header-Hauptfarbe!), war ein schnell klar, dass er gelb wird. Ewig lang habe ich mich nicht daran getraut, Illustrationen für irgendetwas zu erstellen. Diesmal aber habe ich mich einfach hingesetzt und es ausprobiert. Bin eigentlich ganz zufrieden, dafür dass ich davor so verunsichert war. Manche Dinge beschäftigen mich dabei natürlich doch: Wirkt er vielleicht zu verspielt, was, wenn es keinem gefällt, und was wenn es nicht professionell genug aussieht? Egal. Das bleibt jetzt erst einmal so, learning by doing.

Header 2013
Header 2013
SCHRITT 1: Zeichnen und Einscannen. Gilt für alle Bildbearbeitungsprogramme.

Unabhängig davor, wie ihr es dann am Computer macht, müsst ihr erst etwas zeichnen, was später euren Blog schmücken soll. Ich habe tatsächlich seit anderthalb Jahren nichts mehr gezeichnet und es ging recht gut. Hilfreich und inspirierend finde ich dabei Pinterest (hier), habe da viele inspirierende Illustrationen gesehen und mich einfach deswegen daran getraut. Sonst bin ich auf Pinterest nicht besonders aktiv. Nur so Schub-artig. TIPP: Wenn ihr die Linien in der Illustration schwarz haben wollt, malt sie gleich mit schwarzem Stift. Das war ein bisschen ein Umweg, das immer erst schwarz zu machen.

VARIANTE Photoshop:
 
1. Ausschneiden der gewünschten Zeichnung. 

Bildschirmfoto 2013-01-26 um 19.07.33 Bildschirmfoto 2013-01-26 um 19.08.23 Bildschirmfoto 2013-01-26 um 19.08.36 Bildschirmfoto 2013-01-26 um 19.08.57 Bildschirmfoto 2013-01-26 um 19.09.04
 2. Einfärben der gewünschten Zeichnung. 
Bildschirmfoto 2013-01-26 um 19.18.11 Bildschirmfoto 2013-01-26 um 19.18.11 Bildschirmfoto 2013-01-26 um 19.18.20 Bildschirmfoto 2013-01-26 um 19.18.26
Bildschirmfoto 2013-01-26 um 19.21.12 Bildschirmfoto 2013-01-26 um 19.21.49 Bildschirmfoto 2013-01-26 um 19.22.14 Bildschirmfoto 2013-01-26 um 19.22.16

 

VARIANTE 2: GIMP 

 

Ausschneiden und Einfärben der Zeichnung
Bildschirmfoto 2013-01-26 um 19.41.24
Bildschirmfoto 2013-01-26 um 19.41.24
Bildschirmfoto 2013-01-26 um 19.41.50
Bildschirmfoto 2013-01-26 um 19.48.50 Bildschirmfoto 2013-01-26 um 19.49.01 Bildschirmfoto 2013-01-26 um 19.51.04 Bildschirmfoto 2013-01-26 um 19.51.11 Bildschirmfoto 2013-01-26 um 19.51.34
Bildschirmfoto 2013-01-26 um 19.52.45 Bildschirmfoto 2013-01-26 um 19.52.51 Bildschirmfoto 2013-01-26 um 19.54.16 Bildschirmfoto 2013-01-26 um 19.55.05

VARIANTE 3: mit Illustrator. Auch hier empfehle ich euch, das Bild mit Photoshop oder GIMP auszuschneiden, sodass ihr nur das Bildchen habt, was ihr verwenden wollt. Auch wenn ihr mehrere Bilder habt, ist es besser, sie getrennt zu bearbeiten.

Bildschirmfoto 2013-01-26 um 19.13.40  Bildschirmfoto 2013-01-26 um 19.13.50 Bildschirmfoto 2013-01-26 um 19.14.03 Bildschirmfoto 2013-01-26 um 19.14.16 Bildschirmfoto 2013-01-26 um 19.14.24 Bildschirmfoto 2013-01-26 um 19.14.40

Nachdem ihr das im Illustrator fertig habt, springt ihr einfach wieder zu VARIANTE 1 mit Photoshop oder VARIANTE 2 in GIMP, stellt das Bild frei und färbt es ein. Wenn ihr das natürlich wie ich in einen Header oder ein anderes Bild bewegen wollt, kopiert ihr die Ebene. Fertig!

Bildschirmfoto 2013-03-10 um 13.42.43

Grundsätzlich besteht die Logik darin, das Bild vom weißen Hintergrund zu befreien. Je einfacher und präziser die Zeichnung, desto einfacher ist es natürlich. Wenn ihr eine komplizierte Portrait-Zeichnung macht, kommen wohl noch viele Zwischenschritte hinzu. Das wichtigste Werkzeug dabei ist der Zauberstab (bzw. die Schnellauswahl), mit dem ihr den Hintergrund und das Innere der Zeichnung je nach Belieben löschen oder einfärben könnt. Ich hoffe, das hat euch jetzt ein wenig geholfen. Fragen und Anregungen sind ausdrücklich erwünscht!

Liebe Grüße, Natalia

9 Comments

Join the discussion and tell us your opinion.

Avatar
Corireply
29/01/2013 at 16:32

Schönes Tutorial!
Noch ein kleiner Tipp:
Das Ausschneiden der gewünschten Zeichnung geht in GIMP sogar noch leichter und zwar mit dem Zuschneiden-Werkzeug (Das “Messer”; im 3.Gimp-Screenshot das Symbol unter dem Zauberstab).
Damit kann man eine Auswahl ziehen, die dann sofort automatisch zugeschnitten wird ;)

Avatar
Nataliareply
29/01/2013 at 16:45
– In reply to: Cori

Nja, wenn man einen weißen Hintergrund hat, ist der Zauberstab einfacher. Das ist nur ein Klick, bei Auswahl ziehen muss man sie ja noch ziehen :) Finde ich. Das gibt’s in Photoshop ja auch. Aber ich glaube, das ich tatsächlich Geschmackssache :) Vielleicht profitiert der ein oder andere davon? :) Danke jedenfalls! :)

Avatar
Jenniferreply
29/01/2013 at 17:38

Toller Blog :) Bei mir läuft zurzeit eine Blogvorstellung, vielleicht hast du Lust mitzumachen.
Liebe Grüße
http://jenniferschmitz-photography.blogspot.de/

Avatar
Arianereply
29/01/2013 at 20:27

Tolles Tutorial! Und den Header find ich auch richtig toll :)

Avatar
copy.catreply
30/01/2013 at 16:33

Sehr cool, dankesehr. :) mal sehen, wie das so ohne Illustrator und Photoshop klappt…

Avatar
Leareply
30/01/2013 at 19:22

Ein sehr schöner Header & ein tolles, hilfreiches Tutorial ♥
Liebe Grüße,
Lea :*

Avatar
Zeitverschwenderreply
31/01/2013 at 0:09

WOW ich LIEBE deinen Blog! Danke dass du auf mich gestoßen bist und für deinen sehr, sehr lieben Kommentar – das kann ich nur 100fach erwidern!

Viele liebe Grüße!!
Maria

Avatar
Simonereply
17/03/2013 at 21:02

Ich hab mir erst heute GIMP installiert und habe momentan keine Ahnung wovon Du da schreibst!! Aber ich bin mir sicher, dass dieses Tutorial noch superhilfreich sein wird……sobald ich mich mal eingearbeitet habe!!
Vielen Dank für Deine Mühe!!
GLG
Simone

Avatar
Jacquelinereply
15/04/2013 at 9:33

richtig cool :D ich wusste gar nicht das das mit photoshop geht!

Leave a reply