In this tutorial, we are going to learn how to make a
simple navigation bar and then slice it in order to put it up on the internet.
Part 1: Navigation Bar1. Open up a new document with a transparent background and make it 550x30.
2. Change the name of the current layer's (Layer 1) name to "Background".
3. Using the Paint Bucket tool, fill the layer with #292929 (or any other color that your background is going to be for you site).
4. Create a new layer and then using your keyboard, press CTRL and then click on the Backgrond layer.
5. Go to Select>>>Transform Selection. In the Width box, put in 98% and in the Height box put in 93%. Now you selection will look smaller.
6. Now fill the layer with white and name the layer Gradient.
7. Now right click on the layers name and click on Blending Options. And put in these settings. (For the gradient part, choose the color that best suits the color of your site)
So far you should end up with this image
8. Now create another layer and call it Left Fading. Set you forground to #292929. Now take out the gradient tool and set it to
Foreground to Transparent. Now holding on to the SHITFT key drag your mouse from the left of the image and to a little bit to the right.
9. Now create another layer and call it Right Fading. Do the same as step #8 but drag you mouse from the right of the image to a little bit of left. Don't forget to hold on to the SHIFT key on your keyboard.
Now you should end up with this image.
10. Now using your text tool write the links you want on the navigation bar. Make sure to keep a distance between them in order for it to look good.
11. Now save you document so if anything goes wrong in the next steps, you can go back to the end of part one and restart part 2.
Part 2: Slicing12. Now get out your slice tool.
13. This slice tool works like a Rectangle Marquee Tool, so now go over the work you want to have a link in the navigation bar and make a squre around it using the
Slice Tool.
14. Repeat step #13 for all the other words you have. In the end you should have this.
15. Now get out your
Slice Select Tool.
16. Now double click on one of the boxes you made using the Slice Tool and a window will pop up. In the window, where it says
URL:, type in the url of the place you want that word to be linked to. Make sure the url starts with "
http://".
17. Repeat step #16 for all the word that you want to link.
Part 3: Coding18. Now this is the hardest part so be carefull of what you do.
19. Go to File>>>Save for Web. Then click on Save at the top right corner. A window will pop up and give it the name you want. And make sure that you choose
HTML and Image (*.html) for the
Save as type: option.
20. Now go to the area where you save the file at and you will see a folder called Images and a file with the picture called Naviagtion Bar (or the name you gave when saving it).
21. Double click on the Navigation Bar file and you browser should open up and show you the image of the Navigation Bar.
22. In your Browser, go to View>>>Source or View>>>Page Source.
23. A window will pop up and the program will be called Notepad. Over here you will see a long code. This is the code I have.
24. Now go to the image folder, if you dont know what that it, look at the picture below. Double click on the folder and you will see a lot of images. Upload all of those pictures to an image host. (http://www.imageshack.us/ or
http://photobucket.com/).
25. In that long code you got from Notepad, you will see little parts every where that look something like this.
