Proselyte-Graphics Web Design

DPI:

DPI, or Dots Per Inch, is a measure of how much information is in an inch of the displayed image. DPI is sometimes called the Print Resolution. Things can get complicated here. Depending on what device you're considering, DPI can make a big difference. The average computer program doesn't really consider DPI, but 72-96 DPI is often quoted as the correct DPI for images on screens, and is perfectly fine if you don't want to print that image. Screen Resolution is the measure of detail and size that is important for objects on screen.

DPI really matters for print. Printing generally allows for much higher detail than what can be shown on a screen. Most printers can easily print 200 DPI. This means that in 1 inch of paper, the printer can make 200 dots of detail. A good printer can easily do 600 DPI or more; some professional printers can do 1200 DPI.

Many printing companies consider a file to have a Low Resolution if the file has less than 150 DPI. Low Resolution images usually appear blurry, jagged or muddy when printed, and are therefore undesirable. For print, a 300 DPI file is usually suggested. But that number can be faked. DPI can be changed by changing the print dimensions of a graphic. Consider an image with the native print resolution of 100 DPI and a print size of 4" x 4". If we make the image print at half that size (2" x 2"), the DPI raises to 200 DPI. Double the print size and you can halve the DPI. Some programs allow you to change the DPI without changing the Screen Resolution or the Print Size. However, changing the DPI in this way gains no quality. If you intend to print them, the graphics should start at a high DPI, or the image should be reduced in print size until the DPI is higher.

Raster vs. Vector:

There are two main ways of defining pictures in an image. Image Resolutions, both Screen and Print Resolutions, are primarily issues for Raster images. Raster images are images which are laid out in a grid of static size. When you enlarge or shrink them, you add or subtract pixels from the grid. When you draw over an image, you are overwriting the pixels below.

Vector images are more complicated. Vector images are mathematical expressions of geometric shapes with certain qualities. A circle is expressed as a geometry book would consider a circle: a pole, a radius, and a set of coordinates on a grid (X, Y and Z index which mimics depth). Vector images can be infinitely scaled up or down without losing detail. You can also draw over them and still keep all the detail on the layers below.

So why don't we always use Vector images? As complexity grows, vector becomes less acceptable. Photos, for instance, would have to have thousands and thousands of shapes to express all the colors in view. And because a lens sees a flat picture, there would be no depth to the vector image, anyway. Equally, neither screens nor print can display the information in true layers, so the information is presented as a series of raster images. Vector is good for drawing and illustration styles, and animation, but poor for realism and usability.

Be aware: Vector is not 3D. It lacks a true depth. Real 3D is made up of mathematically 3 dimensional objects with a skin around them. When you see a 3D image, it has been rasterized, or made flat.

Color Mode:

Color Mode is how a computer considers and organizes color information. There are two main distinctions in color theory: Screen Color - based on light - and Print Color - based on pigment.

When you were taught red and yellow make orange as a child, you learned pigment theory. It is the more easy to observe pigment mixing in normal life. Computers use a system called CMYK - Cyan, Magenta, Yellow and blacK - to store color data that works well for print. CMYK has 4 channels of color, one for each letter in the abbr. Each channel goes from 0-100(%). This means that there are 404 bits, or units, of color information in a CMYK pixel. The color orange would be C=0, Y=100, M=50, K=0. CMYK is subtractive. As you add higher values, the color gets darker. This is because CMYK assumes you are printing on white paper. Therefore, white is C=0, Y=0, M=0, K=0. It should be noted that, because ink is slightly opaque, black should be C=0, Y=0, M=0, K=100, not C=100, Y=100, M=100, K=100, because the later makes a muddy colored black.

RGB is the system of mixing light to make colors. TVs, Computer Screens and anything else that uses light to make a picture (including your own vision) uses the colors Red, Green and Blue. Most computer programs and files use RGB, but there are other color modes, like LAB, which work similarly. Most of the time, RGB's 3 channels go from 0 to 255. This means each pixel holds up to 768 bits of color information. RGB is additive, which means you start from black (no light) and add to each channel until you produce white. Compared to the example given earlier, R=255, G=128, B=0 makes orange. You may think there is no green in orange. That would make brown! What you must understand is that kind of logic is true only for pigments, not light. Black is R=0, G=0, B=0 and white is R=255, G=255, B=255. Please note that RGB can hold much higher values per channel than 256 bits, but usually doesn't.

Comparatively, RGB holds much more color information than CMYK. Most graphics programs work in RGB, and only after they are finished do they convert to CMYK. Because CMYK is showing print colors on a RGB, the colors often print slightly different. There are fewer greens and neons in the CMYK spectrum, and fewer pastels in RGB.

File Formats:

Computers work with a variety of graphic file formats. I will give a short rundown of the major ones:

The Proselyte Graphics Logo in PNG, JPG and GIF formats.

.BMP: (Bitmap)

BMPs are uncompressed, Raster, RGB files. Because they are uncompressed, the file size is very large - too large for the web. BMPs are very simple from a programming standpoint; however, and are often used for program graphics for speed and simplicity.

.JPG: (Jpeg)

JPGs are compressed, Raster files which can store RGB or CMYK information. JPGs use a lossy compression, which means that information (and detail) is lost when the file is compressed. Colors will be changed, especially with higher compression. Highly compressed JPGs can be very blurry or muddy. The file sizes for JPGs are typically small. JPGs work well for gradients (smooth transitions of color), and are great for photos and images containing many colors. JPGs lose hard edges and are bad for text, drawings or images used for page layout.

.GIF: (Graphic Interchange Format)

GIFs are compressed, Raster files which store RGB color information. GIFs use a highly lossy compression, which means that information (and detail) is lost when the file is compressed. GIFs typically only support 256 colors per file, making them very bad for photos. Highly compressed GIFs will be very jagged and spotty. The file sizes for GIFs are typically small. GIFs work OK for gradients illustrations. GIFs also support transparency (but only completely clear or completely solid) and simple animation. Animation is the only reason to use GIFs in modern web design.

.PNG: (Portable Network Graphics)

PNGs are compressed, Raster files which store RGB color information. PNGs use a loss-less compression, which means that information (and detail) is kept when the file is compressed. PNGs may also employ a lossy compression similar to GIFs. Loss-less PNGs keep every color in the image, making them great for text and illustrations, but bad for photos. PNGs files may be larger or smaller than JPGs, depending on how many colors are in the image. PNGs will produce the best quality, smallest graphics for page layout, unless the site relies heavily on gradients or complex photos/3D renders. PNGs also support alpha transparency, which means something may be opaque, transparent or in between. PNGs may be less supported than GIFs.

.PDF: (Portable Document Format)

PDFs can contain text and graphics, as well as forms. The graphics in PDF may be compressed in JPG format as Raster files or may be vector files. They can store RGB or CMYK color information. PDFs are useful for sending vector images or displaying certain types of printable pages on a website, because PDFs print very closely to how they look on screen. PDFs do not, however, work in a webpage, but can be opened by many web browsers.