I’m always experimenting with design and html. Since Windows Vista came out there has been more excitement with translucent designs. I have also been excited about .png images and its alpha transparency abilities for some time, but bummed by the lack of support for it in IE6. But… IE6 is finally on it’s way out, and this is my personal blog, so I can do whatever I want. If your stuck in IE6, I’m sorry. You really should look into using firefox.
One of the problems with translucent designs is the amount of distraction you can get from the background. I have run into this when using css opacity properties on html elements, and just using a .png image over the top of a busy tree background has the same problem. After seeing that Windows Vista’s translucent windows blurred the background directly behind to make it less distracting, I realized I could use the same trick.
I have seen many personal blogs with a static background, where the text scrolls but the background pattern doesn’t. I like that, but I really like having a framed in page. So I came up with the idea of having a static background with a framed in page of glass. I finally got my chance of using the translucent design I’ve been playing around with in my head since seeing windows vista.
Basically I have two Photoshop files for the job, though one with layer sets would probably do fine. One file has the glass page design, all translucent and exported as .png images. The other is the tree which I exported as two different .jpg images. The first is the full tree, and the other is a blurred copy, but just what appears beneath the glass page. I also thought I would add a little glare at the top of the blurred image to add to the glass effect, which turned out to look quite well when the site header is over it. This layer made the .png images look and feel a lot more like glass.
It’s probably not that exciting to most web users, but I sure enjoyed putting it together.