HD pixel art tutorials

Now, I'm not trying to steal shakeyair's thunder or anything, I promise. I've been working on this for a while now, and I think I'm ready to post it.

Part 1.

The #1 most overused and underappreciated tile: The Grass Tile.

The grass tile is used in just about every game. And, sadly enough, most games have little more than a single-color green. For some games, this works just fine; but if you're looking for high-quality art, light green with a dark green \|/ shape isn't enough. And that's where this tutorial comes in.

First, I should say that I ALWAYS use OHR for my graphics. So, if you use GraphicsGale or GIMP, there'll be slight differences. Starting out with a simple green square:



To best cover the map with grass without making it repetative, you will want to have more than one square in a block, and have the block tiled. But, for the sake of beginners, time, and my patience, we will be using a single square.

For the next step of the grass tile, we'll be outlining our grass. I like to use the method of batches of grass. Pick a color two shades darker than your basic shade, and draw a simple leaf batch/bush/thing:



Keep in mind that a four-leaf batch will end up looking like a cross unless you skew the angles of the leaves. I like to stick with 5 leaves, relatively thick. Also, remember to make the shape look 3D. The leaves will bend toward the earth because of gravity, and you want to reflect that for realistic grass.

To continue this while making it look good, you'll want to use CAPSLOCK (press, hold, and use the arrows to adjust), to move the batch off to the side. Any side will work, but I prefer moving it left and up (or right and down), to have the largest blank space still on-screen:



Then fill in the remaining space with smaller batches:



Now, using the shade directly in-between the two shades you currently have, fill in the batches, and... here's a tricky part. Use the same shade to fill in any part of the batches' outlines that wouldn't fall DIRECTLY BENEATH OR LEFT of the top:



Basically, we're converting the outline into a shadow. Now for the highlight. Pick the color ONE UP FROM THE BASE to fill in the rest of the batch shape EXCEPT some parts directly next to shadow. This is to your own discretion. I fill in just about anything not directly above a dark color:



Now, we'll be using one color ABOVE THE LIGHTEST SHADE to fill in the highest peak of each leaf. You really have to imagine the leaves as 3D in this step, as the highlight here WILL accentuate it to look 3



This step will use your imagination and randomness. There's still a lot of blank space in-between the batches here, now that they're fully developed. Use the middle dark and middle light shades to fill in more of the background (that would be the shade directly above the darkest and directly below the lightest). Also, don't be afraid to put pieces in front of the batches you already have. Grass will do that:



By now, you should have a good grass tile. Go to a map and cover a large area with grass, just to make sure it looks good. If there are any glaringly obvious patches of a particular color, you'll probably want to mix in another shade. I realize that there's obvious repetitions here, but once you get in more pieces to the map, the player's eyes won't be drawn specifically to the grass. Hopefully.



-------------------------------------------------------------------------------------

Next time, I'll post a tutorial for adding cliff faces to the grass, so you can add height to your map.

Have you read Tsugumo's tutorial yet? Your tutorial used familiar-ish techniques.

I was with you till you broke out the air brush at the end. You did end up with a nice grass tile at the end though.

I am interested in how this grass tile applies to your walkabout style and readability. I feel our two tutorials are already branching off in different directions, and far from being upset about that, I think that sort of difference in opinion is ultimately more helpful to people trying to find the way to best represent their game visually.

I also wanted to say, a major point I hope to drive home with my tutorial, is that the individual tile is not that important, and what is important is how you arrange them into settings. And, if well arranged with a decent dirt tile, decent buffer tiles, decent foliage, buildings, etc. the clear repeating nature of that grass tile will be lost fairly easily.

EDIT: But I do think a grass tile with FIVE colors seems pretty excessive?

@Baconlabs: I read it, but I'll be honest. I don't see any comparison here. The technique I use is one I've put together over the last two years. Grass has been a major issue for me.

