Graphics Category

GRAPHIC CATEGORIESGRAPHIC: CATEGORIES

J ll di HJ ll di HJamalludin HarunJamalludin Harunwww.jzwww.jz--media.commedia.com

TYPES OF IMAGE

Have you wondered why some pictures show jaggies on the edges when they are resized larger. on the edges when they are resized larger.

2

TYPES OF IMAGE

Or why some pictures don't show jaggies when enlarged?enlarged?

3

TYPES OF IMAGE

Those jaggies have more to do with the types of graphic you're resizinggraphic you re resizing.

Graphics can be generally divided into two Graphics can be generally divided into two categories or types:

Bitmap or raster imagesBitmap or raster imagesVector graphics

4

TYPES OF IMAGE

What are the differences between bitmap and vector graphics?vector graphics?

5

TYPES OF IMAGE

The difference between bitmaps and vector graphics stems more from what they're made up graphics stems more from what they re made up of:

Bitmap graphics are made up of group of small

dots called pixelsdots called pixels.

Vector graphics are made up of lines, curves, and fills.

6

MPT 1203: TECNOLOGY & MEDIA DESIGNMPT 1203: TECNOLOGY & MEDIA DESIGN

BITMAP graphicsBITMAP graphics

D t t f Ed ti l M lti diD t t f Ed ti l M lti diDepartment of Educational MultimediaDepartment of Educational MultimediaFaculty of Education, UTMFaculty of Education, UTM

BITMAP GRAPHICS: an overview…

What are bitmap graphics?

also known as raster graphics.g p

consist of grids of tiny dots called pixels.

each pixel is assigned a color.

R l/Ph t li tiReal/Photorealistic Image

8



Pixel: short for “Picture Element”, is a single

point in a graphic image. p g p g .

9



The information stored in a bitmap image p g

regarding pixel location and color forms the imageis what forms the image.

10


When you zoom in, you can see the individualsquares that make up the total imagesquares that make up the total image.

Individual pixels of the image where each grid represents one pixel.

11

BITMAP GRAPHICS: pixel & color depth

The amount of information per pixel is known as the color depththe color depth.

Monochrome (1 bit of information per pixel)

Gray-scale (8 bits of information per pixel)

C lColor (8 or 16 bits of information per pixel)

True color (24 or 32 bits of information per True color (24 or 32 bits of information per pixel)

12

BITMAP GRAPHICS: suitable for…

Bitmaps suited for creation of:

Photo-realistic images.C l d iComplex drawings.

Images that require fine detail.

13

BITMAP GRAPHICS: how to create….

Where do bitmaps come from:

Capture from a photo or artwork, using a

digit l id scanner or digital camera or video capture device that digitizes the image.p

14



Create a bitmap from scratch with a paintor drawing program (such as Microsoft

Paint & Adobe Photoshop).p)

15



Grab from an active computer screen with a

screen capture program.

16

BITMAP GRAPHICS: advantages….

Advantages of bitmaps:

Easy to create

Photorealistic image.

17



accurately represent the wide range of

colors and shades in complex images.

18



Because each pixel is colored individually, you can

t h t li ti ff t create photorealistic effects such as shadowing and intensifying color by

i l t manipulating select areas, one pixel at a time.

19



More universally available interchange file formats; most bitmaps can be read by most

application software.

20

BITMAP GRAPHICS: disadvantages….

Disadvantages of bitmaps:

Bitmapped formats have a fixed resolution.

Can NOT be resized without some effects on the clarity of the image .

21



Enlarging a bitmap graphic may cause the l d limage to lose crispness and clarity.

WHY ???WHY ???22



Enlarging a bitmap graphic may cause the image to lose crispness and clarity. WHY ???

Increasing the size of a bitmap has g pthe effect of increasing individual pixels making lines and shapes appear pixels, making lines and shapes appear

jagged.

23



Enlarging a bitmap graphic may cause the image to lose crispness and clarity. WHY ???

When bitmap image is enlarged, the When bitmap image is enlarged, the individual colored squares

( i l) b i ibl (pixel) become visible and the illusion of a smooth image is lost to the

i viewer.

24


Enlarging bitmap…..

25



In terms of the amount of digital storage, bitmaps

i t iare memory intensive, and the higher

the resolution, the larger the file size.g

26

BITMAP GRAPHICS: disadvantages…

27



28



Original image a section magnified 200% a section magnified 400%

29

MPT 1203: TECNOLOGY & MEDIA DESIGNMPT 1203: TECNOLOGY & MEDIA DESIGN

