AuthorTopic: Understanding the anatomy of a tree and leaves in pixel art + critiquing a tree  (Read 474 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: 122
  • 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: 122
  • 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: 122
  • 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: 122
  • 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: 122
  • 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).