1 Graphics Intro

8/8/2019 1 Graphics Intro

1/34

Graphics:Graphics:

BasicBasic ConceptsConcepts

Dr. AbdulDr. Abdul MalekMalek AbdulAbdul KarimKarim

(GDT5043: Interactive Technologies I)(GDT5043: Interactive Technologies I)


2/34

22

PixelsPixels

The image that is displayed on the screen is

composed of thousands (or millions) of small

squares; these are called pixels

The word is a contraction of the phrase

"picture (pix) element (el)".


3/34

33

ResolutionResolution

The number of pixels (small squares) that

describe an image and establish its detail.

Resolution is determined by pixel dimension,or the number of pixels along the width and

height of an image.


4/34


5/34

55

Types ofResolutionTypes ofResolution

Monitor Resolution

The no. of pixels per unit of length on a monitor.

Measured in dots per inch (dpi) Most new monitors have a resolution of about 96

dpi.


6/34

66

Types ofResolutionTypes ofResolution

Printer or Output Resolution

The no. of ink dots per inch produced by a printer

(inkjet or laser).

The appropriate resolution for a printed image

depends on the printer resolution.


7/34

77

Computer MonitorComputer Monitor

Nominal Size vs. Viewable SizeNominal Size vs. Viewable Size

Monitor comes in various sizes

14, 15, 17, 19, 21, 22

What does the number represents? diagonal width of the computer, one corner to another

known as the nominal size


8/34

88

Computer MonitorComputer Monitor

Nominal Size vs. Viewable Size (Cont.)Nominal Size vs. Viewable Size (Cont.)

Is a 17 monitor actually 17?

Actually your monitor is around 15.8

This is known as the viewable size

So what really matters?

Nominal size or viewable size?


9/34

99

Size and Resolution MatchingSize and Resolution Matching

The maximum resolution of a monitor is roughlyrelated to its size

small monitors can't generally display in very high

resolution. Higher resolutions mean that the pixels become

smaller

using a high-resolution mode on a small monitor can

be painful to the eye. your 15" monitor may support 1400 x1050 resolution,

but are you going to be able to see anything?


10/34

1010

Why do I need to know aboutWhy do I need to know about

pixels, dots and resolution?pixels, dots and resolution? Monitor resolution 800 x 600?

Image resolution 900 x 80?

Image resolution 740 x 80 Will you be able to view the entire image for both

image resolutions?

Why?


11/34

1111

Why do I need to know aboutWhy do I need to know about

pixels, dots and resolution? (Cont.)pixels, dots and resolution? (Cont.) A 400 x 300 pixel image will always fill 400 x

300 pixels on any screen

this same image will look larger on a 640 x 480

(62.5% W & H) pixel screen than on an 800 x 600

(50% W& H ) pixel screen.

smaller on a 1024 x 768 (39% W & H) pixel screen


12/34

1212

Image TypesImage Types

In general there are two types of images:

Vector

Bitmap


13/34

1313

Vector ImageVector Image

Made of lines and curves defined bymathematical objects called vectors.

Vectors describe graphics according to theirgeometric characteristics.

For example, a bicycle tire in a vector graphic ismade up of a mathematical definition of a circledrawn with a certain radius, set at a specific

location, and filled with a specific color.

You can move, resize, or change the color of thetire without losing the quality of the graphic.


14/34

1414

Vector Image (Cont.)Vector Image (Cont.)

Resolution-independent--that is, it can be

scaled to any size and printed on any output

device at any resolution without losing its

detail or clarity.

The best choice for type (especially small type)

and bold graphics that must retain crisp lines

when scaled to various sizes--for example,logos.


15/34

1515


Because computer monitors represent images

by displaying them on a grid, both vector and

bitmap images are displayed as pixels on-

screen.

Good for reproducing crisp outlines, as in

logos or illustrations.

Can be printed or displayed at any resolution

without losing detail.


16/34

1616


BitmapBitmap


17/34

1717

Bitmap ImageBitmap Image

Also called raster images

The images use a grid (also known as a bitmap or

raster) of small squares, known aspixels, to

represent graphics.

Each pixel in a bitmap image has a specific location

and color value assigned to it.

For example, a bicycle tire in a bitmap image is madeup of a collection of pixels in that location,


18/34

1818

Bitmap Image (Cont.)Bitmap Image (Cont.)

When working with bitmap images, you edit

pixels rather than objects or shapes.

Best for continuous-tone images, such asphotographs or images created in painting

programs, because they can represent subtle

gradations of shades and color.


19/34


20/34

Bitmap Image

VectorVector


21/34

2121

Image FormatsImage Formats

Native file formats

When you save a document in the same format as

the program you are working in.

E.g. Save a Photoshop image as a Photoshop file (.psd)

