Images

Understand the visual elements that make up the MM screen

Which would you use to learn about water cycle?

Manipulate images: Scale images to different size

Color or make images transparent

Placed behind or in front of other objects

Blend the colors

Add effects

So You Want to be a Designer?

How to create the graphics

Learn packages and tools to change the effects

But need to know the concepts

Non-digital medium (paper copy of a photo)

Outside world

Create image

Originate Graphics

An image is represented by a grid (matrix) of squared Picture elements called pixels

A pixel is the smallest image component and thus shows the smallest detail

Arranged in column and rows

What is an Image?

A 640-by-480 screen is capable of displaying 640 distinct dots on each of its 480 (rows) lines, or about 300,000 pixels.

A 800-by-600 screen is capable of displaying 480,000 pixels.

Each pixel is a numerical value

If a pixel color is represented by If a pixel color is represented by 1 bit1 bit only onlyValue 0 = BlackValue 0 = BlackValue 1 = White Value 1 = White

If a pixel color is represented by If a pixel color is represented by 2 bits2 bitsValue 00 = BlackValue 00 = BlackValue 01 = GreyValue 01 = GreyValue 10 = Light GreyValue 10 = Light GreyValue 11 = WhiteValue 11 = White

How are Colors Coded?Gray Levels

9

1-bit color Actually even with only black and white (no

gray), an image can look surprisingly realistic:

http://

How are Colors Coded?Gray Levels

More bits, more shadesMore bits, more shades (grey levels) (grey levels)

