(WIP) Tree for a game

[Livsgladje]

I am working on drawing all the pixel art for some friends game but the problem is i have never done pixel art before so this is all a first try for me.

what i am having problems with is that the tree looks like its to much strait forward what i want is the same view you have in like the first zelda games, top down view or what ever it is. I have a real problem getting that feeling of the not only the tree but most stuff i make. So any tips on how this would be done would be great.



here is a picture with trees in the game

[Phlakes]

Obligatory posting of the tutorial with the Secret of Mana 3 tree.

I'll try be concise here.

Broken down to the most basic shapes, trees are basically a cylinder with a sphere on top. So when you shade the leaves, you need to treat the entire form as a sphere, with heavy shadows along the bottom and highlights concentrated in one frontal area rather than along the top, following the outline.

But of course shading one giant sphere won't look like a tree, so, like the tutorial says, break it up and several smaller spheres. Here's one I did a long time ago, which I never actually finished but that makes it a lot better for getting my point across-



You can see that the entire form follows the shading of a sphere-



With each smaller sphere being modified to fit the section of the bigger sphere it's on.

As for the leaf texture, avoid outlining the leaves like the plague. With something that small, you need to imply detail rather than draw it. Starting with the base spheres, you can sort of mold the leaves out like clay, having shadows back where the leaf is closer to the center and a highlight at its tip. I actually just worked using the SoM 3 tree from that tutorial as a reference. Look closely at how it shapes each leaf and try to replicate it, then try using those techniques to create your own.

[Dusty]

Honestly, I'd take a step back and not render individual leaves at all. You have a very messy, cartoony look going on with the rest of the tiles; they're not beautiful pixel art but it's a style that has worked well before in games like Scribblenauts and such. I know it's gonna seem weird but I think you might be able to manage working with that style.

[Phlakes]

That's also a great option. I can't remember who it is, but someone here would definitely be willing to rave about Zelda: LttP's simplified style.

[jams0988]

That's also a great option. I can't remember who it is, but someone here would definitely be willing to rave about Zelda: LttP's simplified style.

Because it's great. =D
And I agree with Dusty's opinion that a very simplified leaf structure would work for these trees. The grass and the dirt are quit simple, after all!

[Livsgladje]

Thanks for all the tips and tricks will see how i will do it, the grass and dirt was kinda rushed becasue they wanted somthing to work with.

[jinza]

1.) i think the leaves are too defined, maybe you shouldn't outline every single leaf as it could make the pixeling process a tad longer
2.) there are too many light sources on the trees it should come from one direction instead of multiple directions
e.g: if the sun is at the top it should be on the top of the trees, if it's at the right the light should hit the trees on the right side while the other side is in the shade , like when the earth is not facing the sun it's covered by complete darkness
3.) maybe the bark could be changed a little bit it sort of looks pillowed.

[Livsgladje]

Well thanks to the tutorials and help i have changed almost everything in the game but the new tree i made looks kinda meh. I think the coloring is allot better on it but the leafs are kinda strange so i will probably remake it again.

But now that i have made more are there any comments on the other stuff?

[Zizka]

I think the trees were much better before. The foliage looks like a lot of noise at the moment, imho.

There's an issue with the flower as well, it looks really bland I think compared to the tree which is super detailed.

The house looks great however! 

[Cupcake]

I like your dirt/stone tiles, but the trees look odd because they have very blue-purple shading when the rest of the scene does not. It's a definite improvement but consider the Secret of Mana reference images in the tutorial link, particularly the one where they first zoom in on the grass tile. The exaggerated shadows on the trees work there because the same shadows are used elsewhere in the tileset.

Your grass tile is bringing the rest of the scene down, I think: it's got very strong grid lines and appears to have been made with a noise tool, so it has extraneous colors in it. The same tutorial has a couple sections focusing on grass tiles and removing obvious grid lines, so that should help a bit.

The whole scene already looks much better than your first one! And I agree with Zizka, I like what you're doing with the house.

e: Quick 'n dirty example of purple shadows throughout the set

[Atnas]

It's generally not a good practice to edit things from commercial games....



