Graphic Design Basics for PR Pros (Part 2)

hexidec convertBy Thomas Kerr

This is Part 2 of a multi-part series on design principles for PR professionals. If you haven’t read Part 1 yet, I encourage you to check it out here. (The information from Part 1 is not critical to understanding the content of Part 2.)

Part 2: Color and Bit Depth

Can you imagine trying to describe color to someone who has no understanding of it? I wouldn’t know where to start, and unsurprisingly, most formal definitions don’t do a great job of explaining the concept:

The property possessed by an object of producing different sensations on the eye as a result of the way the object reflects or emits light. (Oxford)

A quality such as red, blue, green, yellow, etc., that you see when you look at something. (Merriam-Webster)

A phenomenon of light (as red, brown, pink, or gray) or visual perception that enables one to differentiate otherwise identical objects. (Merriam-Webster)

As you can see, it’s almost impossible to convey the full sensation of color in a sentence or two—the experience is too complex. To understand how color operates, let’s look at the two methods objects can use to produce color: additive and subtractive.

Additive vs. subtractive

Imagine that you want to make an ice sculpture. You could craft it two ways:

  • Additive method: Start with nothing and add water to a mold. Freeze the water and remove the mold.
  • Subtractive method: Start with a large block of ice and chisel away the final shape.

Our eyes interpret different wavelengths of light (within the visible spectrum) as different colors, so we can approach color generation similarly. Additive color starts with nothing (black) and adds varying wavelengths of light to it. This is how computer monitors operate, through illuminating phosphors in the screen. Subtractive color starts with white and removes wavelengths. Everyday objects use subtractive color by reflecting all of the sun’s white light except for the specific colors they absorb. The essential difference is that the additive process creates its own light whereas subtractive does not.

A breakdown of the additive RGB color model

If we separate the visible color spectrum into the three primary colors — red, green, and blue — we can use these as base components to create additional intermediary colors.  Red and green, for example, combine to create yellow. This model is referred to as “RGB,” and it is the basis for how computers display color.

When a computer wants to display an image, pixels are assigned values from 0-255 for each of the three dimensions of red, green, and blue.

   RGB samples

Different RGB values for pixels of the beach photo. (source image)

We can see that the upper-most pixel has an RGB value of (215, 208, 226). Another way to express this — and the way you’re most likely to encounter color values — is through the hexadecimal system: “D7D0E2.” Refer to the end of this blog post if you’d like to learn how the hexadecimal system works.

The takeaway? Don’t approximate color. As we now know, colors aren’t expressed with basic words like “red” or “orange” — these are qualitative descriptions fitting small chromatic ranges. Colors are expressed with numeric information. If your brand has a formal corporate style guide, each color likely will be listed with its official hexadecimal value for reference. If not, there are plenty of applications out there such as Pixie for Windows and Colors for Mac for finding color hexadecimal values. Use these tools to lift the exact color values from  parts of branding materials.

If you’re putting together letterhead, don’t just make the footer “green” because that’s your brand’s general color. Use the official hexadecimal value so that your brand image and exact color remains consistent across all mediums. Even small things like the color of your email signature and the text color on your brand’s Twitter account should all use one consistent value rather than heedless approximations.

The CMYK Subtractive color model

Unfortunately, ink can’t create its own light, so printers have to rely on other methods to reproduce color. Have you ever replaced ink in your home printer? There are typically four cartridges: Cyan, Magenta, Yellow, and Key (Black).

printer inks

Together these form the four-color printing model “CYMK.” To make graphics printable, images in large, commercial printers are separated by each of the colors to form four images. The separated images are then transferred to different plates for the final printing job. On smaller Inkjet printers, tiny dots are used (à la pointillism) to create the printout. By mixing varying levels of the 4 colors, intermediary colors can be created:

CMYK breakdown

Each of the four channels stores information about how much ink (pictured left) is needed. The composite of these four creates the final printout. (source image)

The additive/subtractive dichotomy is important to know because the colors of an image that you see on-screen may not appear in the exact same shade when you print it. The additive “gamut”—or range of possible colors—is generally larger than that of subtractive, so colors that aren’t mutually representable must be converted. This will occasionally lead to suboptimal results:

RGB

CMYK

additive (RGB) colors
(what you see on screen)

subtractive (CMYK) colors
(printing inks will do this)

Converting from RGB to CMYK can be messy. Thanks to PrintingForLess for this demonstration.

This is why any images that are destined for print should be previewed in CMYK mode. Otherwise, you may be shocked at the final printout’s lack of vibrancy.  In Photoshop, navigate to the View menu and select “Proof Colors.” Also, check “Proof Setup” to ensure CMYK is selected.

