Glossy Content Box

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 I've done here:

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

Inner Shadow:

Stroke:

Gradient Overlay:

Inner Shadow:

Result:

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 I'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 I'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 I'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:

Result:

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!

Download Glossy Content Box Source Package here.