In this tutorial you will learn how to make stylish content box for your website. After drawing all you have to do is to slice it, and drop into dreamweaver or some other program, and edit html code.

Step 1.

Create a new document sized 400×400 pixels. Turn on rulers by pressing Ctrl+R. Make sure you have units for rulers defined to pixels. To check go to Edit -> Preferences -> Units & Rulers, and under Rulers: choose pixels. Drag the guides from rulers (click on rulers and drag) to 50px from every side, top, bottom, left and right.

Step 2.

Use a pen tool to draw the box like shown on image below.
Pen toolPen Tool
Content box outline

Step 3.

Create a new layer (Ctrl+N). Select that new layer and go to Paths under Layers palette. Click on foreground color and change it to #ffd8b5 Right-click on “Work path” and choose “Fill Path”, coose Foreground color for “Use:”, all other options leave as default, click OK. Deselect Work Path, by clicking in gray empty area of Path palette.

Step 4.

Go back to Layers palette and double click on that Layer 1, to open Layer Style window. Select Drop Shadow, and enter the options like shown on image below.
Drop shadow
Move to Inner Shadow and enter options like on the next image below.
Inner Shadow
Click on Inner Glow and again enter the options like on the image below.
Inner Glow
Now move to Gradient Overlay and enter the options as on the next image…
Gradient Overlay
Nove move to Stroke. Enter all the stuff as on the next image, and after that click on OK to exit and apply Layer Styles you have just defined.
Stroke

Step 5.

It’s time now to define a pattern, as final touch to this stylish content box. Leave your curent document opened and make a new document sized 3×3 pixels. Choose Pencil tool, and choose it’s brush size to 1px. Draw a pattern like shown on image below.
Pattern

Step 6.

After you draw that pattern, go click on Edit -> Define Pattern… Choose a name for your newly created pattern and click ok. Now you can go back to your Stylish content box document, double click on Layer 1 and you will get Layer Styles window opened again. Click on Pattern Overlay and enter the options as shown on image below.
Pattern Overlay

Step 7. (optional)

Now it’s time for your creativity, add some caption to your content box, and add your text to it… The best way is to slice it and export to html tables, from there you can code your content box in the rest of your web design…

Result

Final result