    |  Chapter 4: Page Graphics The Art of Scintography Edition 3.0 © 2008 Aurora Isaac www.scintography.com | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
 4.1 Web Page Graphics | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
One of my favorite things about publishing on the Internet is color.
Your page is your canvas, your graphic user interface to the world.
It is your opportunity to be boldly creative without worrying about the "cost" of color.
On the other hand, if you are coordinating your page design with the design of printed materials, this may be a major concern.
As you envision your site, keep in mind that your colors and images must do two things for you:
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 4.2 Digital Colors | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
As you operate in the computer world today, you are dealing with two systems of making color that are
in some ways quite similar, and in others quite different.
Whether you are a painter mixing a particular shade of house paint, a baker tinting frosting for a birthday cake, or an artist selecting inks for a limited edition print, you are using pigment colors. The base paint binds the pigment, and is usually as close to transparent, or white, as possible. As you add pigment to the base, the color gets more and more intense. With light colors, the "base" is at zero intensity of light, or blackness. As the light glows brighter, the color gets more and more intense. Your computer monitor uses light color, while your printer uses pigment color. Because color originates as light color on your computer, printers emulate the light color system, so you don't generally need to think about the difference. However, if precise color is important to your work, you should examine the details of color representation in the varius media you work with. If your color monitor is a cathode ray tube (CRT), it has a screen coated with substances that posphoresce when activated by light, similar to the dots on your glow-in-the-dark watch. These dots are called pixels, and are the smallest differentiable area on the screen. The resolution of your screen is expressed in dots per inch (dpi) or pixels per inch (px/in). Typical screen resolution is 70-100 px/in. Each pixel is a combination of three primary phosphorescing colors. These are red, green, and blue. Within each pixel, your monitor can create distinct levels of light intensity. The video adaptor card in your computer regulates these intensities. How many levels of intensity your screen can produce sets the limit on how many colors your screen can make. These levels are called color depth, and are measured in bits per pixel. Typical color depths are 8, 16, 24, and 32 bits/pixel. Because the color intensities are in discrete intervals, each intensity can be represented by a number. Thus, each color you see on the screen has a numerical, or digital, representation. Color numbers are most often specified in hex (hexadecimal - base 16). In the RGB representation, the numbers specify the intensity level of red, green, and blue sequentially, where 00 is minimum intensity and FF is maximum intensity. In this system, this color is digitally represented as #DB7093, with a red intensity of DB, a green intensity of 70, and a blue intensity of 93. The RGB color black is #000000, and white is #FFFFFF. 
The color cube is a representation of all the light colors available on a screen.
On one corner is the complete absence of intensity of all colors, which we see as black.
On the opposite corner is the maximum intensity of all three primary colors, which we see as white.
Even if you have a lower color density on your monitor, you may notice that the colors in the higher density represented above appear to blend. This is because the application attempts to represent the intervening colors through a process called dithering. When you mix paint pigments, red and yellow for example, the pigment particles do not change chemically. The red and yellow particles remain distinct as they are mixed uniformly, but your eye sees orange. Dithering is a similar process of mixing different colored pixels within an area of color to make it appear to be the desired color. | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 4.3 Digital Images | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
mages play a variety of roles in page presentation.
They can be the focus of the entire page or barely visible.
They can be large enough to overflow a screen or as small as a single pixel.
Some images contain essential information, others are part of the structure or decor of the page.
A digital image is an ordered collection of pixels and their associated colors. As you work with digital images, you need to consider the following:
Image size is generally indicated in pixels. The graphic I at the top of this section is 19 × 41 pixels. This image  is 9 × 9 pixels.
Two densities are associated with images on a page. The intrinsic image density may be expressed in units such as px/inch (pixels per inch), or dpi (dots per inch). Intrinsic density, combined with intrinsic image size, determine the size of the image in pixels. A 1 inch image, with a density of 100 px/inch, will be 100 px wide. This density has no effect on the display density of the image. Your screen has a set density. As you resize a window, the width and height may change, but the density does not. The same is true for images displayed on the screen. They may be resized, but once they are displayed, they appear in the same screen density as everything else on the page.
It is best to create an image in the size it will be displayed. This image of a man rowing was created to be 50px wide. When it is displayed in a larger size, the low density becomes apparent, and the image is degraded. Making images smaller does not always work, either. The man-rowing image still looks good when it is reduced, but the geometric pattern framing the sprite image is dramatically altered in appearance. Images for the Internet are generally made at low density to reduce the file size, balancing the time it takes to load a page against the integrity of the images displayed. If you plan to use an image offline, you may want to use higher densities, and reduce the size of the image for screen display. Typical screen densities are 72 and 96 px/inch. Densities for quality printed material, on the other hand, are typically 300-600 dpi. Such high density images can be very large, and significantly affect the time it takes a page to load, regardless of the size the image is displayed. If the only purpose of the large image is to make it available for download, make a low density, icon-sized copy for display, and make the large image available by ftp.
The Graphics Interchange Format (GIF) can be made transparent, interlaced, or animated. An animated gif is a collection of gif images and a timing sequence presented as a sort of self-contained mini-video. An interlaced gif loads in coarse detail first, gradually becoming finer until the entire image is loaded. This type of gif is nice for large images loading onto slow machines, because the viewer can see that something is happening before the entire file is transmitted. Areas of a transparent gif can be made transparent, allowing the background to show through.
Not surprisingly, increasing the number of colors adds size to the file. This is true for both gif and jpg formats. However, one of the primary differences between these two formats is in the way they handle color. The great disadvantage of the gif format is that it is limited to 256 colors. Which colors are selected depends on the image. For some images this is a distinct disadvantage. Although the jpg format does not limit the number of colors, it does sacrifice color integrity to provide its ample compression. The sprite image below is an example of a jpg-friendly image. This image is a picture with at least 256 distinct colors. Although it would be nice to make the surrounding background transparent, the irregular edges would look shabby against some background colors. It would be better to make this a jpg image with an image background that is the same color as the page background. If you must have a transparent background, use an image background color close to the planned page background color, then make the image background transparent. This will minimize the halo effect at the edges of the oval where the background has blended with the image. This gif was made with a white background made transparent.
Mouseover the images to zoom.
The arrow image above is an example of a gif-friendly image. This image has one color, and was edited pixel-by-pixel to be transparent in some areas, making nicely geometric edges. By mousing over the color swatches, you can see that this gif image looks good against any color background. The jpg image would have to be recreated for every background color it is used with. By mousing over the images to zoom in, you can see that the jpg image color, both the brown and the white, are mottled. The same effect probably occurred in the sprite image, but is undetectable. This loss of color integrity does not happen with the gif arrow image. If these weren't reasons enough, the file size makes it clear that this image should be used in the gif format. Because of their drawbacks, the gif and jpg format should be used to transmit and display images, not to store original work for future editing. When the integrity of an output image is altered from the input image, successive edits will cause a rapid degradation of the image. | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 4.4 References | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
1
TheCounter.com http://www.thecounter.com/stats/
2
: Color Depth Stats
3
The Free Online Dictionary of Computing
4
: Graphics Interchange Format (GIF)
5
: Joint Photographic Experts Group (JPEG)
6
Microsoft Developers Network Library
7
: Color Scheme Test Page
8
Pantone: Color Think Tank
9
The Usenet FAQ Archives: .jpeg
10
WebExhibits
11
: Color Vision and Art
12
: Pigments Through the Ages: Indigo
13
YALE Web Style Guide
14
: Color displays | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| All Contents © 2008 Aurora Isaac. All Rights Reserved. Legal Notices. | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
