Plastic Content Box

Plastic Content Box

This tutorial with guide you through how to make a content area for your site. This tutorials takes in to account that you have a reasonable knowledge of Photoshop:



Make a new document. For this tutorial i am using 300x500 with a resolution of 72 pixels/inch with Colour Mode set to RGB Colour 8 bit.


Using the Rounded Rectangle Tool with a Radius of 10px. Draw a rectangle that takes up most of the canvas.


Rasterize this layer and duplicate it by pressing ctrl + j


With the move tool (V) selected, hold shift and press down a few times. Make sure that you have enough room for a header to the content area.


Press ctrl + t and set the width to 90% and press the links button, to keep the ratio


Drag the bottom of the transform up so you have the same width of border as there is on the sides of the content box


Ctrl + click this layer and delete this selection from the original layer. Now you can delete the duplicated layer


You should have something that looks like this:


Now ctrl + click the layer and select the gradient tool. Set the gradient to a gradient of #999999 to #666666 with opacity set to 100% for both:


While holding shift (to keep the gradient 90deg to the Horizontal). Drag the gradient down from the very top of the selection to the bottom of the header area, not the whole selection:


Now you have the content area border complete.


With the layer still selected use the magic wand tool to select the empty center of the box


Create a new layer


Fill the selection with #D4D4D4


Right click the layer and click blending options:

(Click for larger version)

Colour: #939393

(Click for larger version)

Colour: #919190


Click OK


Now we have a basic content box, which you can modify by adding a title to it.

This is what I got:

I have also added a white gradient at the top of the border to give it a shiny effect.