Creating An Image Map Interface

• You will need an 18X18 square grid pattern overlay created in this tutorial. Download it, put it in your adobe/photoshop/presets/patterns/ directory.
• Install this pattern by clicking edit=> Preset manager. Select patterns up top and click load. Find your square grid pattern.

1. Create a canvas that is 400 wide by 400 high, 72 ppi, RGB transparent.

2. Insert a layer. Set your default colors by pressing your D key. Click Filter=>Render=>Clouds.

3. Click Filter=>Render=>Lens Flare. Set the lens flare to the following:

• 100% brightness'
• 50-300 mm

4. Click Filter=Distort=>Polar coordinates. Set the polar coordinates to Polar to Rectangular.

5. Click Edit=>Transform=>Flip Vertical.

6. Click Filter=Distort=>Polar coordinates. Set the polar coordinates to Rectangular to Polar.

7. Select your elliptical marquee set to fixed size of 400 wide by 400 high and select your globe.

• Click Select=> Inverse. Hit your backspace key.

• Click Select Deselect.
• Click image=> adjust=> Autolevels.
• Click image=> Adjust=> Invert.
• Click Image=>Adjust=> hue/Saturation

• Colorize
• hue= 106
• saturation=100
• lightness= -57

8. Insert a new layer. Use your rectangular marquee set to 110 wide by 400 high to select a central area of your image. 

Click Edit=> Fill. Set fill to Pattern, Select the square grid pattern.

9. Click Select=>deselect. Click Filter=>Distort=>Shear. Set the shear to wrap around. Place the points as in the diagram on the right.

10. Click Image=>Adjust=>Invert. Set the layer mode to luminosity with 15% opacity

11. Use the move tool to move the grid so the upper right curve sits on the upper right sphere edge. Link this layer to the sphere.

12. Duplicate this grid layer twice. Rotate and move the first copy so the upper right curve will sit  on the lower right edge of the sphere. Link this layer to the sphere and the original grid layer.

13. On the second copy of the grid layer click edit=> Transform=> Flip horizontal. Move this layer to cover the middle of the sphere. Link this layer to the other grid layers and the sphere. Click Layer=> Merge Linked.

14. Use the move tool with bounding boxed to resize the sphere with grids and to move it up into the corner so it is pleasing to the eye.

15. Click Image=>canvas size. Set width to 750 pixels with current selection on the left.

16. Turn the eye off on the sphere. Click back on the background layer. Insert a layer.

17. Select the pen tool. Click in the corners in this order:

• lower left
• upper right
• lower right
• lower left.

18. Use your Convert point tool to double click the lower left point and drag out until you see two handles. Adjust the handles to make a nice curve to the upper right.  Double click on the upper right point and drag out the handles. Adjust the handles to make a nice curve to the lower left.

19. Click on the paths palette. Right click on the path and select Set path as selection. Click back on the layers palette and insert a new layer. Click edit fill, set to white.

20. Click Select =>inverse. Fill with black. Turn your sphere layer on and highlight it. Set the mode to screen. Click the Add Layer mask button on the bottom of the layers panel

21. Add a new layer on top. Click Edit =>fill and set to black. Click Filter=>Render=>Lens Flare. Set the lens flare to

• brightness = 100%
• lens = 50-300 mm zoom

Set the layer to screen. Use your move tool to position the lens flare in the upper right corner of the black banner area.

22. Type in the Title of your website in the Top left of the page using the following settings:

• Arial
• Bold
• 48 Pt
• smooth
• Color = Hex #FE6363

.23. Right Click on the text layer and select Blending options.

Check Drop Shadow and set the following for drop shadow:

• mode = multiply
• opacity = 75%
• angle - 120
• Change the distance to 10 px.
• Spread =0
• size =5

Check Gradient overlay and set the following for gradient overlay:

• Blend mode=normal
• opacity = 41%
• gradient = copper
• Check Reverse
• style linear
• Check Align with layer
• angle =90
• scale = 145%

Check Stroke and make the following stroke settings:

• size =1
• position = outside
• blending = normal
• opacity =100%
• fill = color
• Color = hex #9B3939

24. Type in Each Menu item of your website right above the curve on the right, on separate layers using the following settings:

• Arial
• Bold
• 14 Pt
• smooth
• Color = WHITE

Menu items on our sample are as follows: About Us, Services, Portfolio, Contact, Home.

25. Use the Move tool to slightly rotate each menu item to fit the curve and set it right above the curve, in the black area. Space them evenly .

26. Click the button on the bottom of the tools palette to Switch to Image Ready.

27. Use the slice tool to Slice your image into 4 images as shown below. The banner should be abpout 100 pixels high. The border slice on left should be about 80-100 pixels on the left..

28. Label your slices on your slice panel. Banner, border, wedge, white1 and white2.

Image mapping

29. Select the rectangular image map tool from the tool bar. Place a rectangle around the About Us menu item and open the Image Map palette.

30. Name your link on the image map palette, and type in the URL, either relative or exact, that this menu item should point to. If the target is different from replacing your current page, then type that in the target field. Add your alternate text label for this link to the alt field.

40. Do the same (29 and 30) for the other menu items, making distinct names, and URLs that they point to.

Optimizing

41. Use your slice selection tool to select each slice one at a time, set the resolution your want on the optimize palette. For this Template, I set each slice that had the colors in them to JPG at 40%. I set the white areas to Gif at 2 colors.

42. Click to the 4 up tab for your image. On the upper right is the optimize settings we just set. lower left is lower res, lower right is even lower. check to make sure that images are still quality in the lower resolutions as you can select them here if you want to save at those resolutions. If you decide to stay with the jpg quality of 40, click on the upper right image so it is selected. Then click File=> Save optimized as. Save your template now. An HTML document will be created with your images placed inside an image folder where the html was saved.

your done!

You may want to edit this template in an html editor such as front page or dreamweaver. You will want to remove the white images from the table so you can type over them.