Previous Page TOC Next Page



15


Creating and Editing Graphics with the Microsoft Image Composer


by Tom Hayes

Overview


Microsoft Image Composer is a Microsoft Office 97 compatible product that comes with the FrontPage Bonus Pack. With Image Composer, you can create and edit graphic compositions for use on your Web site. Many of the basic features (such as toolboxes, palettes, and menus) are similar to those of your favorite paint program.

Some additional features of Image Composer include


Working with Sprites


Image Composer uses an image object model known as a sprite. A sprite is a single image object composed of opaque and transparent pixels defined by a bounding box. A sprite's shape is determined by the opaque pixels. Each time an image is inserted or created, it automatically becomes a sprite. You can use the Insert | From File menus to quickly insert sprites from your compact disc.

In some image-editing programs, images must be manipulated through layers. Rather than working with a single image in a composition, sprites allow you to move and manipulate images independently. To move sprites, simply use your mouse and drag the image to a new location. Figure 15.1 shows a sprite and its bounding box. The guitar is set for 100 percent opacity, but the area outside the guitar extending to the bounding box is transparent. Both areas together compose a sprite.

Figure 15.1. An Image Composer sprite with its bounding box.

An Image Composer composition has three dimensions: height, width, and depth. The height and width aspects are obvious and easily recognizable. However, when a new sprite is added to a composition, it is placed on the top of a depth order, or stack. As you move and manipulate sprites, they retain their stack order unless you change it. The following steps show you how to change a sprite's stack order:

  1. Select the Arrange tool palette.
  2. Click the sprite you want to move within the stack.
  3. In the Order tools, select the appropriate arrow to move the position of the current sprite either forward or backward in the stack order.

The Image Composer Interface


The Image Composer interface includes the toolbox, menus, and a workspace to design compositions. The toolbox contains a set of tools that you can use to manipulate sprites and is located to the left. The Composition Guide appears as a white square in the middle of the screen and provides a reference space and a background color when creating a composition. The status bar appears at the bottom of the window. Figure 15.2 shows the Image Composer interface.

Figure 15.2. The Image Composer interface.

The workspace is the area of Image Composer you use to create and modify a composition and includes the Composition Guide and all the area outside the Composition Guide. You can take advantage of this design space to place finished or experimental sprites in temporary storage in any part of the workspace. Use the horizontal and vertical scroll bars to move around the workspace.

When you save an Image Composer composition, you save everything in the workspace, including the sprites that are not on the Composition Guide. However, the area within the Composition Guide is the only area of the workspace that is included when you save a composition to certain file formats, such as GIF.

The Image Composer Toolbox


Related tasks for manipulating sprites are organized on tool palettes. You can activate a tool palette by clicking a tool on the toolbox or selecting the tool from the Tools menu. Table 15.1 lists each tool palette as you view the toolbox from top to bottom and describes its features.

Table 15.1. Description of Image Composer tool palettes.

Tool Palette Description
Arrange The Arrange tool palette contains tools to arrange, resize, rotate, flip, and change the stack order of sprites. Tools to crop or extend the bounding box of a sprite are also included.
Paint Use this tool palette to apply various paint effects, such as airbrushing a color or painting a color with a brush you choose from dozens of sizes and shapes.
Text The Text tool palette contains tools to create text sprites using scaleable fonts that are installed on your computer.
Shapes This tool palette is used to create new sprites in geometric shapes or in free-form shapes created with the Spline tool. You can also use the color lift tool to create a new sprite of a single color from an existing sprite or to extract the texture of a sprite.
Patterns and Fills With this tool palette, you can add color gradient ramps and predefined patterns and transfer pixels from one sprite to another.
Warps and Filters These tools add warps, warp transforms, outlines, filters, and color enhancements to sprites.
Art Effects You can add fine art effects, including paint, sketch, graphic, exotic, and utility effects, with this tool palette.
Color Tuning Adjust the contrast, brightness, hue, and saturation of colors and make adjustments to highlights and shadows with this tool palette.
Color Picker Although the Color Picker is not actually a tool palette, the Color Picker dialog box provides access to true color and custom palettes. You can activate the Color Picker by clicking the Color Swatch located at the bottom of the Toolbox (refer to Figure 15.2).

When you start Image Composer, the Arrange tool palette is in view. Tool palettes remain in view until you select a different tool palette or close the palette. Because the toolboxes are quite large and can obscure a lot of the workspace, you can customize the tool palette behavior so that the current tool palette follows the movement of the pointer as follows:

To customize tool palettes to follow pointer movement, perform the following steps:

  1. Select the Tools | Options menu and click the Tool Palettes tab.
  2. Activate the AutoHide Tool Palette checkbox.
  3. Click OK.

As you change tool palettes, the reference points on the bounding box of the currently selected sprite also change. If you have the Arrange palette displayed, the bounding box has resize handles (shown in Figure 15.1) at three of the four corners and on each side. The upper-right corner contains a handle for rotating the sprite. Because Image Composer inserts new sprites into the upper-left corner of the workspace window, some of the handles of the sprites you inserted might not be visible. You must move the sprite to see all the handles.

Managing Files and Images


Now that you've successfully manipulated your composition using the various tool palettes, it's time to save your composition. Image Composer supports many widely used graphical file formats, including Windows BMP, CompuServe GIF, JPEG, Image Composer MIC, Adobe Photoshop 3.0 PSD, Targa TGA, and TIFF. This section covers some basics on how to get files in and out of Image Composer.

Working with Supported File Types


