On Wednesday I talked about adding "life" to a site using stock photography. I thought it only right that I followed that up with a "how to". You could easily just add an image as it is, but it looks a lot more professional if you cleverly include it in the design as if it really belonged there.

The method's known as "masking" and is really powerful once you master it. It's also quite simple and the results can look really professional. The example above tries to add some texture to what would otherwise be a boring "banner" for a site. To do this I searched iStockPhoto.com for a blue abstract image and found this one. From this I took sections and played with masking them to get the desired effect. You can see how I played with the different ideas in the Fireworks source file (550KB PNG). You can probably do the same thing in the other image editors, but Fireworks is the only I am familiar with.

The source file only contains brief instructions on how to mask images. I had thought about writing more about it but there's no need as there are loads of articles out there already. Here's a good one from Macromedia. The only thing you need to note is that you should give the shape you create a feather fill. Get creative with the shape as well. A "blob" has a much better effect that a simple ellipse.