Understanding What the Heck Designers Are Talking About

Have you ever asked a designer or production artist to please email a company’s logo to you? You probably still bear the emotional scars from the rapid-fire questions that the person shot back, all carefully aimed at your self-esteem. The email you received probably looked something like this:

    Re: Logo Request

    What physical size? What file size? What file format? What DPI? What LPI? Do you need RGB, CMYK, PMS, or grayscale? What color background? Do you need a clipping path? Will it be used for print or on the web? What platform? Does it need to be compressed, and how?

Later, after you’d had a bit of time to recover, you might have sent back a message to the designer containing the contact information of the person intended to receive the logo. Somehow you had become the “idiot filter.”

It’s preposterous, I know, that you studied so hard, listened so carefully, and played the game so well to reach your position, only to be talked down to by some sloppily dressed, goatee-scratching, ponytail-flipping, nose-ringed, bleary-eyed Mac user with an alleged art degree. Well, consider this day the beginning of a new era. I’m going to be giving you in this and subsequent articles the information you need to clarify what all that gibberish is about. Soon you, too, will shock and intimidate — and maybe even impress — others with the arcane knowledge possessed by designers and their ilk.

Read on. Feel the power coursing through you. You will understand, you will stand your ground, and you will suffer no more… well, at least a little less.

Graphics Overview

What’s the big deal? They just make pictures, right?

Well, yes, that’s what designers do, but it’s not quite as simple as drawing or picking a photo and a font. There are technicalities beyond measure to deal with, whether the work is for the web, print, or CD-ROM. These technicalities are not necessarily bad because they prompt designers to participate in creative problem solving. Such limits challenge designers to be more creative with what they have to work with.

Each new technology or innovation has its own merits and advantages. Creativity aside, this section will cover the main issues that designers face when creating colors and shapes with computers, the most popular medium used to create advertising art. It is essential to understand these underlying principles before grasping the more advanced concepts we will explore later.

How the computer portrays color plays a major role in the technical issues that arise in the designer’s world. It all begins with light.

Light

Figure 1

When a car is traveling down a road at night (Figure 1), the area where both headlight beams overlap is brighter than the areas that contain the light of only one beam. This demonstrates how light is additive, meaning that the more light you add, the brighter it gets.

Now let’s see what happens when you use colored lights.

Color

Figure 2

Figure 2 illustrates what would happen if red, blue, and green lights were shown on a black surface. See what happens where the colored lights overlap? They make new, brighter colors. The middle, where all three lights overlap, is white. This demonstrates additive color.

Remember back in elementary school when you learned the seven hues of the rainbow (ROY G. BIV, or red, orange, yellow, green, blue, indigo, and violet)? Drawing from the rainbow, our computer monitors use the first hue (red), the middle hue (green), and the fifth hue (blue) in various combinations to show us all those wonderful colors. That’s why colors on our screens and on the web are called RGB colors.

At any given time, there are three beams shooting tiny red, green, and blue spotlights onto every pixel, or dot, on your computer screen. It’s all done with only three spotlights, or “guns,” that shoot each dot over and over again, thousands of times per second. Most people have a minimum of 480,000 pixels on their screens. Each pixel is refreshed so quickly, we don’t even notice. Our human optics can’t process the images as fast as the monitor can redraw them.

By now, you’ve noticed that I keep using the word “hue.” There’s a reason for that: Over the years, designers have become very precise about how to define a color, mostly because technology has made the duplication of colors more accurate and predictable. Designers use three main attributes to identify any given color:

    Hue: This refers to the variation or combination of red, green, and/or blue. For example: Yellow is composed of equal amounts of red and green light. (Look again where the red and green lights overlap in Figure 1B.)

    Lightness: This refers to how bright or dark the particular hue is. When you reduce the lightness of yellow, you get brown.

    Saturation: This refers to how pure the color is. An intense color has a high saturation, while a grayish color has a low saturation. Don’t confuse this with lightness. When you reduce the saturation of yellow, you get tan. When you reduce the lightness of tan, you get a darker tan color.

Figure 3

Figure 3 shows how the lightness and saturation can independently affect the yellow hue to create different colors.

Most computers can combine red, green, and blue into one of 256 hues, then apply one of 256 degrees of lightness and one of 256 degrees of saturation to that one particular hue. This makes for (potentially) 256 times 256 times 256 colors — a whopping 16,777,216 variations!

Well, that covers the basics of digital color. Color underlies almost all of the topics in this series, so let these fundamentals soak in. Just for kicks, analyze the color of someone’s shirt or blouse, and comment to him or her on its hue, saturation, and value. Then just walk away.

Next up: Everything you ever wanted to know (but were afraid to ask the disreputable-looking designer three cubicles over) about the technology behind shapes.

Related reading

nurcin-erdogan-loeffler_wikipedia-definition-the-future_featured-image
pwc_experience-centre_hong-kong_featured-image
12919894_10154847711668475_3893080213398294388_n
kenneth_ning_emarsys_featured-image
<