MS FrontPage Tutorial 

Quick Image Editing

 

FrontPage provides some built-in tools for doing very basic manipulation of your graphics. If you click on an image, you will notice that another toolbar appears on your screen, usually along the bottom of the editor. This is the Image Toolbar. Following are descriptions of the most useful functions on this toolbar.

Remember -- at any time you can hit Ctrl-Z to UNDO.

Add text to an image

   The button with an A lets you add text to an image. This is especially useful for adding text to blank buttons, such as those available on the UO/E Web Support site. You can customize a plain image to say whatever you need.

To add text to an image:

  1. Use the Insert Image procedure to place the image on your page.
  2. Click once on the image so that "handles" (small black squares) appear at the corners of the image. The Image Toolbar should be visible now.
  3. On the Image Toolbar, click the A button.
  4. Type the text you want on the image. It will not let you exceed the size of the original image
  5. To change the font, size or color of the text, highlight the text then use functions on the Formatting Toolbar.
  6. When done, click somewhere else in the page to finish editing the graphic.

If you hit Enter, it may ask you to enter a hyperlink address. This will just link the text spot to an address. Do not use this unless you are creating an Imagemap.

Tips: use high contrast colors and a clean font (a san serif font is usually best) to make your buttons readable.

When you save your page, the image will be saved again with the text on it. This alters the original image, so be sure you have a backup copy in case you don't like it.

Transparency

  This tool will make one color in an image transparent so that the background color of the page shows through. This is useful for making a background around an icon disappear.

However, only .GIF format files can have transparent colors. If you make a color transparent, the image will be re-saved as .GIF format.

To make an image transparent:

  1. Click once on the image to select it (so the handles appear)
  2. Click the transparency tool on the Image Toolbar
  3. Click the pointer on the color in the image that you want to turn transparent. You will see the result right away.
Important! Please do not turn any part of the UO/E logos transparent.

Because of the way images make curves smooth, some images with transparent elements will appear "fuzzy" around the edges. This is because the color transition from one color to another was graduated -- i.e. not just black and white, but black to gray to white. Transparency only effects one single color, not an area of mixed color. If the original image was a .JPEG file with lots of subtle color, you probably will not like the result of adding transparency to it.

If your original file was a .GIF, this will overwrite it, so be sure to have a backup copy.

 Crop

  The crop tool lets you trim an image to the size you want. This is especially useful if you have a photo or graphic with excess background space. You can trim it away until you have just what you want.

To use the crop tool:

  1. Select the image by clicking on it once (so you see the handles)
  2. Click the Crop tool on the Image Toolbar
    Another set of handles will appear on the graphic, these will have hollow squares at the corners.
  3. Resize the cropping rectangle by dragging the handles to the desired positions.
  4. Hit enter
  5. Click somewhere outside the image to complete

Rotate/Flip

  These icons will cause your image to rotate on the page or flip on the either the vertical or horizontal axis.

Adjust contrast, brightness

  These icons will allow you to adjust the contrast or brightness in an image. This is useful for making minor adjustments to photos.

Increasing contrast makes the dark colors darker and light colors lighter. Increasing the brightness adds more light to the entire image.

Bevel and Resample

   These two functions are very different, but they have one thing in common -- they don't work very well.

Both of these functions are better done in an image editing program like Image Composer, Adobe PhotoShop, Corel PhotoPaint, or PaintShop Pro.

The bevel tool adds a beveled edge to your image, but it does not look as good as if it were done in a real image editing program.

The Resample tool lets you resize your image, then saves it at that size. This is a good thing to do; however, FrontPage doesn't do a very good job of it. You will get much better results if you do this in Image Composer.

See http://outreach.missouri.edu/webteam/fpt/13a-fp.html for examples of beveled images.

Image Maps

An image map is a single image on a Web page that has two or more "hotspots" that are hyperlinks to other pages. A good image map will give users visual cues about what they will find behind each link. A geographical map of counties or regions is an ideal candidate for an image map.

Image maps used to be a complicated endeavor, but they are very easy to make in FrontPage.

  1. Place the image on your Web page just as you would any other image.
  2. Use either the rectangle, circle or polygon tool to select a region on your image to be the first hotspot. Use the tool that most closely resembles the shape of the hotspot area.
  3. When you release the mouse button on the circle or rectangle tool, or when you return to your beginning point with the polygon tool, the "Create a Hyperlink" screen pops up. Fill in the hyperlink information for that hotspot, just as if it were a hyperlink from any other text or image.
  4. Repeat until all hotspots are linked.
  5. Use the arrow tool (leftmost icon on the Image Toolbar) to adjust the location of your hotspot lines, if needed.
  6. Right-click on the image and bring up the Image Properties. Fill in the "default hyperlink" line with the file name of the page you are working on. This tells the browser that if the user clicks outside of a defined hotspot area, it won't do anything. If you don't fill this section in, the user may get an error message if they click outside your defined hotspots.

Previous | Home | Next

University Outreach and Extension Kate Akers, kate@oseda.missouri.edu
Webmaster, University Outreach and Extension
Last modified: 08/27/02