Resolution. Or, Why Can’t You Just Take My Logo From My Website?

1 08 2010

Okay, we’ve talked about vector art vs raster art.

Now we’re going to talk about resolution. Please note, in this discussion we’re talking about raster art. Vector art, as we know, is completely scalable to any size. Raster art is made up of tiny little boxes of color, like a mosaic.

Any graphic artist will tell you that nothing strikes more terror in his heart than hearing a client say, “Just take my logo off of my website.” There’s a reason for this. I promise you, we’re not just being prima donnas.

Lady Bug 1 inch squareYour computer screen can read 72 little blocks of mosaic color dots per inch of screen space, or 72 dots per inch — dpi. Check out this lady bug. It was created at a size of 72 dpi and it’s an inch big, so there are 72 dot across each row and 72 dot down each column. If you right click that picture and view properties, you’ll see that it’s displaying at 72 x 72.

Lady Bug too big!When I take this same picture and make it bigger, it’s going to start to get weird, because it only contains 72 dots each direction, and it’s not meant to be bigger than that. Right click it and view properties and you’ll see that it’s displaying at 144 x 144. By it was created at 72 dpi, so your screen is stretching it. There’s not enough information in that graphic. See, you can see ragged edges — that’s called pixalization. It’s obviously not as clear as the other picture.

Okay, here’s an animated picture of the same lady bug. (This is going to open in a new window. When you’re finished looking, close the window and you’ll be back here.) I’ve taken those 72 pixels and blown them up. As you see, there’s only so much information in that graphic. At the end, you’ll see that we’re looking at the same 72 pixels. If you blow them up, you’re just distorting the picture.

Here’s the thing. While your computer screen has a resolution of 72 dpi, printers require higher resolution. The HP or Epson on your desk may say it prints 600 x 600 or 1200 x 2400. If you take our lady bug and print it at one inch, it will look pixelated, because your printer requires more than 72 dots per inch.

That being said, your HP or your Epson is somewhat forgiving and it will try to print your lady bug as nicely as it can. Commercial printers are not forgiving. Commercial printers prefer 300 dpi and require 220 dpi. And those commercial printing presses are NOT very forgiving. If you don’t provide good art, your art’s going to look BAD when it’s printed.

So some people try to fake out the system. They take the same low res lady bug and just divide the image into more pixels to get more dot per inch. Doesn’t work! Because that original image only contains the information that it contains. You can’t add what’s not there.

small version of a beehiveOne last thing resolution demo. Check out this picture, on the left. (This is going to open in a new window. When you’re finished looking, close the window and you’ll be back here.) Any idea what it is? When you click on it, you’ll get a bigger version and you’ll see all of the details. Once you make it smaller you lose detail, as you see here. You’ve removed some of the information. If you take that smaller picture and you just try to blow it up, that information is gone and you’ve lost the detail.

I think that’s enough about resolution for right now. Stay tuned, there’ll be more about resolution and more about vector vs raster, down the line.

As always, please let me know if I can clarify anything!

:)Sj

Advertisements




Vector VS Raster. Or, Connect the Dots VS a Mosaic

12 07 2010

I’ve always wanted to have a forum for explaining a few graphics things that confound lay-people. I’m going to discuss two of those things here in a very short period. In this blog I’m going to talk about the difference between vector art (.eps, .ai, .svg) and raster, or pixelated art (.jpg, .gif, .tiff). In the next one I’m going to talk about resolution.

After you’ve read these you’re finally  going to understand why people tell you that they can’t download your logo from your website to create poster board-sized signs.

Think of vector art as like playing connect the dots and then filling in with a crayon.  When you create vector art you move your cursor around the work area, creating dots, or points. Between each two points is a line. You can make your lines straight or curved depending on how you click your points. The computer says “Okay, here’s the first point at this fixed spot.” It gives that spot a name. When you make your next point, creating your first line, the computer says “okay, the next point is  over here, and the line has a curve that looks like this…”

Here, take a look at this — click on the graphic to see it larger. You can see the points and lines in the first tree. You can see the points in the second and the “regular” picture in the third.

The special thing about vector art is that you can scale it — make it bigger or smaller — without having it lose any information. When you scale it up or down, it keeps its crispness. That’s why the person creating your posters or your programs or your tee-shirts wants your logo as vector art. He can change the size without losing any quality.

Vector art is most commonly created in Adobe Illustrator or CorelDraw.

On to raster art. That’s Microsoft Paint or Photoshop’s world, and what people are most familiar with. Think of raster art as a big mosaic. Each little piece, or pixel, means nothing by itself, but together, they create a picture. Take a look at this tree.

Raster art is what digital photographs are made from. It’s what all web graphics are made from. It’s what Microsoft Paint creates.

So, when do you choose vector art or raster art? Many people tend to create their artwork in raster simply because it’s easier to learn the basics of Microsoft Paint or Photoshop than it it to learn the basics of Illustrator or CorelDraw. But it’s not always the best answer.

If you’re creating anything that you may want to use in various sizes, you want to use vector art. Logos are created in vector art. It’s also best to use vector art if you’re creating anything with words, that needs to be printed. As you’ll see in the next blog, because of resolution issues with raster art, text can be a real problem in raster art.

Since photos are raster art, you use raster art to manipulate photos.

You can only use raster art on the Web. So, if you’re creating art for the Web, you can create it either as raster or as vector, but you’ll have to save it as raster to put it on your Web pages.

But, I want to stress again, logos should really be created in vector art. You may think that your logo is only ever going to live on the Web, but someday you may want a business card, letterhead, a flyer or tee-shirt with your logo on it. If you must create your logo in raster art, make sure you make it big enough to start. You can always make it smaller, you can’t always make it larger.

Okay, later this week we’ll talk about resolution.

:)Sj