Step 1
Make a new document 500x500 pixels. Make the background
layer white. Once you've done that make a new layer and call it "Content
Box". Select your rectangle marquee tool and make a fixed
selection of 250 x 250 pixels. Make the layer background
this colour "#124FFF". You should now have something
that looks very similar to image below.
Step 2
While still selected with the content box layer, go to Select > Modify
> Contract then enter in 4. This is now making a selection so we can
just have the borders.
Step 3
Now go to Layer > Layer Style > Blending options
and select Bevel and Emboss. Then enter in the setting
as shown below.
Now select the stroke option
so we can give the border a nice looking stroke to go with it. Enter in
the setting shown below.
You should now have something that looks very
similar to the image shown below. It does? Great! Moving on..
Step 4
Grab your pencil tool and change the settings to the brush
size to 4 and the opacity to normal. Once
you've done that select a point where you would like to make a little header
section for your title. Hold down shift and go left to
right of the border. When you hold shift it makes the line go in a straight
line. Try to it look a little like mine, or however you like it.
Step 5
Make a new layer and call it "Background Content Colour". Now
make a selection round one of the areas you'd like to change colour, using
the rectangle marquee tool. You can make it any colour you'd like, I chose
orange because blue and orange are both two colours that mix. Do the same
step as step 3 but change certain things to how you would like it to be.
Now if you can do what i can do, it will look really nice. I haven't showed
you how to do this because i'd like you to find out how to do this on your
own.
Final Result
Now you can add font and integrate the content box with your website. Try
and see if you can make something a little better than mine :). Hope you
enjoyed!