Have you ever been asked to send a vector file of your logo to a designer and wondered what that meant? Or maybe you aren't sure if you need a CMYK or RGB image. We're here to help with this quick guide to file types, resolution, color, and when to use what.
Image/Graphic Types & Resolution
Vector vs. Raster
Raster images are pixel-based and usually captured with a camera or scanner. They are constrained to their native proportions, and cannot be scaled-up larger without distortion. You cannot make raster images larger without compromising their resolution. Common raster file types include: JPG, PNG, GIF.
Vector graphics point-based and are much more flexible than raster images. They’re created with vector software, such as Adobe Illustrator, and are common for logos or graphics that need to be scaled-up to larger sizes without losing quality. They can be sized down very small like as a graphic on a pen, or scaled up to cover a billboard without losing image quality. Common vector file types include: EPS, AI, SVG.
High-Res vs. Low-Res (DPI & PPI)
DPI stands for dots per inch — how dense the dots/pixels are within an inch of an image. The less dense these dots/pixels are, the more broken up or pixelated the image will appear; also described as "lower res" (resolution).
- Web images: 72 DPI is the standard resolution
- Print images: 300 DPI is the standard resolution
There’s typically no problem with converting a print-ready image (resolution 300 DPI) to a web-ready image (72 DPI). But, if you’re trying to make a web-ready image of 72 DPI printable by forcing it to be 300 DPI, the resolution will be distorted.
Color
CMYK vs. RGB
CMYK stands for cyan, magenta, yellow, black. Commonly referred to as the four color process. This is the color setting that should be used for printed materials printed both digitally or offset, unless specified otherwise from the printer.
RGB stands for red, green, blue. This color setting is for images viewed on screen, such as website photos.
Pantone Colors (Pantone Matching System, PMS)
Pantone colors, also referred to as PMS colors, are distinguished by numbers and a suffix. The number refers to the color, and the letter (ex. U, Uncoated or C, Coated) refers to the paper stock on which it will be printed. Colors can vary depending on the suffix (ex. 229 U might look different than the same color number on coated paper 229 C), so sometimes a color number could vary to achieve the same color. Pantone colors help create consistency across a brand. Logos typically have Pantone colors selected to reproduce in the intended color. During the printing process, Pantone colors are separate inks that allow you to use colors that cannot be achieved with CMYK. The type of paper used will affect the appearance of colors. If the paper has more of a yellow-hue, your color will look different than if printed on a bluer sheet.
File Types
JPG Uses:
- Website images (low-res, RGB color)
- Print: photos for a printed piece (high-res, CMYK color)
It’s important to check the resolution of a JPG and make sure that it works for your needs. If you’re adding a JPG to a website you don’t want it to be 300 DPI because it will slow down the page load and likely appear too large. For web it should be 72 DPI and RGB color value. If you’re printing a JPG in a brochure, you want the resolution to be 300 DPI and CMYK color value.
PNG Uses:
- Website images/graphics (low-res, RGB color)
- Website graphic: if you need to add an image with a transparent background
GIF Uses:
- Websites: animated image
- Websites: if you need a very small file size, or need it to load quickly
GIFs typically have 256 colors which reduces their file size, but sometimes also the image quality.
TIF Uses:
- Print: typically used for photographs that need to be very high quality. A JPG can also be very high quality, but when a TIF is saved it doesn’t lose its original quality, it’s referred to as lossless vs. lossy
- Generates raster file types, not vector
EPS Uses:
- Vector Logo files to share with a designer or printer so that they can scale the logo to any size
- High-resolution vector graphic for press
SVG Uses:
- Website vector graphics (example: website logo or icons
PDF Uses:
- For reviewing or sharing rich information from any application (example: this format allows you to view a vector logo design without needing Adobe Illustrator to open it)
- Often times the final document for Press
Most printers need and prefer a high-resolution PDF of a press-ready document that’s setup with crop marks and bleeds. Typically designers also provide the printer with the native application files (ex. Adobe InDesign document), but this is not always the case and sometimes simply the PDF will be enough for the printer to go to press.
PSD (Photoshop) Uses:
- Photo correction or manipulation
AI (Adobe Illustrator) Uses:
- Industry standard for creating digital artwork
- Vector artwork
- Exporting an AI file to multiple file types: JPG, PNG, SVG, etc.
INDD (Adobe InDesign) Uses:
- Large publications such as magazines, books, or e-publications
- Smaller printed materials such as business cards or brochures
- A document that needs Adobe Illustrator or Adobe Photoshop documents nested within it (example: an advertisement in a program book)
- A document that has advanced typographic needs. Adobe InDesign has the most flexibility over formatting, managing and editing text.
When we design, we work with our clients to understand the file types that they'll need and supply the appropriate files. For logo design, we provide many different file types and both RGB and CMYK versions so our clients are fully equipped as they launch their new branding into the world.
