Simple content box

28.11.2005, 17:58
Submited in: Photoshop | Total Views: 56534

In this tutorial i'm gonna show you how to create a contentbox for your web site.

Step 1

Begin with new file (CTRL+N), 300x300px.
Background color is #484848.

Step 2

Using Rounded Rectangle Tool draw out a rectangle as the image below shows.  (Radius is 10px)

Step 3

Double click on our layer to edit layer style

Inner shadow

Outer glow

Inner glow

Bevel and emboss

Color overaly


You are now done with it. Now your content box should look like this one below:

Step 4

Now it's time to slice our image using Slice tool.
If you want to see Sliced example you can download it at the end of page.

Step 5

And here is the html code for our content box:

<table border="0" cellpadding="0" cellspacing="0" width="261">
 <td width="261">
 <img border="0" src="images/top.gif" width="261" height="13"></td>
 <td style="Background: url('images/middle.gif') repeat-y; padding: 7px" width="261">
 Your content
 <td width="261">
 <img border="0" src="images/bottom.gif" width="261" height="13"></td>

Download photoshop source (195 KB)

Are you a website owner?
Click here to register and submit your tutorials!

Browse by category

Most popular tutorials