Toxiclab.org

Simple content box

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

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



Stroke



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

Download photoshop source (195 KB)

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

Browse by category


Most popular tutorials