instead of as a TIFF or JPG

Advantage is that you can use the full feature of the

application, e.g. layers in Photoshop

Disadvantage is that most programs cannot open

document saved in a native file format


22/34

2222

NonNon--native File Formatsnative File Formats

Many image formats today. For our purpose

we will discuss 4:

GIF, JPG, TIFF, and PNG


23/34

2323

GIFGIF

Graphic Interchange Format (.GIF)

uses indexed color, which is limited to a palette of

only 256 colours.

an excellent format for graphics, and this is its

purpose today, especially on the web.


24/34

2424

GIF (Cont.)GIF (Cont.)

Graphic images (like logos or dialog boxes) use

few colors.

Being limited to 256 colors is not important for a 3

color logo. A 16 color GIF is a very small file, much

smaller, and more clear than any JPG, and ideal for

graphics on the web.

optionally offers transparent backgrounds, whereone palette color is declared transparent, so that

the background can show through it.


25/34

2525

JPEGJPEG

Joint Photographic Experts Group (.JPG)

the right format for photo images which must be

very small files, for example, for web sites or for

email.

The JPG file is small, often compressed by 90%, or

to only 1/10 of the size of the original data


26/34

2626

JPEG (Cont.)JPEG (Cont.)

However, this fantastic compression efficiency

comes with a high price. JPG uses lossy

compression (lossy meaning "with losses").

Lossy means that some image quality is lost whenthe JPG data is compressed and saved, and this

quality can never be recovered.


27/34

2727

JPEG (Cont.)JPEG (Cont.)

Every time a JPG file is compressed and savedagain, more quality is lost.

Quality cannot be gained by converting JPG to

another file image like TIF, because that imagecopy will still contain the JPG artifacts it hadbefore.

JP

G is wonderful when the purpose is right,but you pay a cost in quality.

Not to be used as a master copy


28/34


29/34

2929

TIFF (Cont.)TIFF (Cont.)

TIFF is a flexible format with many options.

can store data with bytes in either PC or Mac

order (Intel or Motorola CPU chips differ in this

way). This choice improves efficiency (speed), but

all major programs today can read TIFF either way,

and TIFF files can be exchanged without problem.


30/34

3030

TIFF (Cont.)TIFF (Cont.)

TIFF image files optionally use LZW lossless

compression.

Lossless means there is no quality loss due to

compression.

TIFF files for photo images are generally large.

Uncompressed TIFF files are about the same

size in bytes as the image size in memory.


31/34

3131

PNGPNG

Portable Network Graphics (.PNG)

was designed to replace the older and simpler GIF

format and, to some extent, the much more

complex TIFF format.

superior lossless compression

supports up to 48-bit truecolor or 16-bit grayscale--

saving, restoring and re-saving an image will not

degrade its quality, unlike standard JPEG


32/34

3232

PNG (Cont.)PNG (Cont.)

has additional unique features, like an Alphachannel for a variable transparency mask (anyRGB or Grayscale pixel can be say 79%transparent and other pixels may individuallyhave other transparency values).

lossless compression is well suited for mastercopy data,

produces a noticeably smaller file than TIF.Perhaps about 25% smaller than TIF for 24 bitfiles, and perhaps about 10% to 30% smaller thanGIF files for indexed data.


33/34

3333

SummarySummary

Photographic ImagesGraphics, including Logos or

Line art

Properties Continuous tones, 24 bit color or 8 bit

Gray, no text, few lines and edges

Solid colors, up to 256 colors, with

text or lines and sharp edges

Best Quality

for Archived

Master

TIF or PNG

(no JPG artifacts)

PNG or GIF or TIF

(no JPG artifacts)

Smallest File

Size

JPG with a higher Quality factor can

be decent (JPG is questionable

quality for archiving master copies)

TIF LZW or GIF or

PNG (graphics/logos usually

permit reducing to 2 to 16 colors

for smallest file size)

Maximum

Compatibility

(PC, Mac,Unix)

TIF or JPG

(the simplest programs may not read

TIF LZW)

TIF without LZW

or GIF

Worst Choice 256 color GIF is very limited color,

and is a larger file than 24 bit JPG

JPG compression adds artifacts,

smears text and lines and edges


34/34

3434

Calculating Image SizeCalculating Image Size

Depending on the format used, an image maytake up a lot of our memory and disk space.

For a 6x4 inch image at 150 dpi, the image size

is calculated as: (6 inches 150 dpi) (4 inches 150 dpi) = 900

600 pixels

900 600 pixels is 900 600 = 540,000 pixels.

The memory cost for a RGB color image is:

900 600 3 = 1.6 million bytes (approx 1.6MB)

1 Graphics Intro

Documents

Transcript of 1 Graphics Intro