FrontPage 98: Image Composer Part 2

Introduction

This document picks up where FrontPage 98: Image Composer Intro left off. You will learn to use some fun features in Image Composer such as WordArt, and you will also learn how to use some of the more complex palettes, some of which are particularly helpful when preparing digitized photos for the Web. You will also learn how to create a custom color palette and simple animations. This document assumes that you already have the skills taught in FrontPage 98: Image Composer Intro; that you can create webs and add images in FrontPage, HTML, or another web authoring program; and that you are comfortable working in Windows 9x as well as working with word-processing software (such as Microsoft Word).

Ready to Wear: Buttons and Other Web Graphics

You can add ready-made buttons to your Web page from Image Composerís assortment. Click Insert and then Button. A wizard steps you through the process of creating one or more buttons. To change a button later, either double-click on it or choose the Edit menu and then Button.

ClipArt for the Web

Image Composer shares the Clip Art files loaded with FrontPage and Microsoft Office. Depending on the version of those programs you are using, you should have some clips designed specifically for the Web. Select Clip Art from the Insert menu. Either search for ìWebî or scroll through the list of categories to find Web backgrounds, banners and buttons. You can manipulate these clips in Image Composer, or if you like them as they are, simply insert them right into FrontPage from its Insert menu.

Text With Pizzazz: WordArt

In the previous document, you learned how to create plain text sprites. You can also create text in various shapes and patterns with Word Art by selecting Word Art from Image Composerís Insert menu. The WordArt program opens on top of the Image Composer window. Type text in the window helpfully labeled ìYour text here.î Notice at the top of the window that the Word Art toolbar replaces the Image Composer toolbar. Be sure to try out the different options available on this toolbar; for example, you can use the drop-down list next to ìPlain Textî to make the text shape circular or wavy. Among the other options on the toolbar are buttons to control font and font size, add a pattern to the text, or change alignment, shading or shadows.

When you are ready to return to Image Composer, simply click in the Image Composer window. The piece of WordArt is a sprite, so you can change it like any other sprite, changing the color fill or even using the Effects palette. To make changes to the font size, however, you must use the WordArt program. Just double-click on the WordArt sprite to return to the WordArt window and make your changes. 

Inserting a Photo

Several of the tools you are about to use are good for manipulating photos, so you need to insert a photo into your Image Composer file. Select the Insert menu and try inserting a photo from a Photo CD, a file on your computer, or from the "photographs" category of Clip Art. If none of these options is available to you, you can download a photo from the Microsoft Clip Gallery page.

Downloading Photo Clip Art from Microsoft

To download a photo clip, select the Insert menu, then Clip Art , and then Clips Online. Internet Explorer starts. If your computer is not connected to the Internet, connect now. The Microsoft Clip Gallery page appears. From the option to view clips by type, select photos. Find a photo you like and click the download arrow, usually displayed beside its file size. Wait while the file is downloaded to your computer. Switch to the Image Composer window, select the clip, and insert it. The clips you download from the Microsoft site are added to the "Downloaded Clips" category for later use.
Please note: Internet Explorer must be your default browser or these instructions will not work. You can download Internet Explorer from Microsoftís home page at http://www.microsoft.com. To make IE your default browser, open the Windows Control Panel from My Computer, select Internet Options, and then the Programs tab, then select Reset Web Settings.

When You Have Too Much of a Good Thing: Cropping Pictures

Have you ever taken a photo and thought it might be better if an inch or so were cut off one side or the other? In Image Composer, you can delete rectangular portions of your image with the cropping tool. Insert a photo and click the Arrange button in the toolbox. In the top right corner, find the cropping tool and click it. Notice that the selection handles on the corners and sides of the selected sprite have changed and now display blue cropping lines. To crop the picture, click and drag these cropping handles in toward the picture. Notice that cropping does not resize the image but instead eliminates part of it.

Copying or Erasing Selected Areas of Sprites: The Cutout Tool

Suppose that instead of cropping a rectangular section of a photo, you want to copy one person from that photo, or just that personís smile. To copy or erase a portion of a sprite, use the cutout palette, which has two tabs, the Cutout tab and the Select Color Region tab. Simple Cutouts: Cutout Tab You should have a photo in the Image Composer window. Click the cutout palette, which opens with the Cutout Tools tab in front. To select the area you want to copy or erase, draw a shape on the sprite with the rectangle, oval, curve or polygon tool. To simplify things, start by selecting a simple shape with the rectangle or oval. Next, either copy the selected area by selecting the Cut out button or Erase it by selecting the Erase button. To see what you have accomplished, click and drag the selection to the side of the original.

