Sleak Content Box

Step 1: Creating the Workspace:

Start with a 500 x 200 Document and fill in the background as a neutral white (#FFFFFF)

Step 2: Create the base layer

Make a new layer and make a selection with your Rectangular Marquee tool like so:

Step 3: Smooth it over

Then go to Select > Modify > Smooth. Smooth over with 7px Radius, to get this shape:

Fill in this selection with the colour #EBEFF2. Once you've filled it in set this Drop Shadow setting:

The beginning of the base should now start to form:

Step 4: Creating the Bottom section

On the layers thumbnail hold Ctrl on the keyboard and click on the thumbnail it will select the whole of the selection. Then grab your Rectangular marquee tool and select the third one labeled Subtract from selection. Use this tool and make a selection over your shape like so:

Once you have made this selection you should have something like this:

Make a new layer and Fill this in with a Neutral Black (#000000) And then apply the following Layer style:

Gradient Overlay:

Apply this and now and then change the layer style of this layer to Lighten in the layers panel. The bottom of the content box should now have a burned colour effect to it:

Step 5: Creating the Top Section

Now for the top part. On the very first base layer we did in Step 2 select the layers thumbnail via the method you did before and then grab your rectangular Marquee tool again and select the third one Subtract from selection and this time make a selection over the base like this:

Making this selection should leave you with the top part being selected like this:

Make a new layer and fill it in with a neutral white (#FFFFFF) Then apply the following Layer Styles:

Drop Shadow:

Inner Shadow:

Gradient Overlay:

Stroke:

Applying all those will give you something like this:

Step 6: Adding in some minor details

Next lets add in a couple of very small circle in the top tab at the right hand corner like so:

Finally add in some text, I'm using Verdana, regular size 11pt for the title and size 10pt for the content text:

Finally I duplicated the whole of the content box layers (Everything) and then tweaked some settings around:

The Final Result:

On the second content box I simply changed the font to Arial changed the circle colours and changed the very first base layer of the content boxes layer mode to Lighten to give a more sleek grey effect!