AuthorTopic: (Wip) A Tree  (Read 14120 times)

Offline e4r

  • 0010
  • *
  • Posts: 111
  • Karma: +0/-0
    • View Profile

(Wip) A Tree

on: June 17, 2010, 04:48:01 pm
Hi guys, This is my first tree, I used a guide to learn how to do it it was from deviant art. But So i tried my bes to make it and here's what I got:




Would like some Critisism and comments on how to improve it because I will use it for a game :o

Offline st0ven

  • 0010
  • *
  • Posts: 200
  • Karma: +0/-0
    • View Profile
    • spriteart

Re: (Wip) A Tree

Reply #1 on: June 17, 2010, 04:52:49 pm
id love to see the link of the tutorial you saw on deviantart. mind linking that up?

Offline e4r

  • 0010
  • *
  • Posts: 111
  • Karma: +0/-0
    • View Profile

Re: (Wip) A Tree

Reply #2 on: June 17, 2010, 04:58:40 pm
K hold on,

Link for Tree(Leaves Tut): http://browse.deviantart.com/?qh=&section=&q=pixel+tree+#/d27a86d

Link for The brown thingy, stump or w/e: http://www.byond.com/members/PixelArt/forum?id=4275

Btw St0ven you have a brick wall tut on pixel zone, I might check it out xD

Offline ErekT

  • 0010
  • *
  • Posts: 330
  • Karma: +0/-0
  • fistful of pixels
    • View Profile

Re: (Wip) A Tree

Reply #3 on: June 17, 2010, 05:13:55 pm
Love the foliage  :) The dithering on the trunk is unnecessary I think. Did myself an edit, quick and dirty-like. Heightened the contrast some and shaded the trunk a bit differently with it receiving shade from the foliage above.





Offline e4r

  • 0010
  • *
  • Posts: 111
  • Karma: +0/-0
    • View Profile

Re: (Wip) A Tree

Reply #4 on: June 17, 2010, 05:17:07 pm
Thanks for the edit, it looks better to me actually. So I did good I suppose for my first tree ?

Offline Anarkhya

  • 0001
  • *
  • Posts: 87
  • Karma: +0/-0
    • View Profile
    • Hello, this is what I do

Re: (Wip) A Tree

Reply #5 on: June 17, 2010, 05:56:30 pm
Something tells me that the lighting is wrong making the tree as viewed from an impossible perspective.
in fact, it may be related to your detailing/texturing.
Exagerating this I have the feeling that one side is crisp and the other one blurry.
The ErekT version while being nicer and giving a more natural look actually emphasized my feeling...

Offline e4r

  • 0010
  • *
  • Posts: 111
  • Karma: +0/-0
    • View Profile

Re: (Wip) A Tree

Reply #6 on: June 17, 2010, 06:06:42 pm
I dont understand what you're saying anarkhya. I'm confused -.-

Offline ErekT

  • 0010
  • *
  • Posts: 330
  • Karma: +0/-0
  • fistful of pixels
    • View Profile

Re: (Wip) A Tree

Reply #7 on: June 17, 2010, 06:22:38 pm
What he means is that if the tree was illuminated by the sun then the trunk wouldn't be shaded like that (right?). It would be mostly in shadow because the light rays would bounce off the foilage directly above it. I tried to shift your highlights to the top of the roots to indicate where the light would hit. Thing is tho', the trunk should be darker with less saturated colours (the more shade the less saturation). It should probably have less contrast than I gave it too, both to fit better with the foilage contrast and because, well.. it really shouldn't receive much light at all.

EDIT:
Okay, I edited the palette and added a shadow covering most of the roots and trunk to illustrate. Judging by the highlights on the foilage the light seems to come from a top down angle slightly skewed towards the viewer. With that light I believe everything except part of the roots in front would be in shadow.

« Last Edit: June 17, 2010, 06:45:10 pm by ErekT »

Offline e4r

  • 0010
  • *
  • Posts: 111
  • Karma: +0/-0
    • View Profile

Re: (Wip) A Tree

Reply #8 on: June 17, 2010, 07:15:25 pm
Oh, I understand now. The leaves would be blocking the sun's rays from hitting the trunk of the tree. So the trunk should be darkened by shadows. Anar also said something about one side crisp the otehr blurry, I don't get that also, did that have to do with the trunk, or the leaves?

