Simple Navigation

alienware · #1 (**permalink**) 04-15-2007, 05:32 PM

I am gonna make a navigation bar like this:

I know its maybe spell errors but i hope its good

Download the PSD attached in this guide..

1. Choose one pic u want to use, i choose the grey one.

2. Add round buttons on it.. u can find many on the net..

3. Drag every button to the top..

4. Gropu the buttons and that grey pic and rasterize it.. now u have one layer whith pic + buttons.. unhide all other layers exept that u made now..

5. Use the Rectangural Marquee Tool and select the pic..

6. Choose Copy Merged..

7. Go to File > New and press ok..

8. U will get an white image whith the size of ur navigation picture..

9. Paste the picture on this new image.. so u get like on the picture shows...

10. Go to File > Save for web

11. Use settings as shown in image.. and press ok..

Open DW... Make new html page.. save it..

12. Go to Image..

13. Choose the image u created in photoshop...

14. Use whatever u want for Alt Text... and press ok..

15. Select the picture u added to the page..

16. Choose Oval Hotspot Tool, u can find in on the left bottom in DW!

17. Use the oval tool to create a round cirkle around a button.. do that for every button..

18. when its created it will be filled whith blue-green color..

19. When u select one of ur buttons u will find a box in the bottom where u can add a link to ur button..

If u want to use more advanced links.. like poup etc..

20. Go to Window > Behaviors

21. U will get the behaviors windows on the right side in DW, if u press the + button u will get options for that button.. u have selected..

--------------

The PSD file is to big to add to attachment so ill upload on SendSpace

http://www.sendspace.com/file/3nmvj6

--------------