Industrial Centre The Hong Kong Polytechnic University

Transcription

1 Industrial Centre The Hong Kong Polytechnic University Microsoft Image Composer 1.5 Simon C.S. Hui Kevin H.K. Yip

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 2

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 3

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. 4

5 Interface and features Menu bar Creating graphic for web page using Microsoft Image Composer 1.5 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 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 6

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 7

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. 8

9 Try modifying the parameters and make the following picture: 9

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 10

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. 11

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. 12

13 7. Paint tool Now click on the paint tool Paint tool panel, once you select a existing sprite you can see the activated 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 13

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 14

15 9. Texture transfer tool Creating graphic for web page using Microsoft Image Composer 1.5 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. 15

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 16

17 10. Zoom tool and Pan tool Creating graphic for web page using Microsoft Image Composer 1.5 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. 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. 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 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 17

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. 18

19 12. Button Wizard Creating graphic for web page using Microsoft Image Composer 1.5 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 19

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 20

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. 21

22 Example page