To work on the original again, select the pointer arrow from the top of the toolbox and then select the sprite. Then select the Cutout palette again. You might try using the curve or polygon tool, but keep this in mind: if you are selecting a complex shape, you may have better luck using the Select Color Region tab, which is explained below. Also, if you need help drawing with the four cutout tools, refer to the section on drawing shapes in the document FrontPage 98: Image Composer Intro (iid18).
ìThe selected sprites did not overlap, so the effect was rendered in the current color.î If you get this error message, it means one sprite was selected, and you tried to cut out or erase from a second sprite. The result is a colored shape, rather than the cutout or erasure you planned. To avoid this problem, use the pointer arrow as necessary to select the correct sprite before selecting the cutout selection tool.

Selecting Areas of Photos and Other Complex Images: Select Color Region Tab

If you want to copy or erase a figure in a photograph or in another complex image, try using the Select Color Region tab in the Cutout palette.

Start with a new photo sprite in the Image Composer window. Open the Cutout palette and select the Select Color Region tab. You can use the Select Color Region tool to select pixels in the photo that are of the same or a similar color and then copy (ìcutoutî) or erase these pixels from the photo.

Try copying a portion of the photo first. With the photo selected, click the Select Color Region button. Click a part of the photo you want to copy. The area you select and pixels that are related to it in color are filled with the color in the color swatch. Donít worryóthis helps identify other regions you may want to include. Click on those regions. If you add a color region by mistake, find the Selection box and click Delete, then click Redo Last. Before selecting other regions, be sure to select Add again.

When the color in the color swatch covers everything you want, click the Cut Out button. Now click and drag the selection away from the photo. The original photo is intact and the area you copied has a transparent background. Now try erasing a portion of the original photo, following the same steps but selecting Erase.

Modifying the Amount Selected
Use the Search Mode options to select more or less of the sprite with each click. To search for matching pixels over more of the spriteís territory, select Global; to search a smaller area, select Local.
Modifying Selection Based on Hue, Whiteness, or Blackness
Use the sliders for Hue, Whiteness, and Blackness to modify which colors in the sprite are selected based on how well they match the particular pixel you select when you click on the sprite. For each characteristic, when the slider is all the way to the left, the program usually selects fewer pixels because it searches for a close match; when the slider is all the way to the right, more pixels are usually selected, because the program searches for pixels that are less similar to the pixels you selected.
Ghostly Cutouts
Use the Edge slider to blur (Soft) or sharpen (Hard) the edges of the cutout. Steel your nerve before proceeding: softened cutouts look rather ghostly.
Donít Forget to Crop
Cropping images before using the cutout tool can be helpful.

Touching Up Images with the Pen or Paintbrush

The paint palette can be helpful when you need to touch up photos, drawings, or other complex sprites. The major difference between the paint palette and, for example, the effects or cutout palette, is that you can do finer work with it, even selecting individual pixels, rather than selecting large sections of the sprite.

Start with a new photo in the workspace and click the paint palette button. In the top left corner of the paint palette is an assortment of painting tools. You can use the paintbrush, airbrush or pencil to simulate painting with a brush or airbrush, or drawing with a pencil, all in the color shown in the color swatch. Click on one of these three tools and then click and drag on the photo.

You can also adjust the size of the paint tools using the brush slider on the right side of the paint palette window. You can even paint one pixel at a time. Set the brush slider to 1 and use the Zoom tool on the standard toolbar to increase magnification to 600%. Now draw with the pencil, adding individual colored pixels to the photo. As you can imagine, this technique is helpful when, for example, you need to fill in some areas of a photo you cut out of a larger image. When you are done, zoom out and increase the size of the brush, either by using the brush slider, or by selecting a brush size and shape from the brush selection grid.

Erasing Parts of a Sprite

The eraser works like the pencil tool, except that it makes pixels more or less transparent, based on the setting of the opacity slider. Try using it to erase just a few pixels. Select the eraser and use the brush 100. Zoom in on the photo, magnifying your view by 600%. Click on a pixel and watch it disappear. Experiment with the eraser as you like, but when you are done, select a larger brush size and zoom out again. 

Painting One Sprite on Top of Another: Transfer Tool

