Pixels, dots, resolution, vectors, Photoshop - if graphics and images aren't your bread and butter, these terms can all leave you feeling a little befuddled. And you brave souls venturing into producing your own artwork for the first time deserve a helping hand (and a terminology translator), so here's a quick and hopefully easy-to-follow guide to keeping your artwork looking crisp, colourful and clear.
Join the dots
Pixels, points, dots, dpi, ppi, definition, resolution; with so many different terms for one specific aspect of image creation and editing it's not surprising a lot of people can feel a tad lost at sea. But it all boils down to this - images, whether on a screen of on a page are made up of tiny dots or squares the more of these you have in a very small area, the smaller they'll be and the better your image will look. Images with lots and lots of very tiny dots or squares are called high resolution. Definition means pretty much the same thing but refers to the technology used to display or capture those images with HD meaning a very precise image resolution of 1080 vertical lines/pixels by 1920 horizontal lines/pixels will be the output.
Web vs print - it's war
One of the major differences between creating images for printing on your flyers or signs and those for your website is the 'colour space or mode'. For print you need to save your images as CMYK. For web go for RGB.
'Why's that?' you ask. Well, printing presses use four different colour inks - Cyan, Magenta, Yellow and Key (black) and all other colours you see are produced by blending those inks in certain proportions. Saving in this mode means that your chosen colours are saved in a language the printer will understand and faithfully reproduce.
For web we use RGB because screens are made up of Red, Green and Blue pixels. It's as simple as that, well except for the following resolution bit.
When you create a gorgeous, glossy print document or bit of artwork, one thing you're sure to notice is that you end up with a huge file size that probably slows down your computer. This is because print images require 300dpi (dots of ink per inch) to look their best. Computer screens can however make do with a lot less detail which is great as otherwise websites would take an age to download all those huge image files. 72dpi is the sweet spot though you can go for a slightly higher resolution if you're targeting HD mobile devices (but do consider your audience's download limits please!).
This means that you should never use a web image for print, as in the vast majority of cases it'll be less than a third of the resolution you need and in the wrong colour mode to boot. Going the other way - from print quality, to web quality is absolutely fine though, and leads us to...
When you're creating your graphic or taking that photo make it as big as possible. In graphics this means creating it in the biggest possible size you could want to use it, in photo terms this means taking you pic in the highest definition setting possible for your camera.
You can always 'down-sample' to reduce the file size or resolution but you can't add detail you never captured in the first place. Down-sampling is simply saving a version of your image at a lower resolution or smaller size. As long as you start with a large high-quality image you'll end up with a great looking small version or web version at the end of your editing.
But try this the other way round and try and increase the size of a photo or graphic, and all you'll be doing is making those few blocky pixels bigger and more noticeable. Avoid this at all costs!
Don't fiddle with the file types
And last but not least, keep photos as jpegs (jpg files). Don't save them as gifs or pngs, as these are designed for much simpler images. These two files types are great for graphics, though if you have a lot of detail in the design then saving as a jpeg would be the best option here as well.
Follow the above advice and you should avoid the frustration of fuzziness. Good luck noble artwork adventurers - go forth and create!