Mastering The Move and Alignment Tool

1. Open a new canvas by clicking

File=> New (ctrl N)

• width = 700
• height = 50
• resolution = 72
• mode = RGB
• contents = transparent

2. Use the rectangular marquee tool set to the following to select a rectangle area vertically centered on the image..

• New selection
• Feather = 0
• style = fixed size
• height = 32 pixels
• width = 700 pixels

3. Hit your D key to select your default colors. Using your paint bucket, fill the selection with black.

4. Insert a layer by clicking layer=> new layer called circle. Hit your X key to reverse the colors so white is foreground color. Use your elliptical marquee to select a circle that is a fixed size of 40 pixels by 40 pixels at about 10 pixels from the left edge and fill with white.

5. Right click on the circle layer and duplicate it 5 times so you have 6 circles on the following layers:

circle, circle copy, circle copy2, circle copy3, circle copy4, circle copy5

Click select=>deselect.

6. Select your move tool. With Circle Copy 5 layer active, move the circle on towards the right so that it is about 10 pixels from the right edge.

Click the link column on the layers panel next to the circle layers to link them.

7.  With your move tool selected, Click the Align Vertical Centers button on the move tool options bar. This will put that all at the same place vertically, say at 5 pixels from either edge. Since all the circles are the same size we could have chosen align Top or bottom also to get the same results.Different size circles or images would give difference results on these three options.

Then click the Distribute Horizontal Centers button. This will distribute all the linked circles across the distance so that that are evenly spaced from the farthest edges of the circles starting places. We could have chosen the other two horizontal distributions since the sizes are the same for these items.

8. Click the right hand arrow on the layers panel and select new layer set from linked. Name the set circles.

9. Select your Type tool set to Time New Roman, bold, 18 PT, smooth, Align Left, all capitol letters. Type in your first menu item. Each in new layers, type in your second, third, fourth and fifth links.

10. Set your first link text next to the first button, and your last link text next to the last link button. On the layers panel link all the text layers similar to what you did with the circles.

11. Select the move tool again. This time we will align the bottoms of the text if all the text is capitals, or the centers of the text if it contains Mixed case letters. Use the distribute left ledges to align all the left edges evenly spaced along the menu bar.

12. Click the right hand arrow on the layers panel and select New set from linked called link names. Open your circles layer set and click on the top circle layer. Select your style panel. If you don't see it, click the windows menu and select styles. Click on orange glass button style.

Right click on the circle layer you just applied the style to and select copy style. Right click on the circle and select paste layer style to linked.

13. Click on layer 1 with the black rectangle in it. Click on the Sun Faded Photo (image) style on the styles panel. Right click on the layer1 layer and select blending options. Check Bevel and emboss.

14. Select your link name layer set layer. Select your move tool, and use your arrow keys to nudge the text partway over the button if you want.

15. Jump to image ready by clicking the bottom of the tool bar or click file=> switch to=> image ready.

16. Select the Image Map panel. Select the rectangle image map tool. Use it to select your link1 text. Switch to the Circle Image map tool and Select the button to the left of the text. Then use your Image Map select tool to With your shift key held down, select both image map areas.

On the Image Map Panel, Type in your link name, the URL of the link, Select the target where you want the link to open up, and insert alt text to appear on link.mouse over.

Repeat the same for each link and button.

17. Set the optimize panel for the following:

• Gif
• Lossy = 0
• Perceptual
• Colors 64
• Diffusion
• Dither = 80%
• transparency checked
• Websnap 0 or up to 10.

18. Click file=> save optimized as. Make sure the type is set for HTML and Images.  The image will be placed as your filename in the images folder of the location you select. In this case on the right the image should be named linkbar.gif, the HTML will be placed in the same location as your images folder where your image is. The HTML will have the code required to run your Image map with this image.