Glossy web content box in Photoshop


Learn how to make a glossy web content box in Adobe Photoshop in just a few easy steps.
Photoshop Tutorial thumb picture


1.
To make this content box we start by making a rectangular selection with the selection tool, then go to select -> modify -> smooth and smooth it about 25 px.

2.
Now hold down shift and press backspace, and will the selection with black.

Photoshop Tutorial thumb picture


3.
Go to filters -> blur -> gaussian blur and blur the shape about 1, just to soften the edges.

4.
In the layers panel double click the shape layer to get to the layers style panel and give it settings as shown below.

Photoshop Tutorial thumb picture

Photoshop Tutorial thumb picture

Photoshop Tutorial thumb picture


5.
Now we will make the inside of this content box, so hold down ctrl and click the rectangular shape layer to load the selection, then go to select -> modify -> contract and contract the selection about 20 px and fill it with black color.

Photoshop Tutorial thumb picture


6.
Now go to the new shapes layer style panel and give it settings as below.

Photoshop Tutorial thumb picture

Photoshop Tutorial thumb picture


7.
Now we will make a reflection to the content box, so hold down ctrl and click the layer in the layers panel to load the selection, then with the elliptical selection tool and selection mode called intersect with selection drag over the selection as shown below.

Photoshop Tutorial thumb picture


8.
Make a new layer and fill the selection with white color.
Go to filters -> blur -> gaussian blur and blur the reflection about 4 px to soften it.

9.
Now bring down the reflection layers opacity to about 40 percent.

Photoshop Tutorial thumb picture


10.
Now you can make a layer in between the reflection layer and the box layer, and write some text or put in some graphic.

By changing the gradient colors you can easily change the colors of the content box.

0tutor.com rss feed