Introduction to Graphic Design

1. UNDERSTANDING RASTER
GRAPHICS
BITMAP GRAPHIC – PIXELS –
RESOLUTION – IMAGE
QUALITY – JPG
COMPRESSION – FILE
FORMATS – COLOR DEPTH

2. BITMAP GRAPHIC
Definition: it is also called ‘raster graphic’ or simply a ‘bitmap’, is
composed of a grid of dots, and the color of each dot is stored as
a binary number.
Think of a grid superimposed on a picture. The grid divided the
picture into cells, called pixel. Each pixel is assigned a color,
which is stored as a binary number.

3. YOU CAN BUILD AN IMAGE SQUARE
BY SQUARE. WHEN YOU STAND FAR
ENOUGH AWAY FROM THE GRID,
THE INDIVIDUAL GRID SQUARES
BLEND TOGETHER AND YOU SEE A
COMPLETE PHOTOGRAPHIC IMAGE.

4. PIXEL AND RESOLUTION
 Each of the smallest visual units on the screen (called pixels)
represents a location in memory.
 A digital image is broken down into pixels, each of which can be
assigned an individual color
 Resolution refers to the fineness or sharpness of a screen
display or computer-generated printed piece
 The more memory available and thus the more pixels in the
digital image, the higher the resolution is, and the clearer the
image will be
 The resolution of an individual file depends on what the
artist/designer designates when the file is created where
resolution for a new file is set.

6. IMAGE RESOLUTION
The dimension of the grid that forms a bitmap graphic are referred
to as its resolution.
The resolution of a graphics is expressed as the number of
horizontal and vertical pixel it contains
For example, a small graphic for web page might have a resolution
of 150 x 100 pixels – 150 pixel across and 100 pixel high

7. PHYSICAL SIZE OF IMAGE –
IMAGE RESOLUTION
 Unlike a printed photograph, a bitmap has no physical size.
 The size at which a bitmap is displayed or printed depends on the
density as well the resolution of the image grid
 Imagine the grid over the image, if you stretch the image, the grid
maintains the no. of horizontal and vertical cell, but each cell becomes
larger and the grid less dense.
 Similarly, when you shrink, the grid become denser.
 The density of an image grid can be expressed as dots per inch (dpi)
for a printer or scanner or as pixel per inch (ppi) for a monitor

8. WHERE DO YOU FIND
BITMAP GRAPHICS?
DIGITAL CAMERA IMAGES
SCANNER PRODUCES
BITMAPS
WEB PAGE GRAPHICS

9. HOW DO YOUR CREATE
BITMAPS?
MS PAINT, ADOBE
PHOTOSHOP.
THESE SOFTWARE ALLOWS
YOU FREEHAND SKETCHING,
ADDING REALISTIC SHADING
AND OTHER CREATIVE
EFFECTS
SCANNER AND DIGITAL
CAMERAS CREATE BITMAP
IMAGES.

10. WHAT DOES IMAGE QUALITY
MEAN?
In addition to image size, the quality of the image can also be
manipulated.
Here we use the word "compression".
An uncompressed image is saved in a file format that doesn't
compress the pixels in the image at all. Formats such as BMP or
TIF files do not compress the image.
you can choose to store your image as a JPG file and choose the
amount of compression you want before saving the image.

11. DIFFERENCE IN COMPRESSION

12. JPG COMPRESSION
JPG compression analyzes images in blocks of 8X8 pixels in size
and selectively reduces the detail within each block
At higher compression rations, the block pattern becomes more
visible and there may be noticeable loss of detail
The subject and pattern in the image is also a factor
For example, a picture of the blue sky can be compressed quite a
bit without any noticeable effects but a picture of a colorful bird
would "pixelate" quite quickly

14. FILE SIZE –
IMAGE
RESOLUTION
EACH PIXEL IN A BITMAP GRAPHIC IS STORED AS ONE OR
MORE BITS. THE MORE THE PIXELS THE MORE BITS IS
REQUIRED TO STORE THE FILE
SO, HIGHER RESOLUTION = HIGH FILE SIZE

15. IMAGE QUALITY – IMAGE
RESOLUTIONHigher resolution – more data
Higher resolution – better quality
Megapixel – millions of pixels
1.9 mega pixel digital camera will have resolution of 1600 x 1200
pixels
3.1 mega pixel digital camera will have resolution of 2160 x 1440

16. The numbers along the top and left side are print dimensions in inches at
300ppi (pixels per inch). Most books and magazines require 300ppi for photo
quality. For example, the chart shows that you can make a 5" x 7" photo
quality print from a 3 megapixel camera.

