AuthorTopic: Understanding the anatomy of a tree and leaves in pixel art + critiquing a tree  (Read 509 times)

Offline Gypsy

  • 0001
  • *
  • Posts: 17
  • Karma: +0/-0
    • View Profile
Hey everyone,

I'm new to learning pixel art and am certain I'm not the first person to struggle with trees. Hoping advice on how to fix this one will help me understand making the work look better. All in all, my greatest weakness is making "leaves", as most of the time I see random pixels next to one another that look like a tree in the end. Is there a pattern or approach that can help me understand making leaves better.

Thank you for your time.
Gypsy

tree-handdrawn" border="0

Offline Chonky Pixel

  • 0010
  • *
  • Posts: 129
  • Karma: +1/-0
    • tequila_ben
    • http://pixeljoint.com/p/187855.htm
    • https://www.facebook.com/chonkypixel/?modal=admin_todo_tour
    • View Profile
    • Chonky Pixel
There is indeed an approach to making leaves. Or rather, several...

You obviously understand that the crosshatching approach you have here isn't particularly satisfying (although it has a certain minimalist charm). I don't have time for an edit just now but if I get a moment I'll come back with some ideas.

Here's one approach:

https://www.youtube.com/watch?v=QfpIKDLtf9I

Another is to literally go leaf by leaf, using a diagonal criss-cross pattern and two layers of leaves (for depth). If you go this route you'll end up drawing little shadows on individual leaves, which is very zen and also very time-consuming. (And will give a better result.)

Which kind of leaf shape and pattern would you like to go for?


Basically, there are two parts to any approach like this: Low detail -> high detail and modular design.

First you roughly block out colours for light and shade. You've started doing this, but don't use crosshatched edges. Also, some of your highlights don't look quite convincing.

Secondly, make some modules. These could be clusters of leaves or individual leaves. Or they could be the ideas of leaves that you have in your head, which you will get very used to drawing over the next few hours.

Now assemble your modules in a nice arrangement on your tree. You may want to make a layer of dark leaves over which you put your lighter ones. Match the shade of your leaves to the bright and dark areas. On the boundaries, you switch the colour of your leaves... But not half way through a leaf.

After this you can use shadows and highlights to give more depth...

Hard to describe. Diagrams needed.

« Last Edit: March 10, 2020, 04:30:44 pm by Chonky Pixel »

Offline Chonky Pixel

  • 0010
  • *
  • Posts: 129
  • Karma: +1/-0
    • tequila_ben
    • http://pixeljoint.com/p/187855.htm
    • https://www.facebook.com/chonkypixel/?modal=admin_todo_tour
    • View Profile
    • Chonky Pixel
Here's another example, using the low->high detail and modular leaf approach. Here the module is "the idea of a set of leaf shapes that the artist has in their head". For single leaves I probably wouldn't want to have to cut & paste all the time.

https://www.youtube.com/watch?v=4pcufqo41Tk

You can make the leaves smaller if you like, and more tightly packed for a bushy look. There's pointy leaves, round leaves, leaves with complex shapes, big leaves, thick leaves with width, or more stylistic approaches. Maybe everything in your world is smooth and shiny? Then you could get away with some spheres perhaps. And so on...

Offline Gypsy

  • 0001
  • *
  • Posts: 17
  • Karma: +0/-0
    • View Profile
Hey Chonky, thanks for the response!

Regarding which style I'd like to go for, I honestly want to get good at traditional and pixel art in general, and not get stuck in one style and hide behind it, so I'll take whatever good advice comes my way and just keep at it.

I saw the vid about the drawing in shade and going lighter, but the one with the bushes being created in layers kind of blew my mind. Can't believe I didn't reach that conclusion on my own.

I started reading a book about drawing trees, so hopefully I'll just keep going at it and this will all makes sense.

I'm definitely gonna try modular design and see how far I can take it. I've seen may 3D assets made that way, but in pixel art it sounds like an interesting puzzle to solve. Should be interesting.

And feel free to edit the tree how you like. I'm using it for a game I'm making, and have been stuck over the past few days because I'm too busy trying to make a tree that makes sense. One step at a time I suppose.

