Complex image and overlay technique

As soon as you step outside of the simple block web page look, popular since time immemorial, you encounter the problem of having your images overlapping in ways that do not look entirely seemly.

If I give the example of my current portfolio website, aphasian.com, you can see that the header logo sits on a bed of grass and a gradient sky. This isn't the neatest example of the technique, but that only aids the explanation and is less neat at the top (because I wanted to preserve the shadow blur at the bottom - but trade-offs like these are things you'll have to deal with too, so don't worry!). The closer you look, the more the edges jump at you, especially at the top against the sky. It'll help you further to see the logo out on it's own against white here:



So how do we do this then? and why?

The why is simple: gif's have notoriously jagged edges. Every pixel stands to attention against the background. Ths is especially pronounced when you have a single colour curved border to an image you export as a gif. This technique is also a simple alternative while PNG support is still limited, and in most cases will save you having to create hacks so IE5+ sees one thing and the rest of the web gets your PNG's (or you could use this method in addition to your png version for the best of both worlds).

The how is a little more involved, so start opening Photoshop now while I explain...

If you're thorough in your design technique, you'll have a PSD version of the site you're about to code up. You'll have your overlapping images in exactly the places they'll overlap in Photoshop, you just want them to work in Dreamweaver.

1. Marquee around the area you want (in my case the Aphasian logo) and copy it to a new canvas.
   
   
2. take out your eraser and just erase the top (or bottom) corner - anywhere that's not a necessary part of the logo/image, you only need to take out a single pixel.
   
   
3. Turn off the background layer so your erased pixel is now transparent.
   
   
4. Save for web as a gif with transparency on.
   
   
5. Open your new gif (using the current open copy will not suffice).
   
   
6. On the PSD flat of your site, select the layer your image element makes up and control click the layer to make a selection around the content of the layer (your image).
   
   
7. With the marquee or lasso tool selected, drag the selection into your open .gif file and position it so it sits exactly over the image as you require.
   
   
8. Expand the selection by 1px from the 'selection' menu.
   
   
9. Invert the selection from the 'selection' menu.
   
   
10. Press the backspace button to clear the selection.
    
    
11. Save.

Now you have your gif with transparent background, you can position it within a div on your background. Depending on your design this may need to be pixel-perfect, so just play with it until it sits where you want it.

Please note that once you've got the general idea in your head, you can automate a lot of the task using Photoshop's 'actions' pallette...

I've got a barrage of my favourite web tools hotkeyed up and ready to use... but that's a story for another day.