Free! 15-Minute Guide to Computer Graphics

The

-Minute Guide to Computer Graphics A quarter-of-an-hour end to hours of frustration

Contents The point of this booklet ..................................................................................................................................................... 3 Basic stuff you should know about computer graphics....................................................................................................... 4 What resolution means and why Web graphics look so lousy when you print them out ................................................... 5 Why the colors on your screen don’t print out exactly right................................................................................................ 6 Basic stuff you should know about fonts............................................................................................................................. 7 Why you don’t see the same fonts on the Web that you do in print.................................................................................... 8 Why fonts sometimes get screwed up when you pass documents back and forth ............................................................ 9 What a PDF is, anyway........................................................................................................................................................10 Why PDFs sometimes print out a little bit small................................................................................................................. 11 Why you have so much trouble with graphics in Microsoft Office.....................................................................................12 What Flash is and why Websites are moving away from it all of a sudden.........................................................................13 Is it legal to use that picture you found on the Web in your document?.............................................................................14 Cribsheet for common graphic file types............................................................................................................................15

The 15-Minute Guide to Computer Graphics

www.seltzerstudio.com 2

The point of this booklet is not to turn you into a graphic designer, but just to keep you from going crazy 1

Page 15

2

Page 5

The 15-Minute Guide to Computer Graphics

There are a lot of excellent, detailed sources out there on the ins and outs of digital images. This isn’t one of them. This is for anyone who has had a violent hand-toforehead moment trying to print out a graphic they found on the Web, or who started cursing when all the fonts in their document mutated from Gill Sans into Comic Sans.

This is all really basic information, but basic information about technology is hard to find these days. You used to get an instruction manual when you bought a computer.

Now you just get a nagging sense that you must have missed the day in school when they covered all this. With graphics in particular, there are a lot of things that it’s assumed you’ll know, but that no one ever tells you, like what “JPEG” means1 or why Web graphics print so blurry.2 My apologies in advance to the more knowledgeable of you who will no doubt find multiple instances of oversimplification. Simplification, over or otherwise, is the whole point.

www.seltzerstudio.com 3

Basic stuff you should know about computer graphics

1. There are two types of computer graphics: raster graphics and vector graphics.

2. Raster graphics look like a grid of dots when you look closely enough at them (“raster” = “grid”).

Photographs, for instance, are raster graphics.

3. You can shrink raster graphics but you can’t expand them much without making them blurry, because all you’re really doing is making the dots bigger.

4. Vector graphics use mathematical formulae to describe the points, lines and curves that make up a shape (“vector” = “path”). Fonts, for instance, are vector graphics.

5. You can shrink and expand vector graphics as much as you want and they’ll never get blurry. But they’re mostly good for drawing things with hard edges, like logos, not things with soft edges, like photos.

6. On the Web, all graphics except Flash files (which we’ll get to later) are raster graphics.

The 15-Minute Guide to Computer Graphics

www.seltzerstudio.com 4

What resolution means and why Web graphics look so lousy when you print them out 1. “Resolution” is the measurement of how clearly a raster graphic1 appears. It’s usually measured in Dots Per Inch (DPI). On screen, dots are called “pixels”; in print, dots are called “dots.”

2. Print graphics usually have a resolution of 300 DPI. Anything lower than that and you’ll see the dots.

3. Web graphics have a resolution of 72 DPI, which is the resolution of your screen.2 Graphics with a higher resolution would take longer to download and wouldn’t display better anyway.

4. In other words, graphics you find on the Web will print cleanly at about one quarter (300/72) their original size.

5. Digital cameras usually give their resolution in overall pixels captured, e.g., 2,048 x 1,536 pixels, or 3.1 megapixels. Divide these number by 300 for print size (e.g., 6.8” x 5.2”), or by 72 for Web size (e.g., 28.4” x 21.5”). It’s a ballpark figure, because different devices count pixels differently, but not a bad estimate.

1

You never see resolution for vector graphics because they all theoretically have a resolution of infinity DPI, which sounds stupid.

2

Actually most screens these days have higher resolutions, but web browsers still use 72 DPI as the standard.

The 15-Minute Guide to Computer Graphics

www.seltzerstudio.com 5

Why the colors on your screen don’t print out exactly right 1. Computer screens display colors by lighting up phosphors. Each pixel on your screen has three phosphors: one Red, one Green, and one Blue. This is called RGB color mode.

