All posts by HippieBoy

Print Design, Web Design

“But the colors don’t match!”

Leave a comment

One of the trickiest things in both graphic design and web design is matching colors. We’ve grown up with color all around us all our lives, so one would think that color would be an easy thing to do – but it’s not. Here’s the skinny…

Print Design Color Issues

The print industry has been using the CMYK method of printing for over a hundred years – it’s commonly referred to as “four-color” printing as they use four ink colors in various intensities and combinations to create a full-color graphic. The four ink colors are Cyan, Magenta, Yellow, and blacK (CMYK); the print shop will use a printing press with four units, one for each color ink, to produce four-color work, laying each ink color on the paper in succession, building the image. It’s really cool to watch!

To confuse the issue a bit more, there is something called “spot color.” Sometimes a company has a logo or graphic that has just one or two colors that will be used consistently and extensively. If that’s the case, the designer who created the logo most likely used spot colors in the design, choosing a Pantone Matching System (PMS) color swatch. PMS colors are a very specific code that gives the pressman very detailed instructions on how to custom mix an ink that is the precise shade the designer wanted. Many print shops will use spot colors on pieces that have just two or three colors (such as business cards or letterhead) rather than using a full four-color press. Some jobs are big enough that larger print shop may utilize presses with five, six, or more units – four for the full-color CMYK and other units to lay the premixed spot color on the paper. (This may be used in an in-house print shop for large corporations. I’m willing to bet Coca-Cola had their own print shop, and they probably pre-mix their trademark red color as a spot color.)

Okay, we now have CMYK, and PMS spot colors. Now we’ll get to black. Quite often a nice deep black on a printed piece wasn’t just black ink, but is rather “rich black.” Plain black ink can be made even darker if you add in some cyan, magenta, and yellow inks – each adds density to the black. (If you mix a little black with yellow, you get a darker yellow. If you mix a little yellow with black, you get a darker black.) So I’ll often build a rich black color using 35% cyan, 20% magenta, 15% yellow, and 100% black, and will use that color swatch to make nice deep blacks in my designs.

Are you bored yet? I hope not, this stuff is interesting to me…

I use gradients quite often in my designs because, well, I like ’em. A color gradient is when you have one color merge into another color – like when you have a box (for example) that goes from red at the top to black at the bottom. Black is again more problematic than one would think when you do gradients. Due to the way print shops use CMYK, every graphic, every color is made up of tiny little dots of color (remember how comic books had dots large enough you could see?), and each of the colors has their dots running at a different angle (a “line screen”), a gradient can sometimes have banding – strips in the smooth transition from one color to another that look awkward. In order to avoid this, I’ll often mix black with whatever color I’m blending into the gradient. If I have a box that’s red at the top and black on the bottom, I’ll create a swatch that’s 100% spot red amd 100% black, convert it to CMYK, and use THAT as the black in the gradient.

It sometimes gets complicated. Some of my designs I’ll have three or four different swatches of black. Imagine how excited I get when we use, say, blue. My little brain boggles. And I also need to know what kind of paper a job will print on – there’s a completly different set of colors from coated (glossy) paper than there is for uncoated!

Thankfully for my wondrous customers I take care of all this gobblty-gook behind the scenes, and I only work with print shops who are consumate pros at this sort of thing.

But here’s what my customers DO need to know: what you see on your computer screen when you proof a job may be drastically different than what I see on mine, which may vary just a little bit from the final product that ships from the print shop. The pressmen at the print shops I use contantly calibrate their equipment to ensure very precise colors. I have a special tool and professional software to color-calibrate my computer monitors and take half an hour or forty-five minutes each week to make sure all my monitors are accurate. But chances are that when I send a proof to my customer, they’re looking at it on an uncalibrated monitor, which may vary greatly from mine. And to make matters worse, computer monitors do not use CMYK – they convert it to RGB (more on that in just a moment).

Web Design Color Issues

Thankfully there aren’t as many issues with web colors as there are with print.  Computer monitors don’t see colors in CMYK, but rather in RGB (Red Green Blue). Light mixes together differently than ink mixes together, so using those three colors a computer monitor can mix them together into millions of shades and hues.