Offline ErekT

  • 0010
  • *
  • Posts: 330
  • Karma: +0/-0
  • fistful of pixels
    • View Profile

Re: (Wip) A Tree

Reply #9 on: June 17, 2010, 09:24:37 pm
The right side (our right) has some sharp highlights while the colours on the left side are more even. This makes for inconsistency within the foilage part of the tree. You can solve this two ways; first one is to just add highlights to the left side but that would appear to bring it forward into the light alongside the right, resulting in a flatter looking tree. Not a great solution in other words. The other way would be to even out the stark highlights on the right side with in-between colours and/or using colours further apart from each other  on the left side to create a similar sense of contrast there.

Offline e4r

  • 0010
  • *
  • Posts: 111
  • Karma: +0/-0
    • View Profile

Re: (Wip) A Tree

Reply #10 on: June 17, 2010, 09:29:43 pm
I'm confused. So I have to make a color in between the color of the highlights and use it on the left side?

Offline Anarkhya

  • 0001
  • *
  • Posts: 87
  • Karma: +0/-0
    • View Profile
    • Hello, this is what I do

Re: (Wip) A Tree

Reply #11 on: June 17, 2010, 10:00:27 pm
ok, sorry for being obscure, re-reading my post it seems that my thoughts didnt match my words... ;)
edit of the last ErekT image to precise:  

Offline e4r

  • 0010
  • *
  • Posts: 111
  • Karma: +0/-0
    • View Profile

Re: (Wip) A Tree

Reply #12 on: June 17, 2010, 11:23:01 pm
So, you just thought the way the tree looked was deformed o.o?

Offline Anarkhya

  • 0001
  • *
  • Posts: 87
  • Karma: +0/-0
    • View Profile
    • Hello, this is what I do

Re: (Wip) A Tree

Reply #13 on: June 18, 2010, 12:12:25 am
well ErekT have already translated what my thoughts were:
Quote
The right side (our right) has some sharp highlights while the colours on the left side are more even. This makes for inconsistency within the foilage part of the tree. You can solve this two ways; first one is to just add highlights to the left side but that would appear to bring it forward into the light alongside the right, resulting in a flatter looking tree. Not a great solution in other words.

It seems I choosed the not too great solution in my edit ;)

Offline e4r

  • 0010
  • *
  • Posts: 111
  • Karma: +0/-0
    • View Profile

Re: (Wip) A Tree

Reply #14 on: June 18, 2010, 01:28:00 am
IM confused on this part:
Quote
The other way would be to even out the stark highlights on the right side with in-between colours and/or using colours further apart from each other  on the left side to create a similar sense of contrast there.

Offline Anarkhya

  • 0001
  • *
  • Posts: 87
  • Karma: +0/-0
    • View Profile
    • Hello, this is what I do

Re: (Wip) A Tree

Reply #15 on: June 18, 2010, 12:18:53 pm
Well I admit this sentence also confuses me (and my translator tool) as english is not my mother tongue...

@ErekT: could you rephrase this for us: "The other way would be to even out the stark highlights on the right side with in-between colours and/or using colours further apart from each other  on the left side to create a similar sense of contrast there".

Offline e4r

  • 0010
  • *
  • Posts: 111
  • Karma: +0/-0
    • View Profile

Re: (Wip) A Tree

Reply #16 on: June 18, 2010, 01:28:32 pm
Maybe he meant even out the Dark higlighs instead of stark?

Offline ErekT

  • 0010
  • *
  • Posts: 330
  • Karma: +0/-0
  • fistful of pixels
    • View Profile

Re: (Wip) A Tree

Reply #17 on: June 18, 2010, 01:40:40 pm
Oops, that sentence sounded lots better in my head actually  :P Sorry about the confusion. I'll try again. What I wanted to say, and I'm certainly no authority on any of this, was that he could try to use an even darker green for the shades on that left side, our left that is, to make it contrast more with the green he's using for the light tones on that same side. That way he'd get the same kind of contrast between the colours used on the left side as he now has on the right. Hope that's clears it up a bit.

Offline e4r

  • 0010
  • *
  • Posts: 111
  • Karma: +0/-0
    • View Profile