Offline Mathcong

  • 0001
  • *
  • Posts: 48
  • Karma: +0/-0
    • Mathcong_
    • View Profile
since you asked about leaves, i will drop this incredible tutorial by @OniMille here:



for your tree i would add at least a darker colour for the leaves, and maybe a highlight as well.

Offline Chonky Pixel

  • 0010
  • *
  • Posts: 129
  • Karma: +1/-0
    • tequila_ben
    • http://pixeljoint.com/p/187855.htm
    • https://www.facebook.com/chonkypixel/?modal=admin_todo_tour
    • View Profile
    • Chonky Pixel
That is a good tutorial.

The top row makes the mistake I always make. That's drawing all your leaves nice and neat so they all have a 1px border. It makes it easier to draw something that reads like leaves, but you won't get that lush bushy look. If you want to do it like the pros you need to give each leaf a story. Your leaf might be at *just* this angle, so it's partially covering that other leaf, so that leaf will be partially in shadow... Oh, and the side is curled slightly so it'll catch the sun and glint... And here's a gap where you can just see some shadowy leaves inside the tree... It's really involving.

Here's something to think about. You could reduce your tree's leaves to spheres. You'll want to wipe off some detail there or you'll be at it for ages. You'll get your wiggly edges back. Then shade your spheres like the one in Mathcong's tutorial and start following that process... It's a better example than the top row, in my opinion. It's still a bit flat-looking though.

One trick is to take a single leaf you want to pop out, then make an outline around only the lower edge. Rather than black, make it one shade darker than it was before. Or just use shadows under leaves in general to imply depth.

Tell you what...



Here's a few ideas to get you started. Top right you can see some leaf shapes. These are my modules. I'll strive to make leaves look like these.

Bottom right is a quick progression of a starting point for some leaves. First I pick a point and make some leaves come out of that point. As I add more leaves in part 2, you can see I'm letting gravity pull them down a little. In the fourth I'm adding some highlights to the edges and some shadow to some leaves that are being blocked from the sun. Normally I'd do this more towards the end of the process as a way to add depth. Leaves get darker as I move away from the highlight area.

In the tree I've freestyled a bit. I didn't get to the adding shadows part though, or to the darker edges.

I also increased the contrast and added some colours.

I don't think you need the internal outlines if you use these techniques, as the natural contrast and change of leaf direction between the areas of leaves should be enough.

It's been a while since I've done this, I forgot how much I enjoyed it. :)
« Last Edit: March 10, 2020, 11:09:53 pm by Chonky Pixel »

Offline Gypsy

  • 0001
  • *
  • Posts: 17
  • Karma: +0/-0
    • View Profile
@Mathcong Wow! That's actually pretty helpful, I'll be sure to try all methods, the bottom one definitely looks like it would fit with my current aesthetic for my game.

Also, just saw your art for your game on twitter, and I'm in love with your trees and trunks. Definitely using those for practice as well!

@Chonky Pixel Your explanation, coupled with the example you provided and the leaves in them has made things a great deal easier for me to comprehend and tackle this matter without as much frustration as before. Most people try to teach you how to draw the tree as a whole, when in reality I believe they should teach you about the leaves, it really is what defines the piece.

Really appreciate it, Chonky, I'm not as disheartened as I was earlier in the day after having an idea, or to be more precise, a purpose for how to tackle this matter.

Looking forward to your critique in future pieces! Cheers!

Offline Chonky Pixel

  • 0010
  • *
  • Posts: 129
  • Karma: +1/-0
    • tequila_ben
    • http://pixeljoint.com/p/187855.htm
    • https://www.facebook.com/chonkypixel/?modal=admin_todo_tour
    • View Profile
    • Chonky Pixel
Glad to hear it! :)

You can probably use the same technique to emulate that bush from the tutorial. Just use different module shapes: larger and rounder.

Offline Gypsy

  • 0001
  • *
  • Posts: 17
  • Karma: +0/-0
    • View Profile
Okay, while I'm still struggling a bit as to be expected I've made a bit of a breakthrough in easing the process and wanted to share it for the sake of anyone stumbling upon this message in the future.

