Simple content box
28.11.2005, 17:58
Submited in: Photoshop | Total Views: 56258
In this tutorial i'm gonna show you how to create a contentbox for your web site. Step 1Begin with new file (CTRL+N), 300x300px. Background color is #484848.
Step 2Using Rounded Rectangle Tool draw out a rectangle as the image below shows. (Radius is 10px) Step 3Double 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 4Now 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 5And 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)
|