17. THE MATHEMATICS
Here's why:
- A megapixel is 1 million pixels. It's an area measurement like square feet.
- A typical 8 megapixel camera produces images that are 3266 x 2450* pixels.
If you multiply 3266 by 2450, you get 8,001,700 or 8 million pixels.
- To find the largest photo quality image you can print, simply divide each
dimension by 300:
3266 / 300 = 10.89 inches
2450 / 300 = 8.17 inches

19. LETS WORK
NO IT
BACKWARDS
LET'S SAY WE WANT TO PRINT AN 8X10 PICTURE AT 300 DPI
WHAT RESOLUTION MUST WE HAVE TO DO THIS?

20. THE ANSWER
OK, 300 times 8 is 2400
• 300 x 8 = 2400
300 times 10 is 3000
• 300 x 10 = 3000
• So we would need a 3000 X 2400 image to do this.
• 3000 X 2400 = 7.2 megapixels

21. PRINT SIZE VS
RESOLUTION
FIRST TRY TO DETERMINE WHAT
YOUR USE FOR THE IMAGE WILL BE
CHOOSE THE IMAGE SIZE AND
AMOUNT OF COMPRESSION TO MEET
THESE NEEDS
CAPTURE AT THE LEAST POSSIBLE
COMPRESSION

22. COLOR DEPTH
It is the number of colors available for use in an image.
As the number of color increases, image quality improves, but file
size also increases.
Color "depth" is defined by the number of bits per pixel that can
be displayed on a computer screen
Data is stored in bits
Each bit represents two colors because it has a value of 0 or 1
The more bits per pixel, the more colors that can be displayed

23. PIXELS AND COLOR DEPTH
To control the color of each pixel on the screen, the operating
system must dedicate a small amount of memory to each pixel
In the simplest form of black-and-white computer displays, a
single bit of memory is assigned to each pixel
Because each memory bit is either positive or negative (0 or 1), a
1-bit display system can manage only two colors (black or white)
for each pixel on the screen:

24. MONOCHROME MONITOR

25. COLOR
If more bits of memory are dedicated to each pixel in the display, more
colors can be managed
When 8 bits of memory are dedicated to each pixel, each pixel could be
one of 256 colors.
256 = 2 to the eighth power; in other words, 256 is the maximum number
of unique combinations of zeros and ones you can make with 8 bits.
This kind of computer display is called an "8-bit" or "256-color" display,
and is common on older laptop computers and desktop machines

27. 8-BIT COLOR DISPLAYS

28. KNOW BASICS
FILE FORMATS

29. TIFF (TAGGED IMAGE FILE FORMAT)
IS A WIDELY USED BITMAPPED FILE FORMAT. IT IS APPROPRIATE
FOR SCANNED IMAGES. ALMOST EVERY PROGRAM THAT WORKS
WITH RASTER IMAGES CAN BE OPEN THIS FORMAT

30. EPS (ENCAPSULATED
POSTSCRIPT)
Is a object oriented format that is excellent for storing graphics of
any kind
Use it when you want to put type and images into a layout
program for print. It is refined form of PostScript that will allow a
raster and a vector program to open the file for editing

31. JPEG
IS A COMPRESSED FILE FORMAT
THAT REDUCES THE PIXELS IN YOUR
FILE TO SAVE MEMORY. IT IS USED
FOR WEB GRAPHICS WITH COLOR
GRADATIONS OR PHOTOGRAPHIC
IMAGES. NEVER SAVE A JPEG OVER
ITSELF, BECAUSE IT LOSES
INFORMATION EACH TIME AN IMAGE
IS SAVED IN THIS FORMAT. THIS IS
KNOWN AS A LOSSY FILE FORMAT

32. GIF
IS ALSO A FILE FORMAT USED
IN WEB GRAPHICS FOR IMAGES
FEATURING TYPE AND FLAT
COLOR. IT COMPRESSES
GRAPHICS WITHOUT
ELIMINATING DETAIL
THIS IS KNOWN AS A
LOSSLESS FILE FORMAT

33. PDF
ARE SIMPLY CROSS PLATFORM AND
CAN OPEN IN ADOBE’S ACROBAT
READER. THIS PROGRAM IS FREE
AND IN INCLUDED ON MOST
APPLICATION DISK. YOU CAN PRINT
FROM IT EVEN IF YOU DON’T OWN
THE FONTS IN THE DOCUMENTS OR
THE SOFTWARE USED TO CREATE
THE ARTWORK

34. PICT
IS A MAC OBJECT ORIENTED
FILE FORMAT. IT HANDLES
BITMAP AND VECTOR IMAGES
WELL, THEY SHOULD BE
CONVERTED TO TIFF OR EPS
BEFORE PLACING IN A PAGE
LAYOUT PROGRAM SUCH AS
PAGEMAKER, QUARK OR
INDESIGN.