You can use Microsoft Image Composer to create original images or to modify existing ones. The program is included with Microsoft FrontPage 98 and with the stand-alone version of FrontPage 2000 (but, oddly enough, does not come with the Office Premium suite, which does include FrontPage). Image Composer can also be purchased separately.This document introduces you to using Image Composer to create and modify images for the web. You will review the basic web file types and get oriented to the Image Composer window. You will learn some basics about working with images, as well as how to use some special effects, and how to save your file for the web. You will also learn how to create links on your image through ìimage mappingî in FrontPage 98.
You should already be familiar with creating webs and inserting images in FrontPage. For more information, see FrontPage 2000: Creating a Web Site . You should also be comfortable using Windows and word-processing software.
Please note: Neither FrontPage nor Image Composer is supported by OIT at UMBC. The information in this document is provided for your convenience, but further help for these programs is not available from the Help Desk. Other sources of help are discussed at the end of this document.
Install Image Composer on your computer using the FrontPage CD or separate Image Composer CD. The CD guides you through the installation process.
You can work with different image file types in Image Composer, from simple bitmap drawings to digitized photographs, but when you save an image for the web, the file is saved as either a ì.gifî (pronounced like ìgiftî with no final ìtî) or a ìjpgî (pronounced ìjay-pegî). These are the two most commonly used files on the web. Once you create the images, you can use them on web pages you create using an authoring program or HTML.How do you decide which web file type is best for your image? Jpegs are good for photographic images, which may have millions of different colors, while gifs are better for images that use fewer colors, such as simple line drawings or bold graphics. If you want your web page background to show through any transparent areas in the image, by the way, the file must be a gif. Image Composer helps you make these decisions, but for more information, visit http://officeupdate.microsoft.com/2000/articles/fpgfxfmt.htm.
You can start Image Composer several different ways:
The Image Composer window opens. The first time you start Image Composer, a ìwizardî introduces you to some of its features and offers you a tutorial, which you can access later through online Help. Your Workspace: The Composition Area and Drawing Board The white area in the middle of the Image Composer window is called the composition area; the grey area is the drawing board. You can create or change images in either area. The composition area is essentially your canvas, the space where your finished artwork takes shape and eventually is preserved for eternity (or a reasonable portion thereof). Think of the grey drawing board as a space to lay aside experimental bits that may be included in the composition later.
- Select Image Composer from the Programs folder in the Start menu
- Double click an image that displays the Image Composer logo
- In the FrontPage 98 Explorer window, select the Tools menu, and then Show Image Editor
You can resize the composition area by clicking and dragging one of its dotted borderlines. Notice that when you click on a dotted line, the right side of the status bar at the bottom of the window shows the size of the composition area in pixels (dots per inch of screen). You can also adjust the size of the composition area or change its color by selecting Composition Setup from the File menu.
Tip: Sizing a Background Image
In FrontPage themes, backgrounds are made up of repeatedly tiled images; the image itself is typically 116 pixels wide by 110 pixels high. If you want to create your own background, try making the composition area this size, and then size your image to match.
Toolbar
If you have worked with any other Microsoft programs, you no doubt recognize many of the buttons on the toolbar at the top of the Image Composer window. If you do not know what a button is, you can rest your pointer arrow on it to see its yellow label, just as you can with other Microsoft applications.
Help Button
To learn more about buttons on the toolbar, click the Help button and then click on the button in question; to close the Help window, simply click anywhere else in the Image Composer window. Remember that the Help button also works inside individual windows, which can be crucial when you do not understand an option in a window that lacks its own internal Help button.
The toolbox to the left of the drawing board has more buttons for working with images. Use the top button to turn on the pointer arrow after using other tools; as you probably know, you use the arrow to select and move pieces of your image.
The last button in the toolbox is the color-tuning button, which you can use to make fine adjustments to image coloring, but which is not discussed further in this document.
Clicking buttons in the toolbox brings up windows called ìpalettes,î so named presumably because, like a painterís palette, they provide many options from which you can choose .
Beneath the toolbox is the rectangular color swatch, which is discussed in more detail later.
Turning the Toolbar and Toolbox Off (or On)
As with other Microsoft programs, you can specify whether toolbars and other goodies display by choosing Toolbars from the View menu.
To continue your acquaintance with Image Composer, you can insert an image that someone else has created.
If you are working with FrontPage, you may not need to bring an image into Image Composer to use it on your web page; when you insert a compatible image into FrontPage, the program automatically converts it to a gif. You might bring an existing image into Image Composer, however, to change or combine it with other images. You can also use Image Composer to make an image file web-compatible or to reduce the size of the file by compressing it.
In Image Composer, select the Insert menu. You can insert different types of images, but get started by selecting From File. Then, navigate to the Image Composer tutorial folder, usually located in C:\Program Files\Microsoft Image Composer\Tutorial. Select daisy.gif. (If you do not find the tutorial folder, insert a clip art image instead. The clip art window guides you easily through the process.) The image appears in the top left corner of the drawing board.
Individual pictures you create or insert into Image Composer are called ìsprites.î The daisy you inserted is one sprite. A piece of clip art or shape you draw is yet another sprite. Each sprite can be manipulatedómoved, resized, copied, deleted or modifiedóindependently of other sprites. Sprites can also be grouped so that you can work with them together.Click on the sprite (the daisy). The sprite includes the area bounded by the box that surrounds it. That area and the sprite itself may be more or less transparent or opaque, hiding or exposing other sprites or, eventually, your web page background behind the sprite.
Select the sprite. Notice the arrows in its corners and sides. To rotate the sprite around its axis, click and drag the semi-circular arrow in the top right-hand corner. To resize the sprite, click and drag the arrows in the other corners or along the sides. To move the sprite, click and drag the sprite itself, rather than the arrows.
Tip: To move a sprite just a wee bit, select it, and then press one of the arrow keys on your keyboard. Copying or Duplicating a Sprite Whatís the difference between copying and duplicating a sprite? Location, location, location. If you copy and paste the sprite, the copy appears in the top left corner of the drawing board. If you instead duplicate the image, the duplicate appears on top and just to the right of the original.
You can copy the image just as you would copy text in a word-processor. One way to do that is to click on the image and then select the Copy command from the Edit menu, or the Copy button on the standard toolbar. Then select the Paste command from the Edit menu, or the Paste button on the standard toolbar.
Duplicating is even simpler: select the image, and then select Duplicate from the Edit menu.
To delete a sprite, click on it, and then press the Delete key on your keyboard.
Image Composer provides many options for changing views of the composition area, drawing board, and sprites.
To see more or less of a selected sprite, you can use the zoom button in the toolbox. Click the zoom button and a magnifying glass appears. To zoom in on a sprite, click on it with the magnifying glass; to zoom out again, Ctrl-click. When you are happy with the magnification, be sure to click the pointer arrow at the top of the toolbox or select another tool; otherwise each time you click you continue to zoom in or out.
Zooming can also help if you lose sight of a particular sprite or of the composition area itself. To locate the mislaid sprite or area, use the zoom control on the standard toolbar at the top of the window. First, select an option from the drop-down list to decrease the percent magnification, and then use the scroll bars at the left or bottom of the window to center the composition area in the window. Then, zoom in ( increase the percent magnification) as needed to begin working in a comfortable view again.
To adjust the position of the composition area in the window, you can use the pan button in the toolbox. Simply click on the pan button, and then click and drag the composition area or the drawing board to move it. Notice that any sprites move together with the composition area. As you may have noticed, panning is an alternative to using the scrollbars on the left and bottom of the window.
To draw rectangles, circles, and other shapes, click the shapes palette button. This opens the Shapes palette with its four drawing tools, the rectangle, oval, curve, and polygon.
To draw a rectangle or oval, click one of those two buttons and then click and drag in the Image Composer window. To complete the shape, click Create. To draw a square or circle, hold the Shift key down as you draw with the rectangle or oval button. Want a different line color or thickness around a rectangle, oval, square or circle? Stay tuned for a discussion about Effects, coming up later.
Drawing a curve or polygon is a little trickier. Click one of those two buttons, and then create one point of the shape by clicking in the Image Composer window. Each time you click you create another point in the shape. The points are connected by a line. Click the Create button to complete the shape.
Timing is important when making adjustments to your shapes; you can select some options in the window only before clicking the Create button, and some options only after you begin drawing but before clicking Create.
A sprite that is 100% opaque hides anything behind it, while other sprites can be seen through a sprite that is 50% opaque. Before you click Create, you can make a shape more or less opaque by adjusting the opacity slider next to the opacity\transparency symbol.
To blur the lines of the shape, use the edge slider (again, before clicking Create).
To draw a line, uncheck the Close box before selecting the curve or polygon. To draw a curve or polygon in which the two endpoints of the line connect, check the Close button before selecting the tool. If you want to fill a closed shape with the color shown in the color swatch, click the Fill button before you select the tool. If the Fill box is not checked, you can adjust the size of the line by using the slider next to the picture of the paintbrush, but only before you click Create.
Tip: If you cannot select the Close box before selecting the polygon curve tool, try reselecting the Shapes palette first. Select the pointer arrow at the top of the toolbox, and then select the Shapes palette again. Now you should be able to select the Close option you want before choosing the polygon or curve tool.
The three buttons labeled Edit curve or polygon can be fun and useful, but bewildering at first. After you start to draw and before you click Create, you can manipulate points on the figureís line using these three buttons. To move a point on the line, click the first button, and then click and drag one of the points on the line. To add points, click the second button (which has a plus sign), and then click on the line; you can also carefully click and drag to move points. To remove a point, click the third button (which has a minus sign), and then click the line; again, you can carefully click and drag points to move them with this tool. Be sure you notice which button is selected, or you may add or subtract points accidentally. Also remember that once you click Create, you cannot use these tools to adjust the drawing.
Image Composer has powerful tools you can use to adjust the colors and transparency of sprites. This document introduces one, the color picker. Under the toolbox on the left side of the Image Composer window is the rectangular color swatch that shows the current color fill--that is, the color that fills any new sprite you draw or that you can use to fill any existing sprite.
You can change this color by clicking on the swatch to bring up the color picker window. For now, make sure the True Color tab is selected. On the left side of the True Color tab is a large spectrum or matrix from which you can make your initial color choice, either by clicking a color, or by sliding the black arrows at the top, left, or side of the spectrum To the right of the large spectrum is a column that you can use to adjust how much black or white is in the color, again, either by clicking on the column itself or by using the arrow next to it.
In the top right corner of the window is a color swatch. The original fill color shows on the left side of the swatch; if you have selected a new color, it shows on the right. If you want to continue using the original color, simply click the button with the double-headed arrow next to the swatch.
You can also select a color using the color models, RGB (Red, Green, Blue) or HSV (Hue, Saturation, Value). These models are handy when you need to match a color to an exact specification. Simply select the model you want to use, and then type or select values for the three options. Notice that the color model automatically shows values for any color you pick.
Tip: Matching Colors Used in FrontPage Webs or Other Programs If you use your own background rather than a theme on a FrontPage web, you can match the color in Image Composer using RGB or HSV values. In FrontPage, select Background from the Format menu. Click the color button for the background, and then click More Colors. Click Custom to bring up the Color window. Click the background color, which may be in either the Basic or Custom colors shown on the left side of the window. On the right side, find the RGB or HSV value and make a note of it. In Image Composer, type this value in the color picker window. You can use this same technique with other programs as well as FrontPage.
When you have picked your color, click OK. The color you chose shows in the color swatch. Anything new you draw is the selected color, which you can also use to change a sprite color.
To fill a sprite with the color in the swatch, click the sprite, and then click the color fill button on the toolbar. The color fills the sprite.
One of the more fun tools in the toolbox is the Effects palette. Some of the effects are more striking on photographic images, and some on solid color images, so have both in your workspace before you begin experimenting.
Try working with just a rectangle you draw and the daisy sample file or another photographic image. Also make sure you are adept at using the Undo button; you can learn a lot by trying an effect, undoing it, and then trying another one. Please note that Image Composer does not have a "multiple undo" feature; that is, the Undo button undoes only the last action you took.
Click the Effects button. Notice that the Effects palette has two tabs, the Effects tab and the Details tab behind it. Notice also that on the right side of the Effects tab is a category list. Depending on which category you select, different options are modeled by a helpful parrot in the window. You can select an option and adjust it on the Details tab.
Select either the rectangle you drew or the daisy. Use the category list to select Outlines. Select Drop Shadow (the first parrot) and then click Apply. Admire your handiwork, but to erase it and try out other options, click Undo. Now click the Details tab.On the Details tab you can make adjustments to the angle of the shadow, its distance from the sprite, its color, and its opacity. Play with these options, changing and applying different ones, always remembering that the Undo button is your stalwart friend, even if it can only remember one thing (the last action you took). Also notice that if things get out of control, you can click the Default button to restore the options to their original state. You can then apply the default options.
Return to the Effects tab and select another category. Experiment with the different effects. Youíll notice that some effects, such as the paint, sketch, and photographic effects, work best on multi-colored sprites like the daisy. Also note that some options, such as the checkerboard pattern, use the color in the color swatch. When you begin to understand the basics of an effect, try making some adjustments on the Details tab.
You may want to include labels or other text on images. To add text, click the text button in the toolbox, then click in the composition box and start typing. When you finish typing the text, click outside the box that surrounds it. You can use the text palette to make adjustments to text appearance before or after creating it. Given your experience with word-processors, you should be familiar with most of the options in this palette, with one or two exceptions. Smoothing makes the edges of letters in large fonts appear less jagged. The opacity slider makes the text more or less transparent. You can change text color by double-clicking on the color button and using the color picker window. To edit it again, double-click on the letters.
A block of text is a sprite, so you can move it by clicking and dragging the box that surrounds it. Note that the resize handles change the box size, not the font size. To change the font size, use the text palette.
You can layer sprites by dragging one on top of another. Alternatively, select a sprite and then select an option from the Arrange menu. To send a sprite all the way to the back of the pile, select Send to Back; to bring it to the front, select Send to Front. To send a sprite behind one other sprite (or any sprites in the same layer), select Send Backward; to bring it forward one layer, select Bring Forward.
You can also use the Arrange menu to align sprites with one another, so that, for example, the tops of all sprites in a row line up. One note: the Undo command is not available after you align sprites, but you can redo alignments ìby handî or select another alignment option until you set things right. Click on a sprite and then Ctrl-click on any other sprites with which you want to align it. Select Align from the Arrange menu. Try aligning the Tops of the sprites, or select Touch Edges. You can combine alignment options to get sprites in just the position you want.
Eventually, when you save your file for the web, you have a chance to pick a color format for it, that is, a selection of colors or a palette. If a particular computer or file format cannot display or use a color in your original image, colors may be substituted from the color format or palette you select.
You can preview the image in different formats by selecting the following options from the Color Format list on the toolbar at the top of the Image Composer window:
- Web (Dithered): For gif files only. Dithering is one way colors can be approximated in gif files, which cannot use true color (see below). Use for gifs that have transparent areas, or which are not solid color graphics or line art. Also see ìMore About Transparency and Dithering .î
- Web (Solid): For gif files only. Use for gifs that are solid color graphics or line art.
- Grey Ramp: For gif files only. ìRampî translates roughly as ìpaletteî or color scheme. Use the grey ramp for black and white images.
- True Color: For jpeg files only. Millions of colors are used to display your image. This is the format shown when you start Image Composer.
A semi-transparent sprite acts like a colored piece of gauze when placed over another sprite, changing its appearance and color. Gif files, unlike jpegs, cannot have these transparent areas. Other than the background, every part of a gif must be either completely opaque or completely transparent. ìDitheringî is one way gifs can deal with transparent areas. Dithering usually produces a kind of speckling that approximates the effect of the transparent overlays. If the imageís background does not also need to be transparent, however, you probably do not need to use dithering, and can use a jpeg instead of a gif.
To minimize file size and the space taken up by the image on the web page, put the final image together in the composition area, leaving elements on the drawing board or deleting them as you please. Before saving your file, it is also a good idea to make the composition area just large enough to hold your final masterpiece.
Before saving an image for the web, save it as a Microsoft Image Composer file. With this file type, all your sprites are saved and maintain their independence so that you can manipulate them individually, which will not be true of the file you save for the web. In the web file copy, the different sprites are ìflattenedî into one image so you can no longer manipulate them independently. To save the file as an Image Composer file, simply choose Save from the File menu.
You can save the web image with Image Composerís help by selecting the option Save for the Web from the File menu. A ìwizardî guides you through a series of choices. Assuming that all the sprites you want to use are positioned in the composition area, select the option to save either selected sprite(s) only or all sprites in the composition area.Unless your sprites completely fill the composition area with no blank space, you now select a background option, indicating whether you want the web page background to show through transparent areas.
Option A: Let the web page background show through transparent areas
In this procedure, the image is saved as a gif.Now youíre ready to name and save the file. Skip the next section and go to ì Naming and Saving the File: The Final Steps î.
- Select Let the web page background show through and then click Next.
- Choose one of two options regarding your web page background:
- To specify the background color, select the Color button and use the color picker window toóyou guessed itópick the color of your pageís background.
- Select the option to indicate that your web page uses a tiled background, that is, another image that is repeatedly tiled to create the background. (If your web pages use FrontPage themes, choose this option.)
- Verify the options you have chosen. If necessary, go back to previous options, otherwise, click the Save button.
Option B: Fill transparent areas with a color
In this procedure, you save the file as either a gif or a jpeg. The composition area itself becomes part of the final, rectangular image, and has a background color you specify.Now youíre ready to name and save the file.
- Select Fill transparent areas with a color and then click Next.
- To specify the color of any transparent areas, select the Color button.
- Click Next and wait for Image Composer to build a set of previews for the image.
- Select the image file type from the previews listed. Be sure to scroll through the list of previews, noting the file size and download time as well as the image quality. You can use the drop-down list on the left of the window to specify the speed at which visitors might be connected to the Internet or other network. If your page is available on the World Wide Web, consider the slower modem speeds when making your choice.
- Verify the options you have chosen. If necessary, go back to previous options and make changes; otherwise, click the Save button.
Naming and Saving the File: The Final Steps
You have completed all the other steps provided by the wizard, and now you need to choose the location and name for the file. You may also need to make some adjustments based on whether your file is a gif or jpeg. For gifs, choose your color format (see the section on color formats). For jpegs the only color format is True Color. Other options are as follows:
Option File Type Description Transparent Color GIF The color of transparent areas in the image. Donít worryóthis color probably looks shocking, but it is invisible, after all (so why it has ìcolorî befuddles this reporter). The web page background shows through it. Threshold GIF Pixels in gif files must be either completely transparent or completely opaqueóthere is no in-between. The threshold set here is the level at which pixels in the image become one or the other. Recommendation: experiment. Compression JPEG Reduces the file size of jpegs. Amount JPEG Use to modify the percent file compression for jpegs.
When you go through the process of saving a file for the web, notice the title bar (the blue bar at the top of the program window.) The .mic file remains open, while the gif or jpeg you created is now closed. In the .mic file, you can continue to work with individual sprites, and any sprites on the drawing board are just where you left them. You can also open the new web file by choosing Open from the File menu, or you can go ahead and insert it on a web page just as you normally do any other image.
A manageable first project for Image Composer is to create a navigation bar or strip to provide links to other pages. You might use this bar if you decide not to use a FrontPage theme. Try creating a simple bar first, limiting yourself to three or four links on the bar. One way to create the bar is to draw a rectangle in one color, copy it a couple of times, and then fill the copies with different colors. Then move the rectangles into position next to each other in a line. Label each rectangle using the text tool or WordArt, and then save your composition for the web. Insert the bar on a web page youíre creating. Then, follow the instructions below to create links through ìimage-mapping.î
Image mapping refers to creating ìhotspotsî on an image that link to different web pages. You can create an image map easily in FrontPage. On a page you are editing, insert your new button bar or another image. Click on the image, and a drawing toolbar displays in the lower part of the Editor window. The image map buttons are in the left corner of the drawing toolbar.. To create a hotspot, select the square or circle button and click and drag to draw a shape on the image. Release the mouse and the Create Hyperlink window appears. Specify the URL for the link as you normally do, and press OK. Visitors to your page can click on the hotspot to visit the page you specified.
You can also use the polygon tool to draw a hotspot: click on the button, and then click on the image; each click of your mouse creates a connecting point of the polygon. To complete the figure, double-click. To create a text hotspot, click the text hotspot tool and type a word on the image. To highlight the hotspots so you can see them more easily in the Editor window, use the blue highlighting tool and click on the image. Click on the highlight button again to turn off the highlighting.
What about text-only browsers? When they come to the image map, the message ìusemapî displays. If the visitor happens to select the usemap message, a page appears that lists the links. To be more helpful, you can add an alternative text message that more clearly points text-only browsers to the links. Right-click on the image and select Image Properties. In the Text field, type a message such as ìHot Spotsî or ìRelated Pagesî and click OK.
Remember, the IT Response Center will not be able to help you with Image Composer, so here are some other sources of help.
You may not be aware of some of the Help options available in Image Composer itself. For example, the Help menu lists Common Tasks with which you may be struggling, as well as Keyboard Shortcuts that may help speed up your work. The Learning Image Composer option includes a helpful and in-depth tutorial that can serve as a review and expand your knowledge beyond what you learned in this document.
If you are connected to the Internet, you can access additional help by selecting Microsoft on the Web from the Image Composer Help menu. The options listed include a link to the Image Composer home page at http://www.microsoft.com/frontpage/imagecomposer/imagecomposer1.htm. This page includes links to the accessible and informative ìAsk Dr. MICî pages, as well as some resources that are more technical. It also provides links to the Image Composer newsgroup, where users submit questions, answers, and musings for each other to ponder.