You can use the Transfer paint tool to transfer all or part of one sprite onto another, but you have to know a few tricks to make it work. To try it out, start with a photo and a colored rectangle. The aim is to transfer part of the photo onto the rectangle.

Now, this is the key: before the transfer tool is selected, you must select the ìtargetî or ìdestinationî sprite. You are going to transfer the photo to the rectangle, so the rectangle is the target of the transfer. Click the rectangle to select it. Now open the paint palette and select the transfer tool button. Notice that the pointer arrow is shaped like a paintbrush with a small square attached and the transfer symbol is hovering next to it. Click on an interesting area of the photo with this. You have just loaded the brush with the photo, as though the photo were your can of paint; the area you selected will be the first area ìpaintedî on the rectangle.

Notice now that the corner and side handles of the rectangle have tiny pictures of paintbrushes, which identify the rectangle as your target. (If you donít see the tiny paintbrushes, start the process over, following the instructions carefully.) Now, click in the middle of the rectangle. The first part of the photo you selected is transferred. Click over and over on the rectangle until you have transferred all of the photo that fits.

If you prefer, the photo itself can be your target. Simply select it first, and then select the transfer tool. When youíre satisfied, you can delete the photo and rectangle and insert fresh ones before moving on.
Tip: Be sure also to try the Transfer Texture tool, discussed later in this document.

Stamping Part of One Image onto Another

You can stamp part of an image onto another using the rubber stamp tool. To see how this works, start with a clean workspace with a new photo and colored rectangle. We'll then stamp a portion of the photo onto the rectangle.

The rectangle is the target of the stamp, and the rule is that you need to select the target first. Your stamp is the size and shape of the selected paintbrush. To get a good idea of how the stamp works, select a large brush from the paintbrush grid. The pointer arrow now looks like a paintbrush with the rubber stamp symbol just to the right of it. Click on an interesting area of the photo. You have just loaded the stamp with ìinkî (the portion of the image you selected). To stamp, click different parts of the rectangle as many times as you like. When you finish working with the rubber stamp, you can delete the photo and the rectangle so youíll have a clean slate to begin learning about another tool.

Smearing and Other Fun Ways to Make a (More or Less Artistic) Mess

You can use various tools in the paint palette to smear, distort, and otherwise have fun with a sprite. To learn about how the different options work, zoom in on a colorful photo, magnifying it by 200-400%. Click the smear button and click and drag over a section of the photo. Does this bring back memories of finger-painting? Here is one thing you could never do in finger-painting: click Undo. Now, to make it easier for you to compare the smear tool to other tools, try making all your strokes in one direction. (Make sure the continuous stroke button is also selected.)

Pan or scroll to another section of photo, and try the impressionist tool. Again, move to another section, and try the mesa, vortex, and spoke inversion tools. Zoom out again to admire your work.

More Help with the Paint Palette

Remember, an easy way to keep learning about the paint palette is to select the Help button in the standard toolbar and then click on a button in the palette itself.

Texture Transfer

With the texture transfer palette, you can copy many aspects of one sprite to another. To find out how the texture transfer palette works, start with a photo and draw a 100% opaque, filled circle smaller than the photo. Then click on the Texture Transfer palette button in the toolbar. Various options are modeled by the helpful parrot you saw first in the Effects palette (see FrontPage 98: Image Composer Intro [iid18]).

Two Critical Points: Overlapping Sprites and Order of Sprite Selection

To use the texture transfer palette, you must work with two (or more) overlapping sprites. It doesn't matter which sprite is on top, but it's easier to select a smaller sprite when it is on top of a bigger sprite rather than hidden behind it.

The other key to using this palette is the order of sprite selection, which the opposite of the selection order you learned for the paint palette. First, select the source, that is, the sprite from which you are transferring. Then, Ctrl-click on the target, the sprite (or sprites) to which you are transferring.
Tip: If you are confused about which sprite will transfer its goodies to the other, look at the handles on the corners and sides of the sprites. Solid color or black handles indicate the source of the transfer.

Transfer Shape

Start with the last option in the tools palette, Transfer Shape. To try it out, transfer the photo to the circle. Drag the circle on top of the photo. Now select the source of the transfer (the photo). Next, select the target by Ctrl-clicking on the circle. Notice that the photoís corner and size handles are a solid color, indicating that it is the source of the transfer, while the circleís handles are clear. Click the Transfer Shape option and then click Apply. To see what has happened, first deselect everything by clicking on a blank space in the window. Then click and drag one sprite out of the way so you can see the other. The circle is, in a sense, decorated with a portion of the photo. Undo the transfer, and then try transferring the circle to the photo.

