01-Graphic-Recall 1

Lecture Notes Series (jharun@utm.
my)
VISUAL TECHNOLOGY PRODUCTION
(MPPP1373)
Department of Educational Sciences Mathematic and Creative Multimedia

Faculty of Education, UTM
BASIC GRAPHIC : FLASHBACK
Jamalludin Harun
MPPP 1373 : VISUAL TECHNOLOGY PRODUCTION
CONTENTS
innovative
Graphic Category ?
Graphic Quality ?
Graphic File Format ?
Graphic Software ?
entrepreneurial
global
Lecture Notes Series (jharun@utm.my)
GRAPHIC GATEGORY

GRAPHIC CATEGORY
What are the differences between bitmap and vector
graphics?
Vector Image
innovative
entrepreneurial
Bitmap Image
global
GRAPHIC CATEGORY
BITMAP VS VECTOR
BITMAP
Use more processing power than

bitmaps
Made up from pixels
Made up from lines equations and

calculations
Individual elements cannot be

grouped
Individual elements can be

grouped
Take up more memory than

vectors
Take up less memory than bitmaps
Take up more storage space than

vectors
Take up less storage space than

bitmaps
Photorealistic image
Image not realistic
File format : ????
File format : ???
innovative
VECTOR
Use less processing power than

vectors
entrepreneurial
global
GRAPHIC CATEGORY
BITMAP VS VECTOR
MPPP 1373 Focus on Bitmap Or Vector Or Both ?
Why we need to know about GRAPHIC CATEGORY for
MPPP 1373 ??
Advantages vs Disadvantages of X ?
innovative
entrepreneurial
global
BITMAP GRAPHICS: advantages.

Advantages of bitmaps:
Easy to create
Photorealistic image.
innovative
entrepreneurial
global

accurately represent the wide range of

colors and shades in complex images.
innovative
entrepreneurial
global

Because each pixel is colored individually, you can
create photorealistic effects
such as
shadowing and intensifying color by manipulating
select areas, one
innovative
entrepreneurial
pixel at a time.
global
10

More
universally available interchange file

formats; most bitmaps can be read by most
application software.
innovative
entrepreneurial
global
11
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 .
innovative
entrepreneurial
global
12

Enlarging a bitmap graphic may cause the

image to lose crispness and clarity.
WHY ???
.
innovative
entrepreneurial
global
13

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

effect of increasing individual pixels,
making lines and shapes appear jagged.
innovative
entrepreneurial
global
14

Enlarging a bitmap graphic may cause the image to lose crispness and clarity. WHY ???
When bitmap image is enlarged, the
individual colored squares (pixel)

become visible and the illusion of a smooth
image is lost to the viewer.
innovative
entrepreneurial
global
15

Enlarging bitmap..
innovative
entrepreneurial
global
16

In terms of the amount of digital storage, bitmaps are
memory intensive, and the higher the

resolution, the larger the file size.
innovative
entrepreneurial
global
17
BITMAP GRAPHICS: disadvantages
innovative
entrepreneurial
global
18

disadvantages of bitmaps:
innovative
entrepreneurial
global
19

disadvantages of bitmaps:
Original image
innovative
entrepreneurial
a section magnified 200%
a section magnified 400%
global
20
GRAPHIC QUALITY

GRAPHICS QUALITY
Factors that affect the quality of graphics??
Technical aspect
Hardware
Graphics Quality
Resolution
Color Depth/ Bit Depth
Compression
Pixel
Dithering
File Format
innovative
entrepreneurial
global
22
GRAPHICS QUALITY
Two factors that determine graphics quality are
resolution and color depth.
Resolution is the number of pixels per inch.

Color depth refers to the number of distinct
colors an image can contain.
innovative
entrepreneurial
global
23
GRAPHICS QUALITY
Image quality also dependent upon the equipment
produced (scanner, camera) or

displayed (monitor, graphics card)
on which they are
innovative
entrepreneurial
global
24
RESOLUTION
Resolution usually written
as a product of the
image dimensions.
320 x 200, 640

