Understanding Raster Graphics

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.

5. 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

6. 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

7. Where do you find bitmap graphics? Digital camera images Scanner produces bitmaps Web page graphics

8. 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.

9. 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.  

10. Difference in Compression

11. 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

12. 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

13. Image quality – Image Resolution Higher 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

14. 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.

15. 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

16. 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?

17. 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

18. 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

19. 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

20. 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:

21. Monochrome monitor

22. 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

23. 8-bit color displays

24. KNOW BASICS File formats

25. 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

26. 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

27. 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

28. 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

29. 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

30. 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 .