"A Graphician's Tip Book - Part 9"
Shaithis / Psychic Monks, Immortal Coil
Been awhile, eh? Let me explain myself. I went home for christmas break.
Sadly, going home for christmas break means I have connection to the net for
a month. Thus, I couldn't get my lovely articles to Snowman and all you
people who await this column (there's at least six of you now...right? ;) had
to go without for awhile. Anyway, I'm back, and with me I bring text. This
particular one can be entitled "Building the better grass tile".
Before I start, however, let me thank Rhythm Greene for punching me in
the arm a few weeks ago and pointing out the idiocy of the last column's
statement "320x240x256 is more or less a standard vesa mode". It's not.
It's mode-x (I believe), and it's a pain to work with. :) For that reason,
we've switched our little RPG to 320x200. But don't worry yourselves over
that, it doesn't affect any of the tips I gave in my last article. At any
rate, thanks to glenn, and onward...
_____Building The Better Grass Tile (Fun with Spray Paint)
Alright, so as of last week, I left you with a dark green square with some
light green, wavy lines on it. Not a terribly stimulating tile, to be
certain. The members of my group weren't particularly impressed either, and
so we decided we had to do better. Along the way, we discovered a bunch of
mistakes that are probably made often (mistake number one is and has been
made by a variety of artists for various game companies throughout the course
of time. Once in awhile, it's pulled off anyway, but usually it could have
been done better).
I'll emphasize again that these are mistakes _we_ (my group) made, NOT
mistakes that we arrogantly believe we are above. Far from it, believe me.
If you've made these mistakes, I assure you that you have my deepest respect,
because if you haven't made them, you probably haven't been trying very hard.
*Mistake #1* Grass isn't all green. Think about it. Go out to your
backyard and look at it if you have to (although for those of you in my
region of the US all you'll probably see is snow). At any rate, you'll
probably notice there's also a lot of brown in there.
In actuality, there's also blues, oranges, yellows, reds, and just about
every color of the spectrum (But you need a couple of light color and design
courses to train your eyes to see that, and still half the time it's hard to
believe). Anyway, considering the fact that we're only working with a 16x16
pixel tile, we stuck to just brown and green.
*Solution #1* Brown and Green. Two great tastes that taste well... mediocre
together. But with a little effort, you can make that combination work
together like a well oiled machine. Your best bet is to use the spraypaint
tool. Everytime I talk about the spraypaint tool, I get two responses: "The
spraypaint tool is useless" or "The Spraypaint tool is great!" To those of
you in the former crowd, I humbly suggest you haven't played with it enough.
We took our 16x16 dark green square and, using our first 16 greens, created a
gradient. For two reasons, we left the top two and the bottom two off the
gradient, giving us twelve colors. First, our effects engine deals a lot
with hue fades, so we needed some room for that. Second, grass is rarely so
dark it is virtually black, or so light that it's virtually white.
We "sprayed" the green square with the spray paint tool, after selecting our
gradient. This gave us a very random spread of pixels, all green, but
varying in intensity and saturation. We repeated this with a brown
gradient. This gave us a rather random looking jumble of browns and greens,
which leads on to the next problem...
*Mistake #2* Completely random green and brown pixels rarely look like real
grass. This one's pretty much a given. At times, they can be passed off,
but for the most part a little thought and some basic background design in
your tiles can give a much better impression of grass, while still managing
to look quite random.
*Solution #2* I hope you're reading this whole column before you start
trying grass tiles, or you're going to hate me for this. :) Start with a
pattern. We scrapped the aforementioned random tile, and restarted. We took
a dark green tile, drew a relatively erratic pattern (but by placing the tile
next to itself, we were able to ensure that some lines would appear to
"cross" the 16x16 border. More on that below). Now we repeated the step
above involving the gradients and the spray paint tool. Because the spray
paint tool randomly sprays pixels, enough of the original texture was left
behind to give the tile more cohesiveness then it's predecessor.
*Mistake #3* Too much brown makes your grass look very muddy. The need is
very much there for finding a good balance between greens, browns, and the
hues in between. There are ways to balance your colors with relative ease,
and they are discussed below.
*Solution #3* We added a third gradient, which I'll call "Olive Green". This
allowed us to have pixels that were both green, brown, and a mixture of the
two. Now the tile was really starting to look like something. The only
problem? Well, that's mistake number four.
*Mistake #4* It's very easy to make grass tiles look too repetitious.
Conversely, if you make each tile too random, they won't blend and the breaks
between tiles will be altogether too obvious.
*Solution #4* We took six of the same grass tile, and placed them in a
vertical column, with one line of white space between each. We selected each
of our three gradients, and using the shade tool, darkened and lightened the
various pixels (This method is described in my fourth dpaint article. If you
didn't read it, then shame on you! :) Now we had six different tiles that,
when placed together, create a very random, yet still coherent patch of
The tiles range from light to dark, and can be placed in ways that make the
patch of grass appear shaded, without it being terribly evident how the
effect was achieved. This, of course, involves some experimentation, but I
shall leave that part up to you. :)
There you have it, "Building a better grass tile" from start to finish. Don't
expect the world to beat a path to your door... that's for building a
mousetrap, but you can expect any game you're working on to have a much
greater level of depth and realism in its tiles. This process can be applied
to a variety of tiles, ranging from grass to wood to stone (and even to skin
tones, albeit with a lot of work). Experiment, play around, and see what you
can come up with. If nothing else, come up with a bunch of plausibly useful
That's the article for this time. Again, sorry about the wait. I hope it's
been worth it. Next time, I'm going to jump right into the long awaited (and
still multiple-undo-less, grrrr) Photoshop 4.
go to part 10