With this tool, only opaque areas of the sprite are transferred to only opaque areas of the second sprite. The Transfer All tool transfers both transparent and opaque pixels to the target sprite; unfortunately, you may not be able to tell the difference using the circle and photo.

Glue

To see how the glue tool differs from the transfer shape tool, start with a fresh photo and circle, making sure they overlap. Click the circle. Notice that the sprite is made up of the circle, which is opaque, and the area around it, which is transparent. Keep this in mind as you use the glue option.

The photo is the source and the circle is the target, so select them in that order by Ctrl-clicking. Click Glue and then click Apply. Deselect everything by clicking on a blank space in the window. Then click and drag one sprite out of the way so you can see the other. Where once you had a circle, you now have a rectangle. What happened? The glue option transfers opaque pixels from one sprite to both opaque pixels and transparent pixels of another sprite. The photo has covered both the circle (opaque) and the area around the circle (transparent). Undo the transfer, and then try gluing the circle onto the photo.

Transfer Texture vs. Transfer Paint

With the Texture Transfer palette, you transfer part or all of a sprite in one fell swoop. On the other hand, with the paint paletteís transfer tool and rubber stamp, you transfer bit by bit through painting or stamping. To be efficient, then, you may want to use the Transfer Texture palette when you know you want to transfer as much of a sprite as possible to another sprite.

Cutting Out Shapes: Snip, Snip, Snip

Try using the snip tool to take a circular bite out of the photo. Overlap the circle and photo. The circle is the source, so select it first. Ctrl-click on the photo, select Snip from the palette, and then Apply. Move the circle out of the way, and a newly transparent spot appears on the photo. An astute detective will guess that the circle did it. Now, undo the change so that you can continue learning about texture transfer.

Tile: Not Just for Bathrooms Anymore

Use the tile tool to paste one sprite on another repeatedly. To try out tiling, use a small circle and a photo. The circle is your source, so select it first, then Ctrl-click on the photo. Select Tile and then Apply. The photo is tiled with circles. To continue learning about texture transfer, select Undo.

Mapping

With mapping, you can transfer individual aspects of one sprite to another as follows: To try out the various mapping options, map a circle on a rectangle four times, leaving the transfers side by side so you can compare the options. Draw the circle, and then draw a different colored rectangle large enough to line up four of the circles on it. Use the circle as your source and the rectangle as your target. Drag the circle onto the left side of the rectangle. Select the circle first, then Ctrl-click on the rectangle. Click the mapping option you want to try, and then click Apply.

To see the results, move the circle over to the right on the rectangle. Then try another mapping option. If you get very interested, try using different colored circles, using the HSV color model in the color picker window to modify their hue, saturation, and value, and also try drawing circles of varying opacity.

Custom Color Palettes

In the first document, you learned how to create gif files with transparent backgrounds so that your Web pages can show behind the image. You can modify the way colors display in transparent gifs by using a custom color palette. A custom color palette can also help minimize the ìhaloî that may appear around a gif when you place it on a Web page and may also make your image look less grainy.

Creating a Custom Color Palette

To create a custom palette:
  1. Double-click the color swatch button below the toolbox on the left side of the window. The Color Picker window appears.
  2. Click the Custom Palette tab to bring it forward.
  3. Click New. The New Color Palette window appears.
  4. Type a name for your palette. The palette size should be 256 and the Dither By option should be set to Error Diffusion. Click OK.
  5. In the Color Picker window, click Generate Colors. The Generate Colors window appears.


    6. Generating colors for your palette is a little like having access to an enormous paint store; you make selections that put dabs of ìpaintî on your palette. You have 256 empty spots on the palette and several different ìrampsî (color collections) from which to generate colors. Different ramps have different numbers of colors available. The best option for choosing a ramp is to experiment, but here is one way to get you started.
     
     

  6. Leave twenty free spots in your palette by selecting 236 from the Number of Colors list. For now, choose Balanced Ramp from the Generate from drop-down list. Click Add.
  7. Now select System Colors from the ìGenerate fromî drop-down list. 20 colors will fill the rest of your palette. Click Add.
  8. Click Close in the Generate Colors window, and then OK your changes in the color picker window.

Previewing the Custom Color Palette

