Creating a Navigation Bar

This tutorial is a brief look at how to use ImageReady to create a navigation bar to use in your web site. ImageReady has many tools that make the whole process of preparing images for the web easier.

1. Open ImageReady and create a new document. Make the dimensions 580 x 80 pixels.

2. First, we need to set a background color. Click the Background swatch and change the color picker to HTML. You can set the Red, Green, and Blue values of the color (RGB). Set the red value to 33, the green value to 33, and the Blue value to CC. This will give us a bright, web-safe blue.

3. Set the Foreground color to white (FFFFFF). Select the Type tool and click in the left area of the document. This does not bring up a Type dialog, as in Photoshop, but rather behaves more like the type tool in Illustrator. You can change attributes such as font, style, and size from the Type palette. Select a fun font (or a sans-serif font), and set the size to either 48 or 60 pixels (whatever works with your font). Type the word "it's". Click the type tool in the document again to create a new type object. Type the letter "a". Click a third time and type "Site". You now have three text objects on separate layers.

4. Now, we need to arrange those layers. Select the Move tool. Select the "it's" layer and move it to the upper left corner of the document. Select the "a" layer and move it directly beneath "it's", right-aligning the words. Now, move the "Site" layer so that it is to the right of the other two words.

5. The "Site" object needs to be a little larger. Select the Type tool again and highlight the word. In the Type palette, change the size to 72 px (pixels). Things should look a bit better. Keep arranging the words until you find something you like.

6. Save your file. ImageReady saves files in the Photoshop format. This means that files created in Photoshop can be imported with all of their layers and effects intact (we'll look into that a bit more in the next tutorial). Name your file navbar.psd.

7. Now, we need to add our other elements. We are going to place an EPS file in our document. Go to the FILE menu and choose PLACE. This also works a bit differently than in Photoshop. In the Place dialog, click the Choose button in the file area. Locate the swoosh.eps file in the ir0001-archive folder. Select it and click the OPEN button. You will then be taken back to the Place dialog. Click the OK button.

8. We are not done yet! Now, a Rasterize dialog appears. Keep the dimensions and make sure that the anti-aliasing and Constrain Proportions buttons are checked. Click the OK button to place the file (finally!).

9. Move the swoosh image until it wraps around the "it's" and "a" text objects as shown.

10. We've got a "logo" and title now. Next, we need a set of navigation buttons. Select the TYPE tool again. Set the font to Verdana and the size to 10 px. Set the anti-aliasing option to None. This will make our small text easier to read. Click in the upper right corner of the document. Type the word "Home".

11. Keeping the same type attributes, click at the lower center of the document. Type the names of the other links you plan to have for your site. (suggestions: Portfolio, Resume, Gallery, Bio, Links, and any others). A good, or rather - common, practice is to divide out your buttons (which is what this will ultimately become) by using a series of spaces and the | character. To keep things spaced, try adding four spaces and the | character between each word.

12. Now, copy the Swoosh.eps layer. Go to the EDIT menu and choose TRANSFORM > ROTATE 180. Move the copy so that it wraps around the Home object as shown.

13. Save the file. You are now ready to move to the next step.

14. Flatten your image (LAYER > Flatten Image). We are now going to Slice the image. This is a trick that started back when Image Maps were more difficult to implement. It's pretty easy to slice an image in ImageReady.

15. Choose the Slice tool (insert image). The first slice is done for you and includes the entire image. Note how the slice is labeled in the upper left corner of the slice. Use the slice tool to draw a square around the word objects at left ("it's", "a", and "Site"). Make sure you include that whole area. This will be your first slice (01). Now, select the blank area between the first slice and the next type object. It should be labeled "02". Select the top area with the home and swoosh objects. This will be the third slice. Now, slice up the remaining area, giving each text object its own slice. You should have the entire area sliced.

16. Open the Slice Palette. Use the Slice selection tool to select each slice and name it. Select the first slice and name it "title". Select the second slice and name it "blank".

Give the remaining slices names that match the text objects on them. These names will be part of the filename of the slice, so do not include spaces or odd characters. You can use the Underscore, dash, letters, and numbers. When you are done, save the file under a new name. Name it "navbar-sliced.psd".

17. Now, for the fun part. Go to the FILE menu and choose Save Optimized As… This will bring you to a save dialog that has a few more options that the normal save dialog. Notice that your filename now has the .html extension rather than the .psd extension. Create a new folder called ir0001. Make sure that the Save HTML file and the Save Images boxes are checked. You can click the settings buttons to the right of these options to get an idea of what ImageReady is going to do.

18. Click the SAVE button. When the files have saved, go to the finder and open the ir0001 folder. You will see the HTML file and a folder labeled "images". Open the "images" folder. All of the slices have been saved as separate images.

You can open the HTML file in your HTML editor and copy the navbar and paste it in your pages. ImageReady generates the Table code that holds your slices together. You can also link the sliced images to other HTML documents within your editor.

You can use this slicing method to break up larger images so that they appear to load faster, or even slice up an entire web page layout in Photoshop.

Partners Flash Templates Free Web Templates FREE professional web templates Website templates Free Web Templates Graphic Design Tutorial Guide Flash Templates Flash Templates and Web Templates