Image Composer 1.5Creating Graphics for the Web

One of the keys to an effective Web site is its graphics. Microsoft Image Composer is a graphic creation andediting program that allows individuals to create images for Web sites, CD-ROMs, videos, and other electronicdocuments. While more advanced graphic-editing software programs such as Microsoft PhotoDraw 2000 exist,this software application is an excellent tool for creating graphics. Users can utilize such image components asshapes, image files, text, and texture files. Image and text sprites can then be altered with any number of built-ineffects. Image Composer can be installed onto a computer system from Disc 2 of the stand-alone FrontPage2000 application. In this appendix you will learn the skills listed below.

Skills

� Investigate Microsoft Image Composer 1.5� Insert image sprites into the composition area� Create text sprites� Apply Arts and Crafts effects to an image sprite� Create Color Enhancement effects� Create gradients, outlines, and drop shadow effects� Investigate photographic effects� Investigate Sketch and Surface Effects� Work with the composition properties� Investigate saving for the Web� Investigate Microsoft GIF Animator� Create multiple image files for a GIF animation

InvestigatingMicrosoft Image Composer 1.5

.

When Microsoft Image Composer is opened, the composition area is your canvas for graphic creation. Thedefault composition properties are set at 420 x 275 pixels. Your image size can be altered by dragging thedotted boundary lines that surround the composition. Located at the left edge of the Image Composer window isthe Toolbox. Among the tools in the Toolbox are Shapes, Paint, Effects, Color Tuning, and Text.

PROJECT: You will take an introductory tour and tutorial of Microsoft Image Composer 1.5.

Steps

1. Click the Start button on the Windowstaskbar, point to Programs, point toMicrosoft Image Composer, and then clickMicrosoft Image Composer 1.5.

2. At the Microsoft Image Composer window, click the Help menu, point to Learning Microsoft ImageComposer, and then click Introduction to Microsoft Image Composer.

3. Read through each of the eight introductory pages.

4. On page 8 of the Introduction, click the Tutorial hyperlink. You may want to return to this window andperuse the other introductory topics.

5. Navigate through the tutorial using the navigation arrows in the Help window.

Take 2 - Installing Image Composer 1.5

To install Microsoft Image Composer 1.5, insert the FrontPage 2000 Disc 2 CD intothe CD-ROM drive. The Microsoft Image Composer 1.5 Setup Wizard willautomatically begin. Once Image Composer has finish installing, you will NOT haveto reboot your computer system.

Inserting Image Spritesinto the Composition Area

Microsoft Image Composer defines a sprite as an image object with shape and transparency. Once inserted intothe composition area, image sprites can be moved, resized, and formatted. Selected sprites have a bounding boxthat borders the image with sizing handles. The upper-right corner of a sprite is the rotate handle, which is usedto rotate images in the composition. One of the benefits of such programs as Microsoft Image Composer is theability to work with multiple images in a composition. Images can be inserted into the composition area byselecting From File in the Insert menu.

PROJECT: You will insert, resize, and rotate image sprites into the composition area.

Steps

1. Open Microsoft Image Composer 1.5.

2. Click the Insert menu and then click From File.

3. Double-click each of the following folders to insert theblkbrd.mic image file:

(C:)Multimedia FilesPhotosOfficeMicrosoft Image ComposerPhotoDisc

4. Select the blkbrd.mic image file and then click the OK button.

5. Using the image sizing handles, resize the blackboard so that the entire image sprite fits within thecomposition boundaries.

7. Click the Insert menu and then click From File.

8. Double-click each of the following folders to insert the toast.micimage file:

(C:)Multimedia FilesPhotosFood and DiningMicrosoft Image ComposerPhotoDisc

9. Resize the toast sprite to match the figure below.

10. Using the Rotate handle at the upper-right corner of the toast sprite, rotatethe image to match the figure to theright.

11. Click the Save button on the toolbar.

12. Save the image on your diskette asmenu.

CreatingText Sprites

Image text for Web graphics consists of page banner titles, headings, advertisements, image maps, and otherWeb page elements. To insert text, first click the Text tool in the toolbox. Next, select the formattingrequirements for the text. Finally, key the text into the textbox. Later in this appendix you will apply clevereffects to your text.

