cmpf 124:basic skills for knowledge workers image & image editing

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


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


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.


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.


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


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.


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.


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.


10

• Example of image editor– Adobe Photoshop, Corel Photo-Paint, Paint

Shop Pro, GIMP, and Paint.NET.


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


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


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


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


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


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.


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.


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


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


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


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.


23

How to Capture an Image? (cont.)

• This figure below shows the edited image


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


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


26


– 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


27


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


28

Example: PaintBrush Tool

Tools

Editing tools

Fill

Pick colorDraw pencil

Airbrush

LinesShapes

Eraser

Canvas

Color palette

Zooming

Brush

Text


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


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


31

Editing Image using Paint (cont.)

a. Open image

b. Outline the area


32


c. Copy image

d. Paste image


33


e. The result

The End

CMPF 124:

Basic Skills for Knowledge Workers

cmpf 124:basic skills for knowledge workers image & image editing

Documents

knowledge workerscmpf124

image format

image mapimagemaps

image editor

clickable image map

term definitionclickable

computer graphics

vector graphics