proofing

If everything looks fine with this selected, you’re good to go!

A final note on color printing:  CMYK is the standard, but this four-color process of combining inks lacks the level of color precision that some designers desire. It’s worth reading about the Pantone Matching System (PMS), which is commonly used for low color-count documents such as business cards, logos, and letterhead.

A bit of knowledge on bit depth

Back in grade school, there was a direct correlation between the size of your Crayola crayons pack and how cool you were. Some kids were stuck with the puny eight-pack while others boasted 32, 64, or even 96 colors! Of course, we’d always just borrow crayons from our friends, but it was nice having a full set of your own.

96 colors and a built in sharpener? (source image)

Why was it better to have more crayons? Chromatic precision. As you ascended the color hierarchy, your capabilities went from coloring a house “Brown” to coloring it “Chestnut,” “Sepia,” or “Raw Umber.” Skies could transform based on the weather; no longer were you limited to just “Blue.” The more crayons you had, the larger your expressive potential became.

In computer terms, the amount of “crayons” used to draw an image is known as bit depth. A bit is essentially an on/off switch that circuit boards can use to represent information states. The more complex the information, the more bits are required. To give you a frame of reference, my Facebook profile picture requires 56,960 bits. This is because the file size is 7.12 KB, or 7120 bytes, and a byte is eight bits (7120 * 8 = 56,960).

With one bit, a pixel can only express two colors. With two bits, it can express four colors. With four bits, we can express sixteen. And so on. But what level of bit depth would we need to represent every color in the known universe accurately? Technically an infinite bit depth — but the human eye is only able to differentiate between 10 million colors. In graphic design, we typically work with a palette of 16 million (24 bits) that covers this range nicely.

bits

Color gradation improves as we expand bit depth.

So the more bits, the better, right? Sort of. Remember, the higher the bit depth, the larger the file. We almost always want to reduce bit depth to 24-bit to minimize storage space or bandwidth usage. If you’re absolutely crunched for storage space, consider lowering the bit depth even further to accommodate. As mentioned before, it’s practically impossible for humans to identify differences offered by anything above 24-bit, so don’t think you’re compromising in any way by compressing down. That said, having a larger bit depth is beneficial for post-processing algorithms since having a more finely-defined palette will enhance the precision of tone and hue-gradation effects. If you’re importing photos from a high-quality camera, keep the bit depth as high as possible until you’ve made all final adjustments.

Even if you aren’t handling photo processing yourself, you’ll sometimes see “24bit” listed under the requirements when submitting a photo to a newspaper or website for your company or client. This is rare and most images you’ll have will be 24-bit, but just to check:

  • Windows: Right-click the image > Properties > Details Tab > Bit depth
  • Mac: Open the image in Preview > Tools Menu > Show Inspector > More Info > Depth

Important note: Some applications such as Apple Preview and Adobe Photoshop will display “color depth,” which is bits/channel, rather than overall bit depth. In this case, 8/channel is equivalent to 24 bit depth.

Now, you know a little bit about how color works! To summarize: Don’t approximate color; use the formally established, exact brand colors in all branding materials. Understand that computer monitors use RGB (additive) while most printers use CMYK (subtractive). Know the differences and proof images in CMYK to ensure proper color replication on print. Finally, process all images in the highest bit depth available, but try to avoid distributing images above 24-bit to save storage space and bandwidth.

Appendix: how hexadecimal works (a.k.a. “What is this “D7D0E2” gibberish?”)

Using our RGB color value from earlier, the expression “215208226” can be condensed by using digits A-H in addition to 0-9. Here’s why it works: using only numbers (0-9), we’d need at least three digits to cover the range of 256 values because with only two, we’d hit our expressive limit at 100 values (10 times 10). By expanding this to 0-9 & A-F, our limit is 256 (16 times 16). The following chart shows why this “base 16” hexadecimal system can hold more data:

hexidecLet’s convert our RGB color value to hexadecimal. To find the hexademical equivalent of our ‘R’ value of 215, simply take the 215th dot, reading from left to right. It is at row D, column 7 — or D7. Doing the same for the ‘G’ value (208) yields D0, and ‘B’ (226) yields E2:

hexidec convertThe concatenation of these three is your hex value: D7D0E2! No, you don’t have to do this manually every time—there are plenty of RGB-to-Hex converters online, and Photoshop has one built into its color picker menu.


Tagged with: , , ,
Posted in Blog
Let Us Review Your Marketing Strategy

Get Our Free Marketing Tips

How We Can Help
For Israeli Companies