@Spoonweaver: Yeah, I gotcha. I'm usually not a fan of using the airbrush, and personally, I fix it pixel-by-pixel, but I was hard-pressed for time and figured most people aren't as patient. Thanks, though.

@Shakeyair: My style changes constantly. For Nightmare on Elmo Street, I did a 4-color black and white world. Another game that hasn't happened yet had 16 colors, mostly blue. For a Japanese-style game that didn't happen (and possibly with the upcoming Hello Ninja Kitty), I use a very cartoony style with simple shading, simple colors, and outlines around solid objects. I've also worked quite a bit with realistic graphics, though, and that's what I'm tackling here.
Also, where I agree that the individual tile isn't the driving force for graphics, many people I've talked to have trouble seeing beyond a simple grid, expecting massively beautiful games with individual tiles (1 grass, 1 water, 1 sand, 1 road, 1 house, etc...) The path this tutorial will take (I hope) will take people to think inside the grid to make tiles, but outside the grid to make maps.
And as for the hefty color count... it depends. For some people, 2-3 colors is perfect. For most, I imagine, 3-4 is just enough. I use 4-5, depending on my mood and the depth I'm trying to portray. If 5 colors seems excessive to you, it's quite easy to drop the lightest color, and maybe the darkest, bringing the color count down. But, as the OHR gives us 256 colors to use, 5 is fine for me.

I'm thinking this'll be a weekly series. Too little time for multiple per week.

Pretty nice tutorial. I think it's really interesting that we're getting two coincidental reviews with different views. I will say, I like Shakey's better, because yours mostly teaches a very specific type of grass (Although quite well.) whereas Shakey is teaching "Grass in general". Of course, Shakey's also advanced deeper into his than you, so I'm really making premature judgment.

I don't like your grass, though. I mean, to me, it looks literally like a bunch of different shades of green that don't resemble grass at all, but instead will pass as it quite well because of the context it'll be in. But that's my opinion, and I'm a horrible pixel-artist.

You use plenty of examples and do a very good job of thoroughly explaining things, and I'm interested in seeing how your plan of thinking "inside the grid" for individual tiles, and then looking at the whole picture when you start actually mapping. (Although in my opinion, this is a horrible way of doing things.)

J_Taylor, I would love to see you make some tree and shrubbery tiles in this thread.

@Sh4d0ws: I realize this tutorial will not be for everybody. It's not even a tutorial for the type of pixel I art I use the most. It's specifically a tutorial for a concept or way of tackling art for games. I guess we'll see how well it works for others.

@James Paige: Unfortunately, I won't be tackling bushes or shrubbery much, as the only form I'm comfortable with is hedges. However, I CAN do trees, rocks, and patches of missing grass, and these will be upcoming topics.

THANK YOU for this, and keep it up. There need to be more OHR-specific sprite tutorials.

Sorry, guys. I will have another piece up sometime, highly likely after the semester. Hanging in there!

good job

---

Buy Slap Chop

Actually, if I can figure out the code, I'll be taking on ANOTHER project. Basically, it'd be a how-to-make-your-own-game game. Which will be very challenging, indeed.

Actually, anybody know if it's possible to have code read what the player does in CUSTOM? Or... would I have to re-create CUSTOM for the game?

That grass tile is beautiful...i'll be using that technique for a latter game. My current game seems better with simple grass.

I am confused by this question. Can you tell me more about what you are planning to do?

Conceptually, imagine these tutorials:

http://hamsterrepublic.com/ohrrpgce/Making_Maptileshtml.html

And turning them into a do-this, now-do-this, followed-by-that, kinda game-making game. Only... not those tutorials, obviously, as it'd have to be original, and I'd want to add many more features in the final product game. Of course, it'd kinda be my game, as I'm the one who'd conceptualize it, but the "player" would be "making the game" step by step.

So... I'd need some way to check as see if they went to graphics, or used the fill tool, rather than the draw tool, and see what they wrote in the text box and see if it's right, and so on.