PROJECT: You will insert and format text sprites into the composition area.

Steps

1. Open the menu.mic image file into Microsoft Image Composer.

2. Click the Text tool in the Toolbox, which is located on the left side of the page.

3. Select a “handwriting” font from your system, with a Bold style and a size of 25 pixels.

4. Click inside the Color box to open the Color Picker dialog box with the Custom Palette tab selected.

5. Select the white color box and then click OK.

6. Key CyberCafe Menu in the text box.

7. Using the Rotate handle, rotate and move the text sprite to match the figure below.

8. Create and arrange the following text sprite using 12 pt. and light blue type.

9. Save the updated menu.mic image file.

Take 2 – PhotoDraw 2000 Version 2

Microsoft PhotoDraw 2000 is a professional graphics editing softwareprogram to be used for Web graphics, print communications, andpresentations. PhotoDraw 2000 has excellent image manipulation effects

such as fills, edges, Web effects, and other special effects. Among the Web elements that PhotoDraw 2000 cancreate are banners, buttons, GIF animations, image maps, mouse rollover effects, and even the 3-D imagerotation effect that is common on many Web sites. A stand-alone version of PhotoDraw 2000 retails for around$100, but it is also included with the Microsoft Office 2000 Premium suite. View the PhotoDraw 2000 tour athttp://www.microsoft.com/office/photodraw/photodrawtour.htm.

Applying Arts and Crafts Effectsto an Image Sprite

Having the ability to alter the appearance of an image gives a Web designer greater flexibility. To apply effectsto an image sprite, first click the image to select it. Next, click the Effects button in the toolbox. The Effectscategories include Arts and Crafts, Color Enhancement, Gradient, Outlines, Photographic, Sketch, and Surface.Select the effect you want to apply, choose the details of the effect, and then click the Apply button.

PROJECT: You will apply various Arts and Crafts effects to the blackboard sprite.

Steps

1. Open the menu.mic image file into Microsoft Image Composer.

2. Select the blackboard image sprite.

3. Click the Effects button in the toolbox.

4. Select the Arts and Crafts option from the Category drop-down menu.

5. At the Effects dialog box with the Effects tab selected, select the Cutout effect.

6. Click the Details tab.

7. Make the effect adjustmentsshown at the right.

8. Click the Apply button.

The Cutout effect makes it appear that the sprite is composed of roughly cut pieces of colored paper.High-contrast sprites appear to be silhouetted, while colored images appear to be composed of severallayers of colored paper. Cutout can also look like a linoleum block print, especially when applied to asimple high-contrast sprite.

9. Click the Undo button on the toolbar.

Unlike FrontPage 2000, Image Composer allows you to undo only the last command. You must,therefore, be very attentive when creating graphics.

10. Locate the Mosaic effect in the Effects tab and then selectit.

11. Click the Apply button.

The Mosaic effect makes it appear that the sprite is made ofsmall, square tiles laid on a flat surface. The squares areshadowed to indicate varying degrees of depth.

10. Press Ctrl + Z on the keyboard to undo the Mosaic effect.

11. Locate and select the Poster effect.

12. Click the Apply button.

The Poster effect reduces the number of color shades in asprite and adds dark lines along its edges. Large, broadareas have simple shading, while fine, dark detail isdistributed throughout the sprite.

13. Press Ctrl + Z on the keyboard to undo the Poster effect.

14. Locate and select the Stamp effect.

15. Double-click the Color Swatch in the toolbox.

The Stamp effect creates a sprite that looks like themonochrome imprint of a wooden or rubber stamp.

16. Select a green color.

The effect outlines are based on the current color in theColor Swatch.

17. Click the OK button.

18. Click the Undo button on the toolbar.

19. Save the updated menu.mic image file.

CreatingColor Enhancement Effects

Color Enhancement effects change a sprite by altering its original colors. The Grayscale effect allows Web pagedesigners to alter color photos to black and white, or grayscale, for dramatic design effects. The Transparenteffect is commonly used to wash out an image for page or image backgrounds. Another popular colorenhancement is the Tint effect, which allows Web page designers to tint the image toward a particular color.

PROJECT: You will apply various Color Enhancement effects to the blackboard sprite.

