Content Box

In this tutorial you will learn how to create a simple content box, the final result is very similar to the style used on this site.

Step 1:

Open a new document. I used 500x500. Fill the background with a colour,

(If you where making this for a web site, then you would use the background as the base of the web site because the content box will match the colour you choose now. Scroll down to the bottom of the page to have a look at the finished effect, if you don't quite understand. )

Step 2 :

Using the marquee tool, mark out the size of your content box. Create a new layer. Fill with the same colour as from STEP 1.

Step 3 :

To make this style of content box we need to add a layer style to the layer we just created, ( The one with the content box on). First add a DROP SHADOW, using the settings bellow. NOTE! depending on the size of your content box you may need to tweak this settings to get the finished effect correct.

Step 4 :

We need to now add a STROKE. Use settings as below. NOTE! depending on the size of your content box you may need to tweak this settings to get the finished effect correct. Press ok after inputting the correct settings.

Step 5 :

While your selection is still active, we go to SELECT > MODIFY > CONTACT

Step 6 :

I chose to contract by 5 PIXELS. All we are doing here is setting up a board for you content box. The more pixels you contract by the large the boarder will be.

Step 7 :

You should have something that looks like this. You can see how we have created the boarder.

Step 8 :

Create a new layer. Call this layer CONTENT FILL and fill the selection black. You could use another colour but for the colour scheme I choose, I liked black.

Step 9 :

Create a small selection across your CONTENT FILL layer, and press delete, This is to give your content box an area to put a TITLE in. Use the image below for guidance. This step is optional depending on what you want you content box to look like.

Step 10 :

Yow you just need to add some finishing touches, and the content box is finished. As you can see I added some text, and a small bit of grunge on the TITLE area. The box is now ready to be sliced for the web, if you are putting it on a site.

Click to enlarge