Content Box

In this tutorial, I will teach you how to create the content box above.

Step1: Creating the content box.

Create a new image using the dimension  800 x 600. Set the background color to white. You can change the background depending on you web site color. Create a new layer, Layer > New > Layer... (Shift+Ctrl+N). Using the Rounded Rectangle Tool create a rectangle using the dimensions below. Change the foreground color to #cccccc, which will be the color of the rectangle.

With the setting above, you should have created the image below.

Create a new layer, Layer > New > Layer. Using the Rounded Rectangle Tool create another rectangle using the dimensions below.

With the setting above you should have created the image below.

You need to combine the two rectangles to get the effect below. If the rectangle is too big or small, use the Chop Tool to resize the image.

Hold Ctrl and click on the two rectangle layers to highlight them as shown in the image below, press Ctrl+E to merge the layers.

Step2: Creating the content box. (Blending Options)

Now right click on the layer you just merge, click Blending Options and add the settings below.

Inner Glow

Gradient Overlay

Gradient Overlay (Gradient)

When you are finished click ok, to add the setting. You should have the image below.

Step3: Creating the content box. (Blending Options)

Create a new layer, Layer > New > Layer. Using the Rounded Rectangle Tool create another rectangle using the dimensions below. Change the foreground color to #c0c0c0

With that setting, create the rectangle below.

Place the rectangle over the content box you created earlier to get the effect below.

Hold Ctrl and click on the smaller rectangle to select it, you will know that it is selected when your image look like the picture below.

With the layer still selected click on the main rectangle layer and press the Delete key on your keyboard. 

Right click on the smaller rectangle layer, click Blending Options and add the setting below.

Inner Shadow

Outer Glow

Inner Glow

Click ok, when you are finished.

Step4: Creating the rounded rectangle on top of the content box.

Create a new layer, Layer > New > Layer. Using the Rounded Rectangle Tool create another rectangle using the dimensions below. Change the foreground color to #5b675b

With that setting, create the rectangle below.

Now right click on the layer you just created, click Blending Options and add the settings below.

Inner Shadow

Outer Glow

Inner Glow

Click ok, when you are finished.

With that, you should have the effect below.

Step5: Creating the rounded rectangle in side the content box.

Create a new layer, Layer > New > Layer. Using the Rounded Rectangle Tool create another rectangle using the dimensions below.

With the setting above, you should have the image below.

Create a new layer, using the Rounded Rectangle Tool create another rectangle using the dimensions below.

You need to combine the two rectangles to get the effect below. If the rectangle is too big or small, use the Chop Tool to resize the image. This is the same as in step 1, after resizing the images hold Ctrl and click on the two layer and press Ctrl+E to merge them to get the effect below.

Step6: Adding Blending Option to the green rectangle.

Right click on the layer you just created, click Blending Options and add the settings below.

Outer Glow

Inner Glow

Click ok, when you are finished.

Step7: Adding the imbedded holes

Click here to download the pattern needed to create the holes. Create a new layer, Layer > New > Layer. Using the Rectangular Marquee Tool  to select the part of the rectangle you want to place the holes. Then click Edit >   Fill, when the window below comes up select the pattern and click ok when you are finished.

Step8: Creating the lines on the sides of the content box.

Zoom into your image; create a new layer, using the Pencil Tool 

with #767676 as the color draw a line from left to right as seen in the image below. Change the pencil color to #CCCCCC and draw another line under the dark brown layer to get the effect below.

Finished:

If you merge all the layer except the background layer, Click on Image >   Adjustments > Hue/Saturation, play around with the setting in the Hue/Saturation window and you can change the color scheme of the content box. Make sure you click on colorize in the Hue/Saturation window