Introduction to Digital Graphics Dave Underwood •University of Colorado at Boulder
Thanks for attending my presentation on digital graphics. Rather than pretend to give you an exhaustive look at the history and technology involved with digital images, I‘d like to concentrate on helping you avoid the most common and egregious graphics mistakes I’ve encountered during my years here at CU. One needn’t know everything there is to know about digital images to work efficiently and effectively with printed and online content. Being aware of a few very basic principles will be all you need to get through your next project.
Tar pits, Traps, and Lonely Dead-ends
One of the things about working with digital graphics is that a little misunderstanding can go a long ways. Trying to build or manipulate images in the wrong software or at the wrong resolution can put you into a very untenable situation... and waste a great deal of your time. We’re going to look at some of the most confusing and commonly misunderstood aspects of digital graphics. It’s hoped that you’ll quickly learn why certain jobs call for certain graphics “recipes,” and that the next time you go to work on a project involving digital images, you’ll get it right the first time.
Raster vs Vector
Sounds like a Sci Fi flick from the 50’s, doesn’t it? Actually, the raster/vector “divide” is one you need to understand full well if you want your work to be successful. First the basics.
“Raster” based images are what we commonly think of as “photographic.” These are the files we deal with in painting applications like Photoshop. In a raster file, the image is composed of individual pixels set within a grid. The more pixels, the finer the detail we can see in the image.
The pixel is the smallest discernible component of the raster file. Each pixel has its own unique address and carries its own unique color information.
“Vector” files are object-oriented. These are images that we create in drawing programs like Illustrator. Rather than define the image with a rectangle full of pixels, the drawing file essentially deals in printer instructions. The file tells the printer or other output device to define a given shape or “object,” and place it, with certain specific characteristics, on the page in a certain way. We use vector files to “build” things like maps, logos, graphs, and technical line drawings. When we zoom in on a vector-based file, we see, rather than a mass of pixels, distinct objects. These objects each have their own editable control points.
Vector-based files, which we would work with in a program like Adobe Illustrator, allow us to make scalable, crisp graphics that can be used in an infinite number of
situations without calling for altered files. The same vectorbased logo that we might use on a business card or letterhead would print beautifully on a billboard. Since the file simply tells the printer how to render and compose groups of “objects,” it needs to carry surprising little information.
and they end up with graphics that are inflexible, mushy, and, if scaled up substantially, unwieldy. On the other hand, if you’re touching up a photo or looking for cool effects with which to treat an organic image, you will want to work in a program like Photoshop. This is the only way possible to achieve a nuanced and photorealistic result. What do we do, though, when we want a composition that merges photos and other elements like text and logos?
Raster or painting files, on the other hand need to supply more and more information for larger-format applications. The number of pixels in a gallery-sized print is exponentially greater than those required for a snapshot. That’s why big photographic files take up huge amounts of disk space. Playing with the real world is what rasterbased software like Photoshop does best. Because these are pixel-based images, we can finesse them to our heart’s content.
A layout like this calls for working in both raster and vector environments.
That’s where page layout software like InDesign, or Quark, or even Powerpoint comes in. These applications allow users to compose pages with placed photos and text without compromising either. The handout you’re reading right now was assembled in InDesign, for instance. The images were put together and modified in Photoshop, then imported into an InDesign document in which the text and other page elements were added. If you’re reading this online, zoom w-a-y in (3200%, if you can) in your PDF reader, and take a look at the difference between areas with text and areas with images. You’ll see that the photographic elements are pixelated and jagged at this high level of zoom, while the text remains crisp and clean. Drives the point home doesn’t it?
So what does this all mean? If you’re designing a logo for your department, or putting together graphs for a presentation, you don’t want to start the project in Photoshop. Lots of people seem to do this,
A cool trick; converting a raster image into a vector
So maybe you’re asking, what if I have an image that’s raster - something I scanned or found on the web - and I want to re-purpose it and slip it into a file for a large poster. I need it to scale up cleanly. Any chance? You’ll like this: you can take the image into a program like Illustrator, select it, and “live trace” it. The software will synthesthize a bunch of vector objects to replicate the original image.
On the “gathering” side, we’re looking at how we measure what a camera or scanner is capable of grabbing. In other words, how many individual data points is our collection device capable of collecting within a given view. Of course, the more points we grab - cameras measure this in “mega” or millions of pixels, and scanners measure this in dots per inch - the finer will be our image. But there’s a trade off; high-resolution images require more storage space and computing time than low-resolution images, and sometimes we’re simply wanting a file that’s “down and dirty,” maybe something very small to use on a website. In that case, we don’t want more pixels than is neccessary. One thing is true, though; once an image has been captured - either photographed or scanned - the number of pixels is set. If we try to scale the image up substantially once it’s been acquired, the quality will surely suffer. It might be helpful to think of a balloon with a printed logo on it. When deflated, the logo is super dense and the edges are well defined. But when the balloon is inflated,
This is a great way to deal with a line drawing or logo that you would like to use at differing sizes, and, because you’ve converted ot to an object-based graphic, you’ll see that each component of the vector file comes with its own control points and is emminently editable. For more info, check out “live tracing” in Illustrator’s help menus.
that same logo will become “chalky” and indistinct. In a way, it’s the same story with pixels. If we ask too much of them, it will show.
Resolution
It’s for this reason we always tell art students to photograph or scan their paintings at the highest possible resolution. They can always throw pixels away later, but they can never get them back. Having a “parent” file with a gazillion pixels to draw from gives them ultimate downstream flexibility.
First of all, “resolution” simply refers to how finely we either gather or distribute the dots or points of a digital image.
What if you’ve found an image somewhere though, say, on the Internet, and you want to use it in an article. This is where people often seem to get thoroughly benighted.
Let’s talk now about resolution, another very easy subject to get hopelessy confused with. But it’s not as difficult to understand as you might think.
Your publisher has told you that they want your images provided at 300 dpi (dots-per-inch), and you’ve found a beautiful photo online and in the public domain. You open it in Photoshop, and sure enough, when you examine the image’s size, you’re informed that it is 300 dpi. You submit it for publication, and a week later your publisher bounces it back to you with a note saying that it is “unsuitable.” What happened? Something like this probably: even though the image came with a “300 dpi” descriptor, the file was only 600 pixels in width. From here it’s just math... If we print a 600 pixel at 300 dpi, the image will only apear on the page at 2 inches in width. And that’s what made the publisher so unhappy. This is to be a coffee table book on French castles, after all.
First of all, let’s talk about vector files. It’s usual, in programs like Illustrator, to work with files that are specific to that application. Thus, when designing in Illustrator, we’ll be saving vector files with extension names like “.ai” which we will be able to reopen and edit at any time in the future. When we’re ready to export those files for use in another application, we’ll want to safegaurd their vector status by saving them as eps or pdf files. These formats will ensure that all the good qualities of vector graphics - scalability, crispness, and functionality - will remain in effect. In raster world, we have a very critical consideration: should the graphics file be small and nimble or large and unwieldy? The difference is concerned with where the file is going. In print, we could care less about file size. All that matters is that the image look great. The industry standard for delivering high-quality, uncompressed raster files for print is the tiff file. The art students we spoke of earlier would do well to save the archival scans of their work in tiff format. And if a gallery asked them for copies of their work, they could burn those tiff files to a CD or data DVD and drop them in the mail. For working in print, moving a huge number of pixels is a non-issue
Remember this; when it comes to resolution and printing, what really matters is pixels. The term “dpi” only matters when the file hits the printer. Once a file has been acquired or captured, we can change the file’s dpi without actually changing the file’s size or quality. Having more pixels gives us more flexibility when it comes to printing an image at differeing sizes. And knowing that “dpi” simply tells the printer how closely to “ink” those pixels when the file is printed is key to working with images in print. By the way, as a rule of thumb, we want photographic images printed at 300 dpi minimally, and “line art” (maps, drawings, schematics, etc.) printed at 600 dpi minimally.
File types
One last place to look out for trouble with digital iamges is with file types. Let’s look at the files we’ll most likely use in a project, and examine why certain files are better for certain things.
But if those students are preparing their images for Internet delivery, for instance, they’d want the files to be as small as possible so that they will load quickly. For this, they would want jpg or png files. Both of these formats use a compression regime which tosses out and reorders pixels in a way that keeps file sizes low but image quality surprisingly high. Like the tiff file, both jpg and png formats are universally supported and both do a great job of balancing image quality and load time.
Still confused?
That’s okay. This is a quirky subject and it changes constantly. But if you find yourself in a bind on your next project or if you’d like a little guidance in using applications like Photoshop and Illustrator, please don’t hesitate to contact me. Together, I’m sure we can figure it out! Thanks! Dave Underwood david.underwood@colorado.edu 303 492 2672