Industrial Centre The Hong Kong Polytechnic University

Microsoft Image Composer 1.5

Simon C.S. Hui Kevin H.K. Yip

Creating graphic for web page using Microsoft Image Composer 1.5

2

Creating graphic for web page using

Microsoft Image Composer 1.5

Background : Image Composer makes it easy to create images for on-screen delivery to web sites, video, CD-ROM and more Features :

• Resize and rotate image object freely • Transparency supported • 4 easy steps for making a professional look graphic • Applying effect easily • All parameters available at a glance in a floating Tool Window • Import Gif, Jpg, Bmp, Dib, Tga, Png, Psd • Layering feature

Creating graphic for web page using Microsoft Image Composer 1.5

3

Contents

1. Introduction to Image Composer 2. Interface and features 3. Selection tool 4. Arrange tool 5. Cutout tool 6. Text tool 7. Shape tool 8. Paint tool 9. Effect tool 10. Texture transfer tool 11. Zoom, Pan and Color tools 12. Button wizard

Creating graphic for web page using Microsoft Image Composer 1.5

4

1. Introduction to Image Composer Microsoft Image Composer is an application for creating compositions for display on Web sites, CD-ROMs, games, or other on-screen destinations. Use existing images in a wide variety of formats or create new art. Image Composer offers a combination of powerful tools, a huge workspace, and sample images to help anyone produce professional-looking images. Image composer is a bouns pack bundle with the FrontPage 2000 and Visual Interdev. You can apply effects easily, view the results, and then modify or undo those effects to achieve the result you seek. Some of the features are listed below.

• Variety file format Supported You can use Image Composer to work with a wide variety of popular file formats, including TIFF (.tif), CompuServe GIF (.gif), Portable Network Graphics (.png), Targa (.tga), JPEG (.jpg), Adobe Photoshop (.psd), and more. For scanned images, Image Composer supports the TWAIN interface. • Popular plug-in sets. Image Composer includes the Impressionist plug-in with dozens of effects and filters, and supports the use of popular plug-ins that adhere to the Adobe Photoshop Plug-In Interface standard. • Wizards for creating buttons and for saving files Creating buttons takes just a few mouse clicks with the Button Wizard. Choose from a variety of shapes, colors, and textures. Save compositions for Web sites by using the Save for the Web wizard.

Creating graphic for web page using Microsoft Image Composer 1.5

5

Interface and features Menu bar

Almost All Microsoft products come with a standard menu bar, we can explore the functions provides by this Image Composer from this bar. Some of the “hot” command can be easily reached from the tool bar. Tool bar

You may find that there are some new face icon, on the toolbar, they are ….

Insert from

file Delete

selected object

Select all Clear selection (deselect)

Color palette display

Actual size zoom control

Lastly, there is a status bar at the bottom of the application windows, it includes details information of the selected object. Status Bar

Left X and Y represent the relative co-ordinate of the selected sprites (objects) with the composition (savable new image area) W and H means the dimension of the selected sprites Rightmost X and Y are the mouse pointer co-ordinate. Make a copy Microsoft Image Composer allow 1 level undo feature, If you like to keep the image meanwhile you want to have some tries on it, you are advised to make a copy of the image by choosing : Edit / Duplicate

Creating graphic for web page using Microsoft Image Composer 1.5

6

Tools bar Brief Description

Selection

Arrange – rotation, flip, crop, ordering, align Cutout – selectively duplication, feathering Text entering Shapes –create new shapes

Paint – draw, smear, contrast, coloring

Effects – filter, blur, distortion, drop shadow Texture transfer – manipulate two or more shape together Zoom

Pan

Color tuning –contrast, brightness

Color swatch – choose color

Creating graphic for web page using Microsoft Image Composer 1.5

7

2. Selection Tool Open a existence Microsoft Image Composer (.mic) file Load a graphic : Insert / From File / Hibiscus.tif

You can use selection tool to move the sprites (image object) around

Creating graphic for web page using Microsoft Image Composer 1.5

8

3. Arrange tool

Now click on the arrange tool you will see the new window below

All the grouping tools are on the left, for the individual graphic control, please find the command on right side. Try to copy the flower image and paste, you can select the image first Edit / Copy then paste Edit / Paste Or you can use short cut key to help you Drag the image to where you want to paste while the “CTRL” (on the keyboard) key is pressed

Try to click on one of the Sprite (image object) and change the parameter in the Arrange panel. Now Click on the other Sprite with Ctrl key pressed When you selected more than one sprite, you will see more parameter available on Arrange panel.

Creating graphic for web page using Microsoft Image Composer 1.5

9

Try modifying the parameters and make the following picture:

Creating graphic for web page using Microsoft Image Composer 1.5

10

4. Cutout tool

Now click on the cutout tool you will see the new window below

You can use the tools on the left to copy / erase a part or whole image on the existing Sprite By changing the parameter of Opacity and Edge, you can customise your cutout image. 1. Select the existing Sprite, the Cutout panel will be activated. 2. Choose the shape you want to make a copy from the left Cutout panel 3. Draw the shape on the selected Sprite 4. Change parameter on the Cutout Panel e.g. Opacity, Edge.

