Part One: Understanding File Formats for Design Projects
In your career, whether for personal or business purposes, you may have encountered the need to create marketing materials such as brochures, posters, websites, social media posts, catalogues, or business cards. The world of design can be overwhelming, with its various file formats like JPG, GIF, TIF, PNG, PSD, EPS, AI and PDF. In this series, we’ll guide you through the basics of design files, formats, and colours, helping you gain a clearer understanding of when and how to use each.
Raster Image Files: Exploring Pixels and Sizes
Raster images are composed of individual blocks called pixels, forming a complete picture. Every digital camera photo, online image, and printed picture falls under this category. The size of a raster image depends on the number of pixels, which we measure using image width and height. For instance, the common 1920 x 1080 size represents the dimensions of 1080P High-Definition televisions. However, raster images have a drawback—resizing them distorts their clarity and can result in blurriness. Examples of raster image file types include JPG (JPEG), GIF, TIF, PNG, and PSD, which are often created using software like Adobe Photoshop, GIMP, or Corel Painter.
Vector Image Files: Versatile and Scalable Graphics
In contrast to raster images, vector images are created using formulas rather than pixels, making them highly adaptable. You can resize vector images to any size without losing quality or experiencing distortion. This scalability makes vector images ideal for creating logos and brand graphics. Formats like EPS and AI work best for this purpose and are commonly created using software such as Adobe Illustrator, Corel Draw, or Inkscape. When choosing a file format for your project, consider the size (resolution) and colour format (CMYK, RGB, HEX, etc.), which we’ll discuss in part two.
Part Two: Understanding Resolution and DPI/PPI
Now that we’ve covered file formats, let’s explore image resolution and DPI/PPI. Resolution refers to the size of a raster image and is measured in pixels, indicating the number of blocks that compose the picture. For instance, the resolution of a 1920 x 1080 (1080P) image means it has 1920 pixels horizontally and 1080 pixels vertically. However, resolution alone doesn’t paint the full picture.
DPI (dots per inch) or PPI (pixels per inch) determines the pixel density required for displaying an image, whether on screen or in print. Electronic displays like computer screens and digital projectors typically have a display density of 72 DPI, meaning 72 pixels are needed per inch for optimal clarity. On the other hand, printers, like inkjet printers, require higher DPI values, usually at least 300 DPI, to produce clear and detailed prints.
When printing a raster image with a lower DPI than required, the image appears blurry and lacks definition. To achieve crisp and clear prints, it’s crucial to use a higher resolution that accounts for the printer’s DPI. For example, a 17″ x 11″ poster would need an image resolution of 5100 x 3300 pixels for optimal printing quality. Start with the highest resolution image possible for your project and consider future uses like brochures, wall graphics, or vehicle wraps.
Part Three: Understanding Colour Formats and Their Impact on Design and Graphic Design
When it comes to images and pictures, it’s crucial to understand the role of colour and its impact on your design projects. Have you ever noticed that a photo looks amazing on your electronic devices but appears completely different when printed? This occurs due to variations in colour systems. Let’s explore the basics of colour formats and how they work: RGB and CMYK.
RGB Colour: Creating Light and Additive Colour
RGB represents the primary colours of light: red, green, and blue. By combining different intensities of these colours, we can create a wide range of colours, including white. In the RGB colour system, colours are emitted from light sources like screens, monitors, or bulbs. Our eyes perceive and absorb these emitted light wavelengths to interpret colour. The device you’re currently using relies on the RGB colour system to display colours, and digital cameras default to this system for capturing images. In the RGB format, each colour value ranges from 0 to 255. For example, to create yellow, we would set red to 255, green to 255, and blue to 0, resulting in yellow light.
CMYK Color: Reproducing Color with Inks
When it comes to printing on paper or other substrates, the approach is different. In this case, ink interacts with the surface, absorbing or reflecting light to produce color. The CMYK colour model is subtractive, as inks subtract certain wavelengths of light to create the desired colours. CMYK stands for cyan (C), magenta (M), yellow (Y), and black (K). By combining these four ink colours in different concentrations, we can achieve the full printed spectrum. When all colours are heavily concentrated, they create a rich black colour. If no ink is applied, the colour of the surface, usually the white paper, is visible. The CMYK colour model is the opposite of RGB and additive colour models.
To express a colour in the CMYK system, we use percentage values for each colour. For pure yellow, we would set cyan to 0%, magenta to 0%, yellow to 100%, and black to 0%. Additionally, the type of paper used affects how colours appear in print. Coated papers, like those used in magazines or high-quality photo prints, have a reflective surface that enhances brightness and vibrancy. Uncoated papers, such as regular bond stock, absorb ink more readily, resulting in darker and less vibrant colours.
To address these colour differences when printing, there are a couple of simple steps you can take:
- Convert photos from RGB to CMYK using software before printing. This conversion allows you to preview and adjust the colour shift that may occur.
- Opt for coated paper stocks designed for high-quality CMYK printing, as they offer better colour representation compared to uncoated paper.
While these steps may not completely resolve all colour issues, they can significantly improve your results. If you’re working with a commercial designer or print shop, providing photos in CMYK format, with suitable resolution and file formats, will save time and money in the long run.
Spot Color (PMS): Ensuring Consistency for Specific Colours
In some cases, achieving consistent colour reproduction is crucial, especially for elements like company logos. Spot colour systems, such as the Pantone Matching System (PMS), offer a reliable solution. Each Pantone colour has a specific number, and inks are precisely mixed to match those specifications. Offset printers can order pre-made PMS inks or mix them in-house to reproduce colours consistently across print runs.
It’s important to note that, similar to CMYK inks, the type of paper affects the colour outcome. Uncoated stocks absorb more ink than coated stocks, so separate PMS colour charts exist for each paper type. Therefore, you may need to choose different PMS inks for different paper stocks to achieve consistent colour results.
HEX Color: Simplifying Colour Representation for Web Design
In web design, the HEX colour system (hexadecimal colour) is widely used. HEX is a shorthand representation of RGB colours. Instead of specifying values from 0 to 255 for red, green, and blue, HEX uses a six-digit combination of letters and numbers. For instance, yellow is represented as #FFFF00. HEX codes provide specific and manageable colour references for web content creators.
This crash course in image formats, resolution, and colour formats aimed to provide you with a clearer understanding of the complexities involved in a process many think is simple. While we couldn’t cover everything in detail, we hope this information will help you to tackle your next design or graphic project with confidence.
If you get started and need some help, we’re always here so reach out today!