Steps

1. Open the menu.mic image file from your student diskette.

2. Select the blackboard sprite.

3. Click the Effects button in the Toolbox.

4. Select the Color Enhancement Category.

5. Locate and select the Grayscale effect.

The Grayscale effect converts the sprite to shades of black and white.

6. Click the Apply button.

7. Press Ctrl + Z on the keyboard to undo the Grayscale effect.

8. Locate and select the Transparent effect.

The Transparent effect reduces the opacity of a sprite. This effect is perfect for creating backgroundimages and textures for Web pages.

9. Click the Apply button.

10. Press Ctrl + Z on the keyboard to undo the Transparent effect.

11. Click the Color Picker on the Toolbox.

12. Select a pink color.

13. Select the Tint effect and then click the Apply button.

The Tint effect allows Web designers to apply color to a sprite that matches the overall color scheme ofthe page or site.

14. Press Ctrl + Z on the keyboard to undo the Tint effect.

15. Close the menu.mic image file without saving any changes.

Creating Gradients, Outlines,and Drop Shadow Effects

The Gradient effect fills a sprite with a gradual blend of colors. Image Composer allows for up to four differentcolors to be applied to a gradient effect. Gradient effects have been very popular for both print and Webdocument graphics over the past several years. Outline effects can be applied to give a border effect to a spriteand also to provide distinction between the sprite and the background. Drop shadows give designers the abilityto create 3-D image and text effects in order to brighten up a typically static Web page.

PROJECT: You will enhance a banner graphic with gradient, outline, and drop shadow effects.

Steps

1. Open the sunshine.mic image file from the Image Composer Files folder.

2. Click the black circle sprite in the composition area.

3. Click the Effects button in the Toolbox.

4. Select the Gradient Category.

5. At the Effects dialog box with the Effects tab selected, select the Gradient Category.

6. Click the Details tab.

7. Click on each of the Pick Color boxes and then apply the orange and yellow colors as shown in thefigure below.

8. Click the Apply button.

9. Select the Sunshine Apartments text sprite.

10. In the Effects dialog box with the Effects tab selected, select the Outlines Category.

11. Select the Edge effect.

12. Click the Details tab.

13. Change the Thickness to 2 and the Color to white.

14. Click the Apply button.

15. Return to the Effects tab and then select the Drop Shadow Category.

16. Click the Details tab.

17. Make the following adjustments to the Drop Shadow effect.

18. Click the Apply button.

19. You may need to resize the textsprite in order to fit all theshadows within thecomposition area.

20. Save the updated sunshine.micimage file to your diskette.

InvestigatingPhotographic Effects

In this topic you will explore several popular photographic effects that can be applied to create interestingresults.

PROJECT: You will apply photographic effects to an image sprite.

Steps

1. Open the man-phone.mic file from the Image Composer Files folder.

2. Select the image sprite.

3. Click the Effects button in the Toolbox.

4. Select the Photographic option from the Category drop-down menu.

5. Apply the Blur effect.

Visit popular Web sites that have gif animated banner ads. Many banner ads utilize this effect toenhance the effect of motion or transition.

6. Press Ctrl + Z on the keyboard to undo the Blur effect.

7. Apply the Film Grain Effect.

8. Press Ctrl + Z on the keyboard to undo theFilm Grain effect.

9. Apply the Negative effect.

10. Click the Color Picker in the Toolbox andthen select a red color.

11. Apply the Neon Glow effect.

Like the Tint effect, the Neon Glow effectwill give your image an interesting lookwhile maintaining a color schemerequirement for your Web page.

12. Save the updated man-phone.mic file toyour student diskette.

InvestigatingSketch and Surface Effects

Sketch effects give a sprite an artistic appearance, as if it were drawn using a variety of mediums such ascharcoal, chalk, colored pencil, marker, and pen. Surface effects give a sprite a texture that is typical of suchmaterials as broken tile, chrome, cracked varnish, rough canvas, and even plastic wrap.

PROJECT: You will explore various sketch and surface effects.

Steps

1. Open the flowers.mic file from the Image Composer Files folder.

2. Using the following samples, apply the various effects to the flower sprite.