2. Printers create color by mixing inks or toner. The classic formulation for mixing ink is Cyan, Magenta, Yellow and Black. This is called CMYK color mode.1 3. RGB actually has a wider range of colors than can print in CMYK. For instance, you can actually make

1

something on your screen glow, but you can only make a print look like it’s glowing. So some colors literally cannot be printed.

4. Also, not all computers display colors in the same way. Some screens make blues bluer, reds redder, or everything lighter or darker. There’s no guarantee that what you see on your laptop is exactly the same color as what someone else sees on their desktop, or that your printer is going to print exactly what you see on screen.

5. Graphic designers and print shops calibrate their machines to make sure that what they’re seeing will print out accurately, which takes a combination of hardware and software, and only works with some monitors and some printers. Generally, Macs calibrate better for print work than PCs, which is one reason designers tend to use Macs.

You use “K” for BlacK instead of “B” because “B” could also stand for “Blue.”

The 15-Minute Guide to Computer Graphics

www.seltzerstudio.com 6

Basic stuff you should know about fonts

1. There are lots of different categories for fonts, but the most important are serif and sans serif.

2. Serif fonts have little “feet” on the ends of the letters, like you see in Times New Roman.

3. Sans serif fonts have clean ends, like Arial.

4. In print, serif type is considered easier to read at regular sizes, because those little feet help keep your eyes on track.

5. On screen, sans serif type is considered easier to read at regular sizes because computer monitors may have trouble displaying those little feet.1

1 Modern operating systems use something called something called “anti-aliasing” to display serif fonts. Drawing a vector graphic (that has infinite resolution) on a screen (that has 72 DPI resolution) sometimes results in little “jaggies” on the edge of the graphic. Anti-aliasing turns the jaggies into shades of gray, so the graphic looks smoothed out. Without anti-aliasing, serif type look blotchy; with bad anti-aliasing, serif type looks blurry. The newer your operating system, the better the anti-aliasing, generally speaking.

The 15-Minute Guide to Computer Graphics

www.seltzerstudio.com 7

Why you don’t see the same fonts on the Web that you do in print 1. Each font on your computer actually is a different piece of software. If you don’t have the right font files, you don’t have the font.

2. Not all computers have the same fonts installed on them.

3. There are tens of thousands of fonts out there for print, with new ones being invented every day.

4. There are only a few “Web-safe” fonts. These are

the ones that Microsoft gives away with Internet Explorer. They include Times New Roman, Arial and, sadly, Comics Sans.1 Because these are installed on virtually every computer – and because Web browsers generally only display the fonts installed on your computer – almost all websites stick to these fonts.

5. PC-based Web browsers have different default text sizes than do Mac-based browsers, and most Web browsers will let users resize their fonts on the fly. A good Web designer can work around this, but there are a surprising number of sites on which the type looks totally different on different computers.

6. This is changing: there is now technology that lets websites see non-standard fonts on screen without making people install font files, and there are better controls for type overall. But for now, Web fonts and print fonts aren’t interchangeable.

1 Here’s the classic list of web-safe fonts: Arial, Arial Black, Bookman Old Style, Comic Sans MS, Courier, Courier New, Garamond, Georgia, Impact, Lucida Console, Lucida Sans Unicode, MS Sans Serif, MS Serif, Palatino Linotype, Symbol, Tahoma, Times New Roman, Trebuchet MS, Verdana, Webdings, Wingdings.

As you can see, it’s not a great list. That’s one of the reasons type of the web is usually so blah.

The 15-Minute Guide to Computer Graphics

www.seltzerstudio.com 8

Why fonts sometimes get screwed up when you pass documents back and forth

The 15-Minute Guide to Computer Graphics

1. Your computer will let you use any font that you have installed to format your file. But not everyone has the same fonts installed, right? So that greatlooking document you set up in Futura might open up on somebody else’s computer in Helvetica, or vice-versa.

2. If you’re passing files back and forth, you can stick to Web-safe fonts or your company fonts (if you’re sharing it with a co-worker) in order to minimize font screw-ups.

3. Once you’re done with the editing, you can use whatever fonts you want and create a PDF of your document, which will embed whatever fonts you used in it.

www.seltzerstudio.com 9

What a PDF is, anyway

1. PDFs are essentially on-screen printouts. They take all the information that would be sent to your printer (graphics, fonts, etc.) and embed them in a file that can be sent around, searched and reprinted.

2. The initials stand for Portable Document Format, and it was first developed by Adobe, a software company that specializes in computer graphics.

