graphics category
DESCRIPTION
Category of Digital GraphicsTRANSCRIPT
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
BITMAP GRAPHICS: an overview…
What are bitmap graphics?
Pixel: short for “Picture Element”, is a single
point in a graphic image. p g p g .
9
BITMAP GRAPHICS: an overview…
What are bitmap graphics?
The information stored in a bitmap image p g
regarding pixel location and color forms the imageis what forms the image.
10
BITMAP GRAPHICS: an overview…
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
BITMAP GRAPHICS: how to create….
Where do bitmaps come from:
Create a bitmap from scratch with a paintor drawing program (such as Microsoft
Paint & Adobe Photoshop).p)
15
BITMAP GRAPHICS: how to create….
Where do bitmaps come from:
Grab from an active computer screen with a
screen capture program.
16
BITMAP GRAPHICS: advantages….
Advantages of bitmaps:
Easy to create
Photorealistic image.
17
BITMAP GRAPHICS: advantages….
Advantages of bitmaps:
accurately represent the wide range of
colors and shades in complex images.
18
BITMAP GRAPHICS: advantages….
Advantages of bitmaps:
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
BITMAP GRAPHICS: advantages….
Advantages of bitmaps:
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
BITMAP GRAPHICS: disadvantages….
Disadvantages of bitmaps:
Enlarging a bitmap graphic may cause the l d limage to lose crispness and clarity.
WHY ???WHY ???22
BITMAP GRAPHICS: disadvantages….
Disadvantages of bitmaps:
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
BITMAP GRAPHICS: disadvantages….
Disadvantages of bitmaps:
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
BITMAP GRAPHICS: disadvantages….
Enlarging bitmap…..
25
BITMAP GRAPHICS: disadvantages….
Disadvantages of bitmaps:
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
BITMAP GRAPHICS: disadvantages….
Disadvantages of bitmaps:
28
BITMAP GRAPHICS: disadvantages….
Disadvantages of bitmaps:
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: an overview
What are vector graphics?
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: an overview
Vector graphics are defined using formulas. ExampleExample
RECT 0,0,200,200,RED,BLUE
33
VECTOR GRAPHICS: an overview
What are vector graphics?
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
VECTOR GRAPHICS: an overview
What are vector graphics?
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: an overview
Vector graphics are composed of paths.
36
VECTOR GRAPHICS: advantages…
Advantages of vector:
Easy to manipulate and edited
(WHY?). ( )Shapes easily edited
37
VECTOR GRAPHICS: advantages…
Advantages of vector:
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
VECTOR GRAPHICS: advantages…
Advantages of vector:
High QUALITY. Resolution INDEPENDENT.
Vector: Bitmap: Sharper images
Blurry images
39
VECTOR GRAPHICS: advantages…
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
Dr. Dr. JamalludinJamalludin HarunHarunDr. Dr. JamalludinJamalludin HarunHarunDepartment of Educational MultimediaDepartment of Educational MultimediaFaculty of Education, UTMFaculty of Education, UTM