A study in pixels: Rocks and grass

Carefully concealed disclaimer

This is a series of steps in order to create a rocky wall and some grass on top. Aside from the transition from rock (vertical plane) to grass (horizontal plane), I won't be covering edges, ground shadows etc.

I am no pixel art professional. I just like recording and sharing my venture into the world of pixel art. And, who knows, until that uber-professional artist approaches you (or me) and teaches you (or me) all their secrets and techniques, something posted here could be of use to somebody. Images are scaled to 300% for your viewing convenience. As a final note, colors may require tweaking depending on the color context of the rest of the image. Don't copy colors from tutorials unless you make sure they fit your scene. Rest assured that I'll be tweaking those "final" images a lot as I go along making more graphics.

The rocky face

So let's begin! We will use a tile size of 16x16. We create a 64x64 blank canvas, so this is a 4x4 tile rocky face. We use a simple darker color to draw some basic rock outlines:

Now I've read that your image will become more interesting if, instead of just making a color darker and lighter, you also slightly alter hue and saturation. Shadows and dark parts of a shape tend to be less detailed and (could) have some blue mixed in. Highlights tend to be more yellowish and pale. In-between areas have more saturation, that is more vivid colors.

The perils of lighting

Now let's add highlights! I have used 2 intermediate shades, a lighter one than the base color and an even lighter one, using the rules above. Our light source is presumably above our object and slightly to the side (I say "presumably" because this is an outdoors scene with ambient light, not a room with a single light bulb.).

Rocky surfaces have various shapes and textures: Some are surprisingly smooth, some are jagged and rough, while others look like the cross section of a birthday cake. In this image, we will add those highlights to the right part of every rock-like shape. So the upper/right part of each rock is illuminated and the rest is darker.

Avoid drawing the lightest color and then the next lighter around it like the sand around an island. Try to create a more interesting shape and give more uneven volume to each rock. Homogenously darkening an area around a highlight is called pillow shading and is frowned upon by pixel art veterans because it makes things look like plastic, uninteresting blobs.

Result so far:

What a nice pile of potatoes! Let's break the monotony by adding some more pixels of the darker shade and also blending the highlights with an intermediate color. Again, this intermediate color doesn't go all around the lighter one. In some areas we do want light to abruptly enter a darker shade, because this is what many rocky surfaces look like.

In a similar manner, let's blend the second and third darkest colors with an intermediate:

Remember talking about color variety and blu-ish shadows, well, now's the time! Also, I've used a lighter vesrion of the darkest shade (still darker than all other colors) and painted here and there to somewhat break the dark outlines:

Finally, I played a bit with the individual color palette, trying to find a combination that will mix well with the grass on top. Here's what I was telling you, as far as you're concerned, we were done one image ago. The rest is just messing around.

The final palette colors are these:

Not too many colors were needed. And I'm sure that experienced tile makers will frown even with this amount of colors that I ended up with: Avoid blending colors and painting over with semi-transparent brush opacities because you may generate an unnecessary amount of intermediate colors and it will contradict the pixel-y, edgy feel of pixel assets without really adding much detail.

The grass

Now about the grass: We create a 48x48 blank canvas. We begin with the darkest shade and paint small patterns around like clumps of grass:

Keep filling the entire area with similar patterns until you completely cover it:

Use (sparingly) a lighter color and place a few pixels to give the impression of some grass blades catching light:

And you can use (even more sparingly) an even brighter color to put a few pixels here and there and give some more height to your grass:

Not hard, eh?

Now combining the two sets of tiles together. You can "trim" the bottom of the grass where it ends on the cliff face and create individual tufts. Avoid using the brighter highlights in those "edge" grass strands because we want to create the impression that in the boundary surface of the horizontal and vertical planes, some grass blades will fall in the darker area of the cliff surface. In these game's graphics, horizontal planes tend to be brighter than vertical ones. Also, the grassy edge casts a shadow on the cliff, using the cliff's own darkest shade.

Epilogue

One useful trick for making seamless tiles like above is Photoshop's Offset filter (other programs should have something similar). For example when working on a 3x3 set of tiles, you will want to make sure that edges are properly connected when placing this set of tiles next to another as a 3x3 block. Of course this is handy even for single tiles. So if for example you are making a 48x48 pixel image, like the grass above, and you want to pain patterns that repeat around the edges, you will go to Filters > Offset and set the horizontal and vertical offsets as half your image dimensions, and also specify that you want pixels to wrap around the image:

In this manner you can work on the "edge cases" of every tile or tile group!