3. The program that Adobe invented to create and display PDFs was called Adobe Acrobat. The file format is now in the public domain, and now there are lots of programs that can make and display PDFs. Still, people sometimes call them Acrobat files or even Adobe files.

4. It’s pretty easy to turn almost any document into a PDF. 5. It’s a lot of work to turn a PDF back into an editable document, so don’t delete your source files.

The 15-Minute Guide to Computer Graphics

www.seltzerstudio.com 10

Why PDFs sometimes print out a little bit small

1. Professionally produced documents are sometimes formatted to run right up the edge of the paper. This is called “bleeding” off the page.

2. Your laser or ink-jet printer can’t print right up to the edge of the page.

3. Even professional print shops can only bleed edges by printing on oversized paper and then trimming off the overage. (You pay extra for this.)

4. Acrobat automatically scales down full-bleed documents so they’ll fit in your printer’s printable area.

5. You can turn off this option with a check box on the print dialogue, but you might clip off the edges of your document.

6. If you’re going to send out a PDF that you know is going to be printed out in-house, do yourself a favor and set wide margins with no bleeds.

The 15-Minute Guide to Computer Graphics

www.seltzerstudio.com 11

Why you have so much trouble with graphics in Microsoft Office

1. You’re not alone. Microsoft has never put a premium on graphics. So charts created in Excel sometimes work in PowerPoint or Word, sometimes don’t, sometimes export to other programs and sometimes cause your world to crash around you.

2. There are lots of esoteric rules about how to move things smoothly from one program to another, but they’re too complicated for an average or even above-average person to keep track of.

3. The thing to keep in mind is this: the graphic you created in one Office program will only be guaranteed to display that way in that program and only on your computer.

4. If you really, really need elaborate graphics, do them in another program, or better yet, get someone else who knows graphics to do them.

The 15-Minute Guide to Computer Graphics

www.seltzerstudio.com 12

What Flash is and why Websites are moving away from it all of a sudden 1. Flash is a program for creating interactive vectorbased Web animations. It’s also good for encoding movies to stream over the Web. There are a zillion Flash games out there, and some major sites, like Hulu and YouTube, use Flash to play their movies.

2. To create Flash files, you have to buy the software from Adobe. It’s not open-source technology like HTML (Hypertext Markup Language, which is what browsers use to create Web pages). It requires a plug-in to run inside your Web browser.

3. Flash doesn’t work on iPhones or iPads and it doesn’t work too well on Android smartphones or tablets. It never will.1 4. Modern Web browsers soon won’t need Flash to play movies or run animations. The latest version of HTML – HTML5, for those of you keeping score at home – will do that automatically.

5. Put not your money in Flash development.

1 This requires a lot of interesting but ultimately unimportant backstory to explain, hence the huge footnote. Here goes: Adobe acquired Flash when it bought a company called Macromedia a few years back. Adobe makes great software from scratch (like Acrobat) but never has done too well with software it buys and tries to redevelop. They added some new features to Flash, including some excellent animation tools, but they didn’t really keep pace with the changes on the Web. When Apple brought out the iPhone, they decided not to include Flash because a) it was crash prone, 2) it used a lot of battery power, 3) it required a plugin to run in a browser, and 4) Flash animations didn’t resize too well on the small screen and often needed a mouse – not just fingers – to use. Adobe got huffy about this, and kept claiming they’d fix it so it worked on Android and only on Android, and then they’d make Apple rue the day, etc. Adobe recently stopped development for Flash for mobile devices because, um, they couldn’t get it to work. So that’s the end of that story. Shame, really – Flash does some neat stuff.

But not on your phone.

The 15-Minute Guide to Computer Graphics

www.seltzerstudio.com 13

Is it legal to use that picture you found on the Web in your document?

1. Probably not. Most images on the Web are copyrighted by their respective creators. Those images you found on Google Image Search come from somewhere and were created by someone.

2. Copyright is an automatic process. Creators don’t have to register anything with the government to copyright something. They don’t even have to put a copyright (©) symbol on it, though it doesn’t hurt.

3. However, don’t panic – there is something called “Fair Use,” which basically gives you permission

The 15-Minute Guide to Computer Graphics

to re-use excerpts of copyrighted work for noncommercial purposes. It’s a complicated idea (and if you’re worried, please find a real lawyer to explain it to you), but basically, if you’re not trying to make a buck off of reusing someone’s graphic, you’re probably OK. You’re unlikely to get sued for putting that photo of a pine tree you found in your family Christmas newsletter.

