CMPF 124:Basic Skills for Knowledge Workers

1. CMPF 124:Basic Skills for Knowledge Workers IMAGE & IMAGE EDITING

2. Chapter Overview CMPF124: Basic Skills for Knowledge Workers

3. Objectives • Enable the students to understand the definition of image • Enable the students to understand the processes involved in producing image • Provide the students with some general background to the techniques and systems CMPF124: Basic Skills for Knowledge Workers

4. Introduction ‘A picture is worth a thousand words’; this statement describes that no matter how innovative your interface design, how sophisticated your programming, the public face of your multimedia application and the major make-or break factor is your graphics and images. Your potential customer will able to make an instant judgment for better or for worse through the first impression on the screen. CMPF124: Basic Skills for Knowledge Workers

5. What is Image? CMPF124: Basic Skills for Knowledge Workers

6. Clickable image map • Used to create sensitive clickable images that respond to the area of the image the user click on. • Created by mapping the different areas of an image using the x,y coordinates. • The coordinates are recorded as circles, squares, rectangles etc. • Each object’s coordinates are assigned a URL that is to be linked when they are selected. • http://geoimages.berkeley.edu/GeoImaGes/BainCalif/CalClickMap.html CMPF124: Basic Skills for Knowledge Workers

7. Client-side image map • Imagemaps which do not have to make a separate call to the server to determine what URL should be returned to the browser. • The coordinate/URL correlations are kept in the HTML coding of the page itself. • After clicking on the image, a request for the correct URL is immediately sent to the server, this method loads the page quicker and uses less system resources in the process. CMPF124: Basic Skills for Knowledge Workers

8. What is Image? (cont.) CMPF124: Basic Skills for Knowledge Workers

9. What is Image? (cont.) CMPF124: Basic Skills for Knowledge Workers

10. Example of image editor • Adobe Photoshop, Corel Photo-Paint, Paint Shop Pro, GIMP, and Paint.NET. CMPF124: Basic Skills for Knowledge Workers

11. Colors • Properly used, color can be a powerful tool to improve the usefulness of an information display system. The inappropriate use of color can seriously reduce the performance of such a system, however. ‘Gerald Murch 1984’ • Color is a vital component of multimedia • Picking the right colors and combinations of colors for your project can involve many tries until you feel the result is right • Color frequencies - carry pleasant, unpleasant, soothing, depressing, and many other special meanings CMPF124: Basic Skills for Knowledge Workers

12. Colors (cont.) • Green, blue, yellow, orange, purple, pink, brown, black, gray, and white are the ten most common color-describing words used in all human languages and cultures CMPF124: Basic Skills for Knowledge Workers

13. Computerized Color • The eyes receptors are sensitive to red, green and blue light, the combinations of these three additive primary colors, the eye and brain will interpolate the combinations of colors in between. Refer to the table CMPF124: Basic Skills for Knowledge Workers

14. Computerized Color (cont.) CMPF124: Basic Skills for Knowledge Workers

15. Image File Format (cont.) • Bitmap images • Based on a grid of colors known as pixels • Each pixel is assigned a specific location and color value • Appropriate for continuous-tone images such as photograph or artwork created in painting programs • Disadvantage of bitmap graphics is that they contain a fixed number of pixels CMPF124: Basic Skills for Knowledge Workers

16. Image File Format (cont.) • There are many file formats which can be used to store bitmaps and drawing • Most of the image editing application offers a Save As option that let’s you write files in other common format such as JPEG (JPG), TIFF (tif), GIF, PCX and etc. CMPF124: Basic Skills for Knowledge Workers

17. Example of image format • JPEG(joint photographic experts group) supports 8 bits per color – red, green and blue for 24 bit total • GIF (Graphic interchange format) is limited to an 8-bit or 256 colors. • Suitable for storing graphics with relatively few colors such as simple diagrams, shapes, logos and cartoon style images. CMPF124: Basic Skills for Knowledge Workers

18. Making Still Images • Still images may be small or large, or even full screen • They may be colored, placed at random on the screen, evenly geometric or oddly shaped • Whatever their form, still images are generated by the computer in two ways: as bitmaps and a vector-drawn graphics CMPF124: Basic Skills for Knowledge Workers

