Stylish Content Box

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 Tool

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.

Move to Inner Shadow and enter options like on the next image below.

Click on Inner Glow and again enter the options like on the image below.

Now move to Gradient Overlay and enter the options as on the next image…

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.

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.

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.

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