Before you save your composition, it might be helpful to understand some of the differences between the various file formats. Table 15.2 outlines some of those differences.

Table 15.2. Image Composer supported file formats.

File Type Description
BMP BMP (Bitmap)is the standard Windows raster image file format.
GIF GIF (Graphics Interchange Format) was originally created by CompuServe to decrease file transfer times for its information services. GIF files use a compression algorithm that is referred to as lossy. Lossy means that unnecessary information is discarded when the file is compressed so that the decompressed file is not quite identical to the original file. For the most part, however, you are not able to tell the difference.
JPEG JPEG (Joint Photographic Experts Group) is another common online file format that uses a compression algorithm that is lossy. Microsoft Image Composer stores a JPEG file in True Color RGB format only. When you save an Image Composer composition in JPEG format, the Compression options become active. You can adjust the Amount slider to determine the compression ratio you want. However, because the JPEG format is lossy, higher compression ratios result in greater losses in image quality when the image is reopened.
MIC MIC is the Microsoft Image Composer file format. Files saved in this format retain sprites contained outside the Composition Guide so that you can continue to work on your composition.
PSD PSD is the Adobe Photoshop 3.0 image format. Sprites in a PSD file are converted and stored as Photoshop layers in Image Composer. True Color is the only option available from the Color Format list.
TGA Images saved in the TGA (Targa) format in Microsoft Image Composer are stored as a single sprite in the True Color color format only.
TIFF Tagged-Image Format Files use a high-quality compression algorithm called LZW, which removes redundant pixel patterns to decrease the size of the file without losing image quality. In Microsoft Image Composer, TIFFs are stored as a single sprite.

Saving your file in one of the formats in Table 15.2 is accomplished by following the next few steps:

  1. Click the sprite you want to save.
  2. Select the File | Save As menus to display the Save As dialog box shown in Figure 15.3.

    Figure 15.3. Saving a composition.

  3. In the Save In list, choose the drive location and folder where you want to save the file.
  4. From the Save As Type list, select a file type. Various options for controlling the file type are available or dimmed on the bottom of the dialog box depending on the type of file you choose.
  5. Click Save.

Using Image Composer with FrontPage


One of the nice things about Image Composer is its Office 97 compatibility and integration with FrontPage. You can create new Web images in FrontPage 97 using Microsoft Image Composer. When you send the image to FrontPage, the individual sprites in your composition are flattened into a single-image GIF file.

To use Image Composer from FrontPage, complete the following:

  1. In FrontPage Editor, open the Web page you want to add a new image to.
  2. Select the Tools | Show Image Editor or click the Show Image Editor button on the toolbar. This starts Image Composer and you can begin a new composition for your Web page.
  3. In Image Composer, use the tool palettes to manipulate your sprites and create a composition.
  4. After you finish your composition, click Send to FrontPage from the Image Composer File menu to send the file to FrontPage. If Send to FrontPage does not appear on the File menu, you need to open the FrontPage Explorer or open a Web.
  5. If you want to save the file in Image Composer format (.mic) and send it to FrontPage at some future time, you can click Save As from the Image Composer File menu and then enter a name for the file.
  6. On the File menu, click Exit and finish your work in FrontPage.

NOTE

If Image Composer does not start when you click Show Image Editor, you might need to set it as the default image editor in FrontPage. Select the Tools | Options menus and click the Configure Editors tab. Associate Image Composer with the various file formats by selecting a file type, clicking the Modify button, and entering the path to Image Composer.



The Sprite Catalog


Image Composer comes with more than 700 high-quality, royalty-free graphics organized by category that you can insert and edit on your Web site. There are both Web art samples (buttons, bullets, backgrounds, controls, and so on) and photo sprite samples (realistic objects). Because these samples occupy a great deal of disk space, it is recommended that you do not install the sprite samples when you install Image Composer. You can still insert sprites from the compact disc.

To browse thumbnail sketches of the sprite samples, simply select the Help | Sample Sprites Catalog menu.

Working with Plug-Ins


Plug-ins allow you to further manipulate and control sprites in addition to using the effects found on the Art Effects toolbar. Image Composer comes with an Impressionist plug-in that allows you to apply a cave-painting effect, a crayon stroke effect, a spatter effect, or a detailed, soft pencil effect. With the Impressionist plug-in, you can also

If you want to gain access to third-party plug-ins, such as Kai's Power Tools and KPT Convolver or Adobe Photoshop-compatible plug-in filters, you need to indicate the location of the plug-in software so Image Composer can find it.

To add additional plug-ins, complete the following:

  1. Create a directory and install the plug-in software according to the software manufacturer's specifications.
  2. Select the Tools | Options menu and click the Plug-Ins tab to display the Options dialog box shown in Figure 15.4.

    Figure 15.4. Installing additional plug-ins.

  3. Click Browse and select the path containing the plug-in software.
  4. Click OK.

The Plug-Ins menu should now contain menu items for the plug-ins you added.


NOTE

You can also add plug-ins by installing the plug-in files in the \Microsoft Image Composer\PlugIns directory, the default subdirectory where the IMPRESSIONIST plug-in is installed.



Summary


This chapter provided an introduction to Image Composer with a brief overview of its features and explained the concept of sprites. Although this chapter did not explore individual tool palettes, I discussed the various tools available and ways in which they can be used to manipulate sprites. Lastly, I investigated ways in which you can integrate Image Composer with FrontPage 97. For more information on designing your Web site, check out the following chapters:

Previous Page Page Top TOC Next Page