Home Photoshop Web Layout Pixel Content Box

Pixel Content Box

Author: Aaron More by this author

Added: Mar 14, 2005 Rating:

Level: Beginner Software: Photoshop

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.

Pixel Content Box Tutorial: Final Result

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!

Author's URL: Aaron