1. GRAPHICS
UG141 – Multimedia Design
Johny Hizkia Siringo Ringo
BIT (Multimedia Tech.), MIMS (Soft. Dev.)
johny.hizkia@istb.ac.id
johny.hizkia.ringo@gmail.com
www.istb.ac.id

2. Role of Graphic
• Graph and Chart
• Photograph or images
• Background metaphor
• Animated graphic
johny.hizkia@istb.ac.id www.istb.ac.id 2

3. Graphics – Some Terminology
• Pixel: A digital image consist of many picture
elements
johny.hizkia@istb.ac.id www.istb.ac.id 3

4. Graphic – Some Terminology
• Resolution: The number of pixel determine
the quality of the image (higher = better)
johny.hizkia@istb.ac.id www.istb.ac.id 4

5. Vector Vs Bitmap
• Vector
– is represented as geometric shape (lines and arc)
and is stored as mathematical instruction.
– Example: SVG
• Bitmap
– is represented as pixel and stored
– Example: bmp, jpeg
johny.hizkia@istb.ac.id www.istb.ac.id 5

6. Vector
Bitmap
johny.hizkia@istb.ac.id www.istb.ac.id 6

7. johny.hizkia@istb.ac.id www.istb.ac.id 7

8. Vector
• Advantages of using Vector
– Can be modified without affecting its quality
– Smaller in file size
– Ideal for animation and design
• Disadvantages of using Vector
– Not a popular format
– Limited to certain programs like spreadsheet or
graphic program
johny.hizkia@istb.ac.id www.istb.ac.id 8

9. Bitmap
• Advantages of using Bitmap
– Popular formats such as JPEG, BMP, and others
– Scanner normally output images in bitmap
formats
• Disadvantages of using Bitmap
– Hard to be modified without affecting the quality
– File size can be large
johny.hizkia@istb.ac.id www.istb.ac.id 9

10. Bitmap
• Quality of Bitmap is determined by screen
resolution and color depth (range of color
available for pixels, measured in bits)
• File size = image in pixels * color depth in bits.
johny.hizkia@istb.ac.id www.istb.ac.id 10

11. Vector Vs Bitmap
Bitmap Graphic Vector Graphic
Simple matrix or grids of dots with color Image data are stored in the form of:
information. • Data points which describe the
collection of lines, curves, circle, etc
Think about an array of colored dots that
when seen from distance forms an
image.
Smallest elements of a bitmap is a pixel The information of the images can be
stored as coordinates.
Bitmap images get grainy and pixilated The computer recreates the image based
when zoomed in on the information describing the image
Best for large image with different colors Easily scaled without quality loss
johny.hizkia@istb.ac.id www.istb.ac.id 11

12. Vector Vs Bitmap
PROGRAM FILE EXTENSION BITMAP VECTOR
Adobe Photoshop .psd X
Mac Quikcdraw .pct / .pict X
Targa Bitmap .tga X
Windows Bitmap .bmp x
Adobe Illustrator .ai / .eps X
AutoCAD .dwg / .dxf X
AutoDesk Draw .cdr X
Windows Metafile .wmf x
johny.hizkia@istb.ac.id www.istb.ac.id 12

13. Guidelines for using Graphics
• Avoid using graphic that do not add value to
contents
• Consider using thumbnails, when dealing with
graphics
• Use quality graphic that adds value to content
johny.hizkia@istb.ac.id www.istb.ac.id 13

14. Graphic Authoring Tools
• Paint Program
– MS Paint
– Adobe Illustrator
• Image editing program
– Photoshop
– Gimp
– Corel Draw
johny.hizkia@istb.ac.id www.istb.ac.id 14

15. Graphic Authoring Tools
• Task to Perform:
– Crop: removing unwanted section of an image
– Enhance: Improving the quality or remove defects
due to resolution and contrast
– Filter: Sharpening / Distort an image
– Layering: Using additional image in layers
– 3D Imaging
johny.hizkia@istb.ac.id www.istb.ac.id 15

16. GIF (Graphics Interchange Format)
• A bitmap image format
• Supports up to 8 bits per pixel (256 color)
• Using lossless data compression
• Usage:
– GIFs are suitable for sharp-edged line art (such as
logos) with a limited number of colors.
– GIFs can be used to store low-color sprite data for
games.
– GIFs can be used for small animations and low-
resolution film clips.
johny.hizkia@istb.ac.id www.istb.ac.id 16

17. GIF (Graphics Interchange Format)
Advantages Disadvantages
Can only have
No color
maximum 256
information lost
colors
Does not
Compress line compress
art well photographs
well
Support
transparency, Copyrighted
interlace, format
animation
johny.hizkia@istb.ac.id www.istb.ac.id 17

18. PNG (Portable Network Graphics)
• A bitmapped image format
• Employs lossless data compression
• Improve upon and replace GIF
• Support palette-based images (24-bit RGB)
johny.hizkia@istb.ac.id www.istb.ac.id 18

19. PNG (Portable Network Graphics)
Advantages Disadvantages
Not all
No color
supported by
information
web browsers
Support more
than 16.7
million colors
Compresses
images well
Support
transparent,
interlace
johny.hizkia@istb.ac.id www.istb.ac.id 19

20. Interlace/progressive
Begins with a low-resolution image and increases details as
the file continue to load.
johny.hizkia@istb.ac.id www.istb.ac.id 20

21. JPEG
(Joint Photographic Experts Group)
• Used method of lossy data compression
• The most common image format used by
digital cameras and other photographic image
capture devices
• Supports up to 16.7 million colors
johny.hizkia@istb.ac.id www.istb.ac.id 21

22. JPEG
(Joint Photographic Experts Group)
Advantages Disadvantages
Support a Losses some
maximum 16.7 image
million colors information
Compress
No
photographs
transparency
well
Support
progressive No animation
images quality
johny.hizkia@istb.ac.id www.istb.ac.id 22

23. Summary
• Decision factors:
• Support by the browsers
• Colors – photo-like image
• Transparency
• Animation
• Interlacing
johny.hizkia@istb.ac.id www.istb.ac.id 23