Colored Pencil - SketchAngled Strokes - Sketch

Crosshatch - Sketch Fine Marker - Sketch

3. Close Image Composer without saving any changes.

Rough Pastels - Sketch Chrome - Surface

Emboss - Surface Plastic Wrap - Surface

Working with theComposition Properties

Image Composer makes it easy to adjust the composition properties of a canvas area. To adjust the compositionproperties, simply drag the composition boundary guides to the appropriate height or width. As you drag themouse, the status bar at the bottom of the Image Composer window indicates the current height and width of thecomposition.

PROJECT: You will adjust the composition properties to meet specific Web page requirements.

Steps

1. Open Microsoft Image Composer 1.5.

2. Drag the composition boundary guides until you have a composition area 500 pixels wide and 60 pixelstall.

3. Create a Web page banner using the following components:

� clip art from the Clip Art Gallery or from the Web� formatted text with appropriate effects� formatted shapes such as an oval or rectangle with appropriate effects

4. Save the image onto your diskette as pagebanner.mic.

Below is an example of a Web page banner created in Image Composer.

5. Drag the composition boundary guides until you have a composition area 125 pixels wide and 100 pixelstall.

6. Create a banner ad graphic using the following components:

� clip art from the Clip Art Gallery or from the Web� formatted text with appropriate effects� formatted shapes such as an oval or rectangle with appropriate effects

7. Save the image onto your diskette as bannerad.mic.

Below is an example of a Web page banner created in Image Composer.

8. Drag the composition boundary guides until you have a composition area 120 pixels wide and 30 pixelstall.

9. Create a Web page button using the following components:

� formatted text with appropriate effects� formatted shapes such as an oval or rectangle with appropriate effects

10. Save the image onto your diskette as button.mic.

. Below is an example of a Web page button created in Image Composer.

Take 2 – Arranging Sprites in the Composition Area

Images for the Web often require multiple sprites, such asimages from file, clip art, shapes, and text. Sprites can bebrought to the front, sent to the back, brought forward, or sentbackward relative to other sprites on the canvas. To performthese arrangements, select the sprite, click the Arrange buttonon the toolbar, and then select the arrangement option.

InvestigatingSaving for the Web

As you know, the graphic file format and the compression percentage applied to an image play a very importantrole in reducing download time for browsers accessing your Web pages. These questions should be asked eachtime you create an image for the Web: Should I save this file as a JPEG? GIF? What percentage should Icompress the image without loosing quality? Image Composer has an excellent feature that makes answeringthese questions very easy. To save an image for the Web, select the Save for the Web command in the Filemenu. This will initiate the Save for the Web Wizard. Step 2 of the wizard gives you not only file sizes anddownload times for the various formats and compression percentages, but also provides a preview of what theimage will look like.

PROJECT: You will save images for the Web using the Save for the Web Wizard

Steps

1. Open Microsoft Image Composer 1.5.

2. Open the pagebanner.mic image file you created in the previous topic.

3. From the File menu, select the Save for the Web command.

4. Click the Next button on the Save for the Web Wizard dialog box.

5. Select the GIF option, as shown below.

View the other options and see the file sizes and how they correlate to the quality.

6. Click the Next button on the Save for the Web Wizard dialog box and then read the information.

7. Click the Save button on the Save for the Web Wizard dialog box and then save the image to yourdiskette as page banner.gif

8. Open the flowers.mic file from the Image Composer Files folder.

9. From the File menu, select the Save for the Web command.

10. Click the Next button on the Save for the Web Wizard dialog box three times until you reach theselection samples.

11. Select the JPEG (Best Quality) option, as shown below.

Notice that the JPEG option is not only better in quality but also smaller in file size. This is because theGIF format only supports up to 256 colors. Images with few colors are best saved as GIF files, whereasphotographs and colorful images are best saved in JPEG format.

12. Click the Next button on the Save for the Web Wizard dialog box.

13. Click the Save button on the Save for the Web Wizard dialog box.

14. Save the image to your diskette as flowers.jpg.

15. Close Microsoft Image Composer.

InvestigatingMicrosoft GIF Animator

