home tutorials forums downloads contact-us
Tool Tip Tutorial Extended Text Energy Pulse Background Effect Seamless Repeating Tile Background Fresh Tutorials:
Last Update: 2.14.2007
Online: 123 Users
Advetise on For only $50 per month! Tutorials Web Layouts Glossy Content Box

Glossy Content Box

In this tutorial you will learn how to create a smooth gloss content box. This effect can be found all over the internet these days, to make a very stylish glass/plastic effect for your headers, buttons, and content boxes. After following the steps in this tutorial you will be able to create great looking content boxes.

Download File Download Glossy Content Box Source Package

Page 1 of 1

Step # 1
Open an existing document in photoshop, or open a new one. I will be working with a 300x415 canvas for this tutorial.

Fill the background with white (#FFFFFF).

Step # 2
Get out the Rounded Rectangle tool () and set it up like so:
Make sure the "Fill Pixels" is selected

Drag out a rectangle just a little smaller than the canvas size such as l've done here:

Double click this layer, and apply the following blending options:
Inner Shadow:


Gradient Overlay:

Inner Shadow:


Step # 3
Next we'll create a shine/gloss to our content box. Hold down the CTRL key on your keyboard and click this layer (doing so should make a selection of everything on this layer) Alternatively you can get out the magic wand tool () and click once in the center of the rounded rectangle and this will make a selection of everything as well.

Keeping the selection still active, create a new layer.

Get out the elliptical marquee tool ().

Now press and hold the ALT key on your keyboard, and make a deselection as l've done here:

Set your foreground color to white (#FFFFFF). Get out the gradient fill tool () and select a white to transparent gradient:

Next fill this selection with your gradient from top to bottom as l've done here:

Drop the opacity of this layer to 40 percent:

This should lighten the gloss a little bit, and make it look more realistic.

Step # 4
Next we are going to cover our content area with some basic scan lines. Here is how we create scan lines.

Press CTRL+ N on your keyboard to create a new document. set the size to 3x3, with a transparent background:

Next zoom in as close as you can to this new 3x3 document.
You can zoom quickly by holding the CTRL key and rolling your mouse scroller downward

Set your foreground color to black (#000000). Get out the pencil tool () and set it up like so:

Using the pencil tool, draw three dots onto the canvas exactly as l've done here:

Go to "Edit->Define Pattern", and name this pattern "Scanlines":

We are finished creating our pattern, so you can safely close this 3x3 document.

Step # 5
Now move back to our original "glossy content box" document and create a new layer.

Hold down the CTRL key on your keyboard, and click on the glossy content box layer. (just like we did in step #3. This will once again make a selection of our entire content area:

Get out the flood fill paint bucket (), and set it up like so:

Fill in the selection with your pattern and press CTRL + D on your keyboard to deselect the selection:

Press CTRL + I (that's an i) on your keyboard to invert the colors, this should change the color of the scan lines to white instead of black:

Drop the opacity of this layer down to around 50 percent:


This concludes the glossy content box tutorial. I hope you've learned some good tips and tricks used by the professionals while following along with this tutorial! Please be sure to check out the rest of our great tutorials while you're here!

Download File Download Glossy Content Box Source Package

Author: Nick
Discuss this tutorial on the Forums
Desktop Deck - Desktop wallpapers and graphic design tutorials FREE Photo Shop Tutorial 
Photoshop Guides - quality, hand-picked Adobe Photoshop tutorials added daily. Best Tutorials Site From Romania for noobs and experts
All Affiliates / Your Link Here
© 2007 - 2008 Duplication/Redistribution prohibited. Map
Top of Page