Drawing Additional Map Elements

| ACG Home | Instructor Home | Class Home | list of tutorials |

As it stands, our map allows viewers to zoom in until they see a close-up view of our geographical location. We also want to have them zoom back and see where the Earth sits within the Solar System--just in case the Web ever reaches transplanetary dimensions. To complete the picture, we'll explore some of the drawing tools to create some new elements of our own:

• A backdrop box with a glowing Sun gradient.
• A starfield tiled pattern.
• A few ovals for orbits and planets.

After the picture is complete, we will need to prepare it for use on the Web:

• Use the Afterburner Xtra in FreeHand to export a compressed FHC file.
• Create a second HTML file for the web page that will contain the map.
  • It is generally recommended to avoid having multiple media elements requiring plug-ins on the same page, because this will increase memory requirements on the viewers' computers. Since our Web pages already contain an animation requiring the Shockwave for Director plugin, we'll put the map on a separate page.
• Add a line to our original HTML file, linking it to the new web page with the map.
• Place the new FHC and HTML files, and the old HTML file with the new edit, on the file server so they can be posted to the web server.

Resize and Reposition the Globe Within the Document

1. Launch the FreeHand application and re-open the map file you worked on in the previous session.
2. Using the Document Inspector (Window menu), position the document page near the center of the pasteboard. This will let the viewers roam further away from the Earth before hitting the edge of the Universe (which in this case is the edge of the pasteboard).
   • In the drawing, make sure that every element is at least partially within the edges of the page (the solid box with the drop shadow).
   • In the Doc Inspector, make sure the leftmost scale button (next to the Options menu) is pushed in--this allows you to preview the entire pasteboard in the box occupying the center of the Inspector.
   • Within the pasteboard preview, drag the small box representing your page so that it's halfway up the pasteboard. This will be the location of planet Earth within the entire picture.
   • Since the elements of your map overlapped the page, they too moved to the center of the pasteboard.
3. Still in the Document Inspector, resize the page. The size and contents of the document page determine what the browser will diaplay when the map is first loaded.
   • Make sure the measurement units (in the pop-up at the bottom of the document window) are set to 'Points'. The size of a typographical point roughly matches the size of screen pixels at the nominal resolution of 72 dpi.
   • In the Doc Inspector, choose Custom from the page size pop-up menu (below the pasteboard preview), press the horizontal format button, and enter 550 for the 'x' (width) and 350 for the 'y' (height) dimensions.
   • Unlike GIF and JPEG files, vector images do not take up more space (and download time) as they are scaled up. The size limit here is dictated by the resolution of the monitor that most users can be expected to have (640 x 480), minus the various title, scroll, button, and menu bars.
4. Scale all elements (if necessary), so that the picture of the entire world fits inside the resized page.
   • In the Layers panel (Window-->Panels-->Layers), unlock all the layers (a shortcut to do this is to option-click any of the padlock icons).
   • Edit-->Select-->All
   • Use the Scale tool (2nd from the bottom on the left half of the toolbox) with the Shift key held down to drag until all elements are proportionally sized to fit the page.
   • Lock all the layers.

Create New Elements Using Drawing Tools

1. Create a new layer for the outer space background.
   • In the Layers panel, use the 'New' command in the 'Options' pop-up to create a new layer.
   • Double-click the name of the new layer and enter the new name 'Space'. Press Enter.
   • Drag the name of the 'Space' layer down and release just below the 'World' layer.
   • Make sure that 'Space' is the only unlocked layer, and that it is the active layer (its name is highlighted).
2. Draw a box filling the entire pasteboard. Use a gradient fill to suggest the appearance of a glowing Sun.
   • Use the magnification pop-up menu (bottom-left of the document window) to zoom out all the way (6%).
   • Choose the Rectangle tool (2nd from the top on the left half of the toolbox) to click at one corner of the pasteboard (where the white background changes to gray in the document window) and drag to the opposite corner.
   • In the Fill Inspector (the middle tab at the top of the Inspector window), choose 'Gradient' from the top pop-up menu. Press the Radial gradient button (the one on the right, below the color pop-up). This should fill the box with a smooth gradation from white (at the center) to black (at the edge).
   • In the Color List panel (Window menu) find the white swatch box and Option-drag it to where you would like to position the Sun. This will set the center of the gradient.
   • In the Fill Inspector, drag the black swatch box next to the top of the color ramp and drag it down along the edge of the color ramp itself. When you release the mouse button, a second black swatch box will appear. Drag this second black box towards the white box at the bottom of the color ramp to adjust the size of the Sun.
   • For a sunnier look, use the Color Mixer panel (Window menu) to define a bright yellow color. then drag the resulting color sample to the Fill Inspector, creating a yellow swatch box next to the color ramp, between the black and the white boxes.
     • One way to mix a suitable yellow is to click on the 'CMYK' button at the top of the panel and drag all the sliders to the left, except the 'Y' slider which goes 3/4 of the way to the right.