VECTOR graphicsVECTOR graphics

D t t f Ed ti l M lti diD t t f Ed ti l M lti diDepartment of Educational MultimediaDepartment of Educational MultimediaFaculty of Education, UTMFaculty of Education, UTM

VECTOR GRAPHICS: an overview

What are vector graphics?

Also known as “draw-type images” where images were created using computer.

Based on drawing elements or objects such as

lines, rectangle, circles, etc. , g , ,

31



Vector graphics use mathematical formulas to define lines, curves, and other

attributes.

Stored as commands th t d fi th Stored as commands that define the individual objects.

32


Vector graphics are defined using formulas. ExampleExample

RECT 0,0,200,200,RED,BLUE

33



When a line is drawn, a set of instructions is written to describe its size, position, and

shape.

If more than one line is drawn, it has a precise

l ti hirelationship to the other parts.

34



If change is made (say, in size), the

relationship between each part stays the same.the same.

Original Image Reduced and rotate…Keeps the same relationship

35


Vector graphics are composed of paths.

36

VECTOR GRAPHICS: advantages…

Advantages of vector:

Easy to manipulate and edited

(WHY?). ( )Shapes easily edited

37



Vector drawings can be scalable to any size

without any loss in quality.

(WHY?) (WHY?). Vector graphics use mathematical formulasVector graphics use mathematical formulas.

38



High QUALITY. Resolution INDEPENDENT.

Vector: Bitmap: Sharper images

Blurry images

39


40

VECTOR GRAPHICS: disadvantages…

Disadvantages of vector:

Must be an expert in computer graphic to produce high quality images.

CanNOT display photorealistic quality.

41

VECTOR GRAPHICS: disadvantages…

Disadvantages of vector:

More complex they are, the larger the file

size, and the longer they take to appear on the screenon the screen.

42

VECTOR GRAPHICS: suitable for…

Typical uses of vector graphics:

stationery, large banners, signs.id l f l th bj t th t h ideal for company logos or other objects that have

to be resized frequently.computer aided design (CAD)computer aided design (CAD)

clip art

43

BITMAP VS VECTOR

BITMAP VS VECTOR ??

List down the differences List down the differences between bitmap and vector.

Discuss…Discuss…

44

BITMAP VS VECTOR

Bitmap Vector

• Pixel-based• More realistic images

Bi fil i

• Mathematically-based• Images are not realistic

S ll fil i • Big file size• Suffers from distortion

problem

• Small file size • No distortion problem (can

resize image)p• Not easily scalable. • Difficult to convert to

vector images

g )• Eeasily scalable, due to

their use of mathematic formulas vector images.

• File format: .bmp, .jpg

formulas. • Can be converted to bitmap

images easily.• File format: .ai, .wmf

45

BITMAP VS VECTOR

Which is preferred: Bitmap or Vector?For display on an LCD?For display on an LCD?For display on a plotter (a printer that draws lineswith pens)?For images from digital cameras?For CAD? (Computer Aided Design)?For high-quality text?

Which is easier to:Resize?Rotate?Crop?Crop?

46

BITMAP VS VECTOR

Which is preferred: Bitmap or Vector?For display on an LCD? RasterFor display on an LCD? RasterFor display on a plotter (a printer that draws lineswith pens)? VectorFor images from digital cameras? RasterFor CAD? (Computer Aided Design)? VectorFor high-quality text? Vector

Which is easier to:Resize? VectorRotate? VectorCrop? RasterCrop? Raster

47

BITMAP VS VECTOR

Bitmaps: The computer stores information about the screen location and color value of each dot.

The refresh rate for bitmap is usually faster than for vector imagesUsed for Photo realistic images

Vector images: are composed of a large number of lines and circles each reflecting a mathematical relationship and circles, each reflecting a mathematical relationship.

Therefore, when refreshing a screen with a vector image, the computer must calculate all vectors again. However, vector images are more precise and require less memory.

Vector’s are scalable with out losing resolution or quality

48

BITMAP VS VECTOR

Bitmap to vector >> Autotracing.Use autotracing software such as AdobeIlustrator, Adobe Streamline, ImpressionX,CorelTRACE etc.

Vector to Bitmap >> ????

49

BITMAP VS VECTOR

50

BITMAP VS VECTOR

Tracing Technique….

51

[email protected]

Dr. Dr. JamalludinJamalludin HarunHarunDr. Dr. JamalludinJamalludin HarunHarunDepartment of Educational MultimediaDepartment of Educational MultimediaFaculty of Education, UTMFaculty of Education, UTM

Technology

Graphics Category