This How-To Guide Will Make You A Better Designer
I remember when I was a complete newbie to the world of graphic design. I didn’t have the first clue about anything to do with image resolution or colour models or file formats...and don’t get me started about CMYK (what the heck is that??) Although a lot has changed in the industry since I was a student over 15 years ago, the fundamentals remain the same.
Whether you’re learning or re-learning the basics of graphic design, creating your own branding or website, or trying to make sense of the files your designer gave you, my aim is to make you look like an expert in no time flat!
Jump around using the links below. There's a lot of information to cover here!
The Basics of Colour
Let’s go back to the beginning and talk about how we see images in the first place: through our eyes. It’s important to understand how our eyes perceive colour in order to learn how to use it effectively. The best artists and designers in the world are masters of colour; they know how to use it to excite the emotions and communicate clearly.
The range of colours the human eye can see, or the visible spectrum, is made up of different frequencies of energy. We can only view a small fraction of the electromagnetic radiation present in the world. Remember the mnemonic “ROY G. BIV” from elementary school? Red, orange, yellow, green, blue, indigo and violet is the colour range we can perceive.
This is where light comes into the picture...literally! When light enters our eyes, it strikes the cells, known as “cones,” which are found in our retinas. The cones are sensitive to certain wavelengths of light that correspond to different colours in the spectrum. Electrical signals are sent from the cones to our brains, and that is how we perceive colour. White is the presence of all colour, and black is the absence of all colour. Keep this concept in mind as you read through!
Now that we know the basics of how we perceive colour, let’s move on to the two most common approaches for displaying and creating colour: CMYK and RGB. It’s crucial to know the difference in order to achieve the most accurate colours in your printed artwork or on your website.
RGB (Additive Colour Model)
RGB stands for Red, Green, and Blue and uses an additive colour model. RGB is the format you’re used to seeing every day on your phone, television and home computer, and any sort of modern display or screen. Light is projected from red, green and blue pixels, and the colours you view are the result of those pixels being turned off and on to varying degrees and in different combinations. There are over 16 million colours possible with the RGB format.
RGB is considered to be an additive colour model because it starts with the absence of colour (such as a black screen that is turned off) and “adding” red, green and blue by projecting light through the screen’s pixels. Eventually, when all of the pixels are turned up to maximum intensity, the end result is white.
To illustrate, a red dot on an LCD screen appears red because the red pixels are turned on to high intensity, and the green and blue pixels are turned off. An orange dot appears orange because the red pixels making up the dot are turned on to high intensity, the green pixels are turned on with lower intensity, and the blue pixels are turned off entirely.
CMYK (Subtractive Colour Model)
CMYK stands for Cyan, Magenta, Yellow and Key (Black) and uses a subtractive colour model. CMYK used in the printing process, which starts with all colours in the form of a white page. Cyan, magenta, yellow and black ink dots are placed on the white paper in varying sizes and patterns to achieve colours and images. If you use a magnifying glass on a printed page, you’ll see these dots. Because these dots are so small, it is enough to look realistic to the human eye.
Ink is designed to reflect specific frequencies of light, so only the desired colour is reflected back to your eyes. Therefore, CMYK is considered a subtractive colour model because light frequencies are “subtracted” as ink is added to the page. For example, red ink appears red because all other light frequencies except for the red part of the spectrum are absorbed. Eventually, when enough ink is placed on the page, the end result is black.
Another very important topic in graphic design is colour matching, but it is a very technical process and too broad to cover here. You can understand why that might be when you consider the difference between additive and subtractive colour models!
As a general rule, if you need to have your artwork printed, give your printer files that have been prepared using CMYK colours and saved in the CMYK working environment. If you are going to view your artwork on-screen only, use the RGB format. However, it’s best to talk to your printer about how they would like to receive your artwork, because each printing company has its own best practices.
Lossy and Lossless Compression: Why It's Important For Your Website
If you want to gain more control over how your images are stored, displayed, and loaded on your website, it’s necessary to know the difference between these two formats. While keeping your images small in size and retaining their quality is crucial to optimizing your website’s performance, it’s also important to know when you shouldn’t compromise your image’s quality.
Lossy compression format is used on images that need to balance quality with a smaller file size. When you use lossy format (commonly used on JPGs and GIFs), some of the original image data is lost in order to reduce its size. This works great when you want to keep most of the image’s appearance intact, but don’t want to store or share images at their original file size.
However, this is a problem if you want to restore the image’s original size and quality. Once this format is used, you can’t go back! The original data has been removed and the process is irreversible. Also, it can be tricky to find the right balance between image quality and file size, and it can take some time to get each image just right.
Lossless compression format is used when you want to preserve an image’s original data. When you save a file using this format (commonly used on PNGs and TIFs), you keep all of its quality intact. This is perfect for high-quality images for print, or when you want to preserve every pixel of data each time you save the file.
The drawback to this method is that you also preserve the image’s file size, which is an issue if the original image is large, if you have a lot of images to store and limited space, or if you need to load them on a website. It’s recommended that you optimize your files using lossy format if you’re going to share them online.
Now that we’ve covered how we perceive colour, and some best practices for saving and storing images, let’s talk about how images are created in the first place. There are two main formats commonly used: pixel-based (raster) and vector-based. Knowing the right file type to choose for the right situation will take your next project from do-it-yourself to polished and professional.
Pixel-Based (Raster) Formats
What are pixel-based files?
Pixel-based files, or raster files, are constructed out of individually coloured blocks, which we call pixels. These are created digitally, either through a graphics program like Adobe Photoshop, or through your digital camera when you take a photo.
What is Image Resolution?
Image resolution refers to an image’s quality, or the amount of information it contains. The terms DPI (dots per inch) and PPI (pixels per inch) refer to the number of pixels in one inch of an image. The higher the amount of pixels in one inch, the higher the resolution.
High resolution images = higher quality, because they contain more information (pixels) in each square inch than an image with fewer pixels.
Image Resolution Guidelines
Website images: 72 DPI
Images for print: 300 DPI
Why do images have to be high-resolution to print clearly?
A 72 DPI image that is 2” x 3” will have fewer pixels per square inch than a 300 DPI image with the exact same dimensions. Because the 300 DPI image has more pixels per inch, which are smaller and therefore able to provide a higher level of detail, the image will appear much sharper and clearer than the 72 DPI image when it is printed.
This can be confusing because your 72 DPI photograph might seem sharp when you view it on the resolution of your computer screen, but appears fuzzy when it is printed.
Always check the resolution of your images before you print them. It's easy to do through your computer. On a Mac, right-click the image in Finder then choose "Get Info". On a PC, select the file you want, right-click on the image and choose "Properties", then select the "Details" tab. You can also use a graphics program like Adobe Photoshop or Corel PaintShop Pro, or a free tool like PicResize.
It’s not possible to try to “cheat” by stretching or enlarging an image! No matter what, there are a finite amount of pixels in each square inch, which can only grow or shrink in proportion to an image’s original resolution.
Now you can see why it’s best to start with the highest resolution image you need for your project. You can always reduce an image in size, but you cannot enlarge it. This is especially important to remember for print. Consider the exact dimensions you need for your image, and make sure its resolution is 300 DPI or its pixel count is as high as possible.
Pixel-Based File Formats
This is the most common format you’ll find anywhere. Most of the photographs on the web are in JPG format because they allow a wide range of colours, gradients and shades. JPGs balance high quality and small file size very well and use lossy compression. Make sure you optimize your files so that they are as small as possible when you load them onto the web.
BEST USES: Photographs and rectangular or square images for the web.
This format is great for images that need a transparent background. It’s very versatile and perfect for showcasing logos and vector graphics on the web. You can place a transparent PNG on a coloured background without a white border appearing around your image. Plus, the file sizes of PNGs are often very small, which helps your website load quickly. PNGs use lossless compression.
BEST USES: Logos and graphics for the web that need a transparent background.
Another great choice for the web, GIF files are best used for very simple graphics with only a few solid colours. They aren’t designed to handle gradients or the natural shades you’d find in a photograph, but work best on artwork with sharp edges. They use lossy compression.
BEST USES: Simple website elements like icons and buttons.
This format is used for print-quality images in high resolution. These files are often very large and are used when printing images on paper to ensure the sharpest results. They use lossless compression. Avoid using them on your website. They will load too slowly, and their resolution will be much higher than is necessary to view on a screen. Convert these to .jpg files and optimize them to keep your website speedy.
BEST USES: High-quality images and photographs for print.
FREE Ways to Optimize Your Website Images Adobe Photoshop offers the most options and control, but not everyone has it or needs it. I’ve found a couple of free options that work well. Picresize.com is great if you need to reduce, crop or optimize your photos. It’s handy that they offer several options for optimization and sizing. Not bad for a free option! Tiny JPG and Tiny PNG are fantastic for optimizing a batch of photos or images for the web at once (but you can’t edit or crop them). They let you optimize up to 20 images at a time, and the results are great. They often reduce file size by at least 50%. If you have a lot of files to optimize, you might consider their Pro option, but it’s not necessary for the occasional user. ImageOptim for Mac is another great tool that is also free to use. You can download it to your computer and it’s so simple and effective. Although it is Mac-only, they do recommend some similar alternatives for Windows and Linux. I personally use ImageOptim for my website images and it’s been a great asset. Try a few different methods and see which ones work best for you. Test your website’s speed at Google’s Page Speed Insights.
What are vectors?
Vector files are constructed using mathematical formulas, which means that the artwork can be scaled up and down in a software program without losing quality. Their edges stay sharp no matter how large or how small they are. This format is very commonly used in graphic design, due to its precision, versatility, small file size and beautiful clarity when printed on paper or viewed on-screen. When you see a logo, it’s very likely it was designed using vector software.
Vector-Based File Formats
Today, this is the vector file format most commonly used within the graphic design industry. It is created in Adobe Illustrator (AI). Most print shops and vendors know and understand this format, and it is used by the majority of graphic designers when saving original artwork. You’ll need Adobe Illustrator to read these files.
BEST USES: Creating logos and scalable graphics for print and the web.
Encapsulated PostScript (EPS) files used to be more common in the earlier days of desktop publishing. Back then, vector files had to be packaged with extra information in order for software to read them. Nowadays, technology has advanced even further and this format is used less often than in the past. However, sometimes people still send and receive EPS files if they have older software or equipment, or just because they prefer the format, and there’s nothing wrong with this.
If you do receive EPS files, they are easily opened in Adobe Illustrator or Adobe Photoshop, or another program like Corel Draw, Microsoft Word or Quark XPress.
BEST USES: Creating logos and scalable graphics for print and the web.
Portable Document Format (PDF) was first created by Adobe in 1993, and it is now the gold standard for document creation. Most modern devices and website browsers can read PDFs, and they can be made small in size while keeping image and text quality very high. This makes them an excellent choice to share and print nearly any kind of document.
If you hire a graphic designer, it’s likely that your artwork proofs will be sent to you as PDF files so you can view them without needing vector software or any of the applicable fonts. PDFs are also the best option to send to your printer, as long as the PDF is high-quality.
BEST USES: Creating documents that can be read by any device, and for print-ready files.
My Designer Gave Me Vector Files - What Should I Do With Them? If you’ve received vector files and don't plan on editing or using them yourself, keep them safe on your computer anyway. If you ever need your artwork printed or modified in the future, your designer will thank you! They’ll be able to edit these source files quickly and professionally, giving you a much better end result. A raster file such as a JPG or PNG is flattened and not editable. If a PDF is all you have, that is much preferred to a raster file because it can be edited, though not as perfectly as an original vector file.
There you have it! I hope this guide made you feel like an design expert (without needing to be one!) and helps you tackle your next project with ease. Now get out there and make something awesome!
Be sure to tag me on Instagram or send me an email if this article has helped you out in any way. I love to hear from my readers and I’m excited to learn what you’re up to. I’m also happy to help you directly with your next project - contact me! Happy designing!