Designing a Graphical Navigation Tool:

  1. File/ new / width 600 x 100 height / RGB Mode
  2. Pick a color for the background of your documents from the swatches window.
    If you can not see the swatches go to Window/Swatches.
  3. Select the paint bucket tool and click on your document
  4. Select a different color for the type
  5. Type all the text for each of your future buttons
  6. Remember you can customize the font face, the color and the size of your type by using the top option window. You most have the type tool selected to see these options.
  7. File/Save/ navigation.psd
  8. Pick a different color for you buttons.
  9. Select the rounded rectangle tool or any of the shapes available.
  10. Click hold and drag to draw one of your buttons.
  11. If the button is covering your type, please rearrange the order of your layers. Make sure the button you are drawing is in different color from your background and your type.
  12. File/save
  13. Copy this button multiple times to use it with the rest of you buttons. Drag the layer containing the buttons first created to the small icon located at the bottom of the layers. The icon besides the trash can icon. The new layer icon tool.
  14. Then select the moving tool to rearrange the location of each of your buttons
  15. Make sure to arrange your type and your buttons along with a type layer with the name of your site
  16. File/save
  17. Make sure everything in your design is properly align, the colors contrast with each other and the type is readable
  18. Select the Slice Tool
  19. Slice each of the sections that would make a link in your page. Make sure there is no overlapping of slices. Most slices should be the same height.
  20. Go to Window / Slice. Name each of your slices. Use only lowercase letters and no spaces.
  21. File/save
  22. Create the links by typing the names of your html documents in the URl option in the slice window.
  23. Customize the file setting for your slices.Go to window / Optimized
  24. Go to select / ALL Slices
  25. In the optimized window select the best file format for your graphics, either jpg or gif. When using the gif format please make sure to customize the number of colors used so the file size would go smaller.
  26. You might need to customize the hex color for your future html document at this point. Sample the background color of your background using the eyedropper tool. The go to file/ Output Settings/ Background. Then select foreground color in the bg option.
  27. File/save
  28. Save the html document by going to File / Save optimized. Make sure to use only lowercase letters and no spaces when naming your html document. Also don't forget to use the proper file extension, .html.
  29. Go to internet explores and go to File/ open file and double click on the html file you just created.

Adding Rollovers to a navigation tool:

  1. Once the layout of your graphical navigation tool is ready, you can begin adding a rollover effect to each of your buttons. At this point all your buttons and type layers are aligning properly. All your buttons should have the same height. They should all have the same style and look too.
  2. Think about the different options offered by the layer styles. Remember that the icon for layer styles is at the bottom of the layer window. It is round in shape and contains the letter "f" in the middle.
  3. Go to window / web content.
  4. At this point you most have named each of your user slices.
  5. Decide what you want to change in your button. The background color of your button or the color of your type by applying the color overlay layer effect . You may apply from one to three style effects to your button. However, keep it simple so the type of your button would be readable.
  6. Select one of the layers in your web content window. to create your first rollover. For example the layer for the home button. Then, click on the icon located at the left side of the trash can at the bottom of the web content window. to create a new rollover layer.
  7. Meanwhile you are in this rollover layer, select the layer for the button shape in the layers. You may select the moving tool and click on top of the button shape to highlight it.
  8. Then go to the bottom of your layer to apply the style effect or your preference. Once you have the look that you have for your rollover button. Make sure to right click on the layer and select COPY LAYER EFFECT. This is so when you create the next rollover button you just need to paste the layer effect to the button layer.
  9. Then, from the web content window. select the next button. Again, just click the icon at the left side of the trash icon at the bottom of the web content window. to create the rollover layer.
  10. Select the button to change from the layer. You may use the moving tool to click the shape button to highlight it or select it.
  11. Once the proper layer is highlighted in the layer window., right click on top of it and select COPY LAYER STYLE. This will paste the effects you applied to your previous button.
  12. Go to File / SAVE
  13. Repeat the same to create the rollovers of each of you buttons.
  14. Go to File / PREVIEW / IN INTERNET EXPLORER. This will give you a preview of how your page will look in the browser once you save the html.
  15. To save the html file. Go to FILE / SAVE OPTIMIZED.
  16. Go to the browser / file / open file / and select the html document you just saved.