Traditionally, when cutting up a Photoshop layout, we all used to think of the entire thing like a jigsaw puzzle. Overlapping elements were an illusion because the element that appeared to overlap was really being cut up and then fit back together.

And then came the png. While the PNG most definitely has issues across the different browsers, there are ways to get it to play nicely with whatever site being built. Yes, it usually involves a CSS hack. No, it does not validate. However I believe it is more important to start thinking of a layout as a series of layers overlapping, versus the traditional jigsaw puzzle.

Here are some good resources to get up to speed on PNG’s in Internet Explorer.

Make Transparency Work in Internet Explorer
Cross-Browser Variable Opacity with PNG: A Real Solution

---

The main difference between cutting and overlapping websites is thinking of your html/css as an extension of photoshop, versus an extension of something like imageready. Photoshop comps are designed and built with layers, transparency, and the grid in mind. Imageready takes what is in photoshop, flattens it and cuts it up into pieces, which are to be put together with html and css.

---

The two sites that inspired this post both have use of pngs. The first, Bedford Brown, designed by Jeff Reynolds drops a big hood ornament on the website and it looks great, not to mention adds depth and interest. The second, was my attempt at borrowing some of that element for Nicholas Galanin’s website.

Bedford Brown was an experiment in starting off simple. Each page required four png’s. The header, the content background, the footer, and the hood ornament. There are also four layers to each page. The background, the shell (composed of the header, content, and footer), the content itself, and the hood ornament.

Nicholas Galanin’s site was the challenge. It has been awhile since I almost gave up while trying to code a website. In dealing with cross browser compatibility while adhering to web standards, I got a headache building this thing. However, I pushed through it and eventually I launched a site that I am quite proud of. This site has several different PNG’s and is a clear cut example of overlapping a site versus cutting it up. In fact, I’m not sure this site could have been built by just cutting it up. Perhaps someone can correct me if I am wrong.

My advice is that if you are just beginning, try something simple. Give your logo a little drop shadow love and save it as a png (make sure the background in photoshop is transparent). Then position your background slightly over the left edge and top (if that fits what you are designing). Just keep it simple.

Ultimately, designing with the overlapping mindset allows us to break the mold a little bit of what has been traditionally on the web. We get to have fun!

Popularity: 20% [?]