Graphic Design Basic

Images for Information and Interaction One of the major features that make the World Wide Web stand out from other forms of information media is that pages on the Web can contain full-color images. To place images on your Web pages, those images must be in GIF or JPEG format (GIF is more widely supported) and small enough that they can be quickly downloaded over a potentially slow link. As a designer of Web pages, you should consider both the attractiveness and loading time of web pages. Balance the fun of creating a highly visual, colorful Web page with the need to get your information effectively to everyone you wants to have it.

Images make the text information more vivid, support faster interpretations that are not easily possible with text. Images could be static or dynamic Static images could be created using any of the Image-Editing tools or could be sourced from scanned images/image capture from digital cameras, which in turn needs to be retouched for achieving good quality. Animated images that may or may not have links are dynamic in nature. Some basic GIF animations could be created using software like ImageReady and more interactive complex animations could be achieved using advanced tools like Flash.

As introduced earlier, the two most common graphic file formats on the web are .GIF (Graphic Interchange Format) .JPEG (Joint Photographic Experts Group). These file formats are used on the web because they have the best compression. Compression is the technique used to take a large file and turn it into a smaller file by applying a fancy mathematical algorithm to it. Since many users are accessing web pages on 28.8 modems, the smaller the file, the more quickly it can be transferred over the net. Image size is no joke. If your images take too long to load, a user will never even bother to wait to read about what you have to say. A good rule of thumb is that you should use .GIF files for images and .JPEG files for photographs.

Use the GIF format in these situations Transparent images. Table or page backgrounds that use only a few colors. Anytime when 256 colors is sufficient for the image Use the JPEG format in these situations: Images created from photos, especially of people, scenic, animals, etc.

File Formats Graphics File Format Extension Features & Description .gif Used for Web Graphics – Small, only 256 colors can have transparencies and animation. .jpg Small, Compressed can have millions of colors. .psp Internal format for Paint Shop Pro, useful if you are not done editing a photo. .psd Internal to Adobe PhotoShop, useful for transfer to PhotoShop from Paint Shop Pro or other Adobe applications. .png New format for use on the Web. Compressed, millions of colors, transparencies.

.tif Common in use with early scanners, very large files. Best to avoid this format. .wmf Windows Metafile. Useful for clipart, can be used to make large area, small sized web background .gifs .bmp Large files, used for Windows programs and backgrounds. .pcx Common older general purpose format, do not use on the web .pcd Kodak PhotoCD Format, used with Photo Developing

BMP: It is the native format for MS Paint, the generic graphics program included with Windows. BMP supports 16 million colors and RLE (Run Length Encoding) compression. You can open and save BMP files in RGB, Indexed, Grayscale, and Bitmap color modes. JPEG (Joint Photographic Experts Group): Primarily used for two purposes – to compress files and to save files for use on the Web. You can open and save JPEG files in RGB, CMYK, and Grayscale color modes. It is a lossy compression mode, which means that it loses information to make the file smaller. The amount of data that is lost depends on the settings you choose when you save a file in JPEG format. GIF (Graphics Interchange Format): GIF, which stands for Graphics Interchange Format, is a loss less method of compression. All that means is that when the program that creates a GIF squashes the original image down it takes care not to lose any data. It uses a simple substitution method of compression.

PCX (PC Paintbrush): Native format for PC Paintbrush, the Windows paint program. PCX supports 24-bit color. You can open and PCX in RGB< Indexed, Grayscale and Bitmap color modes. PICT (Macintosh Picture): Native Macintosh image format. This format has been used extensively in desktop-publishing applications and for transferring files across platforms. PICT can support bitmaps and object-oriented images. It can compress files and works particularly well on images with large areas of color, such as black and white alpha channels TIFF (Tagged Image File Format): A Standard for images that will be placed in desktop-publishing programs. It can be transported across platforms and compressed to reduce file size. You can open and save TIFF files in RGB, CMYK (with alpha channels), Grayscale, Lab, Indexed, and Bitmap (without alpha channels) color modes.

