Drawing trees by Celianna

Discussion in 'Non-Maker Specific Tutorials' started by Celianna, Nov 4, 2016.

    Tags:
  1. Celianna

    Celianna Tileset artist Global Mod

    Messages:
    10,514
    Likes Received:
    5,509
    First Language:
    Dutch
    Primarily Uses:
    RMMV
    Drawing Trees


    by Celianna


    I love trees, trees are one of the easiest things to draw, and yet each and every one of them will be unique, no matter how many times you draw one.


    The best thing about trees; there are no mistakes. Sure, there are some glaring perspective errors that can be improved on, but nonetheless, trees are organic, and therefor you can draw them in any crazy shape you'd like, and it would still look okay.


    That means, even you, as a beginner, can draw a tree!


    Let us start with the basics. A tree consists out of two parts, really. The trunk, and the foliage. To draw the foliage, you must first draw a trunk. It might seem tedious, since a large part of it will be covered up, but it's essential to a natural looking tree.


    And of course, you kind of want to know the types of trees you can draw, so I recommend googling tree types as references. I think Ash trees are the best for beginners, and the most stereotypical tree there is. Bonsai trees are also great for learning about shapes, and perfect for RPG Maker's small resolution! References are your buddy, there can never not be enough references pictures for you. We imitate real life, so you have to look at real life first!


    Tip: set your background layer to a grey colour, so that you can see your tree better, because you will never place a tree on a pure white background!

    • 1. Drawing the trunk



    So open up your favourite drawing program, and draw a shape resembling a tree. You can keep in mind what kind of tree you'd like to draw, tall, short, pine tree, oak tree, etc. I'll be drawing a spruce tree, as well as a generic oak. First up is the spruce. Spruces are not varied with their trunks, it's usually just a straight line, with branches coming off from the main trunk. So that's what I'll draw, a straight brown shape (I'm using a pixel brush here because it's for Ancient Dungeons, my tileset, whose style has a hard pixel edge on the outside, but painted on the inside. You can choose whatever you want though). Don't forget about drawing the roots, they should 'fan' out at the bottom. Think of it like drawing the teeth of a jack-o-lantern!


    [​IMG]


    Because you're not going to see the branches of the spruce, I'm skipping that part for later, and will shade the trunk. Start with a darker colour first, and shade to the right, because the light source comes from the top left in RPG Maker. Use a small brush of size 3-5, and set the opacity to about 30%, and simply draw a shadow on the right edge.


    [​IMG]


    Brush over this area a few more times to darken it, and a few random places as well to create variety. To best draw tree bark, just draw in lines, following the trunk. In this case, the trunk is straight, so draw straight lines.


    [​IMG]


    Time for some highlights! Pick a lighter colour than your base colour, and draw in small 1 pixel sized brush lines. Leave the opacity at 30%, and keep brushing over areas to get some highlights in there. Draw to the left, as that's where the light is coming from. No need to worry; you cannot make mistakes here! If you accidentally draw over a shadow, that's fine as well!


    [​IMG]


    Time to finalize this trunk, add some tinier details, like make it darker or brighter. Use a small brush, and draw in a way that makes it look like a tree bark. Simply having dark/light lines in there will do fine to make it look like a trunk.


    [​IMG]


    Because I haven't added any branches, I still need to know where the foliage will go, so I will create a new, temporary, layer, and draw some lines where the foliage will go. I will use this as a guideline, not very strict though. It's to get the general shape of it in mind. This is completely optional.


    [​IMG]

    • 2. Drawing the foliage



    So now we have to draw the final steps, the foliage of the tree. This is the step that takes the longest, but is also the most fun. Since I am drawing a spruce tree, I want the branches to have an upwards curve. The branches will curve up, but also have foliage hanging down from them, giving them a droopy appearance.


    First, draw the shape of the foliage on a new layer. Like I said, I want the branches to curve upwards, and have a droopy appearance. It doesn't matter if it's not perfect, that's the beauty of trees, there are no mistakes! You don't have to fill everything in, you can leave gaps, and even erase some parts if you'd like. Make the branches small and thin at the top, and widen them at the bottom.


    [​IMG]


    Time to shade these leaves! Grab a darker colour, a brush size of about 3, opacity low again at like 30%, and shade towards the right of the tree. Since these are branches, the bottom part of the leaves should be darker, and the top should be brighter. Don't know what or how to shade? Just draw spotty areas on the leaves, this will give it some texture.


    [​IMG]


    Next are the highlights. With a brush size 1, draw on the left side small streaks of a lighter colour, especially near the top. Keep them along the rims of the branches. Due to the perspective, to make it seem like there's branches at the front, all we do is draw a small crescent shape in a highlight colour in the middle. Then it seems like there's a branch there.


    [​IMG]


    Duplicate this layer, flip it horizontally, and then move the branches a bit, or remove a few, darken it a bit, and place it behind the trunk like so (the other layer of leaves is invisible in this example):


    [​IMG]


    Then (this is optional), due to my spruce tree being set in a snowy area, I want to reflect some blue to the leaves. So in a very soft brush, on a new layer, I drew some blue highlights on the very far right of the leaves, and set the layer to colour dodge. It's subtle, but noticeable.


    [​IMG]


    The tree is pretty much done now, all that's left is to add a shadow. A quick way to make shadows for the trees, is to duplicate the foliage layers, merge them together, turn the brightness down to zero so that it is a pure black. Then you flatten this layer a bit, skew it to the right, and place it beneath the trunk layer. Then I set the layer to 43% opacity. That's my personal preference though, RPG Maker has a 50% opacity.


    [​IMG]

    • 3. Video progress of a tree



    Here's a video I recorded myself drawing a tree from scratch. I use Adobe Photoshop CS3, with only one custom brush, a cloud brush made by Noise Less, found here: http://noise-less.deviantart.com/art/Cloud-Smudge-Brushes-83975723 which is great for adding in leaves. What if you can't use this brush? The brush made it easier to 'scatter' paint, so small splotches of a darker colour would get scattered around. You can do this manually instead, take a small size 3 brush, set the opacity to 20%, take a darker colour, and draw in splotches of shadows (keep in mind the light source). Do the same thing for highlights.


    I mostly use the pencil brush here, because it's a certain style from Ancient Dungeons that I want to match, keeping the lines crisp. The video is divided into 3 steps; drawing the trunk, drawing the foliage, and adding finishing touches.













    Tip: you don't need to have a drawing tablet to draw! I always use a mouse. Not the most ergonomic way of saving your poor wrist from RSI, but you don't need to spend a lot of cash to get good.
     
    Last edited: May 3, 2017
    #1
  2. PixelHeart

    PixelHeart The Pixel Heartist! Veteran

    Messages:
    3,725
    Likes Received:
    1,680
    First Language:
    English
    Primarily Uses:
    Other
    Tre...tree? o_o ...I think its broked...its not treeing very well.....


    lol, But seriously...this was pretty sloppy, cuz i did it in a hurry. Im gonna try again soon. Thank you so much for this tut!


    Edit: Also XwwwX.... gawd...i am SO SLOW! Thanks to your tut, i figured out there was a such thing as opasity settings in gimp for the pixel pin....sigh...and i wanna be a pixel artist X__X ....


    Tree.png
     
    Last edited by a moderator: Nov 4, 2016
    #2
    Celianna and jupitersdaughter like this.
  3. jupitersdaughter

    jupitersdaughter Veteran Veteran

    Messages:
    63
    Likes Received:
    52
    Location:
    USA
    First Language:
    English
    @Blue Shift  even with a great tutorial, it does take practice to be a great pixel artist! Celianna's been doing it for literally years. I'm sure some of her first attempts from when she first started out weren't very good.



    Don't give up :)  
     
    Last edited by a moderator: Nov 4, 2016
    #3
    CallMeKerrigan and PixelHeart like this.
  4. Knayter

    Knayter *teleport behind you* Nothing personal kid Veteran

    Messages:
    229
    Likes Received:
    479
    Location:
    Viet Nam
    First Language:
    Viet Nam
    Primarily Uses:
    RMVXA
    Best Tree tutorial ! Gonna give it a try :)  
     
    #4
  5. Sharm

    Sharm Pixel Tile Artist Veteran

    Messages:
    12,615
    Likes Received:
    10,300
    Location:
    USA
    First Language:
    English
    Primarily Uses:
    N/A
    Celianna's a decent pixel artist, but this isn't a pixel art tutorial.  You could still learn good things from it to make a pixel tree but not by following it exactly.


    @Blue Shift  That's an excellent first attempt.  Don't worry too much about not getting it exactly right, no one's first attempts at anything are very good.  You should see the first drafts of the stuff I made for Pixel Myth, it looks very different and I had a fair amount of practice at pixel art at the time (I bet you could find it somewhere, I had it up on Pixelation for critique.)  Next time pay a little more attention to the color choices and it'll look better.  It would probably help to start out with a medium grey or near grey colored background, whites or black as a background is too harsh and distort perception, making the color choices distorted as well.  I personally prefer a vaguely brown grey, probably because I very much like blue and would use it all the time if I could. :D   It would also help to use a real life reference and not just the tutorial.
     
    #5
    PixelHeart likes this.
  6. UNphiltered_khaos

    UNphiltered_khaos Game Dev. Artist. Veteran

    Messages:
    1,730
    Likes Received:
    640
    Location:
    Montucky
    First Language:
    Americanese
    Primarily Uses:
    N/A
    Ooooh, nice tutorial! have you got any others?
     
    #6
    PixelHeart likes this.
  7. PixelHeart

    PixelHeart The Pixel Heartist! Veteran

    Messages:
    3,725
    Likes Received:
    1,680
    First Language:
    English
    Primarily Uses:
    Other
    This one I think came out I little better =3 ! I think I'm getting the hang of it! X3

    Tree2.png
     
    #7
  8. UNphiltered_khaos

    UNphiltered_khaos Game Dev. Artist. Veteran

    Messages:
    1,730
    Likes Received:
    640
    Location:
    Montucky
    First Language:
    Americanese
    Primarily Uses:
    N/A
    Seriously! That looks awesome!
     
    #8
    PixelHeart likes this.
  9. InBlast

    InBlast The Mad Hamster Veteran

    Messages:
    288
    Likes Received:
    88
    Location:
    France
    First Language:
    French
    I would so much love to be able to do something like this !


    But before everything I lack too much in photoshop skills ^^
     
    #9
    PixelHeart likes this.
  10. Knayter

    Knayter *teleport behind you* Nothing personal kid Veteran

    Messages:
    229
    Likes Received:
    479
    Location:
    Viet Nam
    First Language:
    Viet Nam
    Primarily Uses:
    RMVXA
    This is my first try


    Doesn't look good, not proud with it but thanks to this amazing tutorial, i finally managed to draw some tree :)


    tree.png trunk.png


    Somehow, you want to use this, just do it. Credit is not required.
     
    #10
  11. Celianna

    Celianna Tileset artist Global Mod

    Messages:
    10,514
    Likes Received:
    5,509
    First Language:
    Dutch
    Primarily Uses:
    RMMV
    @Blue Shift if that's your first try, you make me run for my money! That's a fantastic first try. Practice makes perfect, and getting good at it means you have to draw lots! And of course, look at real life pictures of trees. I mean, this is what I drew 6 years ago:


    [​IMG]


    You can only improve! The second one is much better, too. Lovely trunk. I would recommend not darkening the 'back leaves' as much as you did in that sample, it almost looks black. You want to avoid black.


    @Knayter: that's really good as well! You guys are on a roll here. You should be proud of it, look at what you created :) you may want to make the shadow smaller, but other than that, it looks great!


    I realize I should probably update the tutorial a bit to include an example that looks more like the RTP (I was drawing these trees for Ancient Dungeons, which has a different style).


    Also, there are a lot of different ways to draw the foliage. In this example, I draw every single leaf by hand, and then keep smoothing them out with different colours, and using the burn/dodge tool:


    [​IMG]
     
    Last edited by a moderator: Nov 4, 2016
    #11
    Reese and Knayter like this.
  12. Knayter

    Knayter *teleport behind you* Nothing personal kid Veteran

    Messages:
    229
    Likes Received:
    479
    Location:
    Viet Nam
    First Language:
    Viet Nam
    Primarily Uses:
    RMVXA
    Tks Celianna ^^ i gonna try this new way!


    P/s: My forum name is Knayter not Knaytar, so it could be nice if you can fix that :p  
     
    #12
  13. PixelHeart

    PixelHeart The Pixel Heartist! Veteran

    Messages:
    3,725
    Likes Received:
    1,680
    First Language:
    English
    Primarily Uses:
    Other
    =3 if you get the time, could you do a vid/tutorial on how to draw rocks? I have trouble with those too...nature stuff in general really.
     
    #13
  14. SlySlySly

    SlySlySly Princess Veteran

    Messages:
    128
    Likes Received:
    16
    Location:
    Colorado USA
    First Language:
    English
    Hey! I tried this method and here is my first attempt!  Tree try 1.png
     
    #14
    CallMeKerrigan and PixelHeart like this.
  15. Reese

    Reese Wretched Art Prince Veteran

    Messages:
    78
    Likes Received:
    49
    First Language:
    English
    Maybe I should give this a try...


    Alright, I'm giving this a spin  :popcorn:


    [EDIT]


    Okay so I tried to do a cherry blossom tree and... I don't even know what I just did -_-


    I didn't finish it since I thought it looks like garbage *sniffle*

    NOTE: ITS MY FIRST TIME DOING THIS..


    [​IMG]
     
    Last edited by a moderator: Nov 5, 2016
    #15
    PixelHeart and Knayter like this.
  16. Celianna

    Celianna Tileset artist Global Mod

    Messages:
    10,514
    Likes Received:
    5,509
    First Language:
    Dutch
    Primarily Uses:
    RMMV
    @SlySlySly Definitely not bad for a first try! You may want to straighten the trunk a bit, since it's a little lopsided at the top. Trees can be funky, but when it comes to spruces/pines, they're straight as a needle.


    @Reese that's a great cherry blossom texture.If you hate it, I recommend erasing parts of it (mostly in the middle), so that you can see the trunk, as well as the blossoms behind the trunk (which will be much darker), this should give it some depth!
     
    #16
    Knayter and PixelHeart like this.
  17. InBlast

    InBlast The Mad Hamster Veteran

    Messages:
    288
    Likes Received:
    88
    Location:
    France
    First Language:
    French
    [​IMG]


    First attemp ! 


    I'm not really happy about the trunk :/


    I will try a bigger tree next time to be able to add more details.
     
    Last edited by a moderator: Nov 7, 2016
    #17
    Celianna and Knayter like this.
  18. Zon3dy

    Zon3dy Warper Member

    Messages:
    1
    Likes Received:
    1
    First Language:
    English
    First Attempt!


    Awesome tutorial! It's simple, it's effective, and you can get professional results with time and effort following this.


    I'm truelly pleased with it! I spent the day working on this piece following your tutorial and it gave me awesome results, and it's really nice to have a tutorial that allows a nub like myself to actually produce something good!


    Basic PineFlater.png
     
    Last edited by a moderator: Nov 20, 2016
    #18
    CallMeKerrigan likes this.
  19. Gabrelik

    Gabrelik Almighty Maker of Sandwiches Veteran

    Messages:
    770
    Likes Received:
    1,281
    Location:
    Florida, USA
    First Language:
    English
    Primarily Uses:
    RMMV
    First attempt at this. I think I messed something up in the beginning and then got carried away trying to fix it. :)  Still, your tutorial was excellent and I'll certainly be using it again. This was a lot of fun! :)  


    Firsttree.png
     
    #19
  20. Celianna

    Celianna Tileset artist Global Mod

    Messages:
    10,514
    Likes Received:
    5,509
    First Language:
    Dutch
    Primarily Uses:
    RMMV
    @Gabrelik not bad! The shape is fine, although I would suggest not using those green colours. Your highlight colour should lean more towards the yellow spectrum, and not towards the blue spectrum.
     
    #20

Share This Page