Simple content box

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:


Download photoshop source (195 KB)