PCD (Kodak PhotoCD): PhotoCD is a technology developed by Eastman Kodak for high-quality, visually lossless image capture and storage. PhotoCD service providers are licensed by Eastman Kodak to capture (or convert) images to Kodak PhotoCD format and to write them to a specialized CD-ROM disc called a Kodak Digital Science PhotoCD Disc. These discs are each capable of holding up to 100 or more high-quality images. They are multi-session CD-ROM's, which means that a customer can have a few images added to the disc and bring it back to have more added at a later time. Images on the disc are stored in a specialized file called an Image Pac that contains five (or sometimes six) copies of the image at resolutions ranging from 72K to 18 (or 72) megabytes in file size. Image Pac's may be used on any IBM-PC Compatible, Macintosh or UNIX computer. Each image is accessible through Kodak's PhotoCD Access software. Wide acceptance of the Kodak PhotoCD format in the graphic arts industry has made the Image Pac a reliable standard for desktop publishers. Depending on the user's intentions, other software may be used to manipulate PhotoCD Images including:

Kodak KPCMS Filters for Photoshop, Illustrator, PageMaker & other Desktop publishing applications Kodak PhotoCD Acquire Filter for Photoshop Kodak PhotoInsert software for Microsoft Office applications Internal PhotoCD filters in programs such as Microsoft PowerPoint Corel PhotoPaint Photographers and photo labs can use the larger resolutions, especially the Base x 64 image in the 6­resolution Image Pac, for archiving "electronic film" and for photo retouching and restoration. PSD (Photoshop format): Native Photoshop format – retaining all the Photoshop specific features like layers, channels etc. Corel’s Painter and Photo Paint and Jasc’s Paint Shop Pro can import PSD files with layers. To use an image in a PSD file in Quark, you will need to flatten it (eliminate its layers) and convert it to TIFF, EPS or other compatible format.

PNG (Portable Network Graphic): Supports transparency and 16 million colors. Supports RGB and Grayscale color modes (with one alpha channel). Compression possible.

ABC of Colors Color Models A color model is an orderly system for creating a whole range of colors from a small set of primary colors. There are two types of color models, those that are subtractive and those that are additive. Additive color models use light to display color while subtractive models use printing inks. Colors perceived in additive models are the result of transmitted light. Colors perceived in subtractive models are the result of reflected light. The Two Most Common Color Models There are several established color models used in computer graphics, but the two most common are the RGB model (Red-Green-Blue) for computer display and the CMYK model (Cyan-Magenta-Yellow-Black) for printing.

RGB Color Model CMYK Color Model Additive color model For computer displays Uses light to display color Colors result from transmitted light Red + Green + Blue=White Subtractive color model For printed material Uses ink to display color Colors result from reflected light Cyan+Magenta+Yellow=Black

Notice the centers of the two color charts Notice the centers of the two color charts. In the RGB model, the convergence of the three primary additive colors produces white. In the CMYK model, the convergence of the three primary subtractive colors produces black. In the RGB model notice that the overlapping of additive colors (red, green and blue) results in subtractive colors (cyan, magenta and yellow). In the CMYK model notice that the overlapping of subtractive colors (cyan, magenta and yellow) results in additive colors (red, green and blue). Also notice that the colors in the RGB model are much brighter than the colors in the CMYK model. It is possible to attain a much larger percentage of the visible spectrum with the RGB model. That is because the RGB model uses transmitted light while the CMYK model uses reflected light. The muted appearance of the CMYK model demonstrates the limitation of printing inks and the nature of reflected light. The colors in this chart appear muted because they are displayed within their printable gamut (see below). CMYK Model RGB Model

Also notice that the colors in the RGB model are much brighter than the colors in the CMYK model. It is possible to attain a much larger percentage of the visible range with the RGB model. That is because the RGB model uses transmitted light while the CMYK model uses reflected light. The muted appearance of the CMYK model demonstrates the limitation of printing inks and the nature of reflected light. The colors in this chart appear muted because they are displayed within their printable gamut. CMYK Model RGB Model

Additive vs. Subtractive Color Models Since additive color models display color as a result of light being transmitted (added) the total absence of light would be perceived as black. Subtractive color models display color as a result of light being absorbed (subtracted) by the printing inks. As more ink is added, less and less light is reflected. Where there is a total absence of ink the resulting light being reflected (from a white surface) would be perceived as white. Color Gamut and Color "Space

Examples of color depth are shown in the following table: Color depth or bit depth is the number of bits used to represent the color of a single pixel in a bitmapped image. Color Depth No. of Colors Color Mode 1 bit color 2 Indexed Color 4 bit color 16 8 bit color 256 24 bit color 16,777,216 True Color

