Being Print-Aware: 2. Talking About Resolution

This is the second in our series of posts to help small businesses and self-printers who would like to understand how to avoid the common, everyday issues that face designers and printers when preparing files for print. 

You have a bit of a problem. Your business cards have returned from your printer and the logos look very blurred, even though they looked fine on your computer monitor before you sent it to print. Your checked your colour was set up correctly (see here) so what’s happened? File corruption? Have your printers messed up somehow?

The chances are that you – or your designer – have created your file at an incorrect resolution for print, or designed a logo specifically for the web that isn’t suitable for printing commercially.

So how do you fix it? Is there some sort of magic reformat/resample button to make it bigger? Do you tell your printer they have got it wrong and get them to change it?

First of all, don’t think you can just resample the image – make it bigger using your image creation program – or drag it out bigger on the page, because this will still cause quality issues (such as the blurring on the right ‘Logo’ image above).

In addition, any decent commercial printer will usually prepare the artwork correctly but they can only work with what they are supplied. The blame usually, therefore, lies with the client/designer.

Therefore, it’s up to you to make sure that the file supplied is of sufficient quality to be printed before your send it to print. Although this example is a purely a print issue, it’s useful to be able to understand both web and print requirements.

It’s all about dpi (or ppi!)
The issue is likely to be low resolution. Before we start discussing actual numbers, resolution is referred to by the terms dpi (dots per inch) and ppi (pixels per inch). Both are fairly similar in real-life, and for the purpose of this piece, can be viewed as interchangeable.

dpi – is generally used for printed images while ppi refers to the ‘screen dots’ – or pixels – that you will see if you look very closely at a computer monitor or television screen.

Let’s look at resolution from a web perspective first.

What resolution figure should I use for my web logo and images?
Historically, 72ppi has been used to refer to web images and is derived from early monitor resolutions that were generally 72ppi (it is more complicated than that, but we’ll leave that for another post!).

However, today’s high resolution monitors – such as Apple’s Retina displays – make this figure pretty much obsolete, and though it can be used as a rough guide, it’s best to be as accurate as you can.

How do I know what my web designer needs?
The short answer is: ask them. A good print or web designer should be able to do all of this resizing for you as part of their services but, as some do charge extra, charge by the hour etc., you may decide to source the images yourself to save yourself some money (Firefly Design Services think this should be done by ourselves – not the clients – as we can do it quickly and efficiently, and we rarely charge  unless it is a large number of images).

You really should be working with the pixel size that your web designer/developer needs (referred to as pixels or px). Think of the computer monitor as a being made up of a grid of dots and within that grid, there will be parts of it on your website that need filling with images and text. Your web designer should be able to tell you what they want in these sections as a size in pixels (for example, an image of 300px wide x 200px high to fill a space of that number of ‘dots’).

Please note: If you’re doing your website yourself, say, on a Wix or WordPress template, when you upload the image it should resize it automatically (although sometimes this can generate large storage sizes that may soon exceed your hosting plan!).

Ideally, you will also have an application like Adobe Photoshop, and save the file by going to the ‘Save for Web…’ option. Photoshop will then format it to be ‘web-optimised’, which is basically creating a version tailor-made for the web.

So what does my printer need?
Your printer needs a version of your logo that will initially have been set-up at the finished, physical size as a minimum of 288dpi to 300dpi. It is rarely effective to use a logo that has been taken directly from the web and resampled in an image program from say, 72ppi, to 300dpi as ‘artificially’ making the logo bigger from a small size usually makes it blurred.

Why is is it so high for print?
To keep things (relatively!) simple, if you use the old guide we discussed of 72ppi as a basis for the web, if you have a 288px x 144px image, it would roughly occupy a 4 inch x 2 inch space (approx. 10cm x 5cm) on a 72ppi screen. However, if it were then to be resized to a 288dpi file for print, it would only occupy a printed size of 1 inch x 0.5 inches (2.5cm x 1.3cm).

As you can see from the figure below, if you first design at 72dpi, then convert it to 288dpi, it vastly reduces the print size.

This is because if you relate it to a ‘dot’ system for printing it is much finer – more dots per inch– than that on even the highest resolution screens.

If you remember that roughly speaking, a web image you see at full size on a screen will reduce to a quarter of the size in print. This is quite a simplistic way of viewing it – screens are now generally much higher in resolution – but it will serve as a good guide.

Start the right way
So, how do you resolve this issue? Ideally, you stop the issue at source. When either you or your designer start to create your logo and you think there is a chance you might print it, design it for print first and reformat/resample it down as necessary.

If you have had a logo designed and it’s not good enough for print – and don’t have the skills or software to recreate it at a higher resolution – contact a designer who can sort it for you. We find that this sort of ‘redraw’ service is very popular for clients who have used a designer who isn’t aware of the print requirements (currently, many designers are very knowledgeable of web but not as print-aware. We know each discipline well and always design our logos to be equally suitable for both).

Whenever possible, get your logo designed as a vector, which is an infinitely scalable file (it does not lose quality whether recreated for the web or printed on the side of a lorry!).

A good designer will usually give you a range of logos in different formats, including a vector file (all of our logos whenever possible are designed in vector format, and also supplied in a full range of web-friendly files, too).

We’ll come onto vectors and file formats in a later post, but if there is anything you need to know in the meantime, please email us at fireflydesignservices@gmail.com or using the comments box below.

 

Being Print-Aware: 1. A question of colour