3. Use a tiled fill in a copy of the backdrop box to create a star-studded background.
   • Create the unit cell (the basic building block) of a repeating pattern of stars.
     • Zoom in to where planet Earth is (View-->Fit To Page).
     • Double-click the Polygon tool (2nd from the top on the right half of the toolbox). In the dialog, choose 'Star' and drag the sliders to adjust the number and sharpness of the star points. Click 'OK' to close the dialog.
     • Drag in the drawing window to create a star shape. Judge the size by comparing it to the size of the Earth.
     • Switch from Preview to Keyline mode (pop-up at the bottom of the document window).
     • Use the Rectangle tool to draw a large box around the star. You can use the Object Inspector (the 1st tab at the top-left of the Inspector window) to enter a suitably large number for 'w' (width) and 'h' (height), such as 1500 points.
     • Use the Polygon tool again to draw a handful of additional stars approximately equal in size to the first one, in random locations within the box. You could also vary the number and sharpness of each star's points.
     • Shift-click with the Pointer (arrow) tool to select all of the stars you drew. In the Fill Inspector, choose 'Basic' from the type pop-up and white from the color pop-up. In the Stroke Inspector (the 2nd tab at the top-left of the Inspector window), choose 'None' from the type pop-up.
     • Select the box, use the appropriate Inspectors too set both its fill and its stroke to 'None'.
     • Shift-select all of the stars and the box. Edit-->Cut to remove the selection from the drawing and place it in the Clipboard.
     • Switch back from Keyline to Preview mode.
   • Clone the backdrop box and fill the clone with stars.
     • Click on the black background to select the backdrop box.
     • Edit-->Clone. This creates a copy of the box aligned with the original.
     • In the Fill Inspector, choose 'Tiled' from the type pop-up and click the 'Paste In' button. To make the pattern of stars appear more random, you could try changing the 'Angle' field to 45.
4. Draw an oval to indicate Earth's orbit:
   • Choose the Ellipse tool (3rd from the top on the left half of the toolbox).
   • Option-click on the center of the Sun and drag out an oval that intersects the center of planet Earth.
   • In the Fill Inspector choose 'None' from the type pop-up. In the Stroke Inspector, choose 'Basic' from the type pop-up. Mix a middle gray in the Color Mixer and drag it to the color swatch in the Fill Inspector.
5. Draw the orbits of additional planets:
   • Make sure the oval for Earth's orbit is still selected, then Edit-->Clone.
   • Double-click the Scale tool (2nd from the bottom on the left half of the toolbox) to display the Transform panel with the scale tab selected.
   • Change the scale percentage: for the outer planets, use a number greater than 100. Use a number less than 100 for the inner planets. Click 'Apply'.
   • Repeat the process for additional orbits (make sure that the ovals don't get so large that they guide the viewers explrations towards the edge of the universe!)
6. Draw and shade the additional planets.
   • For each planet, Shift-Option-drag with the Ellipse tool to draw a circle straddling the planet's orbit.
   • In the Stroke Inspector, choose 'None' from the type pop-up menu.
   • In the Fill Inspector, set the type to 'Gradient', and choose the other settings as appropriate:
     • For a planet behind the sun, press the Radial gradient button and set the edge color (top swatch next to color ramp) to black, the bottom swatch to a light color. Adjust the center of the gradient as needed with the Locate Center control at the bottom of the Inspector.
     • Planets in front of the sun require a radial gradient with a light edge color and black in the center. To improve the appearance of the crescent, slide a second black swatch up and adjust the center of the gradient.
     • Planets alongside the sun work best with a straight gradient from a light color to black. Slide a second black swatch to adjust the fallof rate between day and night. Use the Angle of Taper dial to match the direction of the Sun.

Export the Picture as a Shockwave for FreeHand File

1. Xtras-->Afterburner-->Compress Document. A Save dialog appears.
2. Enter the filename (all lowercase) according to these rules:
   • Your last name
   • An underscore (Shift-hyphen)
   • Your first name's initial
   • A period
   • The FreeHand compressed extension: fhc
   • Sam Sample's file would be named sample_s.fhc
3. Optionally, click 'Locked' to protect your work from being reused by others (make sure you keep a copy of the original FreeHand file for yourself).
4. Find your folder on the desktop (the same where your other files are: HTML, GIF or JPEG, DCR). Click 'Save'.

Create a New HTML File for the Web Page Bearing the Map

1. Find SimpleText on your computer's hard drive and launch it.
2. In the untitled document which appears, create the basic framework of a generic HTML document. Type the following HTML tags, each on a separate line terminated by a return:
   • <HTML>
   • <HEAD>
   • </HEAD>
   • <BODY>
   • </BODY>
   • </HTML>
3. Press return after the <HEAD> line to insert a blank line. On the blank line enter the TITLE tags and the name you want to see in the browser window. Sam Sample typed this:
   • <TITLE>Sam Sample's Place in the Universe</TITLE>
4. Add a blank line between the two 'BODY' lines and enter the tag to call up the map picture:
   • <EMBED SRC="sample_s.fhc" HEIGHT=370 WIDTH=550 TOOLBAR="Bottom">
   • Make sure to replace sample_s.fhc with the name of your FHC file.
5. File-->Save. Enter the filename (all lowercase) according to these rules:
   • Your last name
   • An underscore (Shift-hyphen)
   • Your first name's initial
   • An underscore (Shift-hyphen)
   • map
   • A period
   • The HTML extension: html
   • Sam Sample's file would be named sample_s_map.html

Additional Info:

• The Art Computer Graphics program of Fullerton College offers a class covering both FreeHand and Illustrator, ACG112 Electronic Illustration. Find it in the class schedule.