Recently I was playing around in photoshop looking for a cool way to create a website interface, and I came up with this cool glass panel effect. Its simple to create, and will make your website standout from all the rest. So lets get started.

1) start by opening a new document 150 x 250 pixels.

2) Take your rounded rectangle tool, and set the radius to 15px. Draw a rectangle like this:

3) Double click the layer to bring up the layer style window. Set the inner glow, gradient overlay, and the stroke to the following:

4) Now, select your wand tool and select the rectangle shape. Add a new layer, but do not deselect the rectangle. Go to the new layer, and fill the selection with white. Go to filters > Noise > Add Noise.. and change the settings to the following:

5) Still without deselecting the shape, go to filter > blur > motion blur.. and set it to the following:

6) Change the opacity of the layer to 50%. We just created a metal looking base for our new interface. Now lets add the glass panel.

7) Create a new layer, and on this layer create a rounded rectangle so your image looks like the following:

8) Once again, double click this layer to open the layer style window. Once open, change the drop shadow, inner shadow, color overlay, and stroke settings to the following:

You should end up with this:

9) Now lets make this look more like glass. To do this we need to add yet another layer. On this new layer, take your rounded rectangle tool again. Draw a rectangle around the glass, and then distort it by going to edit > transform. It should look like the following :

10) Now, use your magic wand tool to select the distorted shape you just created. Hit delete, but do not deselect. Grab your gradient fill tool, and set your foreground color to white. Now, choose the default "Foreground To Transparent" gradient type, and fill the selection so that the transparency is on the bottom. You should now have this:

Now change the opacity level of the new gradient shape to 50%.

11) Just one step left! We need to make this glass look more interesting, so lets add a grid pattern (see tutorial: 'Creating A Grid Pattern') Go back to the layer that has the original glass shape in it, and select the shape with your magic wand tool.

12) Add a new layer without deselecting the shape and with your fill bucket tool choose the fill type as pattern. Select your grid pattern from the list and fill the selection. Change the opacity of this layer to 10%.

And thats all it takes to create this cool looking interface. All you need to do is add text and you are done. Here is the final result:

home | the forum | rules | links