Seamless Navigation Interfaces
Overview & Phase 1

Requirements: Adobe Photoshop, HTML editor such as Notetab Pro or Notepad

I've broken this tutorial into 3 phases.

1. Graphics: The construction of the graphic components for your interface.

2. HTML: Writing the source that will put those graphics to use.

3. CSS: Use of a Cascading style sheet to fine tune the text in your navigation.

One of my biggest hurdles when graduating from being a "Graphics guy" to a "Graphics/Web guy" was learning to design efficient, 56K modem friendly, quick loading graphics. My first works were hideously heavy loaders. I'll probably never know how many viewers I bored to death with the overuse of a beveling filter and big, clunky, slow loading graphics.

As in most of my tutorials, we're going to be using lots of keyboard shortcuts. Never be a slave to the mouse! For those not familiar, these are great little time savers once you get used to them. It's a good idea to take a little time and float your cursor over the Tools palette in Photoshop, (or any application for that matter), and take notice of the keyboard shortcut keys for these tools. Also, the next time you find yourself clicking your way throught the top Menu, File, Edit, etc. pay a little attention to those shortcut keys. No one ever uses them all but the ones you do use will make your work faster and easier. Alright, let's get busy!

Phase 1A: Creating our images using Gradients and Layer Styles

Let's begiin in Photoshop with a new 30px × 30px file, Resolution 72, Contents: Transparent, and name it "nav.psd". Click and drag the window nice & big, hit Z to select your zoom tool and max that puppy out. We're going to get our nose right in the pixels on this one. Rename the first layer "bar", hit M to select the Rectangular Marquee tool and beginning at the top left corner, click and draw a selection that spans the entire frame horizontally and stops 4px above the bottom edge. Hit G to select the Gradient tool, click on the above Gradient bar to open your Gradient palette and choose "Gold Bar". Hold down the shift key and drag a gradient from top to bottom within your selection. Alt+I, A, C to open the Brightness/Contrast dialog and enter -50 for the brightness. Now double click on the bar layer to open the Layer Style palette, select Drop Shadow and apply these settings.

*NOTE: Be sure to take time later and explore the Gradient palette thoroughly. The many options will allow you to edit existing gradients or create your own as well as save or load gradient banks.

Shift+Ctrl+N to create a new layer and name it button. Click and hold on the Marquee tool button to get the flyout and select the Eliptical Marquee tool. Again, starting at the top, left corner of the frame, click and drag an elipse the same height as your gradient and 9px wide and nudge it 5px to the right with your arrow key. Hit G to select the Gradient tool and again holding down the shift key, drag the gradient from top to bottom within your selelction. Ctrl+T to transform and drag the top edge down 3px, the bottom edge up 3px and hit [ENTER] to apply. Ctrl+D to deselect, click and drag the button layer down to the creates new layer button and rename the new layer break. Hit V to select the move tool and nudge it to the right 10px. Now drag the break layer down to the and again hit V and nudge it 10px to the right. Ctrl+E to merge it down into the break layer.

Apply the Layer Style settings shown at right to both the button and break layers.

Phase 1B: Running with scissors... slicing our graphic and exporting into usable components

At this point your image should look like the one shown at right.

Okay, we're finally ready to do some slicing! This is where we dice up our image into the components that we'll be tiling and recycling to make our seamless navbar. All our slices will run from top to bottom.

Hit K to select your slice tool. Slicing from top left to bottom right, create 8 slices at these pixel intervals: 1-4, 5, 6-9, 10, 11-14, 15-20, 21-28 & 29-30.

Click and hold the Slice tool until you get the flyout and select the Slice Select tool. Double click each slice and rename as follows: 1. delete, 2. navtile01, 3. navcapl, 4. navtile02, 5. navcapr, 6. delete, 7. navbreak, 8. delete.

Shift+Ctrl+Alt+S to Save for Web, click and drag a rectangle to select all slices. If saving as a gif, click on to set your background color. This is where you match the background color of your page. The default is white. If you select None you get nasty jagged edges on your image. If saving as a jpg you'll need to create a background layer in your nav.psd and fill it with same bgcolor as your web page.