Neato!

So instead of thinking of CMYK, spot color, rich black, and using PMS colors, the web uses a “hex” color scheme. To be honest, I don’t have the foggiest clue how they came up with the protocol, but every color has its own six-character code. Black is #000000. White is #FFFFFF. What’s good is that the software I use can translate CMYK to RGB to PMS to hex with unnerving ease and precision.

The main problem I run into with web colors is, again, unless you have the proper equipment and software, your monitor probably isn’t color-calibrated – so what I see on my screen when I design your website may look a bit different on your screen. And different yet from your tablet or phone!

So, while the technology behind web design makes the handling of color much easier for the designer, every single person who views the website will get a slightly different experience based on their screen. In contrast, color is much more difficult in the print world for the designer, but everyone who sees the brochure (or whatever) will see exactly the same thing…

This kinda stuff keeps me up at night.

So if you’ve ever had any questions on why your website looks different on your work computer and your personal computer, this is part of it! (Another big part of the difference is fonts, which I’ve written about before.)

Web Design

A Note on Fonts

1 Comment

Something to keep in mind with web fonts is that they don’t work like traditional print fonts. If I design a print brochure and choose (for example) Helvetica and Times New Roman at certain sizes and weights (bold, extra-bold, etc.), that’s how it will look – the print shop guarantees the printed brochure will look exactly the way my design indicates.

Web fonts are a completely different animal. I shall now write half a book explaining the whole thing in completely unnecessary detail. (It’s what I do.)

There are a million different fonts and typestyles available now, and its tempting to use them with web design – but I can’t. When a website loads on your browser, it doesn’t actually send any fonts – the code depends on the user having the same font on their machine as the designer had on his machine. The code basically says, “Okay, this paragraph in the web page this guy’s looking at is supposed to be done in Helvetica. Go on his computer and see if he has Helvetica. If he doesn’t, go ahead and use Arial or Trebuchet or just pick something close.” Which means as a designer I’m always aware that the web site the little old lady in Pasadena may see on her 15-year-old Dell may be different than what I’m seeing here in Iowa with my fancy Macintosh, depending on what fonts she has on her system.

So… Over the years things have shaken down a bit to the point where there’s about ten or twelve “Web Safe” fonts that are now common to every computer. Until very recently I was limited to using only those few fonts – and even with those I had to code in alternates (instead of just using Times New Roman, I’d have to list what fonts I wanted the user’s computer to default to if they didn’t happen to have Times New Roman, and list what style to default to if they didn’t have any fonts on my list – “Times New Roman, Times, Garamond, serif”). That’s why almost all web sites kinda sorta look alike in some ways.

Just recently, in the past year and a half or so, Adobe started rolling out “web fonts” that are kept on a server and are available 24/7. The software I use (Muse) will now code a website to say, “Okay, we want the user to see this paragraph in Questrial font, so before you put this page on the screen, go to Adobe’s font server and download that font real quick in the background, THEN show the page on the screen. If for some reason Adobe’s font server is slow or doesn’t work, show the user the site using plain old Arial instead as its a Web Safe font.” This system opens things up a LOT for designers – we now have hundreds of fonts to use with reasonable confidence rather than the same ten or twelve old Web Safe fonts we had in the past.

But it still doesn’t guarantee that every user who looks at a web site will see it exactly the way we design it… Each browser renders code differently. Internet Explorer, Firefox, Chrome, Safari, Opera – there are literally hundreds of others – all see things uniquely. Almost all browsers follow a certain set of rules – with Internet Explorer being the big, glaring exception. (If you look at the code behind a website, you’ll often see the tag “IE Hack” after a command followed by the exact same command written in different code that Internet Explorer can understand. It’s a pain in the…) So quite often folks who use Internet Explorer will see a completely different version of a web site than everyone else in the world.

And on top of that, each individual user often customizes their browsers themselves as well. Some people have their browsers show every site in big huge type so it’s easier to read, other people like to keep their browser windows small and narrow, some like it to be full-screen… It gets messy!

So, I’m always ready when I surf the web on someone else’s computer and trip over a site I designed – and it looks way, way different than it does on my computer.