Finishing the frames

Click on Frame 3 in the Frames panel. Move tabs 1 and 3 forward. Select tab 3 and choose Edit > Paste Attributes to change its color. Shift + select tab 3 and the folder rectangle and choose Modify > Combine > Union.

Frame 3 looks like this:

Click on Frame 4 in the Frames panel. Move tab 4 forward. Use the Paste Attributes technique to change its color. Shift + select tab 4 and the folder rectangle and choose Modify > Combine > Union.

Frame 4 looks like this:

Click on Frame 5 in the Frames panel. Move tab 5 forward. Change its color. Shift + select tab 5 and the folder rectangle and choose Modify > Combine > Union.

Frame 5 should look like this:

If you have more frames than that, you're on your own. :-P I think you get the idea, though.

Optimizing and Exporting

Step 1: Optimizing

Click on the Preview tab at the top of the canvas. Open the Optimize panel and choose GIF (which should already be selected by default). Use the WebSnap Adaptive setting.

32 colors will work well for this project. I've added a 30% dither to keep the Drop Shadow soft looking. If you want the background to be transparent, choose the Alpha setting. Alpha will prevent bits of the shadows from dropping out with the background color.

If you have used different colors than the ones I have, use your own judjment as to which of the two transparency settings, Index or Alpha, works best.

Step 2: Exporting

Choose File > Export. Since we'll be using the tabs to build a navagation system in Dreamweaver, we need to export the tab images without any HTML code and as separate image files. In the Export dialog box, use the Save in box to browse to the image folder for your site.

Once you've located the correct folder to save your images in, give them a File name. This base name will be applied to all of five frames of images, so be sure to choose a name that you can easily identify them by.

The files in my example are based on the name 'tabs.' When I look for them to follow along with the Tabbed Interface chapter of the Dreamweaver 4 Magic book, I'll be looking in my assets panel for files labled tab_f1.gif, tab_f2.gif, tab_f3.gif, etc. In case you hadn't guessed, the 'f' in the file name stands for Frame.

For Save as Type choose Frames to Files. Uncheck the Trim Images box and then click on the Save button. The images will be automagically optimized and exported to your image folder.

When the Export dialog window closes, choose File > Save as to save a copy of the original file in editable form. You never know when your client might change their mind about the colors.

If you would like to see one of the tab images in its natural setting, click here :-)

As always, have fun!

Back to top