4. Companies used to assume that they could get away with using images without permission for, say, an internal presentation. Nowadays, though, that presentation might get turned into a PDF, posted on your site, and the creator of the graphic you swiped might find out about it via digital watermarking. It’s a bigger risk than it used to be.

5. Basic rule of thumb: If you want to use a graphic, ask permission. If you can’t get it, buy stock art. If neither of the above works for you and still choose to use the image, you’re taking a risk.

www.seltzerstudio.com 14

Cribsheet for common graphic file types File Type

What it Means

For the Web?

For Print?

Raster of Vector?

Notes

AI

Adobe Illustrator

No

Yes

Vector

Adobe Illustrator is software for creating vector graphics. This is the native file format. Can also be outputted as EPS or PDF.

BMP

Bitmap

No

Yes

Raster

A bitmap graphic is a raster graphic with one bit per pixel. These are huge, clunky files. If you find yourself with a BMP file, convert it to something else. TIFFs are the best option for conversion without losing resolution; JPEGs are the best option for conversion with a smaller file size.

EPS

Encapsulated PostScript

No

Yes

Vector

PostScript is the language that laser printers use. EPS files contain all the information to print a graphic cleanly. They produce small files when they’re used for logos or other images with hard edges, and pointlessly huge files when they’re used for photos. They often only contain a low-res preview for viewing onscreen, so they may print better than they look.

GIF (sometimes CompuServ GIF)

Graphics Interchange Format

Yes

No

Raster

GIFs are good for two things: displaying logos and online animation.

They’re not even that good at logos, because they can contain only 256 indexed colors, so color isn’t accurate. You can use them for photos, but they tend to look pixilated. Still, they display in every browser, and if you limit the number of colors, they load fast. If you can, though, use a PNG.

JPEG (sometimes JPG)

Joint Photographic Experts Group

Yes

Yes

Raster

A JPEG is designed to store a photo with with a smaller file size than a BMP or a TIFF. It’s a lossy format, which means that making a JPEG removes information from the file. A lot of compression leads to tiny files with visible artifacts (squarish blotches) in your image. A little compression leaves your files bigger but with fewer, or no, artifacts. JPEG is the standard format for photos on the Web.

The 15-Minute Guide to Computer Graphics

www.seltzerstudio.com 15

Cribsheet for common graphic file types, cont.

File Type

What it Means

For the Web?

For Print?

Raster of Vector?

Yes (with a plug-in.)

Yes

Vector (but can contain rasters)

Notes

PDF

Portable Document Format

PNG

Portable Network Format

Yes

No

Raster

PNGs are like better GIFs: they’re smaller, have a wider range of colors, and can even include transparent regions. They’re good for displaying logos and even small photos. They can be animated, but not all browsers support animated PNGs yet.

PSD

Adobe PhotoShop

No

Yes

Raster

Adobe Photoshop is the industry-standard photo-editing and rastergraphics creation program. This is the native file format. Can also be outputted as TIFF files, or pretty much anything else – PhotoShop is often used to convert one file format to another.

RAW

Raw Image File

No

No

Raster, kind of

RAW files are like digital negatives: they contain all the information that your digital camera captures without compression in a relatively small file size, but they need to be processed to be useful. Essential for pros, not so much for snapshot-taking amateurs, who can stick with JPEGs.

TIFF (sometimes TIF)

Tagged Image File Format

No

Yes

Raster

The standard for lossless raster graphics. Makes big files, but perfect quality.

PDFs are like onscreen printouts, and can contain all your graphics and type in one file. They can be edited to one extent or another in Adobe Acrobat, Adobe PhotoShop or Adobe Illustrator.

So is there an easy way to tell just from the size of your file how big and at what resolution it will print? No, because files sizes vary by file type and amount of compression. But here’s what you need to know: If you’ve got EPS or AI files for your logo at any file size, you’re golden. If you’ve got TIFFs, PSDs or BMPs for your photos, you’re probably in good shape – the bigger the file, the better. As for JPEGs, here’s a rough guide: Less than 100K = postage stamp; 100-500K = decent small image; 500k and up = now you’re talking.

The 15-Minute Guide to Computer Graphics

www.seltzerstudio.com 16

This booklet is a gift from Seltzer Studio Graphics, a full-service creative shop located in Brooklyn, NY. For more information – or if you need any other questions answered – visit our site at www.seltzerstudio.com or email us at artboy(at)seltzerstudio.com

Copyright ©2012 Thomas Seltzer for Seltzer Studio Graphics