Determining Color Depth Since each bit represents 2 colors, it is easy to work out the number of colors for the various color depths. The number of possible colors would be 2 to the power of the number of bits per pixel: A color depth of 4 bits would be 2 times itself 4 times: 2 x 2 x 2 x 2 = 16 colors A color depth of 8 bits would be 2 times itself 8 times: 2 x 2 x 2 x 2 x 2 x 2 x 2 x 2 = 256 colors. A color depth of 24 bits would be 2 times itself 24 times: 2 x 2 x 2 x 2 x 2 x 2 x 2 x 2 x 2 x 2 x 2 x 2 x 2 x 2 x 2 x 2 x 2 x 2 x 2 x 2 x 2 x 2 x 2 x 2 = 16,777,216 colors

True Color Images are known as "True Color" where each pixel is defined in terms of its actual RGB or CMYK values. Every pixel in a true color image has 256 possible values for each of it's red, green or blue components (in the RGB model) or cyan, magenta, yellow and black (in the CMYK model). Because there are 256 possible values for each RGB or CMYK component, then RGB true color would have a 24-bit color depth and CMYK true color would have a 32-bit color depth. There are millions of possible colors for each pixel in a true color image. That's why it is called "True Color".

RGB images are derived from the 3 primary colors of red, green and blue. In 24-bit RGB color, each red, green and blue component is 8 bits long and has 256 variations in intensity. These variations are represented in a scale of values ranging from 0 to 255 with 0 having the least intensity and 255 having the greatest. When the 3 components are combined there are 256 x 256 x 256 possible combinations or 16,777,216 possible colors. For example, white would be composed of maximum intensity of red, green and blue light (R=255 G=255 B=255) and black would be composed of zero intensity of red, green and blue light (R=0 G=0 B=0). Cyan would be composed of maximum intensity of blue and green light and zero intensity of red light (R=0 B=255 G=255). Magenta would be composed of maximum intensity of red and blue light and zero intensity of green light (R=255 G=0 B=255):

True Color and the CMYK Color Model G=255 B=255 R=0 G=0 B=0 True Color and the CMYK Color Model Images using the CMYK color model are also true color. CMYK images are derived from the 3 primary colors of cyan, magenta and yellow plus black. In 32-bit CMYK color, each cyan, magenta, yellow and black component is also 8 bits long and has 256 variations in intensity. Each pixel in a 32-bit CMYK image is one of 256 x 256 x 256 possible colors x 256 variations of black. A mix of 100% each of cyan, magenta and yellow produces black, so the black component is extra. Even though there are more bits per pixel in the CMYK model, in reality it has a smaller color "space" or gamut than RGB. Many graphics programs support both color models.

Windows 16 Color Palette with Index Numbers Indexed Color Images which do not define colors in terms of their actual RGB or CMYK values and which derive its colors from a "palette" are known as "Indexed Color". The color palette of an indexed color image has a fixed number of colors. Because the palette is limited to a maximum of 256 colors, it is not possible for an image to look as realistic as it can use RGB or CMYK. Hence, they are not true color. This type of color is known as "Indexed Color" because colors in the palette are referenced by index numbers which are used by the computer to identify each color. Some file formats restrict the number of colors to fewer than 256. The GIF format is one such format and has a color depth of 8 bits per pixel or less. GIF files use indexed color and allow a maximum of 256 colors. TIFF files can be stored as indexed color or true color. A sample palette is shown below: Windows 16 Color Palette with Index Numbers

Grayscale Images Grayscale images have a maximum color depth of 8 bits. The reason for this can also be worked out easily. When defining shades of gray in terms of RGB, each of the 3 red, green and blue components must be equal to each other. Examples of grays are R=192 G=192 B=192, and R=128 G=128 B=128. Since all three components must be equal for any shade of gray there are only 256 possible combinations. Thus, grayscale images have a maximum color depth of 8 bits. A complete 256 color grayscale palette is shown in the sample images below.

It is possible to create a grayscale image with a 4-bit color depth or less. Some software packages allow the user to reduce the number of colors in the palette from 256 to 16 or 2, though one would hardly classify a 2-color image as grayscale. Browser Safe Color Browser software is your window into the web. You can’t see web pages without the browser, so the browser plays a huge role in how your images are displayed, especially when viewed on 256-color systems. Fortunately, the most popular browsers all share the same palette management process. They work with the system palettes of each respective platform. This means that any artwork you create will be forced into a variety of different palettes, depending on which operating system it is views from. If you work with browser-safe colors when you create artwork, you still have the important task of ensuring that those colors remain browser safe during the file format conversion process. Unfortunately, files that are converted to JPEG do not retain precise color information. The lossy compression method used throws away information. So for graphics with lot of solid color, it is advisable to save in GIF format and retain the color information.