You’ll have heard the term dpi, and most probably also ppi. (No, not the type you see adverts for on TV saying you should claim it back.) Broadly speaking, they refer to Dots Per Inch and Pixels Per Inch.
Dots per inch is what your printer is interested in. It’s how many of those little splodges of ink it’s going to put down per square inch. For most intents and purposes, it’s become standard to set up print docs at 300dpi – nice and small, so your eye can’t see the individual inks. Sometimes a printer might ask for more, or less. For examples, billboards are often quite a lot lower, possibly 100dpi or so. Have a look next time you’re passing one closely enough and you’ll most likely see the colour plate separations.
PPI the number of the tiny squares on a screen (pixels) that are individual RGB colours per square inch. Screens tend to display somewhere between 67 and 130ppi.
The reason this is confusing is most software and hardware manufacturers misuse the term and call everything DPI, or PPI. The indiscriminate bastards.
Mostly, images saved for screen get saved at 72ppi – ‘web resolution’ as it’s often called, because it’s the resolution the internet displays at.
The resolution matters here for reasons of overall size dimensions: if a logo needs to be, say, 800 pixels across for a specific place on a website (say, a social media profile picture for a company) and it’s been supplied at 200, it’s enlarged beyond the pixels it has at its disposal: it doesn’t really know what the other 600 pixels across that width are meant to be, so it effectively displays at a lower PPI and looks pixelated. Which is never good. So the Overall dimensions are important.
With me so far…?
So, to summarise, if you’re sending something to print it’s most likely going to be set up in CMYK, at 300dpi. If you’re saving something for screen use, it’ll be RGB at 72ppi. All nice and simple.
Finally, you need to consider file type. File types are magical things that all do something a little bit different and display in slightly different ways. Some are better for screen use, some for print. This depends in part on what colour profiles they support.
For example, PNGs can only be saved as RGB, and so aren’t ideal for print, because the colours may change, leading to what’s printed looking different to what’s on screen. But they do support transparency, making them great for saving out a logo that might have to appear over an image on a website, for example. Or, importantly, if there’s a white or very light version of the logo that can’t be saved as a jpeg with a white background.
PDFs can be saved as either RGB or CMYK, but are favoured for print because they can embed fonts, stay editable, and package up some other info your printer might need. Tiffs are great for print as no data gets lost in compression, but they tend to be really big files size wise.
The Adobe design programmes you’re likely to be using for logo work allow you to save out an array of file types in both RGB and CMYK, and convert between RGB and CMYK to save working files (.ai’s or .psd’s) in either profile.
In illustrator and Photoshop, the mot straight forward way of saving out different file types is to either click File > Save As… or File > Export > Export As… depending on the file type you want to save.
OK, so this is where it starts to come together.
If we go over how I tend to save out a suite of logos for print and screen in a range of file types, we can see a couple of issues that might come up and you can think about how to go about this as part of your own workflow.
For the big prize money projects here at Do More we ask you to provide:
Like we said, PNGs can’t be CMYK, so there’s no version of that. If there’s a white or very light version of the logo that needs to be CMYK (basically a design that needs a transparent background) then the .ai should be sufficient.
As we’ve gone over here, it’s good practice to save all CMYK files at 300dpi, and all RGB files at 72ppi. In truth the resolution doesn’t matter too much for the .ai’s, as they’re vector, so scale easily, but do keep an eye on the physical dimensions. Personally I tend to make sure that the images are no less than 10cm (100mm) across at these resolutions. If a company needs a bigger logo they have the easily scalable vector. And its possible for them to save smaller dimension versions if they need to.
The first thing to consider here is what colour profile you’ve been working in when designing. I tend to work in RGB, as the blend modes and transparencies in illustrator are arguably a bit easier to work with, and as discussed RGB has a much wider gamut, meaning it can make many more colours than CMYK is capable of reproducing. You can see the difference it can make in the red, green and blue squares above. If it suits the brief, why deny yourself some of this spectrum as a designer?
But when it comes to saving out a suite of logos, we need to think about this.
It’s not always a case of cracking open illustrator and going File > Document Color Mode > CMYK Color, and then saving out a set of files.
Often colours will lose a lot of their vibrancy. Sometimes tweaking the ink values is important to see if it’s possible to get some of that vibrancy back. This isn’t always possible, but is worth exploring.
If you want to be super accurate about this you can do the following: select an object and go Windows > Color, then click the burger menu and select ‘Show Options’ you’ll see the true vales of the mix. You can then make these whole values, as oppose to being to 2 decimal places. Which makes making any brand guides or brand summary sheets nice and accurate. This isn’t strictly necessary but it’s a nice-to-know.
It’s also worth noting that when you convert from RGB to CMYK and then back again the colours will stay less vibrant. They don’t go back to their previous RGB values. Which is important to be aware of you’re trying to save out multiple file types in both profiles, so you need to consider your workflow.
There’s other issues changing from CMYK to RGB as well. If you set up a CMYK doc, make an object 100% K (black), and convert it to RGB, you’ll see it change to a very dark grey/brown on screen. And if you look at the ink values now, it’ll be a mix of C, M, Y and K what’s known as a rich black). Any inky black isn’t as dark as the absence of all light! So it might have been set up well enough for print, but now looks a bit muddy for screen use. As standard, the Adobe swatch for black is a rich black and keeping a black object as this swatch does pretty much remove this issue. Overall, it’s just best to limit the number of times you switch profiles to stop these issues creeping in.
So this all sounds a bit scary and confusing, but really, with a decent workflow, these pitfalls can be avoided. I tend to do the following:
- Design in RGB in Adobe Illustrator.
- Save all the RGB file types out from this version at 72dpi, at least 10cm across at this resolution. (png with transparent back ground)
- Save a copy of the file and change the profile of the copy to CMYK. This way, the RGB working file is unaltered.
- You can then tweak the values of the copy so they work better in the new profile if you need to.
- Save all the CMYK files from this version at 300dpi, at least 10cm across at this resolution.
- Start a folder called ‘*Name of Company* Logo Files’ and two sub folders within that, one called ‘For Screen’, the other ‘For Print’ …see where I’m going with this? Give the files suitable names, like ‘*Name of Company*-Main-Logo-For-Screen.png’ or whatever.
And there you have it
A nice professional, useful suite of your awesome client-wowing design. Now you can get back to finding out what yeast does and playing ‘Guess the Hex’ with a bottle of Frosty Jacks.
This hopefully introduces the basics without being too confusing (?!) but if anything’s not clear, feel free to get in touch.
WHAT DO YOU WANT TO DO NOW?