Photoshop-Tutorial: Baum zeichnen

Photoshop-Tutorial: Baum zeichnenAus aktuellem Anlass schreibe ich nochmal ein kleines Tutorial. Hier erfahrt Ihr wie ich mit möglichst wenig Aufwand einen recht ansehnlichen Baum (wie hier auf dieser Seite üblich) in Photoshop CS3 erstelle.

Als Grundlage für die Gestaltung dient mir wie immer eine Bleistift/Kugelschreiber-Skizze.

Schwierigkeitsgrad: Fortgeschrittene

Vorüberlegungen

Photoshop-Tutorial: Baum zeichnenAls erstes sollte eine Skizze des gewünschten Baumes gezeichnet werden. Wie Ihr anhand meines Scribbles (Abb.1) sehen könnt, reicht es den Baum grob auf dem Papier zu entwerfen. Beachtet werden sollte lediglich der Lichteinfall, die Form des Baumes und die Perspektive.

Mein Baum soll am Ende in sehr kleiner Form auf der Seite erscheinen. Die Abmessungen im Zielbild betragen höchstens 100×100 Pixel. Da in dieser Größe wenig Details zu erkennen sind, reicht es den Baum nur grob zu malen. Es empfiehlt sich hier den Baum vorerst deutlich größer zu erstellen und das Bild nachher runter zu skalieren. So werden kleinere Fehler bei der Erstellung ausgeglichen.

Grundform erstellen

Photoshop-Tutorial: Baum zeichnenErstellt eine neue Datei mit den Abmessungen 1000×1000 Pixel und einer Auflösung von 72dpi.
Nun importiert Ihr die Skizze, zeichnet die Form mit dem Freihandlasso (auf einer neuen Ebene) nach und füllt die entstandene Auswahl mit braun. Das Lasso ist gerade für organische Formen sehr zu empfehlen, da die Linienführung ungenauer und daher natürlicher ist.

Meine gefüllte Auswahl sieht nun wie folgt aus (Abb.2).

Struktur und Schatten

Photoshop-Tutorial: Baum zeichnenNun müssen Schatten und Licht, sowie die Baumrinde simuliert werden. Dazu brauchen wir lediglich einen Filter und zwei Werkzeuge.
Als erstes legen wir eine recht grobe Störung (Filter > Rauschfilter > Rauschen hinzufügen) über unsere braune Grundform. Photoshop-Tutorial: Baum zeichnenIch habe eine Stärke von 12, sowie monochromes Rauschen nach der gaußschen Normalverteilung gewählt.
Nachdem die Störung angewendet wurde, wählt Ihr das “Nachbelichter-Werkzeug” um Schatten zu simulieren und das “Abwedeln-Werkzeug” um Licht zu simulieren. Bei beiden Werkzeugen empfehle ich eine geringe Belichtung und eine weiche Pinselspitze. (Abb.3)

Tragt nun die in der Skizze geplanten Schatten und Lichter auf die Grundform auf. Mein Ergebnis nach diesem Schritt sieht wie folgt aus. (Abb.4)

Blätter erstellen

Photoshop-Tutorial: Baum zeichnenAls nächstes müssen wir die Blätter erstellen. Ich wähle auch hier eine sehr simple Grundform. (Abb.5) Dieses Blatt kopiere ich an jede gewünschte Stelle des Baumes. Dabei drehe und skaliere ich es, so dass es möglichst realistisch an den Ästen wöchst. (Tipp: Bei gewähltem Auswahlwerkzeug und aktivierter Blattebene ALT gedrückt halten und das Blatt verschieben. So wird es immer wieder kopiert.) Abschließend reduziere ich Photoshop-Tutorial: Baum zeichnenalle Blätter auf einen Ebene und reduziere die Deckkraft dieser auf 80%.

Mein Ergebnis sieht nun wie folgt aus. (Abb. 6)

Farbigkeit anpassen den Baum ins Bild integrieren

Photoshop-Tutorial: Baum zeichnenDas wars auch eigentlich schon mit dem Baum. Ihr könnt nun alle vorhandenen Ebenen zusammenfassen. Es sollten lediglich Blätter und Baum(stamm) von einander getrennt bleiben. Für meine Zwecke verschiebe ich nun den Baum an meine Wunschposition ins Layout und skaliere ihn auf die gewünschte Größe herunter. Die Farbigkeit des Baumstamms passe ich mit “Farbton/Sättigung” (Bild > Anpassen > Farbton/Sättigung) noch ein wenig an. Je nach bedarf sollten auch die Blätter noch transparenter gestellt werden.

Mein Endergebnis sieht so aus: (Abb.7)

Photoshop CS4 für Webdesigner

Themenverwandte Artikel:

Folgende Beiträge könnten dich ebenfalls interessieren.

8 Reaktionen auf diesen Beitrag

  1. Der Kulturbanause » Beitrag » Pink Püppi
    6. Mai 2008, 18:37 Uhr

    [...] hat letzte Woche ein schickes Tutorial erstellt, wie er die Bäume für sein Theme in Photoshop erstellt. Leider greift dieses [...]

  2. Bäume in Photoshop zeichnen
    6. Juni 2008, 15:31 Uhr

    [...] Kollege Jonas von dem Weblog Kulturbanause.de zeigt uns hier Schritt für Schritt wie “einfach” es sein kann einen Baum zu zeichnen. Etwas würde ich anders machen. Was das ist, zeige ich Euch aber in einem anderen Tutorial, das [...]

  3. Finalfire
    26. Juni 2008, 09:57 Uhr

    Great tutorial. Congratulations!

  4. Neurosis404
    23. Juli 2008, 15:34 Uhr

    Hallo,
    schönes Tut. Da ich leider nicht zeichnen kann, habe ich die “Vorarbeit” in Blender gemacht, hat auch wunderbar geklappt. Jetzt ist mein Baum fertig, er ist zwar nicht perfekt, aber man arbeitet dran.
    Sobald mich meine eignen Bäume an “kranke Fantasy-Welten” ala Samsas Traum erinnern, weiß ich, dass ich am Ziel bin :>
    Danke für das Tut.
    Gruß

  5. Webdesign Drenthe
    24. August 2008, 16:37 Uhr

    Wow very nice and well explained! Thanks a lot!

  6. Chrissy
    28. August 2008, 00:26 Uhr

    So einfach sind die nur???
    Man, könnt sogar ich hinbekommen! :)
    Danke für das Tut! Hast du so eigentlich auch den Rest von deinen Layout gemacht?
    Ich möchte es nicht kopiern, um gottes willen ^^ Aber ich “plane” meine Layouts auch immer erst auf Papier vor, aber an der Umsetzung haperts, deswegen die Frage :)

  7. Wachsende Bäume – The Reaction
    17. September 2008, 00:13 Uhr

    [...] Kulturbanause ist gar keiner, denn er zeigt uns auf seiner Website in einem Tutorial , wie die Grundlage seiner schicken Website entstanden ist. Und darauf sind einige Bäume, ein [...]

  8. excellent
    15. Oktober 2008, 13:50 Uhr

    excellent !!!

Bitte kommentiere diesen Eintrag!

Dir hat dieser Eintrag gefallen, du hast Fragen, Anregungen oder Kritik? Hier ist Platz dafür. Jeder Kommentar wird ernst genommen und trägt zum Informationsgehalt meiner Seite bei. Also los!