5 Steps to Creating Slick Transparent Overlays

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.
BC$ = Behavior, Content, Money

The goal of the BC$ project is to raise awareness and make changes with respect to the three pillars of information freedom - Behavior (pursuit of interests and passions), Content (sharing/exchanging ideas in various formats), Money (fairness and accessibility) - bringing to light the fact that:
1. We regularly hand over our browser histories, search histories and daily online activities to companies that want our money, or, to benefit from our use of their services with lucrative ad deals or sales of personal information.
2. We create and/or consume interesting content on their services, but we aren't adequately rewarded for our creative efforts or loyalty.
3. We pay money to be connected online (and possibly also over mobile), yet we lose both time and money by allowing companies to market to us with unsolicited advertisements, irrelevant product offers and unfairly structured service pricing plans.