While working on an upcoming series of blog posts explaining the programs in Adobe Creative Suite, we realized that one of the most important things our readers need to know about working with graphics is the difference between pixel (or raster), and vector (or line art) graphics and how to know when to use each. They also need to know about image resolution and the different color models for print and web use.

Pixel (or Raster)

How do you define pixels? A dot, a point, the smallest unit of measure on the computer? I wasn’t sure, so I turned to Wikipedia. They define it as a physical point in a raster image, or the smallest, addressable element in a display device; so it is the smallest, controllable element of a picture represented on the screen.

This photo, also from Wikipedia, shows a close-up of a pixel grid on an LCD screen. Each group of three lines (1 Red, 1 Blue, and One Green) is one pixel. See how the sets of three work together to create shapes? They also work together to create colors. When the viewer sits far enough away (like you are now from the computer screen) the combination of the 3 colors appears to mix and your eye perceives it as a color.

Pixel graphics are images made up of pixels. They are the largest size they are ever going to be when they are first created. You cant make them larger without compromising their quality. You can re-size them to make them smaller using applications like Photoshop. When you do that, the pixel data will be re-interpreted and the software will be able to make a smaller image that is nice-looking because it already had all the data it needed from the larger one.

You cant make pixel graphics larger because the software doesn’t have the data it needs from the image to make it look good at a larger size. It does the best it can by smoothing things out as much as possible based upon the original image. If you upscale graphics they will usually look fuzzy or you’ll see the expanded pixels around edges (especially rounded edges.)

Vector Graphics

Vector graphics or line art images are made of lines, instead of pixels, that the computer outputs as an image and are infinitely scalable. Pixels don’t even matter here. Vector graphics are great for creating crisp images and lines in print work.

File Types

It’s not hard to tell the difference between these two types. The easiest way is to look at the file type: .png, .gif, .jpg, are all pixel or raster images. .eps, .svg, are all vector.
Generally, you can assume that .ai (Adobe Illustrator) files are in vector format and that .psd (Adobe Photoshop) files are raster. We say generally because each is able to work with the other type inside of a document, the difference comes in the output. We see a lot of eps files that are just jpegs placed in an Illustrator file and named .eps. That’s a pretend vector file.

Photoshop and Illustrator will output pixel images, but only Illustrator can output vector graphics. Another quick way you can tell is to zoom in really close to whatever you’re working on in any application. If it looks blurry or choppy when zoomed in, it’s pixels, if it looks crisp, it’s probably a vector graphic.

So why wouldn’t we just make EVERYTHING out of vector graphics? Well, that’s a good question.

Vector graphics have a few downfalls: First and foremost the binary code data used to save them for on-screen use is larger than for a raster image that looks the same, so the file size is larger. Until high-speed internet became so widely used it was critical to keep file sizes low to keep load times down online. This means when you’re producing graphics for something like a website, you wanted to keep the files as small as possible. We still do this it’s called optimizing image files for the web. So as a general web design standard, we still adhere to this rule because it still keeps load times faster and data use down. And now we’re concerned about load times and data use on mobile web browsers much more so than on the desktop.

The other reason we can’t use ONLY vector graphics is that many graphics start out in pixel form. Any photo taken on a digital camera is in pixels. Almost everything you put into your computer—a clip from a video, save from the internet, take a screenshot of, or what have you—is in pixels.

You can convert from pixel to vector a few different ways: using Flash or tracing in Illustrator, but it never looks super great that way.

Resolution

Looking at it very generally, there are two standards for resolution: 72dpi is used for anything on-screen and 300dpi is used for photo-quality printing.

Screen Resolutions (generally 72ppi)
On-Screen resolution is measured in Pixels Per Inch or PPI. This refers to the number of printed dots or screen pixels that are placed in a single line that is one inch wide. This actual physical width of a pixel can vary based on the size of your monitor, but the software will always render 1 pixel as 1 pixel.

Some newer devices (anything with a retina display by Apple) use a screen resolution that is actually up to 320ppi (on the iPhone) to create an ultra-sharp picture.

The repercussions of this are huge. Web developers everywhere are trying to figure out how to deal with Apple’s new massive file sizes for their fancy retina displays. Don’t worry, we’ll figure it out.

Print Resolutions (generally 150-300dpi)
Print resolution is measured in Dots Per Inch or dpi. This is because while on-screen, were using pixels to display our information. In print, we’re using ink.

Unlike pixels on a screen, which have no space in-between them, dots in printing can have space in-between them. The amount of space left in-between them is how the saturation of a color is adjusted.