From this image its easy to tell you just resized the tree and then editted on top of it, because the pixel placement all along the top border is exactly the same as the SoM tree. (not to mention the exact same palette)

The light brown cobble tile looks to be from rmxp, and the character's head looks to be from rmvx.

If you borrow heavily from reference, post it, it helps us critique when we know what is original and what isn't. And everything SHOULD be original, ideally. Your art is suffering from cobbling together assets from a bunch of different games, it lacks unity because the style is all over the place. If you use reference and DONT just steal the pixel placement or edit other people's work, everything you do will be distinctly your own and will be a lot more cohesive.

I much preferred your first image to this new one. Even if the pixel work wasn't as good, it was unified and pleasant.

[Livsgladje]

From this image its easy to tell you just resized the tree and then editted on top of it, because the pixel placement all along the top border is exactly the same as the SoM tree. (not to mention the exact same palette)

i used the same palette because i suck at making palettes (and it looked like allot of people use that palette) and tried to make something close to it but i didn't copy anything. I did however look how they did on the brighter side and tried to do the same but as you can see it turned out rather crap. I will be making a new tree anyways this was more for just feed back on how it looks because this is the second tree i have ever made.

The light brown cobble tile looks to be from rmxp, and the character's head looks to be from rmvx.

First off i don't know what rmvx and rmxp is, second I used a tutorial for the stone path and from that i made my own light brown cobble path.

[rikfuzz]

It's fairly obvious that the tree is somewhat a modification of the SoM tree, not just the same palette.  Atnas isn't trying to embarrass you, it's definitely beneficial to examine and modify existing artwork to get a feel for what makes it work, but obviously we can't crit properly if you're not up front about this, and ideally your artwork should be all original and separated from studies of other game's art. 

[PixelPiledriver]

i used the same palette because i suck at making palettes

Relax.
Only what you believe can remain true.

I also like the old image better.
But you don't actually have a palette.


While the original colors aren't perfect it has some fun stuff in there.
I pulled out a handful and made a doodle without changing any:


Many of which could be compressed or thrown out completely to make room for other hues.

[Livsgladje]

@PixelPiledriver, Why is it important to have few colors in a palette and how do i see how many colors i have used like you did in the example above?

This is the new tree that i have been working on since the last picture post:

[rikfuzz]

Just out of interest, what software are you using?

[Livsgladje]

photoshop

[Atnas]

First off i don't know what rmvx and rmxp is, second I used a tutorial for the stone path and from that i made my own light brown cobble path.

Ah, then I'm sorry for accusing you on the path, it just looked very familiar to me and some people in IRC who have used rmxp.

But how can you say you don't know what rmvx is?



I mean, all I'm asking for is transparency so we know what is your own and what isn't. The colors are exactly the same - the hair and skin and even the gray tones. The hair's shape is original as far as I know, but you cant just take a commercially made sprite's face and put a mouth on it and call it your own. For the sake of further critique, post your references. This is only necessary because you're following them so closely.

[Livsgladje]

First off i don't know what rmvx and rmxp is, second I used a tutorial for the stone path and from that i made my own light brown cobble path.

Ah, then I'm sorry for accusing you on the path, it just looked very familiar to me and some people in IRC who have used rmxp.

But how can you say you don't know what rmvx is?



I mean, all I'm asking for is transparency so we know what is your own and what isn't. The colors are exactly the same - the hair and skin and even the gray tones. The hair's shape is original as far as I know, but you cant just take a commercially made sprite's face and put a mouth on it and call it your own. For the sake of further critique, post your references. This is only necessary because you're following them so closely.

Many of the palettes for different things are borrowed from pixel art stuff i found on google. For the "hero" i have used colors from some char i found on google because the last char i made was so white he looked dead and also had about 8 different colors. I did also use different pixel art armors as reference when making mine.

This is how he looks with nothing on:

[rikfuzz]

To see unique colours in photoshop if you go Image > Mode > Indexed you'll get a little dialogue for reducing the palette (might need to okay a layer flatten first, don't worry you can still cancel it). If the Palette option is 'exact' and the Forced option is 'None', the colors box will show how many colours you're using.  (Exact won't be an option if you're using > 256).  Don't actually okay the dialogue box; if you edit in indexed mode you can't use layers etc, though you can reduce this way, just remember to turn it back before editing.