1- So take the image posted by Mathcong and open it in Aseprite (or any other program that supports pixel art animation, but Aseprite works the smoothest here),

2- Take the color palette you want for the tree you're trying to make, and using the magic wand and bucket fill tools, with contiguos mode off in both of them, pick each color from darkest to lightest in the tutorial, and replace them with your own colors. This allows you to see how your own tree should look if you pulled it off correctly instead of trying to guess it. Also, it helps greatly in figuring out how many colors are in the piece you're learning from, as due to contrast, I thought there were 7 colors used when there was actually 5 (still a noob, people). I should mention that if you do this in the original image posted by Mathcong, you'll get ALL the trees colored to your own color palette, so you'll see all styles in your own color scheme, easing things greatly.

3- Make 5 frames of animation and copy the 32x32 tiles in order of progress and watch them being created step by step. I recommend the bonus step 4, which is...

4- Create the image wider than 32x32 and accommodate your own piece, and draw it one step at a time while watching the animation of the tutorial unfold. You can easily copy/paste each of your steps and paste them in the next step instead of starting from scratch (i.e you're done with step 2, so copy your tree and move to frame 3 and place it where it should be using onion skin as a guide).

Here's an image of what this should look like, was using dual screen setup, so ignore the paused DF video on the right, haha:

aseprite-example" border="0

I should note, you can easily use this approach for everything else and not just trees, and I believe I'll give it a try in all things to help me learn better. Hope this helps!

Gypsy
« Last Edit: March 11, 2020, 08:47:41 am by Gypsy »

Offline Chonky Pixel

  • 0010
  • *
  • Posts: 129
  • Karma: +1/-0
    • tequila_ben
    • http://pixeljoint.com/p/187855.htm
    • https://www.facebook.com/chonkypixel/?modal=admin_todo_tour
    • View Profile
    • Chonky Pixel
So a couple of quick points:

Be careful not to create that polka-dot or giraffe skin effect, by making sure all your leaves have nice neat borders around them. Leaves don't do that. They're messy. The overlap. Look at the original. Leaves are melding, lighter leaves are over darker leaves...

If you look at the original, the leaves have a direction to them. They more or less radiate out from a point. Similar to my example, where leaves emerging from a single point make the starting point for the whole thing, and set the direction for subsequent leaves. Don't just put in random leaves.

That radiating pattern isn't the only leaf direction you can use. The top row of the tutorial makes the leaves look almost combed in one direction, and another pattern is criss-cross (alternating diagonal leaves).

Offline Gypsy

  • 0001
  • *
  • Posts: 17
  • Karma: +0/-0
    • View Profile
Get what you're saying. This was actually the third or fourth frame, so not the final version of that bush. Although to be fair, I'm struggling with having the outlines make sense on the final version still.

Here's the bush, and I tried making the tree in a simpler style to avoid my brain exploding.

tree-practice-coloring" border="0

This is clearly going to take some time to get good at.

Offline Chonky Pixel

  • 0010
  • *
  • Posts: 129
  • Karma: +1/-0
    • tequila_ben
    • http://pixeljoint.com/p/187855.htm
    • https://www.facebook.com/chonkypixel/?modal=admin_todo_tour
    • View Profile
    • Chonky Pixel
The tree is actually an improvement. You've got the suggestion of leaf shapes around your value boundaries, which can sometimes be enough. Some bits feel a bit unnatural though. (Dark inset area top-right springs to mind...)

I'd like to see some actual leaves though. :) Have a go. You will find that when you start putting leaves onto the tree you'll start to realise what makes a good placement, how many touching pixels you can get away with, what will make a tight bushy feel and what will make the leaves look loose. Only practice will get you there.

Your bush would be helped if you changed the outline of the whole bush more to have individual leaves poke out. Think about direction as well. Things in nature don't really do random. Not REALLY random. There's all kinds of patterns to leaves, and one thing that screams "this is a living, leafy object" to me is that combination of random and patterned. Make sure the majority of your leaves are aligned into a pattern that tells the story of your bush. I can't discern a pattern here. 

Once you've started to get a bit of confidence, a good thing to try might be this:

Find a great pixel art leaf pattern. (There are loads of free asset packs all over the internet, and Google Images can help too). Grab a random chunk of it and try to make it tile seamlessly. This will force you to read, understand and recreate what the artist is doing to create things like light, shadow, depth, shine, etc.

Offline Gypsy

  • 0001
  • *
  • Posts: 17
  • Karma: +0/-0
    • View Profile
I'm blowing smoke out my bee-hind over here with the leaves approach, haha!

tree-with-new-outines" border="0

Ignore the awful shading, and lack of proper light source, I just ran out of juice. I think I'll read some more art books and practice other things and come back to this one with a fresh perspective.

Still a ways to go. This is not going to be an overnight progress.
« Last Edit: March 11, 2020, 06:00:41 pm by Gypsy »

Offline eishiya

  • 0100
  • ***
  • Posts: 1204
  • Karma: +2/-0
    • http://pixeljoint.com/p/28889.htm
    • View Profile
    • Webcomic: Black Dram
If you try to render every single leaf, of course you'll run out of juice! You only really need to draw the "hero" leaves and only suggest the rest. That both takes way less work and leads to more appealing results.

Offline Chonky Pixel

  • 0010
  • *
  • Posts: 129
  • Karma: +1/-0
    • tequila_ben
    • http://pixeljoint.com/p/187855.htm
    • https://www.facebook.com/chonkypixel/?modal=admin_todo_tour
    • View Profile
    • Chonky Pixel
I can see the shape of the module you were using to construct that! And it's bigger than a leaf! ;)

If you use a cut and paste approach you'll get a cut and paste finish. ;)

I guess it's a matter of taste and personality. I like the look of trees and bushes where the leaves have been individually placed and I can work placing leaves for hours. Hours.

Although I will agree that in general, if you can get away with just suggesting texture, you should. A lot of the time, if you fill large areas with texture things can look overworked, cramped or unprofessional. I don't know why leaves are different, but there's loads of really great pixel art with individually painted leaves.

Offline Gypsy

  • 0001
  • *
  • Posts: 17
  • Karma: +0/-0
    • View Profile
@eishiya

Yeah, I get what you're saying, but I did use a tablet instead of a mouse, so it wasn't as taxing this one, but I've been redrawing the same tree for the past day and a half, so I'm just really fatigued. I understand that to get good at pixel art, this process needs to happen, so I'm in the thick of it now. Just need to lean in and take the small victories one at a time.

@Chonky

Nope! Believe it or not, that was drawn with a tablet, not a copy and paste job at all. Still awful tho, hehehe. Of course, in the middle of it I realized there wasn't a good enough flow to the leaves, not sure you can get flow by drawing at all, there has to be actual deliberate placement I think.

Offline Chonky Pixel

  • 0010
  • *
  • Posts: 129
  • Karma: +1/-0
    • tequila_ben
    • http://pixeljoint.com/p/187855.htm
    • https://www.facebook.com/chonkypixel/?modal=admin_todo_tour
    • View Profile
    • Chonky Pixel

@Chonky

Nope! Believe it or not, that was drawn with a tablet, not a copy and paste job at all. Still awful tho, hehehe. Of course, in the middle of it I realized there wasn't a good enough flow to the leaves, not sure you can get flow by drawing at all, there has to be actual deliberate placement I think.

I can see the same daisy-like pattern of leaves all over the tree and the bush. Either you filled in areas with some cut & paste or you drew the same pattern of leaves over and over.. :)

If you did do all this by leaf-by-leaf then it's a start. Next is working leaf direction and on those transitions from light to shade.

Offline Gypsy

  • 0001
  • *
  • Posts: 17
  • Karma: +0/-0
    • View Profile
@chonky

Yeah it was leaf by leaf, but apparently doing it in pixel perfect mode leads to a lot of similarities. Next time I'll try to use it with pixel perfect turned off and clean it up one at a time, I imagine that'll make them look better simply because I'll be sure to make one leaf different than the one before.

I think the struggle is that some of the trees I look at for reference have leaves pointing in a different direction that what I'd assume. Or to be more precise, I'm not yet all that familiar with what shape looks like its pointing in what direction. Practice, practice, practice.