In print, we don’t always need everything to be 300dpi, because some media (printing surfaces) cant handle it, and also many projects are meant to be viewed from a distance. Newspapers use a lower resolution because the porous paper can’t take a highly detailed image. Also, if you’re printing a billboard stage backdrop (or something else huge) it doesn’t need to be 300dpi because thanks to the viewing distance, viewers’ eyes will blur the image a bit and will still seem sharp. If you’ve ever seen one of those tote bags made from old billboard vinyl, you know what I mean.

Color

The last thing to know about your files is color space. Make sure your document is in the correct color profile for its intended use. Usually, this is either going to be CMYK or RGB. Typically, CMYK is used for print, and RGB is used for screens.

Gamuts: The ways you can use color are different because colors from some models don’t show up in colors from others. RGB has one of the widest color gamuts, though not as wide as the visible spectrum. CMYK has one of the smaller color gamuts.

This chart, borrowed from http://www.printernational.org/rgb-versus-cmyk.php, explains color gamuts visually. Though keep in mind: Since you’re reading this on a screen, it’s only showing you colors that exist in the RGB color gamut and not the visible color gamut. That means that colors can exist in nature and in the real world that your screen cannot emulate and that cannot be printed. When you print one of these colors or view it on a screen, it will show up as the closest alternate possible that CMYK or RGB can come up with.

CMYK or Process Printing
This is often referred to as CMYK, process, 4-color, or 4-stroke printing. This is the most typical way you’ll see colors printed, and also how most laser printers work. Colors are applied to the paper one at a time either on plates, or by jets, by lasers, or what have you. The combined result is a CMYK print.

C = Cyan
M = Magenta
Y = Yellow
K = Black

RGB
This color model exists only on computer screens and televisions. And, it’s device-dependent. So a website using your logo color might look one shade on one computer and another on another computer. And then another shade altogether on your phone. Don’t worry, as long as it’s close, it’s okay. The reason for this is that each display is interpreting the definition it gets from its software when it outputs the brightness of each portion of the pixel. Portion of the pixel? What? Okay, so in the RGB color model, we set each of the Red, Green, and Blue values from off (0) to full brightness (255) independently to mix colors by assigning RGB values.

R= Red
G= Green
B= Blue

For example, All three all the way up (R=255 G=255 B=255) mixes, and the pixel is perceived as white. All three all the way down (R=0 G=0 B=0) the absence of light mixes and the pixels are perceived as black. Various shades of gray can be created by setting all three colors to the same value and colors are created by mixing the R, G, and B values at different levels. Go back up and look at that close-up picture of pixels from Wikipedia. The sets of three where the R, G, and B lines all the way on are white, the ones that are almost all off. Now look at the rounded edges of the letter p to make that round edge, the P is being shown in a medium gray that when your eye blurs from far away appears to be the black rounding off to white.

Many colors from RGB cannot be accurately printed. Actually, there are a lot more colors in the RGB gamut that can be printed, so just don’t send an RGB file to print. Convert it to CMYK first and your result will be closer, but before printing final versions of anything it’s best to always make sure the colors are accurate with a press proof.

Also, if you send an RGB image to a CMYK printer in your office, it’s never going to look like it does on your screen.

Spot Colors
This is color model (used in professional printing) places a single color on its own plate that is totally separate from the C, M, Y, or K plates. Typically these colors are selected from the PANTONE system, though there are other spot color systems on the market. Only a professional printing company can accurately represent most spot colors, not your printer at home, not your printer at the office. You might have heard of a 5- or 6-color print job. The first 4 plates are CMYK, the 5th might be a spot color, and the 6th might be another spot color or perhaps a coating.

Typically wed use spot colors to achieve colors that are not possible using the CMYK standard. It is often common for spot colors to be in logos, so you may have to convert them when printing things in CMYKor run them as a 5-color job.

Use

So how do you know when to use which type of graphic, and at what resolution, and in which color model? When printing, if you want a crisp print, provide artwork to your printer in vector or high-resolution raster formats in CMYK (unless your artwork contains spot colors). For this, its best to use .ai, .svg, or .jpg?? files at high resolution (150-300ppi, typically).

For any document meant for the web or to be viewed on a computer or screen to appear crisp, you would typically use either .jpg or .png format at 72ppi and in RGB.

For documents like internal stationery that could be printed on an office laser printer, we typically use a 150dpi RGB .jpg as a background image. By using RGB for this were keeping the file size down as RGB images are typically smaller. Remember that printing an RBG image on your color CMYK printer isn’t going to be perfect.

Now that you know about Pixel and Vector graphics, resolutions, and color models, you’re ready to learn about the Adobe Creative Suite, which Ill start discussing in my next post. Stay tuned!