Design Asset Overview
Once your branding project wraps up, your designer will digitally hand off your final project folder that contains dozens (and likely even hundreds!) of design files.
And while the mountain of files will ensure that you’re ready to take on any design-related situation that comes your way, sorting through all of the files and understanding when/how to use each one can be confusing & overwhelming.
So to help sort through what you can expect to see, today's post will take a deep dive into the world of design assets and break down the most common ones you’ll come across: file types, resolution, color space, and fonts.
File Types
The first thing we’ll look at are the file types. Your final folder will include your logo files in addition to any other types of graphic elements that are a part of your visual identity—things like brand patterns, icons, images, illustrations, etc.
The most common file types you’ll see in your folders are: JPG/JPEG, PNG, EPS, Ai, Indd, Ps.
JPG/JPEG
JPG/JPEG is likely the most common file type that most people are familiar with. It’s essentially the default file type for all of the photos we take, and has been since the days we toted our digital cameras along with us to the bars.
Photos and other full-bleed artwork will typically be in a JPG format, but for images or illustrations that aren’t full-bleed, the file will automatically insert a white background.
Use For: Printed & Digital Applications
PNG
PNG (Portable Network Graphics) files is the next most common file format. Unlike JPG files, PNGs are a preferred format for digital uses because PNGs have the ability to be saved with transparent backgrounds, making them a perfect digital choice for things like logo files, icons, and illustrations.
Use For: Digital Applications
EPS
Similar to PNG, EPS files can also be saved with a transparent background. These file types are vector files (which we’ll get into in a bit), which produce very high resolution graphics at any size.
EPS files are generally the preferred format when you’re working with any type of vendor—things like shirts, branded materials, sponsorships—anywhere your logo or artwork needs to be showcased.
Use For: Printed Applications
Ai, Indd, PS
Adobe products are the primary suite of software that designers, and most people in creative industries, use to create their work. Adobe Illustrator (Ai), InDesign (Indd), and Photoshop (Ps) are the big 3 when it comes to graphic design.
Any original artwork files that your designer provides will likely be saved in one of these 3 formats. Files in illustrator will typically be your logo files, illustrations, and any other custom-designed graphics; Photoshop will house any photos or images that have been manipulated or edited; and InDesign is where most of your templates or multi-page documents will be built.
One important thing to note is that these file types will require the specific software in order to open and use them. Your computer may be able to open any or all of these files in a different program, but you will likely only have read-only permissions that way, and the content may appear a little wonky through those viewers.
Use For: Design Files
Resolution
Now that we’ve gone over the file types, we’ll dive into a frequent image-related question that comes up: what is the real difference between a high-resolution and low-resolution image and when should I use each?
Ok, so that was technically two questions....
Now that we’re living in the age of Ultra 8k, super high ultimate definition™, most people understand the basic concept of resolution and can easily spot an image that's low-res because it looks blurry or pixelated. Have you tried to watch a show or movie in standard definition lately? Let me tell you, it’s not great...
When it comes to your image files like PNG or JPG, they are made up of a certain number of pixels within a set distance—you may have heard of the terms "pixels per inch" or "dots per inch" which refer to the number of pixels or dots contained within one inch of a computer monitor or printer, respectively. High resolution, which is necessary for printing, is 300 dpi (dots per inch), and low resolution is less than that. (You'll usually see digital images at 72, 96, or 150).
Since high resolution images have their dots/pixels more tightly packed, you'll get a much sharper & clearer image. Images with lower resolution will look grainer, especially if you try to print a low resolution image, or use it larger than its original size.
That’s all pretty straightforward, but you might still have one burning question:
What the heck is a vector image?
Vectors
Like we just talked about, JPGs & PNGs are created with pixels at a set resolution, and when you use that image at a size that larger than its original size, the image will start to get blurry.
Well, vector graphics, like EPS are a whole other ball game. Vector graphics are generally reserved for illustrated files like logos. They use mathematical algorithms instead of pixels which means the resolution of the file is limitless and you can scale the artwork up or to down to virtually any size and you can rest easy knowing that your artwork will be crisp and wont run the risk of being pixelated.
Color Spaces
Chances are, your designer has broken out all of your files not only by file type, but also by color space. Whether it’s using a different folder, or including the designation as the file name, somewhere in your assets (and hopefully your brand guidelines) lists two or more of these values: CMYK, RGB, HEX, Pantone/PMS.
CMYK
Anyone that has ever owned or worked with a printer should be familiar with the fact that CMYK is an acronym that comes from the names of the 4 inks that are typically used in printing: Cyan, Magenta, Yellow, Black.
During printing, the 4 colors are used in different quantities to make up all of the colors. This is why when your magenta toner is low, whatever your printing will be really blue/green (because the blue and yellow ink is doing all of the heavy lifting).
CMYK color values are written out as four separate numbers (0-100) in the order of C-M-Y-K to represent the quantity of each color that is used to make up a specific color.
For example: C: 35 / M: 6 / Y: 4 /. K: 0
Use CMYK For: Printed Materials
RGB
RGB represents the names of the colors of light that are used together in digital applications: Red, Green, and Blue.
Similar to the way things are printed, these 3 colors are combined in various quantities to make the different colors.
RGB color values are written out as 3 separate numbers (0-255) in the order of R-G-B to represent how much of each colored light is used.
For example: R: 163 / G: 199 / B: 210
Use For: Digital Materials
HEX
Similar to RGB, HEX is also a digital way to represent colors. HEX colors are expressed as a hashtag (or pound sign for us oldies) followed by a 6-character combination of letters & numbers (3 sets of 2 characters) that are based on the amount of red, green, and blue in the color.
Even though RGB values can be anything from 0-255, the hexadecimal number system uses a letter/number combinations to represent that 3 digit value as only 2 characters
For example: #A3C7D2
Use For: Web Development
Pantone / PMS
The Pantone Matching System (referred to as Pantone, PMS, or even Spot Color) is a proprietary, standardized color system that does not have the same type of color-code breakdown as CMYK, RGB, or HEX. Instead, colors in this system are assigned Pantone names/codes.
This level of standardization allows you to achieve precise color matching and color reproduction across materials.
And while you might be thinking “why don’t we just print everything using Pantone matching?”, because of the process involved it’s not a solution that would be practical, or cost effective. This is a great solution if you’re printing a brochure that had a lot of solid color use of your brand color and you want to ensure it’s just right, or if you’re printing branded materials and want to ensure your logo is the exact right color.
If you’re printing something that doesn’t need to be PERFECTLY EXACT, then regular CMYK printing is a perfectly fine solution to use.
Use For: Printed Materials
*Color Disclaimer*
One important thing to note: Colors do not appear on-screen as they will when printed.
You may have experienced this when printing an image that looks extremely vibrant on screen, and then when you print it, it looks pretty dull. That dullness isn’t an issue from your printer, but it’s the disconnect that occurs between the screen and a physical copy. Since CMYK colors are printed using ink, it cannot exactly replicate the RGB colors since they’re created from light. We could get pretty science-y here talking about the physics of it all, but this is why you’ll see designers using color swatches to compare what the on-screen colors will look like when they’re printed
Now that you have more insight into file formats, resolutions, and color types, you can take all of your brand assets into the world and run wild knowing that you understand how and when to use them all.
Wondering if your company could benefit from custom design support?
Connect with us today to discuss your project!