Design a Glassy Content Box in Photoshop

6-15-08 Filed under Designing & Photoshop Tutorials

Step 1:
Let’s start out by creating a new file. I used a 700×400 pixels canvas set at 72dpi, and I filled my background with a white color. Now create a new layer and draw a #729300 color shade rounded rectangle, size 320×150 px.

Step 2:
Under Layer Style(Layer > Layer Style) add a Gradient Overlay blending option to your green rectangle layer.

Step 3:
In a new layer draw a black rounded rectangle with 219 x 31 px dimensions. Then under Layer Style(Layer > Layer Style) add a Gradient Overlay blending options. Also set the layer’s blending mode to Lighten.

Step 4:
Select your Horizontal Type Tool and above your screen under the options palette set the font family to Arial, bold, 14pt, none and black color shade. In a new text layer type the name of your content box.

Step 5:
In a new layer draw a smaller black rounded rectangle with 208 x 9 px dimensions. Then under Layer Style(Layer > Layer Style) add an Inner Shadow and Gradient Overlay blending options. Also set the layer’s blending mode to Lighten.

Step 6:
Duplicate the glassy rounded rectangle layer and fill up your content box with it.

Step 7:
In a new layer draw a black rounded rectangle with 218 x 171 px dimensions. Then grab the eraser tool with a large soft brush and erase the top half of the black rounded rectangle.

Step 8:
Under Layer Style(Layer > Layer Style) add an Outer Glow and Inner Glow blending options to your the black rounded rectangle layer from step seven. Then set the layer’s blending mode to Lighten.

Step 9:
Select your Horizontal Type Tool and above your screen under the options palette set the font family to Arial, bold, 11pt, none and #007BFF color shade. In a new text layer type your content on the glassy box.

Pages: 1 2
Did you enjoy this design? We publish fresh tutorials
on a daily basis so why not Subscribe to our RSS Feed?

---

Add a Comment

Name (required)

Mail (required)

Website