Navigation Boxes

Step 1

Width: 228 Pixels
Height: 348 Pixels
Background: White

On the upper right hand corner of the screen there should be a box with "Navigation and Info" click on info then the little triangle, then the Palette Options. For mouse coordinates make sure the ruler units are Pixels.

Step 2

Take the Rectangular Marquee Tool and on the left, right, and bottom select a 5 pixel border(Hold shift to select multiple areas). You can check how many pixels by the number in the Info box we set up in the previous step(W and H). If you are having trouble selecting 5 pixels, go to View--> Snap To--> None or try zooming in closer.

For the top select roughly a 30 pixel height. Your image should look like something we got below.

Step 3

Create a new layer, take the Paint Bucket Tool and fill the selection with Black. Deselect everything, and then go to Image--> Canvas Size.

Width: 230 Pixels
Height: 350 Pixels
Relative: Unchecked
Anchor: Click the very middle block

Isn't that a nice clean border?

Step 4

Now everyone's favorite part, lets give this some life! Go to the Blending Options set the

Bevel and Emboss

Color Overlay

Stroke

Press OK

Step 5

Now the creativity part of the tutorial. We want to spruce up the top part of the box. There are about 3 techniques involved.

1. Take your Rectangular Marquee Tool and select parts of the top and then press delete to get rid of some areas to create little boxes or whatever.
2. Take the Polygon Lasso Tool and hold shift and click to select diagonal areas to cut out.
3. Lastly third technique is use the Rectangular Marquee Tool to select and area and then take the Paint Bucket Tool and fill the area with black to create extra lines.

Keep playing around, this is an example of what we got. Also feel free to spruce up the bottom too if you want using the same techniques.

Step 6

Why would this be a navigation box without a label? Lets add a title, like umm maybe Navigation Box?!? Now we are ready for slicing! Watch out for your fingers. Don't want to be responsible for any accidents now do we.

Step 7

Grab the Slice Tool it looks like a knife, and NOT the Slice SELECT Tool. Now zoom in about 600% so it is easier to slice up the box. To slice a section all you have to do is click and drag and it will create a box(section/slice). Slice up the navigation box to look like what we got below. Be sure to pay extra attention to where the boxes end and such. Parts of the sliced are zoomed in for easier viewing in the picture below.

Step 8

Time to save our slice; File--> Save For Web. With the slice tool on the left panel selected click on a slice and press CTRL + A to select all the slices. Make it a gif with 256 colors and the rest doesn't really matter. Then press save and save it to a directory as index.html.

Step 9

Now go to the directory you saved the slice in and open up the .html file with an html editor or even notepad will do.

Step 10

**The code may not be exact.. but you get what I'm trying to say.. look for the most similar

< TABLE WIDTH=230 BORDER=0 CELLPADDING=0 CELLSPACING=0>
<TR>
<TD COLSPAN=3>
<IMG SRC=" images/index_01.gif" WIDTH=230 HEIGHT=32 ALT=""></TD>
</TR>
<TR>
<TD>
<IMG SRC="images/index_02.gif" WIDTH=7 HEIGHT=311 ALT=""></TD>

Find that string of code and replace it with this:

Basically all we did was put the image as the TD background with the height and width dimensions and got rid of the image tag.

Step 11

</TD>
<TD>
<IMG SRC="images/index_03.gif" WIDTH=216 HEIGHT=311 ALT=""></TD>

Find that string of code and replace it with this:

</TD>
<TD BACKGROUND="images/index_03.gif" WIDTH=216 HEIGHT=311 VALIGN="top">
</TD>

Basically all we did was put the image as the TD background with the height and width dimensions and got rid of the image tag.

Step 12

</TD>
<TD>
<IMG SRC="images/index_04.gif" WIDTH=7 HEIGHT=311 ALT=""></TD>

Find that string of code and replace it with this:

</TD>
<TD BACKGROUND="images/index_04.gif" WIDTH=7 HEIGHT=311>
</TD>

Basically all we did was put the image as the TD background with the height and width dimensions and got rid of the image tag. Save the html file and your done! If you want to add content to the box add the stuff in the TD showed below.

</TD>
<TD BACKGROUND="images/index_03.gif" WIDTH=216 HEIGHT=311 VALIGN="top">
</TD>

Final Product

And finally your done!! Hope you enjoyed the tutorial! Below is a live preview of our final product.


	Links goes here Links goes here Links goes here Links goes here Links goes here Links goes here Links goes here Links goes here Links goes here Links goes here