If you are already using windows 7, you maybe know this nice little effect when hovering above the “Show Desktop” button on the right side of the taskbar. If not, then you will see it here in this tutorial. It’s a really great looking effect, which you could use in web designs.

Step 1

First create a new document and a new layer, call it “Background” and fill it with a radial gradient from #224897 to #417fba.

Step 2

Now grab the Rounded Rectangle Tool with 10px, draw a Rounded Rectangle and fill it with white. Then duplicate this layer, drag it under the other Rectangle and fill it with black. This will be the shadow for this window.

Step 3

Select the layer with the black shadow and apply the gausian blur with a radius of 5px. After this make a selection of the white rectangle, by holding down the Control Key and clicking on the Form layer. Now press the delete key. Last we also reduce the opacity of the white rectangle to 6% and the opacity of the Shadow layer to 60%.

Step 4

To create the white border, make a selection of the white rectangle again, create a new layer and fill it with a 1px white stroke with clicking on Edit -> Stroke… Choose “inside” for location. Because the border is too bright, we also reduce the opacity of the layer to 30%.

Step 5

Select the rectangle tool and create a white rectangle. Rotate it and rasterize it. Then make again a selection of the transparent rounded rectangle, invert it by pressing Control + Shift + I and press the delete key.

Step 6

Apply a gausian blur to the new made layer with 10px and also reduce the opacity to 8%.

Conclusion

I hope you had fun while doing this tutorial and subscript to my rss feed for future tutorials and articles.

Download the .psd file