x 480, 1024 x 768 pixels
Some common image resolutions;
innovative
entrepreneurial
global
25
RESOLUTION
Resolution also can be refers to total dot
(dot per inch;dpi or

pixel per inch;ppi)
in every single inch on that image.
Example, one image can have resolution
72dpi,
300dpi, 1200dpi or more.
innovative
entrepreneurial
global
26
RESOLUTION
The
higher
the resolution, the greater the
demands for both storage
and processing.
High Resolution > High Quality

image > More Memory/Storage
space
.
innovative
entrepreneurial
global
27
RESOLUTION
72 dpi suitable for online

presentation
However, for print outcomes it is imperative that
images are produced at very high dpi.
150 to 300 dpi resolution normaly used for

printing purpose.
.
innovative
entrepreneurial
global
28
RESOLUTION
Image Size and Resolution
Using too low a resolution for a

printed image results in
pixelation (output with large,
coarse-looking pixels)
.
innovative
entrepreneurial
global
29
COLOR DEPTH
Each pixel can be in a specific colour and each pixel
consists of two or more colours.
The colour value for each pixels must be stored.
The
innovative
range of these colours
is known as the
colour depth or bit depth or Colour Resolution.
entrepreneurial
global
30
10
COLOR DEPTH
The color depth determined
How much data in bits used to determined the number
of colours in an image file.
Colour depth is measured in
bits per pixel
Remember: a bit (binary digit) is either 1 or 0 and

that there are 8-bits in a byte
innovative
entrepreneurial
global
31
COLOR DEPTH>BIT DEPTH

The greater the color depth, the more colors may be
stored. For example:
1 bit
8 bit
16 bit
24 bit
32 bit
21
28
216
224
232
2 colors
256 colors
65,536 colors
16.7 million colors
Millions plus extra information
The more colors per pixel, the larger the file size
innovative
entrepreneurial
global
32
COLOR DEPTH>EXAMPLE
1 bit
innovative
entrepreneurial
8 bit grayscale
(GIF)
8 bit color
(GIF)
24 bit color
(JPEG)
1 bit = black or white

8 bits = 256 shades
16 bits = thousands
24 bits = millions
32 bits = billions
global
33
11
COLOR DEPTH>EXAMPLE
innovative
Bits per Pixel: 1

Maximum Colors: 2
Bits per Pixel: 4

Maximum Colors: 16
Bits per Pixel: 16

Maximum Colors: 65,536
(high color)
Bits per Pixel: 24

Maximum Colors: 16,777,216
(true color)
entrepreneurial
Bits per Pixel: 8

Maximum Colors: 256
global
34
COLOR DEPTH>DITHERING
When an image with millions of colors is converted to
an image with only 256 colors, some colors have to
be removed from the image.
How...???
innovative
entrepreneurial
global
35
This process known as
DITHERING.
positioning
different colored pixels side by
side to create the illusion of some missing colors.
Dithering is the process of
innovative
entrepreneurial
global
36
12
innovative
entrepreneurial
global
37
GRAPHIC SOFTWARE

IMAGE EDITING BASIC

Painting and Drawing Tools
Most multimedia authoring programs, at least for now,
import bitmaps.
Painting and Image Editing Software (bitmap)
Adobe PhotoShop, GiMP, Corel Painter, PaintShop

Pro, Corel Photopaint, Fractal Designer, Microsoft
Paint
Drawing Software (vector)
CorelDraw, FreeHand, Illustrator, Designer, and

Deneba Canvas.
Adobe Flash
innovative
entrepreneurial
global
39
13
MANIPULATING DIGITAL IMAGES

Image editing programs enable the user to:
innovative
Enhance and make composite images.

Alter and distort images.
Add and delete elements.
Also can be used to :
create user interface & navigation system
manipulate images
object transformation
create variety of text & shape
give special effect to the image and etc.
entrepreneurial
global
40
MANIPULATING DIGITAL IMAGES

In general, the editing and paint tools fall into 5
categories:
Painting Tools Pencil, Airbrush, Line, Bucket

