Simple Content Box and Slicing

**FireNova** · #1 08-16-2005, 12:32 PM

Hey in this tutorial i will show you how to make a cool but simple content box. Also put in for free :P you will be shown how to slice and code it so it will load as fast as possible. enjoy!

1. Open a new document mine here is 300x300 but yours will obviously be in a layout. Make a selection of the size of the content box and click Select->Modify->Smooth. I set it to 6px. Once you do that make a new layer and fill it with white by clicking 'D' on your keyboard first and then Ctrl+Backspace. The background in this image has been inverted so you can see what mine looks like.

<div class='bbimg'>

</div>

2. Now applying the following effects will produce a smooth and simple looking content box.

<div class='bbimg'>

</div>
<div class='bbimg'>

</div>

3. You should now have a simple content box like this:

<div class='bbimg'>

</div>

4. In this image i have added a little tab that the content box name has been added in.

<div class='bbimg'>

</div>

Right now slicing

1. First we need to look at how many images we have to actually slice for this to work. Well due the simplicity of the content box the borders can be sliced so when set as a cell background they will repeat themselves but still look like a whole image. If you get what i mean

. Basically we need to slice it something like this. The red lines are the slices.

<div class='bbimg'>

</div>

It may look weird but it makes sense. The reason why we are cutting the corners is that these can not be repeated as a background so much be as a seperate image. The slices inbetween the corners are the images that get repeated and that means they can be as small as possible so that it reduces loading time. And the big black box shows the space that will not get sliced. This is because all that area is white because it is all white we can just set that cell in the html as white so no need for an image.

2. Ok time to make the slices. If you are unsure on how big the 'black box' is in the content box it is always helpful to get your eyedropper tool and test to see if the pixel at the corner of the slice is the same color as the body that is not going to be sliced. This means the image you are cutting will blend into the main body of color. Due to the fact there is a 'label' on the content box, the images at the top will be bigger so that they are the same size as the 'label'.

<div class='bbimg'>

</div>

3. Now click Save for Web and save it as gifs as they load slightly faster than jpegs. Now open your favourite web editor. To show how to make this i will be using Macromedia Dreamweaver Mx. Once you open Dreamweaver or Frontpage you need to create a table. Now in Dreamweaver it is Insert->Table whereas i think in frontpage it should be Table->Insert->Table. Then fill in the details you want 3 rows and 3 columns. Remember to change the others and set borders, cellpadding and cellspacing to 0.

4. In the first cell [top left] right click in it and click properties [that works for both dreamweaver and frontpage, however frontpage it is cell properties not table properties]. Now in the background box browse for the image of the top left corner that you sliced.

For Dreamweaver:
<div class='bbimg'>

</div>

For Frontpage:
<div class='bbimg'>

</div>

[please bare in mind my edition of fontpage is not uptodate]

5. Now continue this for all the cells and dont forget to set the cell size. This is what you should get :P. I have taken screenshots to show how they look like in both Dreamweaver and Frontpage.

<div class='bbimg'>

</div>

And for those lazy people out there here is the code.

Code:

<table width="25%" border="0" align="center" cellpadding="0" cellspacing="0">
 <tr>
  <td width="22" height="26" background="box_03.gif"></td>
  <td height="26" background="box_05.gif"><div align="right"><img src="box_07.gif" width="86" height="26"></div></td>
  <td width="22" height="26" background="box_08.gif"></td>
 </tr>
 <tr>
  <td width="22" background="box_15.gif"></td>
  <td height="200"></td>
  <td width="22" background="box_14.gif"></td>
 </tr>
 <tr>
  <td width="22" height="22" background="box_18.gif"></td>
  <td height="22" background="box_19.gif"></td>
  <td width="22" height="22" background="box_20.gif"></td>
 </tr>
</table>

This code was produced using Dreamweaver Mx.

Here is a link to a working one aswell

http://p3rc3pt10n.net/tuts/contentbox/images/box.html

Here is a link to the psd used also

only members with 15 posts or more can download this
http://p3rc3pt10n.net/Forums/index.php?download=8

Hope ya enjoyed it ^_^

FireNova

**Edward Elric** · #2 09-08-2005, 08:27 PM

<div class='quotetop'>QUOTE(FireNova @ Sep 5 2005, 10:03 AM)</div><div class='quotemain'>the font name is the one everyone uses lol its um 04_3b or something like that anyway lol

[snapback]2370[/snapback]

[/quote:db24c54e40]
Another pixel font that works nicely is Redensek.

**Damein** · #3 09-18-2005, 06:45 AM

Great Tutorial. Me Likes

**Ks0** · #4 01-09-2006, 03:36 AM

Loving it. Ill probally use this

**tomefx** · #5 01-10-2006, 04:49 PM

nice tut..... i knew it already.. but just helped me learn a few more bits in ps

**0mG!** · #6 02-04-2006, 01:05 AM

yup, nice tut, i like it =)

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)