4 bits 4 bits 2 244 16 grey shades 16 grey shades (0000, 0001,0010, 0100, 1000 etc.(0000, 0001,0010, 0100, 1000 etc.

How are Colors Coded?Gray Levels

How are Colors Coded?Gray Levels

2-bit color2-bit color

Color Model

In “true color”, each pixel represents some color shade

Uses 24 bits representation = 16 million colors

Color can be expressed in:

1. RGB code

2. Hexadecimal code

How are colors coded?

• Each pixel is represented by 3 values

• ie. Light yellow = <255,255,127>

• Syntax: Each value:• ranges from 0 – 255• 256 color shades= ? bits

RGB Code:

How are colors coded?

Before you start

Plan your approach: Do not start drawing images,

importing clip files, or using ready made screens. Instead outline your project and graphic

ideas first. Make flow charts Storyboard the project using stick figures Use index cards

Before you start Organize your tools: most authoring systems

provide the tools to create the graphic objects. If one of the tools are not included, there will be a way to import it.

Multiple monitors: It is helpful to have multiple monitors or high resolution screen during development of a MM project since: You may need to open different windows

(stage, score, … etc) You may want to open different application

Making still pictures Still pictures may be the most important media

in the project They are two types of images

Bitmap: used for real images & complex drawing Victor shape: used for regular geometric shapes

The appearance of both depends on the hardware resolution (number of points/inch)

Image files are huge and saved compressed Director uses file such as: BMP, GIF, JPEG, PNG,

TIFF

Graphics are categorized as being either

Bitmap or Vector

Types of Graphics

Affects how the graphics are displayed on a computer screen

Bitmap Is a simple information matrix describing

the screen pixels. One bit is used to describe monochrome screens.

More bits are needed to describe color screens. For example 8 bits per pixel supports 256

different colors and 24 bits per pixel supports 16,7772,216 colors.

The screen pixels are redrawn in 1/60 second. That is 60 times per second

Bitmap Graphics

Matrix of ‘pixels’ Difficult to re-size Suitable for

photographs

Bitmap Graphics As the image is made larger

• Dots become larger , edges more jagged• Quality decreases• File size increase

Advantages of using a small image rather than a larger one: it is clear

Disadvantages: small

Types of Graphics

Where do bitmaps come from? How are they mad?

Make it from scratch with paint program Grab a bitmap from an active screen and

paste it into a paint program or your project Capture a seen from TV using video

capturing Scan a photo or artwork Film a seen using digital camera From suppliers of clip arts

Clip art If you do not want to create your own images,

you can get bitmaps from suppliers of clip art. They come on CDs or downloaded from the

internet. Once obtained, a bitmap can be manipulated

and it is properties (such as: size, brightness, hue اللون contrast, and color depth) can ,تدريجbe altered.

There are image editors allowing bitmap editing.

Image/Graphics Editing Adobe Photoshop

Allows layers of images, graphics and text Includes many graphics drawing and painting tools Sophisticate lighting effects filter A good graphics, image processing and manipulation

tool

Macromedia Freehand Graphics drawing editing package

Many other editors in public domain and commercially

Vector Graphics Image is represented with lines and arcs

that have a mathematical relationship describes the drawing of the shape

To draw a:Line - starting point, _________________Rectangle: - start point, ______________Circle: - ___________________

Types of GraphicsTypes of Graphics

Vector GraphicsAs the image is enlarged

•Dots become larger , edges still clean, crisp•Quality is maintained •File size increase

Types of GraphicsTypes of Graphics

Victor shapes Most MM authoring systems provide tools to

draw victor shape such as lines, rectangles, and polygons

Objects are stored and described using vectors

Used in Creating complex and geometric rendering

needed by architects Designing print media since putting a rectangle

on a screen is the same as putting it on paper. 3-D animation.

Victor-Drawn objects versus Bitmaps

Victor shape Bitmap

Size: describing a colored square

Needs about 30 bytes

40k byte in 256 colored

When using animation

Takes less time Takes longer time

Scalable Without loosing quality

The quality may change

Used Geometric objects For oddly shaped with fine details

Converting between images

Dithering I Dithering is the process that

a program uses when it cannot display the full range of colors in a particular image.

For example, if a gradient is to be displayed on a system that does not have the hardware needed to display all of the shades that make up the gradient (see first figure) then the software may dither the image (see the second figure).

Dithering II Each pixel must be replaced with a

corresponding pixel in the target palette. Adjacent pixels are examined and

intermediate colors may be used Dithering software is built into most bitmap

editing/processing software Algorithms:• Random• Average• Ordered• Floyd-Steinberg

Dithering III

Average The Average Dithering is a basic two-level algorithm for

halftone image.

Choosing a certain constant gray level, in  particular the average value of image pixels, and using it as a global threshold in deciding whether a pixel should be quantized to 0 or to 1.

All pixels whose intensity level lies above the average value (the threshold) are quantized to 1; all others get a value of 0.

This method is simple to implement but it has a disadvantage: quantization contouring is quite perceptible. 

Random It is not really acceptable as a

production method, but it is very simple to describe and implement.

For each value in the image, simply generate a random number 1..256; if it is greater than the image value at that point, plot the point white, otherwise plot it black.

This generates a picture with a lot of "white noise", which looks like TV picture "snow".

Ordered We can express the patterns in compact

form as the order of dots added: pixels Threshold

  8 3 4 7 8 9 6 1 2 6 1 2 7 5 9 5 4 3 If the value of the pixel (scaled into the 0-9

range) is less than the number in the corresponding cell of the matrix, plot that pixel black, otherwise, plot it white. This process is called ordered dither.

Floyd-Steinberg The error dispersion technique is very simple to

describe: For each point in the image, first find the closest

color available. Calculate the difference between the value in the image and the color you have.

Now divide up these error values and distribute them over the neighboring pixels which you have not visited yet.

When you get to these later pixels, just add the errors distributed from the earlier ones, clip the values to the allowed range if needed, then continue as above.

Floyd-Steinberg There many ways to scan the image.

Example left to right top to bottom.

There are many ways to distribute the errors

X 7 This is the Floyd and Steinberg 3 5 1 error diffusion filter. X represents the pixel you are currently

scanning

Dithering Technique Dithering Technique • Can lower download time

Dithering is the most common method of reducing the color range of images down to the 256 (or fewer) colors seen in 8-bit images

Onion.jpg8 colors

– no dither - 8 colors

– dither -

Dithering TechniqueDithering Technique

• Can lower download time

• wide variety of File Formats• different file formats are suitable for different purposes

Universally supported files

• Universally supported by graphics industry

• Examples: .JPG, .GIF

Proprietary files( Native Files )

• Default file format used by a specific software application.

• can be Bitmap or vector formats

• Examples: . Photoshop, AutoCAD, MacPaint

File Formats

Features:

not meant to be transferred to other applications

software-specific image properties can only be retained when an image is saved in the software's native format ie. Layering is preserved in Photoshop

• When an image is being sent to another application it should be converted or exported to another native or universal

File Formats: Native Files

CDR - CorelDRAW CPP - Corel Photo-Paint PSD - Adobe Photoshop PDD - Adobe PhotoDeluxe AI - Adobe Illustrator AUP – AudacityMVMM - MoviemakerUFO - Ulead PhotoImpact PSP - Paint Shop Pro

Examples of Native File

Graphics Interchange Format (GIF)Devised initially for transmitting graphical

images over phone lines via modems

Uses the Lempel-Ziv Welch algorithm (a form of Huffman Coding), modified slightly for image scan line packets (line grouping of pixels)

Limited to only 8-bit (256) color images, suitable for images with few distinctive colors (e.g., graphics drawing)

GIF Better for flat color fields: clip art, cartoons, etc. Transparent color setting

Transparency is the feature of the GIF89a format which allows for the specification of one of the colors in the palette to be ignored while processing the image for display purpose

Animated GIFs Allows timed display of images in sequence, giving the effect of animation

Interlaced delivery downloads low resolution image before whole image arrives It is a mechanism that makes images appear faster on-screen

First pass has pixel rows 1, 9, 17, etc (every eighth row) Second pass has rows 5, 13, 21, etc. (every remaining fourth row) Third pass has rows 3, 7, 11, 15, etc. (every remaining odd row) Fourth pass has rows 2, 4, 6, etc. (all the even-numbered rows)

Cross platform

By Changing the Color Depth

• Can lower download time

ORIGINAL

IF CHANGE BIT DEPTH

8-> 5 BITS

Goal: reduce file sizeThus …downloads faster images

GIFs – “Lossless “ compressionGIFs – “Lossless “ compression does not get blurry or messy does not get blurry or messy this compression never degrades the image this compression never degrades the image

qualityquality. .

SAVE SAVE

Image Optimization:Image Optimization: COMPRESSION TECHNIQUESCOMPRESSION TECHNIQUES

47

How does a GIF do it’s compression? Assume this is an image we

want to compress.

Say the image is 100 pixels high and 200 pixels wide, so we would have to store info about 20,000 pixels.

We need to store the color of every pixel

NOTE: the yellow is: #FFFF00 the green is: #00CC99

100 pixels high

200 pixels wide

48

First lets see how a BMP might store it! First lets see how a BMP might store it!

BMP has no compression –large file A BMP stores the information about each pixel,

one at a time, so the BMP file would look something like this: (Starting at the top, left corner, going left to right, ending at the bottom right)

Each color is 1 byte, so that is 20,000 bytes of information we are storing

#FFFF00#FFFF00#FFFF00#FFFF00#FFFF00…#FFFF00#00CC99#00CC99 …#FFFF00

YellowWithGreen.bmp

49

Can you guess one way a GIF might Can you guess one way a GIF might accomplish compression?accomplish compression?

Can anyone think of a way to store the data about the color of each pixel, without losing any information (lossless compression) and do it in less than 20,000 bytes

0,0,(0,100)

HINT

(200,0)(0,0)

(200,100)

50

Solution:Solution:

0,0,

Record:

startx,starty,endx,endy,color0,50,200,100, #FFFF00 0,0,80,50, #FFFF00 80,0,130,20, #FFFF00 130,0,200,50, #00CC99 80,20,130,50, #FFFF00

Store:

startx= 1 byte starty = 1 byte endx = 1 byte endy = 1 byte color = 1 byte

Each shape: record 5 bytes

Multiply by 5 shapes = 25 bytes!

(200,0)

(200,50)(0,50)

(0,0)

(200,100)(0,100)

(80,0)

(80,50) (130,50)

(130,0)

(130,20)(80,20)

51

Looks for patternsEx. 123451234512345

If “1” represents pattern 12345 Compresses it to “1111”

Builds a decoding hash table 0 13245 1 22345 2 23423 3 11223

Etc.

Another Algorithm for .gif

Pattern:13245234232234511223

0213

Common image format used on the internet Cross platformJPEG stores full color information: max of 24 bits/pixel (224 = 16 million colors ) Larger file sizes in comparison with .gif

(because of bit depth 2 24)

....Larger file size but Full color scheme! .jpg

FILE FORMATS: FILE FORMATS: Joint Photographic Expert Group assumptions (JPEG)

Graphics file format: JPEG A standard for photographic image compression and best for scanned

photographs

Suitable for continuous tone images

JPEG image format stores an approximation of the original image.

Lossy compression which allows user to set the desired level of quality/compression

Areas with a lot of edge detail, where the contrast between short distances is high, will be given more 'attention'

Progressive JPEG downloads rough image before whole image arrives

54

The designers of the JPEG compression algorithm realized that the human eye is more sensitive to brightness details than to fine color details. Thus JPG conversion programs Try to save information about the

brightness (give it more weight). If it finds two adjacent pixels with very similar colors, it will store both those pixels with the same color and discard the other color.

Human eyes process visual information are much more aware of detail of edges than gradual changes in surface-related color and/or texture variance.

How does a JPEG perform compression?How does a JPEG perform compression?

Observations:

1. The quality of a JPEG file is proportional to the file size

95% compression = 2KB5% quality

75% compression = 6KB25% quality

50% compression = 9KB50% quality

25% compression = 12KB75% quality

0% compression = 50KB100% quality Quality

File Size

Compression (smaller value)

Quality

File Size

2. A higher image quality setting (has a lower compression value) results in less data being discarded.

JPGs – “Lossy compression”JPGs – “Lossy compression”

56

Image Optimization:Image Optimization: Compression Compression Technique - .JPGTechnique - .JPG

Quality

File Size

Compression

Quality

File Size

Design Considerations - continuedDesign Considerations - continued

Compression: 10Size: 29,864 Bytes.

Compression: 20Size: 19,100 Bytes

Compression: 30Size: 11,543 Bytes

Compression: 40File size: 7,742 Bytes

Image Optimization – reduce Download timeImage Optimization – reduce Download time

When should I use .JPG and .GIF???

.GIF.GIF .JPG.JPG line art, logos, or illustrations

(preserves sharp detail) -significantly better on images with only a few distinct colors, such as line drawings and simple cartoons)

photos, computer game screenshots, stills from a movie

(realistic shots – JPG is superior to GIF for storing full-color or gray-scale images of "realistic" scenes)

8 bit color resolution max 24 bit color resolution (higher compression that .gif)

Lossless compression “Lossy” format

Supports Dithering Does not support dithering

Allows for transparency Does not support transparency

Interlace process Progressive jpeg

Animation Not for animation

Other graphics file format TIFF

Tagged Image File Format (TIFF) Supports attachment of additional information (referred to as

“tags”) provides a great deal of flexibility. The most important tag is a format signifier: what type of

compression etc. is in use in the stored image TIFF can store many different types of image: 1-bit, grayscale,

8-bit color, 24-bit RGB, etc. TIFF is a lossless format (when not utilizing the new JPEG tag

which allows for JPEG compression

PNG PNG format: standing for Portable Network Graphics —meant

to supersede the GIF standard, and extends it in important ways.

Support for up to 48 bits of color information —a large increase.

Other graphics file format Microsoft Windows: BMP

A system standard graphics file format for Microsoft Windows Used in PC Paintbrush and other programs It is capable of storing 24-bit bitmap images

PDF Portable Document Format Created by Adobe Systems  and used for representing

documents in a manner independent of the application software, hardware, and operating system

Each PDF file encapsulates a complete description of a fixed-layout 2D document that includes the text, fonts, images, and 2D vector graphics which compose the documents.

--- How images are downloaded to your screen Applies to .GIF files Is a process by which the image is drawn in a series of

passes rather than all at the same time (file size bigger)

Interlacing TechniqueInterlacing Technique Downloading Fast

Panoramas

Viewing a single surrounding image as if you are inside the picture and able to look in all directions and zoom in features.

360 degree images are arranged as a sequence where the right edge attached to the left edge