Drawing Tools Rectangle, Circle, Curve, Freeform,
Polygon
Editing Tools Eraser, Cropping, Lasso, Eyedropper,
Marquee.
Type Tools Integrate text and manipulate fonts
Selection Tools Lasso, Magic wand, Move.
The use and combination of these tools and variations
will help you create and edit images.
innovative
entrepreneurial
global
41
INTERFACE DESIGN
innovative
entrepreneurial
global
42
14
INTERFACE DESIGN
innovative
entrepreneurial
global
43
DIGITAL PHOTOGRAPHY
innovative
entrepreneurial
global
44
IMAGE MANIPULATION
innovative
entrepreneurial
global
45
15
IMAGE MANIPULATION
innovative
entrepreneurial
global
46
IMAGE MANIPULATION
innovative
entrepreneurial
global
47
IMAGE MANIPULATION
innovative
entrepreneurial
global
48
16
IMAGE MANIPULATION
innovative
entrepreneurial
global
49
IMAGE MANIPULATION
innovative
entrepreneurial
global
50
IMAGE MANIPULATION
innovative
entrepreneurial
global
51
17
IMAGE TRANSFORMATION
innovative
entrepreneurial
global
52
TEXT WITH STYLE
innovative
entrepreneurial
global
53
DESKTOP PUBLISHING
innovative
entrepreneurial
global
54
18
DESKTOP PUBLISHING
innovative
entrepreneurial
global
55
Thank You
jharun@utm.my | eLearning.utm.my
19

01-Graphic-Recall 1

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

01-Graphic-Recall 1

Caricato da

Copyright:

Formati disponibili

Lecture Notes Series (jharun@utm.

VISUAL TECHNOLOGY PRODUCTION

Department of Educational Sciences Mathematic and Creative Multimedia

BASIC GRAPHIC : FLASHBACK

MPPP 1373 : VISUAL TECHNOLOGY PRODUCTION

Graphic File Format ?

Lecture Notes Series (jharun@utm.my)

Department of Educational Sciences Mathematic and Creative Multimedia

MPPP 1373 : VISUAL TECHNOLOGY PRODUCTION

MPPP 1373 : VISUAL TECHNOLOGY PRODUCTION

Use more processing power than

Made up from pixels

Made up from lines equations and

Individual elements cannot be

Individual elements can be

Take up more memory than

Take up less memory than bitmaps

Take up more storage space than

Take up less storage space than

Image not realistic

File format : ????

File format : ???

Use less processing power than

Lecture Notes Series (jharun@utm.my)

MPPP 1373 : VISUAL TECHNOLOGY PRODUCTION

MPPP 1373 : VISUAL TECHNOLOGY PRODUCTION

BITMAP GRAPHICS: advantages.

MPPP 1373 : VISUAL TECHNOLOGY PRODUCTION

BITMAP GRAPHICS: advantages.

accurately represent the wide range of

Lecture Notes Series (jharun@utm.my)

MPPP 1373 : VISUAL TECHNOLOGY PRODUCTION

BITMAP GRAPHICS: advantages.

create photorealistic effects

MPPP 1373 : VISUAL TECHNOLOGY PRODUCTION

BITMAP GRAPHICS: advantages.

universally available interchange file

MPPP 1373 : VISUAL TECHNOLOGY PRODUCTION

BITMAP GRAPHICS: disadvantages.

Can NOT be resized

without some effects on

Lecture Notes Series (jharun@utm.my)

MPPP 1373 : VISUAL TECHNOLOGY PRODUCTION

BITMAP GRAPHICS: disadvantages.

Enlarging a bitmap graphic may cause the

MPPP 1373 : VISUAL TECHNOLOGY PRODUCTION

BITMAP GRAPHICS: disadvantages.

Increasing the size of a bitmap has the

MPPP 1373 : VISUAL TECHNOLOGY PRODUCTION

BITMAP GRAPHICS: disadvantages.

When bitmap image is enlarged, the

individual colored squares (pixel)

Lecture Notes Series (jharun@utm.my)

MPPP 1373 : VISUAL TECHNOLOGY PRODUCTION

BITMAP GRAPHICS: disadvantages.

MPPP 1373 : VISUAL TECHNOLOGY PRODUCTION

BITMAP GRAPHICS: disadvantages.

memory intensive, and the higher the

MPPP 1373 : VISUAL TECHNOLOGY PRODUCTION

BITMAP GRAPHICS: disadvantages

Lecture Notes Series (jharun@utm.my)

MPPP 1373 : VISUAL TECHNOLOGY PRODUCTION

BITMAP GRAPHICS: disadvantages.