Most business people these days are IT-literate to a good level, but when it comes to designing your own artwork, there are quite a few well-disguised holes that even the best DIYer – and some designers! – can easily stumble into!

In the next few posts, I’ll be explaining some of the issues that face designers – and DIYers – when creating artwork for reproduction, whether on screen or in print.

Colour modes
‘Colour what?’, many non-designers will say (and some designers, too!). Colour modes are one of the prime candidates for creating errors, especially in print.

RGB, CMYK or Spot Colours?
The simplest way to summarise this right from the start is always use RGB for web design and always use CMYK when printing. But what does that mean and is it always true? And what are Spot Colours?

RGB
When designing for the web, there is one main format; RGB, or Red, Green and Blue. It is an ‘additive’ colour system. Put simply, it creates colours by combining different amounts of red, green and blue, in much the same way that your computer monitor or laptop does.

In a graphics program – such as Adobe Photoshop – you specify the strength of each of the 3 individual ‘channels’ of RGB colour using a numbering system from 0 to 255. Therefore, if you specified R=255, G=255 and B=255, you get white. Conversely, Black is R=0, G=0, B=0. So, to create a strong yellow, this would mean ‘adding’ green and red together and so on.

When designing purely for the web, you don’t really need to worry about colour modes as you don’t have a great deal of control how the colours will look on other people’s monitors. However, the colours shouldn’t be a million miles away as most colour monitors will be able to display a full range – or ‘gamut’ – of colours.

There are also sub-formats of RGB such as web-safe RGB, hexadecimal, HTML and CSS references, but for the purpose of this post, think RGB=Web!

Designing for Web and Print
Where it gets tricky is designing for the web and print.

It’s usually wrong to assume that when designing for print, the colours you see on your screen on your design – or on a ‘soft’ proof PDF, png, jpg etc. from your designer – will remain exactly the same when reproduced as a hard copy (a printed business card, leaflet, banner etc.) .

For a designer, getting this wrong for a client when creating artwork intended for print will usually result in a very unhappy customer and one who who is unlikely to return. For a ‘DIYer’, time and expense in having the artwork printed again and possibly missing an important deadline.

CMYK
The CMYK mode is in many ways the exact opposite of RGB. It is a ‘subtractive’ system and uses 4 ‘channels’ of colours, CMYK: Cyan, Magenta, Yellow and Key (Black). Incidentally, ‘Key’ is the reference for Black and is used instead of ‘B’ to help lessen confusion, say, from ‘Blue’ (there are other definitions, but it’s easier to just remember that K=Black!).

To simplify the theory, think of the meaning of ‘subtractive’ as the more colours you add together, the darker the colours will be (the ‘true’ definition is that light is absorbed or removed to create various colours).

To give an idea of the colour mode in a design situation, each level of C,M,Y or K is stated as a percentage from 0 to 100%. For example, for Black it would be C=0, M=0, Y=0 and K=100. For Red, with just a hint of blue to darken it, it would be C=5, M=100, Y=100 and K=0.

The matter gets highly confusing when you consider that many home printers can actually print using the full RGB spectrum! However, CMYK is still used by most commercial printers so if you’re looking to get something printed professionally, you still need to set it up – or convert it – into CMYK.

Spot Colours: “I want my logo a stronger orange than that. What can I do?”
CMYK does have inherent limitations, one of the main being it sometimes lacks vibrancy or colour saturation.

This is where ‘Spot’ or ‘Pantone’ colours come in. Just to add to the confusion(!), if you absolutely must have a very strong, pure colour as part of your artwork or logo – especially some oranges, blue-greens etc. – you must specify a ‘Spot’ or ‘Pantone’ colour and give your printer the reference number of that colour.

This adds another channel to your standard 4 CMYK set-up and will correspondingly add to the cost of printing and (sometimes) design.

Colour Shift
Spot colours are often used in printing fluorescent inks, special finishes and other colours that cannot be faithfully reproduced using the CMYK spectrum. Incidentally, don’t think you can set up the file as CMYK in your design program, add in a Pantone colour and everything will print fine. It’s the same as if you send it in RGB to print; the printer’s software will take a guess at the colour and convert it to CMYK and the resulting change in colour is seldom satisfactory (this is technically termed the ‘colour shift’).

Summary
Design your web stuff in RGB, your print artwork in CMYK. A good designer should always check that the artwork sent to print is in CMYK format/mode and if they have initially designed it for the web in RGB, the colour shift when changing between the 2 modes isn’t really noticeable.

We suggest if you’re a new company – and/or on a limited budget – avoid the extra cost of spot colours, find an alternative, or get your designer to do it for you.

Our Blog…

Welcome to the new Firefly Design Services Blog section. Here, we hope to help you with most of the common questions surrounding graphic design, print and illustration. Over the coming weeks, we’ll be creating a guide for designers and DIYers alike that outlines the importance of good design and a professional approach to print and artwork creation.

We will also be showcasing the latest illustration work we’ve produced and exciting projects we’re working on, together with some step-by-step tutorials that will help aspiring artists and designers progress in their chosen field.

Click on the drop down menu (above) for a list of our topics, but please be patient as we want to strive for quality rather than quantity. We’ll give you original, helpful content in manageable ‘chunks’ of information rather than bombard you with unnecessary, irrelevant content.

Check in with us regularly for the latest updates, or subscribe to receive the latest updates by emailing: fireflydesignservice@gmail.com

Feel free to email us with your questions and anything you’d like us to use as future topics.