Suzanne's Mini Tutorial on Basic Design for the Screen

        Vocabulary--

        • anti-alias--This process reduces the "jaggies" in fonts made into graphics. By inserting intermediary colors, it smoothes the edges off any rough edges and combines with the background.
        • bit--This is either a 1 or 0 used to describe a pixel.
        • bitmap--This can refer to either a graphical element or the standard windows graphic file format which has an extension of .BMP.
        • byte--This is a group of 8 bits that can describe a pixel or an ASCII character.
        • pixel--The tiny square spatial element in the screen that displays a color; the basic building block of the screen.
        • vector--This format is a mathematical description of a graphic as opposed to a bitmap which tracks pixel placement. If you open or rasterize a graphic file, it automatically adjusts the formula for the size chosen. This results in less degredation of the image when resizing.

        Basic Elements--
        The building block of a screen is a small square called a pixel. By manipulating each pixel, the computer displays graphics. The standard 14 inch monitor is 640 pixels in width and 480 pixels in depth. The standard number of pixels in an inch is 72 which makes the maximum screen resolution 72 dpi.

        Color is achieved by the computer describing each pixel on the screen. The color that is displayed is determined by the explanation of the pixel generated by the computer. The description is in binary, which is a language of 1's and 0's. On monochrome monitors, describing a pixel is easy. Only one bit is used to describe a pixel. "0" means the pixel is empty, so black displays. "1" means the pixel is filled in, so white displays.

        More advanced monitors use more bits to describe a pixel. 4 bit color means 4 characters describe the pixel. Because there are only 1's and 0's in binary, there are only 16 possible combinations. This means there are 16 colors available. This is the standard used in VGA monitors (PC only, not Mac). If there are 8 bits, this means there are 256 combinations and 256 possible colors. This is the SVGA standard (current PCs and basic Macs). More bits means more colors.

        The formula for figuring out how many colors are possible is 2 times itself for the number of bits. In other words:

        • 4 bits= 2 x 2 x 2 x 2= 16 colors
        • 8 bits= 2 x 2 x 2 x 2 x 2 x 2 x 2 x 2= 256 colors
        • 16 bits= 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 = 65536 colors
        • 24 bits=2 x 24= millions

        Text--
        Text is either editable, as in a word processor or text field, or it is part of a graphic bitmap, which is not editable. Editable text display is controlled by the font engine and is limited in the amount of graphical manipulation that is possible. Bitmapped text is simply text composed into a graphical element that is malleable and can be altered to look however you want. Bitmapped text is more portable, since it is not dependent on the font engine to display.

        If you do use editable text, always consider whether or not the ultimate user has the fonts you need for display. If she is not likely to have a font, you must install the font on her machine. A good rule of thumb is to choose a point size of at least 14 so the text is legible and easy for the user to read. If you are working with an online or interactive system, it is important to know what text areas are graphics and what are text fields. This will affect what is possible to control in each situation.

        Anti-aliasing--
        Anti-aliasing can be problematic. To reduce "jaggies," it blends the text into the background of your image. While this may make your text look better, there are associated problems. Here are a few situations where you may not want to anti-alias your text:

        Mobile Graphics -- If the graphic is one you want to cut and paste to images with different backgrounds, you want it to be easy to remove from the current background.

        Faded text -- If the point size of your font is too small, then the text may combine too much with the background and fade out in the thin strokes.

        Anti-aliasing is possible for bitmapped text only. Be careful with anti-aliasing. While appearing to solve all your problems, anti-aliasing can be harmful.

        Formats--
        There are hundreds, if not thousands of different formats. Every graphic program out there has a proprietary format, probably with different versions for different operating systems. Photoshop is invaluable when you need to deal with many different formats. Here are a few common formats you may need to deal with:

        • .BMP--bitmap is the Windows graphic standard
        • .PCT--pict is the Macintosh graphic standard
        • .PSD--photoshop format
        • .PCX--a common windows format
        • .EPS--encapsulated postscript
        • TIFF--common multi-platform format
        • .IFF--amiga graphics
        • JPEG--common multi-platform format
        • .GIF--compuserve's graphic standard

        JPEG and .GIF are most common on the web.

        Scanning--
        Scanning is really a matter of trial and error and familiarity with your equipment. There are a lot of factors that are specific to each machine. Contrast and color concentration must be calibrated individually.

        As far as resolution goes, there is one general rule. Scan high. You can always reduce the amount of detail, but you can't increase it. Even though screen resolution is only 72 dpi, you have more sophisticated control in what is displayed when you choose your own resolution reduction method. I recommend that you scan at 300 dpi.

        Image Resizing--
        It is always best to create images in the size they will be displayed. Blowing up and reducing the size of images means increasing or decreasing the number of pixels in the image. When you enlarge an image, it simply doubles or triples the original pixels. The flaws are emphasized and the square nature of the pixels kills any curves. Reducing the number of pixels can be equally as disastrous. Depending on the algorithm used by the program, images blur and jaggies appear. There are less pixels to create sophisticated effects.

        Things to Keep in Mind--
        Depth--There is implied three-dimensionality in screen design that is much more apparent than in print design. This can give users interface clues. Beveled edges for pushable buttons, etc.

        Hierarchy--When creating screens, always have a set organizational pattern. In other words, don't confuse the user.

        Environment--Ultimately, you're creating a place you want people to spend a lot of time in. Use colors and graphics that reflect this. Make it comfortable.

        Implications of speed and ease of use--Complicated graphic effects can create the illusion that the speed is slower. It is similar to people thinking that elevator service is faster when there are mirrors in a lobby. Strange, but true.