• Articles and Tutorials
• Contact

Extreme glossy boxes with Photoshop

I'm beginning to love all that shiny light stuff on websites, I thought I might want to try making a glossy content box in Photoshop and made a tutorial about it for you.

In this Adobe Photoshop tutorial you will learn to make a glossy content boxes (could also be buttons or other stuff, its basic principles).

First with the rectangle selection tool drag out a selection, then we want to make some rounded corners, so go to select -> modify -> smooth and smooth it about 3 px.

Now we want to make a gradient going from white to a light color I chose green, as shown below.

With the gradients tool choose radial gradient and drag it our from the bottom middle of our selection.

Now in the layers panel make a copy of our shape layer for later use. Just place it under our first box and rotate it 180 degrees.

Back to the top box layer, double click it to get to the layers styles panel and give it settings as shown below.

Now make a selection of the top part of the shape as shown below, and draw a gradient from white to transparent as a reflection.

To change the reflection shape go to edit -> transform -> wrap and drag the corners as shown below.

Now go to the bottom shape, in the layers panel hold down ctrl and click the layer to load the selection, and with the gradient from white to transparent and drag it in the selection to tone down the reflection.

And you are done, as you can see from my final image you can easily change it to other colors as I did. Hope you liked the tutorial.