website promotion banner
eturnkeys
Your Ad Here
Photoshop  Home Photoshop Web Layout Expanding Content Box
rss

Expanding Content Box

Author: SweDesignz.com More by this author


1. Begin with a new file, with #666666 as your background color, the size is up to you to decide. ( I choose 300x300 for this tutorial. ) Now create a new layer in the layers palette, and then take the Rounded Rectangle Tool and draw out a shape similar to the one below.

2. Now go to the layers palette and right click on layer 1, choose Blending Options, then apply this settings.

And now should it look something like this.

3. Now create a new layer, then set your foreground color to black #000000, and then take the Rounded Rectangle Tool and draw out a shape similar to the one below.

4. Then once again create a new layer and take the Rounded Rectangle Tool and draw out a shape like the image below shows.

And that's it you are done with the content box. This is what I came up with.

Now take the Slice Tool and start to slice your content box. Below can you see how I sliced my content box.

And this is the code to make it expand.

<table width="300" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td colspan="3"><img src="01.gif" width="300" height="60" alt=""></td>
</tr>
<tr>
<td background="02.gif" width="21"></td>
<td background="03.gif" width="258"><p>All content goes here!!!</p></td>
<td background="04.gif" width="21"></td>
</tr>
<tr>
<td colspan="3"><img src="05.gif" width="300" height="33" alt=""></td>
</tr>
</table>

That's it, you can see an example below.

Expanding Content Box Tutorial: Final Result

All content goes here. All content goes here. All content goes here. All content goes here. All content goes here. All content goes here. All content goes here. All content goes here. All content goes here. All content goes here. All content goes here. All content goes here. All content goes here. All content goes here. All content goes here. All content goes here. All content goes here. All content goes here. All content goes here. All content goes here. All content goes here. All content goes here. All content goes here. All content goes here. All content goes here. All content goes here. All content goes here. All content goes here.

Expanding Content Box Tutorial: Final Result


Rate this Material: Bad 1 2 3 4 5 Excellent
print this page tell a friend subscribe to newsletter subscribe to rss

Add comments to "Expanding Content Box"