banner image

FROM PRINT TO PIXEL

Print designers are increasingly faced with the decision of staying in print only or making the digital dive. I will try to help by touching on some of the biggest differences and challenges I experienced in a three part series. Here is the first part:


Much of the theory is the same (a designer is a designer, right?), but there are also a lot of technical differences between designing something that will be sent off to the printing press and something that will be sent into the world wide web.

If you’re standing on the edge, dipping your design toe into the digital pool, but are too scared to take the plunge: Don’t be! It’s totally possible! Yes, you’ll possibly get frustrated, occasionally feel like a caveman, and sometimes miss the smell of paper… But the journey will also be exciting, and as you submerge yourself in it you will stand amazed at your abilities and progress. Be patient – it’s so worth it!

It’s fun to stay at the CMYK… but RGB is calling
 

PART 1: COLOUR ME INTRIGUED…

As a print designer, you are used to thinking in terms of four colours – Cyan, Magenta, Yellow & Key (Black) – of ink mixing in various percentages to give you the colour you want. Suddenly you have to wrap your mind around the concept of three colors (Red, Green, Blue) of light combining…

 
SO, WHAT’S THE DIFFERENCE? 

          

CMYK adds ink to white paper, decreasing the amount of light reflected off the paper to produce different colours. CMYK is therefore a subtractive process: you start with white and eliminate light to create colours until you eventually get to black. It’s interesting to note that simply adding cyan, magenta and yellow together will give you a very dark brown and not a pure black, so black is needed to totally remove light from the white paper and thus give black. Colours are named with CMYK percentage values (0 to 100) for each color (for example 90,10,20,5).

  • White: 0,0,0,0 (no ink) & Black: 100,100,100,100

RGB adds light to a black screen, increasing the amount of light shining from the screen to produce colour. It is an additive process: you start with black and add light to create colors until you get to white. Colors are named with RGB values from 0 to 255 for each color (for example 24,218,194) to theoretically create a whopping 16 777 216 different combinations.

  • White: 255,255,255 & Black: 0,0,0 (no light)

 

PAINT BY (NEW) NUMBERS

          

As a former print-only designer I used to see colour in four numbers. I would see a nice purple and inadvertently think: “…probably about 55,90,10,0…”. To get that purple a bit more pink, I’d know to add magenta… When I started working in RGB, I could simply not figure out which three numbers that purple would be represented by (115,25,230, by the way) or that by decreasing green would make it more pink… Luckily most design programs (and a plethora of websites, like www.rapidtables.com) can do these conversions for you, and you will learn over time, but here’s some basic knowledge to start off with:

Imagine a colour wheel with the six colours in this order, clockwise: red, yellow, green, cyan, blue and magenta (see illustration). Each colour interacts with the colour opposite it in the wheel:

  • to achieve a pinker shade in RGB, you will reduce the green;

  • to make it more yellow, you simply reduce the blue;

  • to get a more cyan hue, you reduce the red;

 

WHAT THE HEX? 
          

You’ll soon notice that colours online are sometimes represented by HEX values. These are an HTML expression of the RGB colour. HEX is short for hexadecimal (or base 16). It uses sixteen symbols: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 to represent values zero to nine, and A, B, C, D, E, F to represent values ten to fifteen. Colours are named using a hashtag followed by a six-digit number, with a symbol pair for red, green and blue each (for example #18DAC2 which is RGB 24,218,194). Understanding the HEX colour notation will require you to understand the hexadecimal system which is pretty interesting (if you’re a bit of a geek like me), but not important as, once again, there are enough websites (like www.calculatorcat.com) and programs that can convert these colour values for you if the need ever comes up.

 

“GOOD NEWS, EVERYONE”

          

 

Still unsure about this RGB thing? Here’s some good news to sell it: Many print designers know the frustration of seeing beautiful colours on screen, and then being disappointed when it looks less eye-popping in print. That’s because each pixel on your monitor emits up to 16 million colours. Your printer, using CMYK, can only produce a few thousand colours through absorption and reflection. Designing for web, however, means that what you see is what you get! So you’ll never be disappointed with the difference in colour between your design and what reaches your audience again!

 

linkedin icon facebook icon twitter icon email icon

RELATED ARTICLES

TO MAC OR TO PC? THAT'S THE QUESTION…
TO MAC OR TO PC? THAT'S THE QUESTION…

Whether you are a Mac Groupie or part of the PC master race, we are all part of the world of tech and we need to use a machine to make things happen.

THE HIDDEN STRENGTH OF VUE.JS
THE HIDDEN STRENGTH OF VUE.JS

Without a doubt, writing web apps has matured over the years. Gone are the days of messy spaghetti code and monolithic architecture.

group image

Have an idea?

LET’S WORK TOGETHER