Alternatively if you File > Save for Web, and look under the color table there's a number of unique colours in the palette (for Gif or Png-8).  Make sure you're not reducing the colours with the Colors option first (set to 256 to make sure), cos it's the number in the output (after the colours have been reduced).  

Genuinely you should post all your references so you can get the most useful critique.  

[PixelPiledriver]

Why is it important to have few colors in a palette

A few words come to mind:
Combination
Control
Meaning

Combination

Art is a visual language.
Let's explore other languages that exist.

Words
The English alphabet contains 26 letters.
ABCDEFGHIJKLMNOPQRSTUVWXYZ
In combination they can create infinite words.
Different combinations of letters have different meanings.
We do not need every letter to express a single thing.

Programming
The C programming language has 32 keywords:
int, float, double, struct, if, else, void, const, etc.
In combination we can write infinite amounts of software that do whatever we want.
How the components of the program are structured is a choice.

Numbers
In the base 10 number system there is:
0123456789
However there are other number systems.
Such as Hexadecimal which contains:
0123456789ABCDEF
And Binary:
01
Combinations of these can produce infinite numbers and even the same numbers (to a certain degree of error in the case of floating point numbers).
Depending on what we need to do, something as simple as binary can be much better suited to our needs than base 10.

Food
Different pizzas have different toppings:

Combinations of ingredients create different flavors.
By limiting the number of toppings we can create a more specific taste.
Of course EVERY topping is also a taste.
They also naturally create different balances of color.

Color
A common way to look at color is the combination of 3 components:
Hue, Saturation, and Luminance.
With different combinations of these we can make a crapload of different colors.
But the colors themselves can be used to draw infinite images.
Or even the same image with different combinations of colors.
A generic example is, we can draw a Green dragon, a Red dragon, a Blue dragon, a Yellow dragon etc:

No matter the color he is still a dragon.

Control

Process
In interest of saving me some time:
Read this.
And this.
Photoshop has similar features I assume but I am not as familiar with them.
Look thru the documentation or find another source.

Composition
We can control images and how they are perceived thru the use of composition tools and techniques.
One of the many is color.
With color we can control eye movement.
Re using colors in different areas lets the viewer's eye flow around the image easily
On my doodle (which is nothing special at all) I had this in mind:


Even a character is a composition.
Much better examples exist.

Game Code
Image data can be manipulated to do cool stuff.
Many visual fx in games use colors as data to create different fx.
The code that does this is called Shaders.
Colors can be stored as a data type called float4.
It contains 4 values in a group that range from 0-1.
Like this: color(r,g,b,a).
It's a massive topic and I'm not going to cover it here.
But realize it can be important because some code might be expecting certain colors to use as data.

Meaning
Colors have meaning.
These meanings can change depending on context, purpose, culture, expectation, and even someone just saying this = that.
By narrowing or widening the color range we can create different meanings.

Some common examples are:

Time of Day
Morning, Noon, Evening, Night:


Season
Spring, Summer, Autumn, Winter:


Elements
I'm out of time to create an original example for this.
There's plenty of examples elsewhere.

Characters
With the use of color the exact same sprite can perceived as a different character:


Countries
USA, Japan, Germany, Brazil:


The flags are not mine.
Grabbed them from here.

The crappy palette edits of your scene are not intended to be examples of good color choice.
They are meant to show change in color is perceived as different.
You can do much better.

So... What?

There's an amazing amount of other things that can be considered.
Covering them all in extreme depth is outside the scope of this post.
I can recommend this old book as a general source of good information.
There are many other sources out there, perhaps better and even free ones on the internet.
Search around.

The idea here is not to bog you down with theory.
Just realize that colors are tools used to convey information.
What are you trying to tell the viewer?
Do you need 7,000 colors to tell them that?
Or is it possible to tell them in only 64?
32?
16?
8?
2?

In all art forms the answer to every question is always "It depends".
Mess around and see what happens.