Programmer art

Originally posted to Shawn Hargreaves Blog on MSDN, Monday, March 5, 2007

I know I said I was going to write about transition effects, and I promise I will, but I decided to talk about something else first, for reasons that may later become apparent.

I'm a programmer. I cannot draw. Not even if my life depended on it. If you are in the same boat, read on...

Over the years I've been lucky enough to work alongside some incredibly talented artists. I could never do what they do, but along the way I picked up a few tricks that come in handy when you desperately need a texture and there aren't any artists within reach.

I used some of these techniques while working on sample programs for the Creators Club website, so I'm going to talk about those here.

First off, please note that only a few of the samples were faked using my shoddy programmer art! I would never be able to make something as cool as the dude in the Skinned Model sample, or the tank in Simple Animation, or the lizard in the Normal Mapping sample, or the grass and tree textures in the Billboard sample. We had real artists for those.

The best way for a non-artist to create artwork is to dodge the whole issue and not even try to draw anything. Get a camera. Find something cool. Take a picture of it. Rinse, lather, repeat.

When I needed a reflection map for the CustomModelEffect sample, I just dropped in a copy of seattle.bmp, a photo I took from the ferry that runs across Puget Sound to Bainbridge Island. Quick, easy, and it looks far better than any kind of random noise I could have tried to draw by hand.

Relying on photographs works best if you have access to interesting subject material. I'm lucky because I love hiking and live in a part of the world that is packed with amazing scenery, so I have lots of pictures like glacier.jpg from the Sprite Effects sample (taken at Glacier Basin, high up on Mount Rainier).

Photos make a great starting point for much more than just realistic background images, though. Again in the Sprite Effects sample, I wanted a noisy, rippling texture to use as a peturbation map for the Disappear and Refract effects. In order to ripple the X and Y axes in different directions, I wanted this to contain different patterns in the red and green channels. Here is what I ended up using:

That texture started out as this photo of a waterfall, from Spray Park (again on Mount Rainier). I selected a few interesting areas of the original, arranged them next to each other, used the clone stamp tool to paint over any rough edges, fiddled around until the image tiled smoothly, and then slid the pixels in the green channel to the bottom right, in order to make them different to the red.

I really like the way this came out. It is basically just a noise pattern, but gives an interestingly fluid, organic quality to the effects which use it. Few people would ever be able to draw something so complex and subtle, but this was easy to create using my camera and a real waterfall.

So get your cameras out and get creative! Realistic backdrops and skies are easy to photograph, but don't stop there. Do you want trees? A brick wall? A field of grass full of daisies? An alien spaceship? Ok, so you might not have a real spaceship to photograph, but I bet you could make something interesting by collaging together a close-up of the faucet from your bathroom sink, part of your car engine, and the lid of a ball-point pen, using the clone stamp tool, the smudge tool, and perhaps a few carefully selected filters to hide the seams...

Coming up tomorrow: how to edit an image so that it will tile seamlessly, and how to draw alpha channels and normal maps over the top of existing pictures.

Blog index   -   Back to my homepage