logo

Looking Better in a Mask

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.

Codestore banner

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.

Comments

    • avatar
    • Trent
    • Fri 19 Mar 2004 07:12

    I've often thought about writing an article about simple image-processing techniques that anyone can use to spice up an image. I'm not a master myself, but I've got a few tricks up my sleeve.

    Re: masking, this can be achieved in almost any graphics program more advanced than MS Paint. Paint Shop Pro (<$100) and Gimp ($0) definitely support it.

Your Comments

Name:
E-mail:
(optional)
Website:
(optional)
Comment:


About This Page

Written by Jake Howlett on Fri 19 Mar 2004

Share This Page

# ( ) '

Comments

The most recent comments added:

  • avatar Trent about 21 years ago

Skip to the comments or add your own.

You can subscribe to an individual RSS feed of comments on this entry.

Let's Get Social


About This Website

CodeStore is all about web development. Concentrating on Lotus Domino, ASP.NET, Flex, SharePoint and all things internet.

Your host is Jake Howlett who runs his own web development company called Rockall Design and is always on the lookout for new and interesting work to do.

You can find me on Twitter and on Linked In.

Read more about this site »

More Content