Re: (Wip) A Tree

Reply #18 on: June 18, 2010, 05:57:25 pm
I guess I can try that. Will post the new one in a few hours, i'm going to head outside and enoy the sunny day today and study trees for a bit out there.

Offline e4r

  • 0010
  • *
  • Posts: 111
  • Karma: +0/-0
    • View Profile

Re: (Wip) A Tree

Reply #19 on: June 20, 2010, 02:14:08 pm
Im kind of confused at what you mean. I tried to understand a bit and came out with this:





I think I did it wrong sine i am still confused at what you mean, i'm a bit slow D;

Sorry it took so long to update, was enjoying the nice weather XD

Offline Anarkhya

  • 0001
  • *
  • Posts: 87
  • Karma: +0/-0
    • View Profile
    • Hello, this is what I do

Re: (Wip) A Tree

Reply #20 on: June 20, 2010, 04:30:23 pm
IMO you got the idea!
but the greenery still look deformed (especially bottom right corner where contrast is too high)

Offline e4r

  • 0010
  • *
  • Posts: 111
  • Karma: +0/-0
    • View Profile

Re: (Wip) A Tree

Reply #21 on: June 20, 2010, 08:58:04 pm
SO I should make the bottom right corner a bit darker right?

Offline Anarkhya

  • 0001
  • *
  • Posts: 87
  • Karma: +0/-0
    • View Profile
    • Hello, this is what I do

Re: (Wip) A Tree

Reply #22 on: June 21, 2010, 07:55:26 am
mmm.. no not darker, thats not what I meant.
Contrast too high here means that you are juxtaposing light and dark too much.

sample:

1 - contrast depends on where you decide to place a certain amount of light/dark
2 - contrast also depends on how you define relations between light/dark in chosing your color palette.

Offline ErekT

  • 0010
  • *
  • Posts: 330
  • Karma: +0/-0
  • fistful of pixels
    • View Profile

Re: (Wip) A Tree

Reply #23 on: June 21, 2010, 08:02:27 am
Yep my thoughts exactly  :) You should contrast the (bottom) left part more by making the dark shades there even darker, don't just add highlights to make it fit with the right side.
« Last Edit: June 21, 2010, 08:04:00 am by ErekT »

Offline Arachne

  • 0010
  • *
  • Posts: 309
  • Karma: +3/-0
    • View Profile
    • Retinal Eclipse

Re: (Wip) A Tree

Reply #24 on: June 21, 2010, 02:18:59 pm
The tree you have now looks a bit like a neatly trimmed garden bush. If that's not what you're aiming for, I would consider drawing larger, more pronounced leaves arranged in a more chaotic fashion (though still clustered around the branches). I would also add more saturated greens closer to yellow, and a hint of sky blue will make the leaves look shinier. I would go for a smaller trunk for a tree that size, and I suggest looking at some pictures of actual trees to get a better idea of how to arrange the leaves and how to shade them.



Hope that helps. :)

Offline Sly

  • 0001
  • *
  • Posts: 46
  • Karma: +0/-0
    • View Profile

Re: (Wip) A Tree

Reply #25 on: June 21, 2010, 02:33:29 pm
Wow that is a beautiful tree Arachne.

I am going to study those leave clusters. =D
No zombies here.

Offline e4r

  • 0010
  • *
  • Posts: 111
  • Karma: +0/-0
    • View Profile

Re: (Wip) A Tree

Reply #26 on: June 21, 2010, 04:04:23 pm
Oh I see. I'm new to trees anyways, but I got studying to do I suppose :)

Here's a TEST:



Just tested arachne's theory to see the shinyness of the leaves.

Man, a lot of things are my first time doing, I never made a cloud before either lol.
« Last Edit: June 21, 2010, 06:15:04 pm by e4r »

Offline e4r

  • 0010
  • *
  • Posts: 111
  • Karma: +0/-0
    • View Profile

Re: (Wip) A Tree

Reply #27 on: June 21, 2010, 10:09:23 pm
Okay, I tried to make some sense of clustered leaves, Here's the edit(I tried i think it came out good?):

edit:

Offline Anarkhya

  • 0001
  • *
  • Posts: 87
  • Karma: +0/-0
    • View Profile
    • Hello, this is what I do

Re: (Wip) A Tree

Reply #28 on: June 21, 2010, 10:35:04 pm
Examining your last tree, no, you're loosing the 3D effect Arachne introduced, think about how light defines volume.
I think its time to call the almighty tree So you'll understand clearly how to reproduce this effect.

Offline e4r

  • 0010
  • *
  • Posts: 111
  • Karma: +0/-0
    • View Profile

Re: (Wip) A Tree

Reply #29 on: June 21, 2010, 11:02:05 pm
I'm a bit slow like I mentioned before, I think maybe its the highlights or something that messing it up, like i have them out of order i think?

If thats the case, I re-arranged them in the way those spheres were where the highlights were like in the same place on each sphere, I dont think i fixed it that much but Just a guess?


Edit:

Offline Atnas

  • Moderator
  • 0100
  • *
  • Posts: 1071
  • Karma: +2/-0
  • very daijōbs
    • paintbread
    • paintbread
    • View Profile

Re: (Wip) A Tree

Reply #30 on: June 22, 2010, 12:36:22 am
You should focus on the leaves as shapes without outlines, with the outlines kinda being implied by the background color they're all on. This'll eliminate the feeling of artificiality I'm getting from your leaves. Full robust curves!! examine how arachne used just color blobs for her leaves. I think at a size this small for items as small as leaves you can't afford the space an actual outline takes up.

Offline WM

  • 0010
  • *
  • Posts: 134
  • Karma: +0/-0
  • cubist
    • View Profile

Re: (Wip) A Tree

Reply #31 on: June 22, 2010, 12:41:28 am
One thing to note is how the leaves of some of the trees in this topic form an overall flow to define the shape of the full body of leaves. When working, look both at individual leaves and leaves in relation to each other. Flow is a plus when looking at something this trafficy.

edit: Atnas kinda beat me to the punch.  :)
« Last Edit: June 22, 2010, 02:58:43 am by WM »

Offline e4r

  • 0010
  • *
  • Posts: 111
  • Karma: +0/-0
    • View Profile

Re: (Wip) A Tree

Reply #32 on: June 22, 2010, 02:53:16 am
i think I messed it up even more, fml D;

Horrible:

I think the one before looks better IMO.

Offline e4r

  • 0010
  • *
  • Posts: 111
  • Karma: +0/-0
    • View Profile

Re: (Wip) A Tree

Reply #33 on: June 22, 2010, 05:51:56 am
I keep trying but I can't get it right.. Still I Keep F---------- up. Every time time i try to recreate the tree, I cant get the leaves right, just looks like a bunch of scribbles. -.- It's pissing me off.

Offline Anarkhya

  • 0001
  • *
  • Posts: 87
  • Karma: +0/-0
    • View Profile
    • Hello, this is what I do

Re: (Wip) A Tree

Reply #34 on: June 22, 2010, 11:27:07 am
I admit that knowing how things works doesnt imply succeding in created them, I think sir st0ven's tree process could help you more.

Offline e4r

  • 0010
  • *
  • Posts: 111
  • Karma: +0/-0
    • View Profile

Re: (Wip) A Tree

Reply #35 on: June 22, 2010, 03:28:59 pm
Ill try again and hopefully get it this time ._.

Offline ErekT

  • 0010
  • *
  • Posts: 330
  • Karma: +0/-0
  • fistful of pixels
    • View Profile

Re: (Wip) A Tree

Reply #36 on: June 22, 2010, 09:24:12 pm
Ok, after seeing Arachne's and st0ven's trees I got inspired to do a little step-by-step myself. The tree I ended up with isn't as good looking as theirs, but I've taken a simplistic approach I think should be pretty easy to follow and hopefully helpful in understanding how to draw these things  :D



e4r: The feeling I get from looking at your trees is that you're putting too much effort into shading the foilage and not giving enough consideration to the structure underneath. But as with so many other things, to draw trees right you need to figure out how they "work". If you study Arachne's tree you'll see her leaves are really just splotches of pixels: by themselves they don't look like anything. It's how they're put together and shaded as a group that not only gives the impression of looking at leaves, but also suggests the form underneath. St0ven's tree is done in a different style but the same applies.

