|
|
|
|
||||
Freehand Software and Training SolutionsSmart Designer, CoCUT, EuroVECTOR, Logos, Templates, Production Ready Digital Art and more |
© 2000 by Gary Priester. All Rights Reserved.
Step 1. Open FreeHand 8 or 9. (That was the hard part)
Change the units to Pixels by selecting Pixels from the drop down list on the bottom of the screen. All images for the web are measured in pixels and you want to use pixels for the most predictable results.
Step 2. Using the Rectangle Tool, construct a square 260 by 260 pixels. If the size is not exactly right, you can change it in the Object Inspector.
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 symbol.
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 ý with an accent. Select the ý, by dragging the text cursor over, it and from the Font Names drop down list in the Text Inspector, 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 separate symbols for the eye, house and envelope using the Webdings font in 72 points. The eye symbol is a capital N, the house is a capital H, and the envelope symbol is Alt 0153.
Arrange the symbols as shown. Add text below each symbol using 14 point VAG Rounded Bold or a similar font. Center the text under each symbol.
Step 3. Use the RGB colors shown. Or you can pick similar colors from the WEB palettes. (Window | Panels | Options | Color List | Web Safe Color Library). Given the amount of digging to get to the web safe colors and given how easy it is to mix colors in the Color Mixer, you might just want to mix the colors using the RGB colors shown. These are all non-dithering web safe colors that will display the same on all computer platforms.
Step 4. Copy the three symbols and triangle to the clipboard (Edit | Copy). Select the remaining text and symbols and group them (Modify | Group) and change the fill color to RGB 102, 102, 51. Move the group down and to the right about 5 points in each direction.
Step 5. Paste the symbols and triangle on top (Edit | Paste in Front).
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. Open the URL editor (Window | Xtras | URL Editor) Select the eye symbol, then press the URL Options button and select New… In the New URL dialog, key in IMAGES.HTM. 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. FreeHand 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. FreeHand will include everything on the page, even if it is invisible when we export the file.
Step 7. From the File pull down menu, select Publish as HTML. This opens the HTML Output dialog. You can proceed in one of two ways. If you don't feel at home with HTML select Wizard (Windows) and a series of menus will step you though the process. With FreeHand 9 you can now select Flash as an output type and FreeHand will export your image map as a Flash SWF file. (The other options are GIF, which would work fine with this image map), JPEG and PNG). If you choose this option, be sure to specify your URLs with their complete paths (for example http://www.myurl.com). In the past I was reluctant to use Flash as it was not supported by all browsers and an ominous warning window would appear asking if you wanted to download the Flash plug-in filter. But Macromedia tells me that 89.9% of browsers in use today support Flash. The benefits of Flash are an extremely small file size and the images are exported as a scalable vector objects which retain their smooth appearance even at high percentages of magnification.
Step 8. If you know a little about HTML select Setup… from the HTML Output dialog. For Vector art: and Images: select SWF. (If you have a bitmap background then select GIF or JPEG for the Images). Use the Browse button to specify a folder in which to export your file. Press OK to exit the settings. Once you are back in the HTML Output dialog you can select a browser in which to view your image map. This is a new feature with FreeHand 9. You default browser will show up in the drop down list. If you have Macromedia's Dreamweaver installed, it will also be listed in the drop down list.
Press Save As HTML and FreeHand will launch into motion and write the necessary script while launching your browser. If you need to test your links, make sure you are connected to the Internet.
And that's all there is to it. You can build upon this and create more complex image maps using these basic techniques.
Error processing SSI file
Copyright © 1995–2013 Unleashed Productions, Inc., All Rights Reserved.