To preview the image using the custom color palette, click the arrow next to the currently selected color format in the toolbar at the top of the window. If you do not like the palette, try creating a different one. Remember, if you have a transparent background, you cannot use True Color, even though it may look like the best choice.

Applying the Custom Color Palette

To apply your custom palette, pick it when you save the file as a gif. Select the custom color palette in the very last window that appears in the file saving process, the same window where you name the file and choose its location.

Getting More Help with Toolbox Palettes

When you click on some palettes with the Help button, the information you get is may be far too general to be of much use. Better online help is available in the program by choosing Microsoft Image Composer Help from the Help menu, then selecting the Contents tab. Open the Reference section and double-click one of the palettes listed. Then double-click on one of the options in question.

For more details, examples, and helpful suggestions about custom color palettes, visit http://www.pioneeris.net/ashton/IC/customize.htm. This page is produced by a private individual who is especially adept at Image Composer.

Get Animated with Gif Animator

You may be surprised at how easily you can animate a graphic using Gif Animator, a program that comes with Image Composer. The animated gif files you create are made up of a series of still images, each of which is slightly different from the next. When shown one after another at a relatively fast speed, you have animation.
Please note: Your animations will be more like a cartoon flipbook than like Snow White and the Seven Dwarfs; that is, they'll be fun and eye-catching but not destined to win the Academy Award. 

Creating the animation involves first creating a set of slightly different sprites in Image Composer and then putting them together in a kind of simple film loop in GIFAnimator. You can then save the animation file and insert it on a Web page. When you preview or view the page in a browser, the animation plays.
Tip: Overly complex animations take a long time to load and may annoy visitors to your page.

 

Animation Project

In Image Composer, insert a piece of clip art from the animal category, preferably just a profile of an animalís head. This example uses the horseís head, but you can substitute your beast of preference.

Copy and paste the animalís profile three times so that you end up with four heads. Put the four heads in a not too perfect line, zooming out so you can see them all at once. You are going to rotate each horseís head slightly, with the exception of the first one in the line. Near the top of the toolbox, find and select the Arrange button. Click the second horseís head, and in the right side of the Arrange palette, find the Rotation setting, where you can rotate by degrees. Change the setting to 15 and click Apply. Click the third horseís head. Change the setting to 30 and click Apply. Rotate the last head by 45 degrees. Now, imagine the four sprites moving by quickly, one after the other. The horseís head gradually moves upward.

To make the horseís head appear to come back down again, you can add more heads. Duplicate the third head and add it to the end of the line. Then duplicate the second head and move it to the end of the line. Finally, duplicate the first head andóyou guessed itómove it to the end of the line.

Putting the Animation Together in GIF Animator

To animate your neighing horse (or nodding dog) start Gif Animator by selecting it from the Image Composer program group in the Start menu.

On the left side of the Gif Animator window is a set of frames. To animate your horse, you need to drag each sprite into position in a corresponding animation frame. First, check the box next to Main Dialogue Window Always on Top. Then, click in the Image Composer window. The Gif Animator window stays put so you can see the frames. Drag the first horseís head from Image Composer into the first frame in the Animator window. When your pointer arrow shows the copy symbol (a tiny white box with a plus sign), drop the sprite into the frame. Continue with the other sprites. After dropping the third sprite in its frame, scroll down in Gif Animator so you can get to the next empty frame. Continue with the other heads until you have added them all to the animation.

Notice that in the right side of the GIF Animator window, three tabs appear. To adjust the number of times the animation runs or ìloopsî before it stops, click the Animation tab and select the check box next to Looping. It is usually not a good idea to select Repeat Forever; forever is an awfully long time on a Web page. Instead, try setting the Repeat Count to 4 or 5.

Now select the Image tab, where you need to adjust two options for all the images in the animation. Click the Select All button in the toolbar before making your choices. The UndrawMethod specifies what happens to each sprite when the next one appears. Select Restore Background so that the Web page background will be restored after each head makes its appearance . The area around the figure should be transparent, if possible, so select the checkbox next to Transparency, and then double-click on the filled rectangle next to it. Select the color of the image background from the color palette that displays.
 
 

To preview the animation, click the Preview button in the toolbar at the top of the GIF Animator window. The preview window has control buttons just like a VCR; to see the show, click the Play button.

Save the file by choosing Save from the File menu. Take note of the file location, and then open a page in FrontPage. Insert the image as you normally do any other. The animation will not runóyet. To see the animation after inserting the image, preview or view the page in a browser .