So how do trees work then? Basically you can think of a tree as one big branch growing out of the earth. This huge branch (the trunk) grows upwards and gets thinner as it grows. As it gets thinner it will err, branch off into smaller branches which again branches off into even tinier branches until you have the twigs. At the tip of each tiny twig a leaf grows out. Fair enough. So let's draw this huge branch then:



The beauty part here is that you don't really have to worry about drawing it wrong. A tree's growth is random so you can draw it randomly, just make sure you draw quite a few branches and twigs. And one thing that's handy to keep in mind to keep the tree looking natural is to not draw branches side by side like this:



But rather like this:




EDIT: Oops, hit post when I was supposed to hit preview  :o Be back soon with the rest  :P


Ok so we have the trunk sorted out. It's time to draw in the leaf clusters that will make up the foilage. Let's create a new layer and add in some splashes over the twigs:



Notice where I place those splashes? They're placed to encapsule all the twigs at the end of the branches as that's where all the leaves grow from. Here's another image with blue circles for clarity:



No need to be too concerned with the shapes yet, drawing them in to cover those twigs at the end of each branch is the important thing right now.

Next I've created a new layer and drew in lots and lots of small blotches, all using a single colour a bit brighter than the splashes. Again, I didn't put too much effort into getting the shape right, I just made them roughly leaf shaped. I also took care to have them stick outside the splashes as seen in image 2 below.





Created another layer and drew in more leaves in a lighter colour: This time taking care to put most of them at the end of each twig like so:



The reason for doing that was.. well, I guess I did it to make the foilage seem more like its actually growing from the tree and not tacked on afterwards  ??? Yeah we'll go with that  :crazy:

And here's the tree we get so far with all layers visible:



It's shaping up but still looks kinda flat. We need some highlights to give it more volume. I added another layer on top of the others and drew in some more leaves with a lighter colour than the last:



Note that I used them sparingly and mostly at the top of the clusters (indicated with those blue circles above) because the light comes from above so that's where it will hit.



And there it is. Over-donewith-gone  :P Phew.. longest post I've ever written! It isn't perfect, still lacks some dimension I think because there are no branches pointing towards or away from the viewer, only left and right. But what the heck.. It'll do. Hope that helps a bit :)

EDIT:

Added another step to this. I concentrated the dark and midtoned leaves around the clusters/light-toned leaves some more to make the transition from dark to light a bit more seamless and pleasant to look at. In image no 2 the old tree is at the left for comparison.



« Last Edit: June 23, 2010, 02:37:22 pm by ErekT »

Offline Kcilc

  • 0010
  • *
  • Posts: 217
  • Karma: +2/-0
    • View Profile

Re: (Wip) A Tree

Reply #37 on: June 22, 2010, 10:07:27 pm
The beauty part here is that you don't really have to worry about drawing it wrong. A tree's growth is random so you can draw it randomly
Well, you don't have to worry too much, but remember that a tree still needs a good center of balance. It doesn't have to be symmetrical, but its weight needs to be evenly dispersed to look right.

Offline Jad

  • 0100
  • ***
  • Posts: 1048
  • Karma: +0/-0
    • View Profile

Re: (Wip) A Tree

Reply #38 on: June 22, 2010, 11:42:12 pm
Sooort of. Depends on the tree!

The only thing bugging me right now is how every leaf is separated! No overlap! It irks me.

Very good progress though. So glad to see how quickly st0ven's progress piece had effect on the pix members ; u ;
' _ '

Offline e4r

  • 0010
  • *
  • Posts: 111
  • Karma: +0/-0
    • View Profile

Re: (Wip) A Tree

Reply #39 on: June 23, 2010, 02:50:32 am
St0ven I was curious what program you use to make all the layers, and Jad, the leaves do overlap dont they, thee lighter color one, or the "highlights" overlap the rest right?

Offline ErekT

  • 0010
  • *
  • Posts: 330
  • Karma: +0/-0
  • fistful of pixels
    • View Profile

Re: (Wip) A Tree

Reply #40 on: June 23, 2010, 02:26:40 pm
Jad: Good call on the overlap :) I updated the post above with another step.

e4r: Graphicsgale and Promotion are both good for pixel work.