Microsoft Image Composer

Transcription

Image Composer 1.5
Creating Graphics for the Web
One of the keys to an effective Web site is its graphics. Microsoft Image Composer is a graphic creation and
editing program that allows individuals to create images for Web sites, CD-ROMs, videos, and other electronic
documents. 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 as
shapes, image files, text, and texture files. Image and text sprites can then be altered with any number of built-in
effects. Image Composer can be installed onto a computer system from Disc 2 of the stand-alone FrontPage
2000 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
Investigating
Microsoft Image Composer 1.5
.
When Microsoft Image Composer is opened, the composition area is your canvas for graphic creation. The
default composition properties are set at 420 x 275 pixels. Your image size can be altered by dragging the
dotted boundary lines that surround the composition. Located at the left edge of the Image Composer window is
the 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 Windows
taskbar, point to Programs, point to
Microsoft Image Composer, and then click
Microsoft Image Composer 1.5.
2.
At the Microsoft Image Composer window, click the Help menu, point to Learning Microsoft Image
Composer, 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 and
peruse 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 into
the CD-ROM drive. The Microsoft Image Composer 1.5 Setup Wizard will
automatically begin. Once Image Composer has finish installing, you will NOT have
to reboot your computer system.
Inserting Image Sprites
into the Composition Area
Microsoft Image Composer defines a sprite as an image object with shape and transparency. Once inserted into
the composition area, image sprites can be moved, resized, and formatted. Selected sprites have a bounding box
that borders the image with sizing handles. The upper-right corner of a sprite is the rotate handle, which is used
to rotate images in the composition. One of the benefits of such programs as Microsoft Image Composer is the
ability to work with multiple images in a composition. Images can be inserted into the composition area by
selecting 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 the
blkbrd.mic image file:
(C:)
Multimedia Files
Photos
Office
PhotoDisc
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 the
composition boundaries.
7.
Click the Insert menu and then click From File.
8.
Double-click each of the following folders to insert the toast.mic
image file:
(C:)
Multimedia Files
Photos
Food and Dining
PhotoDisc
9.
Resize the toast sprite to match the figure below.
10.
Using the Rotate handle at the upperright corner of the toast sprite, rotate
the image to match the figure to the
right.
11.
Click the Save button on the toolbar.
12.
Save the image on your diskette as
menu.
Creating
Text Sprites
Image text for Web graphics consists of page banner titles, headings, advertisements, image maps, and other
Web page elements. To insert text, first click the Text tool in the toolbox. Next, select the formatting
requirements for the text. Finally, key the text into the textbox. Later in this appendix you will apply clever
effects 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
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.
in the Toolbox, which is located on the left side of the page.
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 software
program to be used for Web graphics, print communications, and
presentations. PhotoDraw 2000 has excellent image manipulation effects
such as fills, edges, Web effects, and other special effects. Among the Web elements that PhotoDraw 2000 can
create are banners, buttons, GIF animations, image maps, mouse rollover effects, and even the 3-D image
rotation 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 at
http://www.microsoft.com/office/photodraw/photodrawtour.htm.
Applying Arts and Crafts Effects
to an Image Sprite
Having the ability to alter the appearance of an image gives a Web designer greater flexibility. To apply effects
to an image sprite, first click the image to select it. Next, click the Effects button in the toolbox. The Effects
categories 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 adjustments
shown 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 several
layers of colored paper. Cutout can also look like a linoleum block print, especially when applied to a
simple 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.
it.
Locate the Mosaic effect in the Effects tab and then select
11.
The Mosaic effect makes it appear that the sprite is made of
small, square tiles laid on a flat surface. The squares are
shadowed 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.
The Poster effect reduces the number of color shades in a
sprite and adds dark lines along its edges. Large, broad
areas have simple shading, while fine, dark detail is
distributed 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 the
monochrome imprint of a wooden or rubber stamp.
16.
Select a green color.
The effect outlines are based on the current color in the
Color Swatch.
17.
Click the OK button.
18.
Click the Undo button on the toolbar.
19.
Save the updated menu.mic image file.
Creating
Color Enhancement Effects
Color Enhancement effects change a sprite by altering its original colors. The Grayscale effect allows Web page
designers to alter color photos to black and white, or grayscale, for dramatic design effects. The Transparent
effect is commonly used to wash out an image for page or image backgrounds. Another popular color
enhancement 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.
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 background
images and textures for Web pages.
9.
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 of
the 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 different
colors to be applied to a gradient effect. Gradient effects have been very popular for both print and Web
document graphics over the past several years. Outline effects can be applied to give a border effect to a sprite
and also to provide distinction between the sprite and the background. Drop shadows give designers the ability
to 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.
4.
Select the Gradient Category.
5.
At the Effects dialog box with the Effects tab selected, select the Gradient Category.
6.
7.
Click on each of the Pick Color boxes and then apply the orange and yellow colors as shown in the
figure below.
8.
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.
13.
Change the Thickness to 2 and the Color to white.
14.
15.
Return to the Effects tab and then select the Drop Shadow Category.
16.
17.
Make the following adjustments to the Drop Shadow effect.
18.
19.
You may need to resize the text
sprite in order to fit all the
shadows within the
composition area.
20.
Save the updated sunshine.mic
image file to your diskette.
Investigating
Photographic Effects
In this topic you will explore several popular photographic effects that can be applied to create interesting
results.
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.
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 to
enhance 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 the
Film Grain effect.
9.
Apply the Negative effect.
10.
Click the Color Picker in the Toolbox and
then select a red color.
11.
Apply the Neon Glow effect.
Like the Tint effect, the Neon Glow effect
will give your image an interesting look
while maintaining a color scheme
requirement for your Web page.
12.
Save the updated man-phone.mic file to
your student diskette.
Investigating
Sketch and Surface Effects
Sketch effects give a sprite an artistic appearance, as if it were drawn using a variety of mediums such as
charcoal, chalk, colored pencil, marker, and pen. Surface effects give a sprite a texture that is typical of such
materials 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.
Angled Strokes - Sketch
Colored Pencil - Sketch
Crosshatch - Sketch
Fine Marker - Sketch
3.
Rough Pastels - Sketch
Chrome - Surface
Emboss - Surface
Plastic Wrap - Surface
Close Image Composer without saving any changes.
Working with the
Composition Properties
Image Composer makes it easy to adjust the composition properties of a canvas area. To adjust the composition
properties, simply drag the composition boundary guides to the appropriate height or width. As you drag the
mouse, the status bar at the bottom of the Image Composer window indicates the current height and width of the
composition.
PROJECT: You will adjust the composition properties to meet specific Web page requirements.
Steps
1.
2.
Drag the composition boundary guides until you have a composition area 500 pixels wide and 60 pixels
tall.
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.
tall.
6.
Create a banner ad graphic using the following components:
clip art from the Clip Art Gallery or from the Web
7.
Save the image onto your diskette as bannerad.mic.
Below is an example of a Web page banner created in Image Composer.
8.
tall.
9.
Create a Web page button using the following components:
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 as
images from file, clip art, shapes, and text. Sprites can be
brought to the front, sent to the back, brought forward, or sent
backward relative to other sprites on the canvas. To perform
these arrangements, select the sprite, click the Arrange button
on the toolbar, and then select the arrangement option.
Investigating
Saving for the Web
As you know, the graphic file format and the compression percentage applied to an image play a very important
role in reducing download time for browsers accessing your Web pages. These questions should be asked each
time you create an image for the Web: Should I save this file as a JPEG? GIF? What percentage should I
compress the image without loosing quality? Image Composer has an excellent feature that makes answering
these questions very easy. To save an image for the Web, select the Save for the Web command in the File
menu. This will initiate the Save for the Web Wizard. Step 2 of the wizard gives you not only file sizes and
download times for the various formats and compression percentages, but also provides a preview of what the
image will look like.
PROJECT: You will save images for the Web using the Save for the Web Wizard
Steps
1.
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 your
diskette 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 the
selection 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 the
GIF format only supports up to 256 colors. Images with few colors are best saved as GIF files, whereas
photographs 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.
Investigating
Microsoft GIF Animator
As you probably noticed when printing your J.L. Andrews and Associates home page, the banner ad manager
animation will not print the current frame. This may be fine in some cases. In other cases, however, the
animation might be an important component of the printed page. The Microsoft GIF Animator is a much better
solution for creating animation for the Web.
PROJECT: You will explore the features of Microsoft GIF Animator.
Steps
1.
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
6.
Locate and insert the helpyou.gif image into the Microsoft GIF Animator.
button on the toolbar.
Each inserted image will automatically be located in Frame #1. You will have to use the Move Down
and 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 animation
will loop, or repeat, continuously. There may be other instances
in which you want an animation to run once or repeat just a few
times. The more you work with animation, the more tricks you
will learn. After completing this and the next topic, you should
be able to locate banner advertisements on the Web and say, “I
can 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. Each
image can have a different duration. This is especially beneficial if there
is one image frame that you want displayed for an extended period. The
duration setting is set at 100ths of a second; therefore, the image to
display for one second must be entered as 100.
16.
Click the Preview button to view the animation.
17.
Click the Save As
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 Files
for a GIF Animation
GIF animations are found on literally thousands of pages on the World Wide Web. Most GIF animations on
professional Web sites serve as banner advertisements and attention-getters. While many pages have GIF
animations, too many include them just as decoration. This may be fun for a personal Web site, but professional
sites must use caution when adding movement on the page. Professional Web designers use movement to draw
attention to a particular area of the page. The last thing you want to do is distract the viewer. In order to utilize
the 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 as
a 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 banner
ads.
3.
Right-click on a GIF animated
banner ad and select the Save
Picture As command.
4.
Save the image onto your
diskette.
5.
Click the Start button, point to
Programs, point to Microsoft
Image Composer 1.5, and then
select the Microsoft GIF
Animator command.
You do not have to be in
Microsoft Image Composer to
open GIF Animator.
6.
Open the GIF animation file
you 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.
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 image
frame 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
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.

Microsoft Image Composer

Transcription

Similar documents

Scratch: Duck Shoot

read full review

SCRATCH FORTUNE

Wire Diagram

Zonare instructions - University of Florida

OTMARO RUIZ

Untitled - Brookstone

Mission College

Frogger Tutorial