As you probably noticed when printing your J.L. Andrews and Associates home page, the banner ad manageranimation will not print the current frame. This may be fine in some cases. In other cases, however, theanimation might be an important component of the printed page. The Microsoft GIF Animator is a much bettersolution for creating animation for the Web.

PROJECT: You will explore the features of Microsoft GIF Animator.

Steps

1. Open Microsoft Image Composer 1.5.

2. Click the Tools menu and then select Microsoft GIF Animator.

3. In the Microsoft GIF Animator window, click the Open button.

4. Open the letus.gif file from the jlandrewsimages folder.

5. Click the Insert button on the toolbar.

6. Locate and insert the helpyou.gif image into the Microsoft GIF Animator.

Each inserted image will automatically be located in Frame #1. You will have to use the Move Downand Move Up buttons on the toolbar to arrange the images in proper order.

7. With the Help You image located in Frame #1, click the Move Down button on the toolbar.

This will place the image in the appropriate order.

8. Insert the with.gif and yourneeds.gif image files into the GIF Animator.

9. Organize the gif images in the correct order (letus.gif, helpyou.gif, with.gif, yourneeds.gif).

10. Click the Animation tab.

11. Click inside the Looping checkbox.

12. Click inside the Repeat Forever check box.

Performing steps 11 and 12 will ensure that the GIF animationwill loop, or repeat, continuously. There may be other instancesin which you want an animation to run once or repeat just a fewtimes. The more you work with animation, the more tricks youwill learn. After completing this and the next topic, you shouldbe able to locate banner advertisements on the Web and say, “Ican do that.”

13. Click the Image tab.

14. Using the Shift key, click each frame to select all four images.

15. Change the Duration to 100.

The duration setting sets the time the selected image will show. Eachimage can have a different duration. This is especially beneficial if thereis one image frame that you want displayed for an extended period. Theduration setting is set at 100ths of a second; therefore, the image todisplay for one second must be entered as 100.

16. Click the Preview button to view the animation.

17. Click the Save As button on the toolbar.

18. Save the GIF animation as financialanimation.

19. Replace the banner ad manager in the J.L. Andrews FrontPage Web with this GIF animation file.

Creating Multiple Image Filesfor a GIF Animation

GIF animations are found on literally thousands of pages on the World Wide Web. Most GIF animations onprofessional Web sites serve as banner advertisements and attention-getters. While many pages have GIFanimations, too many include them just as decoration. This may be fun for a personal Web site, but professionalsites must use caution when adding movement on the page. Professional Web designers use movement to drawattention to a particular area of the page. The last thing you want to do is distract the viewer. In order to utilizethe Microsoft GIF Animator, your image file must be saved in the GIF file format!

PROJECT: You will create three image files to be inserted into Microsoft GIF Animator and saved asa GIF animation.

Steps

1. Open your preferred Web browser.

2. Access a Web site such as CNN.com, MSNBC.com, or ZDNet.com that has an assortment of bannerads.

3. Right-click on a GIF animatedbanner ad and select the SavePicture As command.

4. Save the image onto yourdiskette.

5. Click the Start button, point toPrograms, point to MicrosoftImage Composer 1.5, and thenselect the Microsoft GIFAnimator command.

You do not have to be inMicrosoft Image Composer toopen GIF Animator.

6. Open the GIF animation fileyou just saved from the Web.

7. View the Animation and Image settings of the frame images.

8. Click the Preview button.

9. Close the Preview window.

10. Open Microsoft Image Composer 1.5.

11. Resize the composition properties to match the GIF animation you saved from the Web.

12. Using clip art or images from the Clip Art Gallery or at ClipGallery Live Web site, recreate each imageframe to the best of your and Image Composer’s ability.

13. Using the Save for the Web Wizard, save each image separately in the GIF file format.

13. Return to Microsoft GIF Animator.

14. Create a new file.

15. Insert and organize the images into the proper sequence.

16. Apply the appropriate loop effects.

17. Apply the appropriate duration settings to each of the image frames.

18. Click the Save As button on the toolbar.

19. Save the GIF animation as practiceanimation.

20. Open Microsoft FrontPage 2000.

21. Insert your practiceanimation.gif file into a blank Page view document.

22. Click the Preview tab to view the animation.

23. Close Microsoft FrontPage 2000 without saving any changes.