19. Making Still Images (cont.) • The image you see on your monitor is a digital bitmap stored in video memory, updated every 1/60 second or faster • As you assemble images for your project, you may often need to capture and store an image directly from your screen • The simplest way to capture what you see on the screen is to press the proper keys on your computer keyboard CMPF124: Basic Skills for Knowledge Workers

20. How to Capture an Image? • Macintosh – the keystroke combination COMMAND-SHIFT-3 creates a readable PICT2-format file named Picture and places it in your active disk drive’s root directory. You can then import this file’s image into your multimedia authoring system or paint program • For Windows – press PRINTSCRN, a copy of your screen’s image goes to the Clipboard. From the Clipboard you can then paste the captured bitmap into an application such as Paintbrush or Adobe Photoshop or other editing tools CMPF124: Basic Skills for Knowledge Workers

21. How to Capture an Image? (cont.) • Image-editing tools allow you to alter and distort images. The figure 2.1a shows a full screen image of Yahoo website was captured using Adobe Photoshop. Using the Press-Screen command you can capture any image into your screen. CMPF124: Basic Skills for Knowledge Workers

22. How to Capture an Image? (cont.) • This figure below shows the edited image CMPF124: Basic Skills for Knowledge Workers

23. Image Editing Tools • Image editing applications are used for enhancing and retouching existing bitmapped images • These applications also provide features and tools of drawing and painting programs and can be used to create images from scratch as well as images digitized from scanner, digital cameras, clip-art or original artwork files CMPF124: Basic Skills for Knowledge Workers

24. Image Editing Tools (cont.) • Here are some features typical of image editing applications and of interest to multimedia developers: • Multiple windows, which provide views of more than one image at one time • Conversion of major-image data types and industry-standard file formats • Direct inputs of images from scanner and video sources • Employment of virtual memory scheme that uses hard disk space as RAM for images that require large amounts of memory CMPF124: Basic Skills for Knowledge Workers

25. Image Editing Tools (cont.) • Capable selection tools, such as rectangles, lassos and magic wands, to select portions of a bitmap • Image and balance controls for brightness, contrast, and color balance • Good masking features • Anti-aliasing capability controls for precise adjustment of color balance • Color-mapping controls for precise adjustment of color balance • Tools for retouching, blurring, sharpening, lightening, darkening, smudging, and tinting • Geometric transformations such as flip, skew, rotate, and distort, and perspective changes • Ability to resample and resize an image CMPF124: Basic Skills for Knowledge Workers

26. Image Editing Tools (cont.) • 24-bit color, 8- or 4-bit indexed color, 8-bit gray-scale, black-and-white, and customizable color palettes • Ability to create images from scratch, using line, rectangle. Ellipse, paintbrush, pencil and other tools • Multiple typefaces, styles, and sizes, and type manipulation and masking routines • Filters for special effect such as crystallize, dry brush, watercolor, wave and etc. CMPF124: Basic Skills for Knowledge Workers

27. Example: PaintBrush Tool Tools Editing tools Eraser Zooming Fill Brush Pick color Canvas Draw pencil Text Airbrush Lines Shapes Color palette CMPF124: Basic Skills for Knowledge Workers

28. How to draw using Paintbrush? • To draw freehand, select the brush tool, then move to the palette and click once with the left button to choose the ink, (click with the right button to define the color of the background) • If you are using clip art or scanned images, they may need to be resized • You can set the size of the canvas (Click the Image – Attribute Command) but you cannot resize an existing image in Paintbrush CMPF124: Basic Skills for Knowledge Workers

29. Editing Image using Paint • Basic steps: To duplicate part of an image. Refer to figure • Open the image file using File-Open • Click on editing/cutting tools • Move the pointer to one edge of the image to be duplicated, hold down the right button and trace around it • When you have finished, release the right mouse button • Select the Edit-Copy command to copy the section of the image to the clipboard • Select Edit-Paste command and you’ll see a duplicate image appear at the top left • Drag the new image into position CMPF124: Basic Skills for Knowledge Workers

30. Editing Image using Paint (cont.) a. Open image b. Outline the area CMPF124: Basic Skills for Knowledge Workers

31. Editing Image using Paint (cont.) c. Copy image d. Paste image CMPF124: Basic Skills for Knowledge Workers

32. Editing Image using Paint (cont.) e. The result CMPF124: Basic Skills for Knowledge Workers

33. The End CMPF 124: Basic Skills for Knowledge Workers