|
|
|
|
||||
Illustrator CS2 Software and TrainingPhotoshop Plug-Ins |
© 2000 by Gary Priester. All Rights Reserved.
Step 1. Open Illustrator. (That was the hard part)
Illustrator 8 does not recognize pixels as a unit of measurement. Illustrator 9, due out next month does. It's important to use Pixels when creating web graphics because browsers display images in pixel amounts. If an image's width or height is a fractional pixel amount, a distracting outline often appears. We'll use points for our units of measurement but pixels would be better.
Step 2. Click the screen with the Rectangle Tool, enter 195 for the height and 195 for the width in the Rectangle properties dialog. Press OK.
We will be using a triangle symbol from the Carta symbols font. The triangle symbol is not part of the standard character set, so we'll use the Alt key and the Numeric keyboard to fetch it. In Windows, the extended characters (other than the characters found on the keyboard) can be accessed using the following technique. Mac users can use Key Caps to find the proper keystroke combination.
Step 2a. Click the Text Tool on the screen. Make sure that Num Lock is enabled. It's just above the numbered keys on the numeric keyboard. Hold down the Alt key and on the numeric keyboard, key in 0253. This will produce a lowercase y with an accent. Select the y, by dragging the text cursor over it and from the Fonts drop down list, select Carta. The symbol should now change to a triangle. Change the size to 146 points.
Using the Text Tool, repeat the process to create the eye, house and envelope symbols using the Webdings font in 72 points. The eye symbol is the capital N, the house is a capital H, and the envelope symbol is Alt 0153.
Arrange the symbols as shown.
Step 3. Use the RGB colors shown. Or you can pick similar colors from the Netscape or Internet Explorer web safe color palettes. (Window | Swatch Libraries | Web)
Step 4. Copy the three symbols and triangle to the clipboard (Edit | Copy). We'll combine the remaining triangle and symbols into one shape that we can use as a drop shadow to add a little depth to our map. Select the symbols and triangle and select Convert to Outlines from the Type menu. Press the Combine: Unite button on the Pathfinder dialog to create one continuous shape. Change the fill as shown and move the welded shape down and to the right about 5 point in each direction.
Step 5. Paste the symbols and triangle on top (Edit | Paste in Front). Add text to identify the three functions. I have used 14 point VAG Rounded. If you don't have this font use something similar.
We now have all of the objects needed for our image map. Now we'll assign URLs (Universal Resource Locator) to each button and define our hot spots, which are the areas of the image that will activate the links.
Step 6. Select the eye symbol. In the Attributes dialog, key in IMAGES.HTM in the URL text entry window. Repeat this for the other two symbols. The house icon should be INDEX.HTM, and for the envelope key in MAILTO:userID@ISP.com. This will cause an e-mail window to open in the browser where your visitor can send you e-mail. Change the text userID@ISP.com to your e-mail address. The MAILTO: command is what opens the e-mail client.
All that remains is to export the image map. Illustrator will create the image for the image map, and create an HTML document containing the image map and hot spot information which you can either use as is, or copy and paste into your web creation software.
NOTE: Make sure the image map is the only thing on the page. As you know, Illustrator will include everything on the page, even if it is invisible when we export the file. I forgot about this and wound up with a huge file. Only then did I realize that Illustrator included a small piece of invisible detritus floating somewhere off the page. Once I found and deleted it, everything worked much better and the file was amazingly smaller.
Step 7a. From the File pull down menu, select Export. For the file type, select Gif 89a. The GIF 89a Options dialog will open. Make the following selections. As we have used Web Safe colors, select WEB for the Palette option. Check Transparent, if you want the background to be transparent. I have shown this option checked although there is no way in Illustrator 8 to designate a specific color transparent. As I plan to use my image map on a green background, the same color we used to fill the square, the Transparent option can be unchecked. The image will appear to float over the same colored background.
Select Anti-Alias to smooth the image and the text. Antialiasing creates intermediate-colored pixels that smooth the transition between two edges and creates cleaner-looking text. When you check the Imagemap option several more options become available including Client-Side (HTML) and Server-Side (MAP). Client-Side will work fine and will be available to almost all browsers except a few very early ones. Server-Side resides on your Internet Services Provider's server and requires an additional CGI script, and for all intents and purposes is unnecessary. Press OK and Illustrator will create the HTML document and the image map.
Find the HTML file in the folder where it was exported to, and double click to open the image map in your browser. Arrrrrg! Where did that ugly blue box come from? By default, any linked graphic has a blue outline to alert visitors that the image is linked to something. But we no longer need this reminder. Anybody who uses the web knows when the cursor changes from a pointer to a hand that there is something that can be clicked to go somewhere or do something.
So, how do we get rid of it? If you open the source code for the HTML document you will see a statement towards the end img src="AI-image map.gif" usemap="#AI-image-map" This will be enclosed in angle brackets < > between image map.gif and usemap insert border=0 with a space on either side. Save the file as pure text (.txt) with no formatting and when the image map is displayed the blue border will be invisible.
And that's all there is to it. You can build upon this and create more complex image maps using these basic techniques.
Copyright © 1995–2013 Unleashed Productions, Inc., All Rights Reserved.
