GRAPHICSUG141 – Multimedia Design                 Johny Hizkia Siringo Ringo           BIT (Multimedia Tech.), MIMS (Soft....
Role of Graphic•   Graph and Chart•   Photograph or images•   Background metaphor•   Animated graphicjohny.hizkia@istb.ac....
Graphics – Some Terminology• Pixel: A digital image consist of many picture  elementsjohny.hizkia@istb.ac.id   www.istb.ac...
Graphic – Some Terminology• Resolution: The number of pixel determine  the quality of the image (higher = better)johny.hiz...
Vector Vs Bitmap• Vector      – is represented as geometric shape (lines and arc)        and is stored as mathematical ins...
Vector                                           Bitmapjohny.hizkia@istb.ac.id   www.istb.ac.id        6
johny.hizkia@istb.ac.id   www.istb.ac.id   7
Vector• Advantages of using Vector      – Can be modified without affecting its quality      – Smaller in file size      –...
Bitmap• Advantages of using Bitmap      – Popular formats such as JPEG, BMP, and others      – Scanner normally output ima...
Bitmap• Quality of Bitmap is determined by screen  resolution and color depth (range of color  available for pixels, measu...
Vector Vs Bitmap                   Bitmap Graphic                              Vector Graphic   Simple matrix or grids of ...
Vector Vs Bitmap       PROGRAM              FILE EXTENSION             BITMAP   VECTOR      Adobe Photoshop             .p...
Guidelines for using Graphics• Avoid using graphic that do not add value to  contents• Consider using thumbnails, when dea...
Graphic Authoring Tools• Paint Program      – MS Paint      – Adobe Illustrator• Image editing program      – Photoshop   ...
Graphic Authoring Tools• Task to Perform:      – Crop: removing unwanted section of an image      – Enhance: Improving the...
GIF (Graphics Interchange Format)•   A bitmap image format•   Supports up to 8 bits per pixel (256 color)•   Using lossles...
GIF (Graphics Interchange Format)             Advantages                               Disadvantages                      ...
PNG (Portable Network Graphics)•   A bitmapped image format•   Employs lossless data compression•   Improve upon and repla...
PNG (Portable Network Graphics)                      Advantages                        Disadvantages                      ...
Interlace/progressiveBegins with a low-resolution image and increases details asthe file continue to load.johny.hizkia@ist...
JPEG    (Joint Photographic Experts Group)• Used method of lossy data compression• The most common image format used by  d...
JPEG    (Joint Photographic Experts Group)             Advantages                             Disadvantages               ...
Summary• Decision factors:      • Support by the browsers      • Colors – photo-like image      • Transparency      • Anim...
Upcoming SlideShare
Loading in...5
×

UG141 - Week 5 (Graphics)

176

Published on

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
176
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
22
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "UG141 - Week 5 (Graphics)"

  1. 1. GRAPHICSUG141 – 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. 2. Role of Graphic• Graph and Chart• Photograph or images• Background metaphor• Animated graphicjohny.hizkia@istb.ac.id www.istb.ac.id 2
  3. 3. Graphics – Some Terminology• Pixel: A digital image consist of many picture elementsjohny.hizkia@istb.ac.id www.istb.ac.id 3
  4. 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. 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, jpegjohny.hizkia@istb.ac.id www.istb.ac.id 5
  6. 6. Vector Bitmapjohny.hizkia@istb.ac.id www.istb.ac.id 6
  7. 7. johny.hizkia@istb.ac.id www.istb.ac.id 7
  8. 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 programjohny.hizkia@istb.ac.id www.istb.ac.id 8
  9. 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 largejohny.hizkia@istb.ac.id www.istb.ac.id 9
  10. 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. 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 lossjohny.hizkia@istb.ac.id www.istb.ac.id 11
  12. 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 xjohny.hizkia@istb.ac.id www.istb.ac.id 12
  13. 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 contentjohny.hizkia@istb.ac.id www.istb.ac.id 13
  14. 14. Graphic Authoring Tools• Paint Program – MS Paint – Adobe Illustrator• Image editing program – Photoshop – Gimp – Corel Drawjohny.hizkia@istb.ac.id www.istb.ac.id 14
  15. 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 Imagingjohny.hizkia@istb.ac.id www.istb.ac.id 15
  16. 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. 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 animationjohny.hizkia@istb.ac.id www.istb.ac.id 17
  18. 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. 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, interlacejohny.hizkia@istb.ac.id www.istb.ac.id 19
  20. 20. Interlace/progressiveBegins with a low-resolution image and increases details asthe file continue to load.johny.hizkia@istb.ac.id www.istb.ac.id 20
  21. 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 colorsjohny.hizkia@istb.ac.id www.istb.ac.id 21
  22. 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 qualityjohny.hizkia@istb.ac.id www.istb.ac.id 22
  23. 23. Summary• Decision factors: • Support by the browsers • Colors – photo-like image • Transparency • Animation • Interlacingjohny.hizkia@istb.ac.id www.istb.ac.id 23
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×