5. Click on 6. Drag the selected sprite to other area 7. You will see a new sprite is created

Creating graphic for web page using Microsoft Image Composer 1.5

11

5. Text Tool

Now click on the text tool you will see the new window below

Click on the area where you want to add text. Then write your text.

Click on the outside of the text box, you can treat the text as a Sprite.

Creating graphic for web page using Microsoft Image Composer 1.5

12

6. Shapes Tool

Now click on the shapes tool you will see the new window below

Firstly, left click on the color swatch to choose color. Click on the shape icon on the left hand side Draw on the composite area, you will see a border of the shape You still have chance to change the shapes shape, you can see a little square is place on the edge, corner or centre of the shape, when you move the mouse the square change with the mouse pointer. You can drag the mouse to change the shape now. Once you finished, you can click on the Create button on the shapes panel.

By changing opacity and edge you can have as many combination as you want.

Creating graphic for web page using Microsoft Image Composer 1.5

13

7. Paint tool

Now click on the paint tool , once you select a existing sprite you can see the activated Paint tool panel

Select the tool you need and then draw on the selected sprite. Tool:

Brush Size and transparence control

Try to use the above tools to create a picture below

Creating graphic for web page using Microsoft Image Composer 1.5

14

8. Effects tool

Now click on the effects tool , you will see the following Effects tool panel

All the filters shown, click the pull down menu from Category to choose effects in category. Let choose the “Arts and Crafts” and then click on the “Mosaic”, you can also change the parameter by clicking on the “Details” tab on the effect panel.

Then we select the sprite, which you want to apply the effect Click “Apply” at the lower right corner to apply the effect.

You will see applied effect of the sprite as follow. You are encourage to try other effect filters

Creating graphic for web page using Microsoft Image Composer 1.5

15

9. Texture transfer tool

Now click on the Texture transfer tool you will see the new window below

Select Insert \ from file…then select a picture to open

Step 1, we try to move the flower to another picture Step 2, Press the “Ctrl” key meanwhile click on the other picture

You can see not only the flower is selected and the scene picture is also selected Then select one of the texture transfer effects.

Creating graphic for web page using Microsoft Image Composer 1.5

16

Press “Apply”, you will see the effects immediately. Besides, you can also change the transparency of the fusion picture.

Now, deselect the pictures by applying a mouse click outside the pictures. The original picture (flower) is still remain unchanged, you can move the original picture away

Creating graphic for web page using Microsoft Image Composer 1.5

17

10. Zoom tool and Pan tool

Zoom tool Once the zoom tools button is clicked, the mouse cursor will become “magnifying glass”

When you click with this cursor, you will have 100% picture size increment. When you want to decrease the magnification you can hold the “Ctrl” key and click the mouse left button. You will also notice that the cursor will

change to

Pan Tool This tool is simply letting user moving the whole canvas (composition) rather than individual image object. User can make use this tool to find and move the object in the canvas more easily.

11. Color tuning and Color swatch

Color Tuning Clicking on the Color Tuning button you will see the following color tuning panel. You can adjust the color, highlight/shadow and dynamic range of a graphic.

Original Increase white Highligh / shadow

emphasis Decrease the dynamic range

Creating graphic for web page using Microsoft Image Composer 1.5

18

Color Swatch is simply a color palette, you can choose the color you want and fine tune it. Mouse left click and right click results in a different outlook.

Left Mouse button Right Mouse button You may just click on the color you want or change it to suit your need.

Creating graphic for web page using Microsoft Image Composer 1.5

19

12. Button Wizard Button wizard is a powerful feature insude image composer, it can help you create different shape, style, description button, what we have to do is just following the wizard guidance. We can start the wizard from here. Insert / Button Choose button style then press “next”

Enter the number of the button you want to create, Press “Next” Enter the description you want to place on the button. e.g. “My Button” If you want to include an image into the button you can click the image check box and browse for the image file. Press “Next” to continue

You can choose “Exact fit for each button” which will let the button shape fit all text and image you include so far Or you can choose “Same size for all button” which will let you have a series of same size buttons. it is best for homepage button creation. However, you have to specify more then one button in the dialogue box when it ask you the number of button will be made Here, we choose the “Same size for all button” for our buttons

Creating graphic for web page using Microsoft Image Composer 1.5

20

Click “Next” you will see the following screen Press “Finish”

A button is made If you choose “Same size for all button” you will made a series of the buttons

Creating graphic for web page using Microsoft Image Composer 1.5

21

Edit Button If you find that you want to change the style of button after the button is made, you can select the button then double click it or go to menu Edit / button

You can change the basic shape of the button, label, filling pattern, text and size…. etc. The button we make before can be totally transformed into another button.

Creating graphic for web page using Microsoft Image Composer 1.5

22

Example page

http://www.franklinfriends.com http://www.webpagebuffet.com

http://www.kinokuniya.co.jp/english http://www.time.com