BCmoney MobileTV

One of the best Web Design guides out there is still CSS Zen Garden. Not only does it provide a beautiful looking layout and offer up a base template, but its presentation code also validates to the latest CSS and xHTML standards. However, if you’ve ever tried to work with the main template, you’ll notice that a lot of the nice look and feel are actually achieved via some simple image effects, and, that the steps required for creating your own images with the same “floating corner of the page” effects are not made available. Furthermore, due to the licensing on the templates, you are not allowed to use or re-purpose any of the images in the example layouts.

Enter this tutorial by Jenny (aka misski)…
Simply follow these 5 steps in Photoshop to create a transparent box over an image like those seen on CSS Zen Garden.

1) Have the image that you want the transparent box to be on ready:

2) Using the shape tool, create a square, then delete the path by going to the Pen tool and right clicking “Delete Path”.

3) Make the box “Soft Light” by going to the layers box, and use the drop down button where it says “Normal”.

4) Right click the layer, and go to Blending Option. Go down to “Stroke” and match the setting like this:

5) Erase the edges of the image so it won’t be “soft”.

With this tutorial, you can modify the steps, like setting the white box to something else other than “Soft Light” (like Overlay, or just turning the opacity down when it’s set as Normal).

You could also use additional shapes as the transparency overlay or, another image, and it works to enhance just about any kind of background image.

Last but not least, you can accomplish the same thing in GIMP using a slightly different variation:

1. use the rectangle select tool
2. right-click and select Stroke then choose Line with 1 px as the width
3. choose the fill color with the color picker and foreground/background color tool (white or other light colors work best)
4. use the bucket tool () to “pour” that color inside the already created hollow rectangle
5. you should be able to see the current solid rectangle on top as a separate layer from the original image, select this layer, and move the Opacity slider at the top of the layers dialog to the level you want (sets the transparency, 75% worked for the look I was going for); then simply flatten the image or merge down when saving to have the two layers blended together in the final output

This post guest-authored by Jenny of  Fruitle.com:

You can check out some of her excellent work at: http://www.flickr.com/photos/fruitle/

Or request her freelance graphics  services at Fiverr: http://www.fiverr.com/users/misski