TUTORIAL: Illustration für Header

Dienstag, 29. Januar 2013

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. 

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. 



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!

SCHRITT 1: Zeichnen und Einscannen. Gilt für alle Möglichkeiten.
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. 


 2. Einfärben der gewünschten Zeichnung. 


VARIANTE 2: GIMP 

Ausschneiden und Einfärben der Zeichnung


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. 


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! 
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

Kommentare:

  1. 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 ;)

    AntwortenLöschen
    Antworten
    1. 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! :)

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

    AntwortenLöschen
  3. Tolles Tutorial! Und den Header find ich auch richtig toll :)

    AntwortenLöschen
  4. Sehr cool, dankesehr. :) mal sehen, wie das so ohne Illustrator und Photoshop klappt...

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

    AntwortenLöschen
  6. 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

    AntwortenLöschen
  7. 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

    AntwortenLöschen
  8. richtig cool :D ich wusste gar nicht das das mit photoshop geht!

    AntwortenLöschen

Danke für deinen Kommentar!

Related Posts Plugin for WordPress, Blogger...