• Lesson Index:
• Overview
• Layout
• Getting Started
• Setting Colors
• Draw Layout
• Enhance Photo
• Import Image
• Gradients & Masks
• Components
• Making the Header
• Smudge Tool
• Write Title
• Navigation Bar
• Footer
• Finishing
• Slicing
• Export
• Export Options

Creating the Navigation Bar

After we had finished the title in the last lesson, it is time to draw out our navigation bar with the two gray colors as shown...

Why did I pick these colors? No reason, they were suggested by ColorMatch5K after inputting an initial color of #6D8DD6 (which is our blue header color, which in turn was determined by our sky in the image). And of the two grays, I used the darker for the border and the lighter for the fill. It is typical to darker borders in order to provide definition and boundary.

Adding Text to Nav Bar

Drop in some text menu items for our nav bar. When we code this website in the HTML/Dreamweaver lessons, the text will be acutal text and not graphical images. Hence we picked Arial which is a font that is common on most users' system.

If you find that the text is snapping to certain location and you can not position it to where you want, make sure your Snap to Guide is turned off.

Duplicate our first menu...

until we have four. Then with the text tool selected, you can double-click on the text to change them to the following...

For each of the text, you can have them be centered-aligned with the center button in the property panel as shown.

With all four text selected, you can Modify -> Align -> Distribute Widths to make them look neat.

This is what we have so far: creativeworks.png

When ready, continue to the next lesson where we will create the footer.