CMPF 124:Basic Skills for Knowledge Workers
IMAGE & IMAGE EDITING
CMPF124: Basic Skills for Knowledge Workers
2
Chapter Overview
Objectives
What is Image?
Capturing & Editing Images
Image Editing Tools
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?
Term Definition
Clickable image map A map or other graphic that has "hot spots" or hyperlinks. A user can click on a spot on the map or graphic and link to more
detailed information. Clickable image An image that, when clicked
on, sends some instruction to the computer.
Client-side image map An image map in which the map that relates parts of the image to different URLs is stored in the current file.
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.)
Term Definition
Image editing Making changes in an image.
Image format A format in which an image can be stored and used. Some formats, such as TIFF and PICT.
Image map A map or other graphic in an HTML document that has "hot spots" or hyperlinks.
CMPF124: Basic Skills for Knowledge Workers
9
What is Image? (cont.)
Term Definition
Image A picture. Images on the computer are usually represented as bitmaps (raster graphics) or vector graphics.
Image editor A program that can be used to make changes in computer graphics.
Image filter A tool for modifying images in paint and photo editing programs.
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.)
RGB Combination Perceived Color Red only Red
Green only Green
Blue only Blue
Red and Green Yellow
Red and Blue Magenta
Green and Blue Cyan
Red, Green and Blue White
None Black
CMPF124: Basic Skills for Knowledge Workers
16
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
17
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
18
• 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
19
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
20
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
21
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
22
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
23
How to Capture an Image? (cont.)
• This figure below shows the edited image
CMPF124: Basic Skills for Knowledge Workers
24
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
25
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
26
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
27
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
28
Example: PaintBrush Tool
Tools
Editing tools
Fill
Pick colorDraw pencil
Airbrush
LinesShapes
Eraser
Canvas
Color palette
Zooming
Brush
Text
CMPF124: Basic Skills for Knowledge Workers
29
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
30
Editing Image using Paint
• Basic steps: To duplicate part of an image. Refer to figure 1. Open the image file using File-Open2. Click on editing/cutting tools3. Move the pointer to one edge of the image to be duplicated, hold
down the right button and trace around it4. When you have finished, release the right mouse button5. Select the Edit-Copy command to copy the section of the image
to the clipboard6. Select Edit-Paste command and you’ll see a duplicate image
appear at the top left7. Drag the new image into position
CMPF124: Basic Skills for Knowledge Workers
31
Editing Image using Paint (cont.)
a. Open image
b. Outline the area
CMPF124: Basic Skills for Knowledge Workers
32
Editing Image using Paint (cont.)
c. Copy image
d. Paste image
CMPF124: Basic Skills for Knowledge Workers
33
Editing Image using Paint (cont.)
e. The result
The End
CMPF 124:
Basic Skills for Knowledge Workers