This tutorial will use Paint Shop Pro 9, but any version of PSP or similar program that uses layers should work. This tutorial assumes a basic understanding of the functions of said programs. Also, if you're using a pirated version, you're a thieving bastard and I insist that you stop reading this article right now. After all, you could always go steal somebody else's textures, you thief.

Everybody has their own style. With that in mind, style should be the only excuse for having simple, non-shaded backgrounds. If you have great sprites for your game but lousy textures, you're going to have a very awkward-looking game. This is the first article in a series that'll hopefully help at least someone make better textures. We're going to go from this:

Image

To this:

Image

All in a pretty short time. Not the best work, but it's a million times better than solid shading.

Before we get started, here are some rules of texturing:

1) Brighter textures, such as the one we're working with, will appear to be obstacles (foreground), while darker ones will appear to be backdrops (background). For the sake of this tutorial, we'll assume that we're dealing with a platform game and that we're trying to design a solid platform (or at least impassable block).

2) Tiling is important. While there are some cases that tiling isn't important (say, there's a square border around the object), the vast majority of the time, you'll want to make sure everything lines up correctly. Paint Shop Pro has a Seamless Tiling function. We won't want to use this except for the preview; we don't want to change our image, just see how well it tiles and adjust it manually.

3) Most of the time, we're going to want the textures to not be too gawdy. This texture, because of the color scheme, fails at this, but read on: if your sprites are vibrant and well-defined, then you can afford to go a little overboard. That said, this theoretical platform game is going to have some darn flashy characters. Your sprites should always stand out more than your backgrounds. (Conversely, you can also achieve this by having simple-shaded sprites, believe it or not.)

4) It's always easier to work in squares of two. The sequential order of these is 2, 4, 8, 16, 32, 64, 128, 256, etc. These are good sizes to keep textures at (they can be either square or rectangular), though this rule can of course be ignored (just adjust your snap to grid accordingly). For a 320x240 or similarly-sized game, 32x32 is a good choice: large enough to be detailed, but small enough to fit on the screen numerous times. It even works well for larger resolutions, such as 640x480. And of course, if you design your levels well, even larger sizes should work on any resolution: you'll get more detail, though you'll also have design considerations to take into account.

Okay, so there we go, some basic rules of texturing! Now let's get started.

First, we draw a pattern on a blank raster background in 16 million colors. We want this pattern to tile seamlessly. You can get creative if you want. Normally, I'd opt for simple bricks, like so:

Image

However, you can get away with nothing but bricks for about three levels, then you need to really switch it up. I decided to opt for a unique design, inspired by some kitchen floors:

Image

Notice how I don't draw the edges all the way around. That's because once the image tiles, it'll already have a constant background. Now, if you wanted a two-pixel border, there's no reason why you couldn't continue drawing the borders the whole way around, but we'll circumvent the need to (because in its current state, even ignoring its monochrome status, this texture will look pretty awkward, especially when it comes at the right end of a platform. But we'll get on this later.

Next, we want to select all of the black in the texture and break up the repetition a bit. That is, unless you're shooting for thick, black borders, which is okay, too. The Dodge tool is perfect for this. Turn off the Continuous check box and crank the opacity down to, say, about 45 and start going over your black edges, adding some areas of lighter shade. This will have little effect at 100% zoom, but once you take a look deeper, you'll see some subtle effects:

Image

No visible effect right now. But now, let's deselect the black and only select the white areas, then switch to the Soften tool. Make sure that Continuous is still off and make your brush size pretty much the size of your image. Soften up the whole thing in one pass, and then add some grey along the edges that aren't drawn (the border that you stopped drawing in the first step; you can ignore this step if you continued drawing your border all the way around) to get something like this:

Image

Now, we want to start adding some basic shading. Switch to the Burn tool and change your brush size to, say, 3, and keep the opacity at 45 or so (lower nets you more detail, but you have to go for more passes). Now's the time to start taking lighting into effect: which direction is the light coming from? The FIRST area you'll want to burn is the area that will be the very darkest, but only get it one pass for now. Then, go to the second darkest area, and go back over the darkest area. Then, the third darkest, going over the second and first darkest areas, etc. This will help add an illusion of 3-D to your texture. You should get something like this (in my case, the light is coming from the upper left):

Image

Of course, we'll want to have some brighter areas, too - where the light's directly hitting. However, you can't get much brighter than white, can you? So we'll need to darken the whole thing considerably. Adjust the Brightness and Contrast both to about -30 and you should get something like this:

Image

Now, let's use the Dodge tool once more, using the same premise as the Burn tool: go over the lightest areas first, then go over them again while doing the second lightest area, etc. In order to give the texture a stone-like appearance, I added some extra swirls to give it even more of a 3-D effect:

Image

Hey, not bad! But wait - we forgot to color it, oh noes!

Shut up, kid. We've still got some more work to do.

You'll want to promote this Background layer to a full layer. In Paint Shop Pro 9, how you do this is by right-clicking on Background in the Layer window and selecting Promote Background layer. Then, you'll want to add a color layer (which will be our new background). Add a new Raster layer and drag it BELOW our old background. Then, go to the layer that's on-top - and has all of our work so far on it - and change its Layer Properties. We want to color, so we should use transparency, right? WRONG! We want to use MULTIPLY. No semi-transparency mumbo-jumbo (well, you can tweak it, but there's no reason to at this point).

What Multiply does is apply a grayscale mask overtop a colored base. The lighter areas of the mask will be the unshaded areas of the color while the darker areas of the mask will be the shaded areas. Now, select your new background layer (the one with nothing on it) and start coloring! I chose a nice, showy blue for the octagonal inset piece and some dull grey for the diamond.

For reference, here is what the bottom layer looks like now:

Image

Now, assuming that one of us hasn't screwed up (if I have, I apologize and will make changes to the article accordingly), we have ourselves:

Image

A TEXTURE! Holy crap! Save it to a .BMP, .TIF, or other relatively lossless format (.PNG works wonders and it's my favorite) and import it into your game. Tada!

I completely skipped over tiling this time, but that's because pretty much all of our tiling work was done for us by the borders. In Part 2, I'll demonstrate what to do when you have a borderless texture (dirt, grass, sand, etc.).

ALSO: this is what the texture looks like tiled (one instance of it isn't going to show off everything it's got).

Image

We'll get more and more complex. This stuff takes 30 minutes, tops, but soon, we'll be delving into some better, more complicated techniques.