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.
