Tree-Making Tutorial

Discussion in 'Non-Maker Specific Tutorials' started by Pyromantic, Apr 27, 2016.

    Tags:
  1. Pyromantic

    Pyromantic Veteran Veteran

    Messages:
    35
    Likes Received:
    191
    Location:
    USA
    First Language:
    English
    output_ZhYLy1.gif


    Pixel Art Tree Tutorial



    When I first started out doing pixel art I couldn’t find a good tutorial on how to make trees. So now that I’m a bit better, I’ve decided to make my own! 


    For this tutorial, you’ll need some sort of digital art program. You probably shouldn’t be looking at digital art tutorials if you don’t have a digital art program. I use Pro Motion, but I’m pretty sure that Gimp and Photoshop work too. 


    Step One: Basic Shape


    So first things first, we’ve got to make the general shape of the tree. 

    [​IMG]
    I did this by taking a circular brush and making a bunch of lumpy circles, arranged a in vaguely pyramidal shape. My current color palette (One whole color!) is up in the right corner there.


    Simple and easy, right? So, moving on…


    Step Two: Basic Light and Shading

    [​IMG]
    Now you’ve got to get the basic shading down, too. The tree should be made up of a bunch of (slightly disfigured) spheres overlapping each other. Don’t shade in perfectly straight lines - look at how the different blocks of color contour in the shape of a sphere.


    But don’t stress too much about getting the shading perfect. You’re mostly just making a guide for yourself later. It doesn’t have to look perfect.


    Step Three: Detailed Shading

    [​IMG]
    Now we have to get into the nitty-gritty parts of the shading. You’ll want to switch your brush to a small size. The one I was using wasn’t anything fancy - it was just a four-pointed “star,” shown below:

    [​IMG]
    (In Pro Motion, it’s the smallest circle brush.)


    Start with the darkest shade that you’re using for that portion of the tree. (Always work from dark to light. Light casts shadows - so naturally the shadows go underneath the light.). Make short quick strokes up into the second darkest shade. Switch to the color you’re using for your second darkest shade, and repeat the process with short, quick strokes into the third darkest shade. 

    [​IMG]



    That’s what it looked like for me when I was finished. You don’t have to follow any particular pattern or strategy, but be careful to keep to the contour guide you made in Step Two. Try to concentrate on the edges of the shape, since less light will hit those, which means they should be darker.


    I added the darkest shade I’ll use during this step - used this shade for to outline the bottom of the lowest clumps on the tree, just to make it stand out a little more from the other tiers.


    (Side note - You could potentially stop here, if you want a simpler, more cartoony and abstract style of tree. Not everything has to strive for photo realism, especially pixel art.)


    Step Four: Detailed Lighting

    [​IMG]
    Now that the shading’s done, we’ve got to start on the lighting. The method for this is pretty similar to the method for shading - small brush, short strokes, mixing the different blocks of color together. Only difference is now you’re into the color block beneath. So, select your second darkest shade, and make quick short strokes into your darkest shade. Then select third darkest, and move into second darkest. Etc, etc.

    [​IMG]



    The clump on the left shows the finished product - what you’ll get when you’ve finished both lighting and shading. The middle lump is shading only, without the lighting yet. And the right lump is lighting with no shading - you should NOT have this at any point in your project. Always do shading first, then lighting over of the shadows. But the right clump shows you what sort of brush stroke I’m using - the same that I used for the shading.


    Step Five: Hell


    Now, do that entire process all over every sphere on your tree. Yes, this’ll take a bit of time, but there really isn’t a short cut if you want a complex looking tree.

    [​IMG]
    On this step I added my lightest color, a golden yellow to use as a highlight on the highest sphere on the tree. 


    Step Six: Come back from Hell and make minor fixes

    [​IMG]
    Now you’re mostly finished - add a few final touches to complete it. One issue I noticed was that my tree looked a little too lumpy, so lightened up the creases between the different spheres a bit.

    [​IMG]



    This is also a good time to add a trunk. Unless your trees are floating. In which case, um, props for originality, I guess.

    [​IMG]

    “But wait a minute, Pyro!” You probably aren’t shouting at your computer screen. “This process is so long, and the tree I need is huge! I can’t do this for the whole thing!” Well let me show you some fancy-pantsy pixellated witchcraft, friend. 

    [​IMG][​IMG][​IMG][​IMG]



    Spheres, as it turns out, are pretty hard to tell apart. Stacking a few treetops on top of each other can easily multiply the size of the tree without sacrificing too much quality (Or time and effort for that matter.) You might have to do some minor touch ups to get it to look right - for instance, this bit of red right here:

    [​IMG]



    That would probably have to be drawn over, to make it look more in line with the rest of the tree - the shadow shouldn’t be so deep right there.


    Now that that’s out of the way, let’s move onto the last and final step:


    Step Seven: Add Some Hearts and Smiley Faces in Photoshop

    [​IMG]



    Perfect. Ten outta ten.
     
    #1
  2. Neverward

    Neverward Keeping it trill Veteran

    Messages:
    447
    Likes Received:
    277
    Location:
    California
    First Language:
    English
    Wow this is so great :o how are there no comments or likes? You rocked it, showed the technique well ^^
     
    #2
  3. rpgdreamer

    rpgdreamer His Royal Highness Veteran

    Messages:
    133
    Likes Received:
    103
    Location:
    Dallas, TX
    First Language:
    English
    Primarily Uses:
    RMVXA
    What a great tutorial! The trees look very good indeed. Thank you!
     
    #3
  4. Pyromantic

    Pyromantic Veteran Veteran

    Messages:
    35
    Likes Received:
    191
    Location:
    USA
    First Language:
    English
    @Neverward I think this thread only recently went live. I submitted it for posting a few months ago with no response, but all of a sudden these past few weeks I've been getting feedback


    @rpgdreamer Thank you!
     
    #4
    Dymdez likes this.
  5. Reese

    Reese Wretched Art Prince Veteran

    Messages:
    78
    Likes Received:
    49
    First Language:
    English
    Bruh~ xD I tried creating one myself and I don't even think that it could be considered as a Tree xD


    Sorry, I'm not a very artistic person, so I'd refrain to show it here lol
     
    #5
  6. nidhoggn

    nidhoggn Villager Member

    Messages:
    24
    Likes Received:
    36
    Location:
    São paulo - Brazil
    First Language:
    Portuguese
    Nice tutorial, I think the only problem is that some of the images are missing.
     
    #6

Share This Page