Step 1: Creating the Workspace:
Start with a 200 x 200 Document and fill in the background with a neutral white (#FFFFFF)
Step 2: Create the Base Layer
Make a new layer and make a selection with your Rectangular Marquee tool like this:
Hold the shift key on the keyboard to get a equal selection size. Fill in the selection with the colour #cccccc and then apply the following layer styles to the shape:
Drop Shadow:
Stroke:
Apply these and then our base layer will look something like this:
Step 3: Create the Top section
Next if not already select the selection, if you have de-selected the selection then hold Ctrl on the keyboard and click on the base layers thumbnail to select it again. When you have selected it go to Select > Modify > Contract and contract by 4px to give you this selection:
Make a new layer and Fill in this selection with and colour and then shrink it about this size by using the free transform tool (Edit > Free Transform):
Apply the following layer styles on this layer:
Gradient Overlay:
Stroke:
Our top part should now look like this:
Step 4: Create the Content area
Now select the very base layer again and re-select the selection again. Then go to Select > Modify > Contract and contract the selection by 4px. Make a new layer and fill it in with any colour. You should then get this effect:
Shrink the shape from the top to about this size:
Apply the following layer styles to this layer:
Gradient Overlay:
Stroke:
Our content box area should now look like this:
Step 5: Add a colour burn effect
On the layer we've just been working on re-select layer and then grab your Rectangular Marquee Tool and select the Subtract from Selection setting and make a selection over the content box area like this:
Once you have done this selection you should end up with a bottom selection like this:
Make a new layer and fill it in with a neutral Black (#000000). Then change the layers blend mode to Lighten and then apply the following layer style:
Gradient Overlay:
The bottom selection should now be blended in with the content area and also have a colour burn effect at the end of it:
Step 6: Add in some text
Finally let's add in some text. For this tutorial I'm using the font Trebuchet MS. For the top title part I am using it at size 12pt with the Anti Alliasing at Sharp. For the content area I'm using it at size 10pt with the Anti Alliasing at Sharp again. Add in your text and you should get something like this:
The Final Result:





More Photoshop: