1. Chapter 3:- Graphics
Eyad Alshareef
Eyad Alshareef

2. Topics: Definition of Graphics Why use Graphics? Graphics Categories
Graphics Qualities
File Formats
Types of Graphics
Graphic File Size
Eyad Alshareef

3. Definition of Graphics
Graphic is a digital representation of non- text information such as chart, graph, illustration etc.
Picture or image made with the assistance of computers.
Many visual representations are generally much more effective at conveying information than text.
Eyad Alshareef

4. Usages of Graphics To add emphasis Direct attention
Illustrate concepts
Provide background content
Eyad Alshareef

5. Images come in a variety of forms:
Photographs
Drawings
Paintings
Television and motion pictures
Maps etc.
Eyad Alshareef

6. Advantages of Graphics
Convey information more quickly than when using text
Make complex information simple
Enhance online teaching and learning
Enhance communication with some disabled groups, particularly those with learning difficulties or cognitive impairments
Eyad Alshareef

7. Disadvantages of Graphics
Take longer to download
Require the use of plug-ins that the user may not have or be able to install
Create accessibility barriers for some users
Eyad Alshareef

8. Images play an important part in multimedia
Navigation
User interface components
Help systems
Clip art
Eyad Alshareef

9. Graphics Categories There are two categories of graphics : Vector
Bitmap
Eyad Alshareef

10. Vector Graphics
Can be created using any drawing software, e.g.: Illustrator.
Macromedia Flash is a vector-based format
Eyad Alshareef

11. Vector Graphics
Images created with software that uses geometrical formulas to represent images.
Composed of individual elements, e.g., arc, line, polygon, with their own attributes that can be individually edited.
Can be created using any drawing software, e.g.: Illustrator.
Eyad Alshareef

12. Eyad Alshareef

13. Primitive geometric drawing objects
Basic
Line
Polyline
Arc
Bezier curve
Text
Font, weight
Shapes
Circle
Ellipse
Rectangle
Square
Pie segment
Triangle
Pentagon, hexagon, heptagon, octagon, etc
Eyad Alshareef

14. Scaling vector graphics
Shown
magnified
Original image
Eyad Alshareef

15. Vector Graphics -Advantages
The ability to resize and rotate a graphic without distortions
Another advantage is their smaller file size.
Eyad Alshareef

16. Vector Graphics -Disadvantages
One of the drawbacks of vector graphics is that the more complex they are, the larger the file size and the longer they take to appear on the screen.
Another disadvantage is that they cannot display photorealistic quality.
Eyad Alshareef

17. Bitmap Graphics Bitmap graphics are also called raster graphics.
A bitmap represents the image as an array of dots, called pixels.
Bitmap graphics are resolution-dependent and generate large file sizes.
Eyad Alshareef

18. Bitmaps Image
A pixel is the smallest element of resolution on a computer screen (Screen Resolution)
A pixel is the basic unit of a digital images.
Digital image is a picture that may be stored in, displayed on, processed by a computer.
bitmap is composed of a matrix elements called pixels
Each pixel can be in a specific color and each pixel consists of two or more colors.
Eyad Alshareef

19. Bitmap Graphics -Advantages
The bitmap can be more photorealistic.
We can set the color of every individual pixel in the image
Eyad Alshareef

20. Bitmap Graphics -Disadvantages
Bitmaps are memory intensive, and the higher the resolution, the larger the file size.
When an image is enlarged, the individual colored squares become visible and the illusion of a smooth image is lost to the viewer.
Eyad Alshareef

21. Eyad Alshareef

22. Bitmap images image must be mapped to the matrix problem : jagged
formed from matrix of pixels
image must be
mapped to the
matrix
problem : jagged

23. Eyad Alshareef

25. Eyad Alshareef

26. Eyad Alshareef

27. Bitmap Image Quality Three factors: Image Size Color Depth Resolution
Eyad Alshareef

28. Image Size
Image size refers to the height and width of the image, measured in inches, centimeters, pixels, or any other unit of measure.
Alternatively, if the image size is measured in dots or pixels, then you know exactly how much image data exists because a 300 pixel by 500 pixel image contains 15,000 pixels no matter how many pixels you designate per inch.
Eyad Alshareef

29. Color Depth
Color Depth or Bit Depth refers to the number of bits used to describe the color of a single pixel.
It determines the number of colors that can be displayed at one time.
Eyad Alshareef

30. Color depth is measured in bits per pixel
The color depth determined “How much data in bits used to determined the number of colors”.
Color depth is measured in bits per pixel
Eyad Alshareef

31. Color Depth
Eyad Alshareef

32. Eyad Alshareef

33. Eyad Alshareef

34. Resolution
The resolution of the image refers to the number of pixel in the image.
It also refers to the sharpness and clarity of an image.
You can think of a bitmapped image as a piece of graph paper, of any size, that has had each square filled in by a color.
The squares are called dots or pixels.
Eyad Alshareef

35. Bitmapped images
Original image
Eyad Alshareef
Shown
magnified

36. Eyad Alshareef

37. Eyad Alshareef

38. Eyad Alshareef

39. Digital Image File Formats
Microsoft Bitmap (BMP)
Joint Photographic Experts Group (JPEG)
Tag Image File Format (TIFF)
Portable Network Graphic (PNG)
Graphic Interchange Format (GIF)
Windows Metafile (WMF)
Eyad Alshareef

40. Digital Image File Formats
Microsoft bitmap (.bmp)
Used in Microsoft windows
TIFF - Tagged Image File Format (.tif)
Used for faxing images (amongst other things)
JPEG - Joint Photographic Expert Group (.jpg)
Useful for storing photographic images
Eyad Alshareef

41. Digital Image File Formats
GIF - Graphics Interchange Format (.gif)
Used a lot on web sites
PNG - Portable Network Graphics (.png)
A new format for web graphics
Eyad Alshareef

42. Eyad Alshareef

43. Eyad Alshareef

44. Eyad Alshareef

45. Eyad Alshareef

46. comparing file size jpg = 224KB bmp = 216 KB png = 127 KB tif = 157 KB
gif = 56KB lowest quality because 256 colors only

47. Calculate Digital Image File Size
Eyad Alshareef

48. Calculate Digital Image File Size
Example 1:
A full screen graphic resolution (640 x 480 pixels) at an 8-bit color will yield the following file size:
(640 x 480 x 8) / 8 = bytes (b)
Eyad Alshareef

49. Calculate Digital Image File Size
Example 2:
A full screen graphic resolution (320 x 240 pixels) with 16-bit colors will yield the following file size:
(320 x 240 x 16) / 8 = bytes (b)
Eyad Alshareef

50. Eyad Alshareef

51. File Compression Two types of file compression: Lossless Lossy
Eyad Alshareef

52. File Compression Lossless Compression
Lossless compression algorithms reduce file size without losing image quality.
They are not compressed as small a file as a lossy compression file.
Eyad Alshareef

53. File Compression Lossy Compression
A lossy compression method is one where compressing data and then decompressing it retrieves data that is different from the original, but is close enough to be useful in some way.
Lossy compression is most commonly used to compress multimedia data (audio, video, still images)
Eyad Alshareef

54. Eyad Alshareef

55. Eyad Alshareef

56. Working with Graphics Select the right kind of graphics for the job
Select the right graphics tool for the job
Select the minimum color depth that is appropriate to your application
Set up your delivery system correctly.
Select bitmap file formats for quality and portability
Use vector graphics formats that are understood by your authoring system
Eyad Alshareef

57. Eyad Alshareef