Can You Send Me a Logo?
One of the most common requests to marketing from sales and management personnel is a logo file. No specifications or details, just send a logo. For executives more concerned with spreadsheets and profit margins, it may seem like a simple request. In order to properly provide the right file, however, the marketing team needs to know how it is being used. Logos can be created and saved more than a dozen different ways to meet certain requirements based on where it will be viewed. Below is a quick guide toward learning about graphic images and the file types used for different applications.
Vector Graphic vs. Raster Image – What’s the Difference?
In very simple terms, a vector file contains outlines of the text and graphics that allow for the file to be scaled and manipulated for a specific use. In order to do this, the file contains underlying geometrical shapes and some of the code used by the original program where it was created. In many cases, a vector file would originate from a program like Adobe Illustrator. Files with .ai or .eps extensions are commonly used for supplying vector files.
A raster image on the other hand is basically thousands of individual pixels, like a photo taken on a mobile phone. Raster graphics are made to a certain size and resolution depending on the origin of the images and how they were saved after being edited. They can contain images made out of red, green and blue dots (RGB) – or cyan, magenta, yellow and black (CMYK), which is why it’s important to know what type of file is required before ordering a printed graphic from an outside resource. Files with .jpg or .png extensions are commonly used for providing raster images.
Low Resolution vs. High Resolution – When They Are Used and Why
Low resolution images saved to 72 dots per inch (dpi) is the standard used for websites and mobile devices to help with loading the web page faster. Placing an image that is much larger in size or resolution than what is needed only adds more time for the page to be viewed. It’s generally not a good idea to use an image from a website for a printed piece, unless it was put there for downloading purposes.
High resolution images at 300-600 dpi are generally used for print graphics such as on a brochure or display. The size of the image and its resolution settings should be made to the size it’s going to be used. In other words, a 4×5 inch photograph on a brochure should be cropped and saved to 4×5 at 300 dpi. If the image is scaled up in size from a smaller file, the quality could be significantly diminished in the final printing.
Common Acronyms Used for Specifying Colors
CMYK: Cyan, Magenta, Yellow & Black – CMYK files are typically used by an outside printer using a high-end printing press. Using CMYK inks is also known as 4-color process printing. A program like Adobe PhotoShop can be used to convert an image file to CMYK and should only be used when required. Note: printed colors can vary greatly by the type of paper stock used. Please see Coated or Uncoated below.
CSS: Cascading Style Sheet – CSS files contain the code that provides a website with specific colors to be used for headers, footer, backgrounds, etc. They use a universal system known as hexadecimal for specifying a certain color. CSS style sheets also contain information on type fonts, heading sizes, margins, column sizes and much more.
HEX: Hexadecimal – A HEX color code is used to tell a web browser which colors to display when a website is being viewed. It’s a universal system used by website developers throughout the world and typically used in conjunction with a CSS style sheet. Hex codes are much different than RGB or CMYK values and PMS color selections. Trial and error in testing HEX codes to match exactly with a specific Pantone color is generally required. Learn more about HEX colors at ColorHexa. Note: The example shown is for the color #0e76bd. It is the color used for the lower blue diamond of the Vesteras logo.
PMS: Pantone® Match System – Pantone is a US company located in New Jersey best known for its Pantone Matching System (PMS). It produces standardized swatch books, now containing more than 1,800 colors, used in the graphic arts, fashion, printing and manufacturing industries. Each color has its own 3 or 4-digit PMS number followed by a C (for coated paper) or U (for uncoated).
RGB: Red, Green & Blue – Just as it sounds, RGB combines red, green and blue pixels, along with a white background, to create a digital image. RGB images are the universal standard for use with websites and mobile applications, among many other digital uses such as PowerPoint presentations. Most RGB images on the web are either JPG, GIF or PNG files. Depending on the vendor, some printers and graphics industry suppliers will use RGB (vs CMYK), however, they will want them to be high resolution.
SPOT: Spot Color vs Process Color – For some printing applications, a graphic designer may choose to specify a “spot color”. The spot color would run on a printing press as its own separate pre-mixed ink color as opposed to being created by a CMYK dot pattern, otherwise known as Process Color. Spot colors are typically used for more precise color matching or to create a special effect.
Coated or Uncoated
Pantone 2925C (coated) to the left is shown next 2925U (uncoated). 2995U to the right clearly demonstrates that it is a better color match to 2925C for use with uncoated paper. Learn more at www.pantone.com.
There are different color swatches for every color in the Pantone Matching System (PMS) depending on whether the paper (aka stock) being used is coated or uncoated. That’s because the ink absorbs differently when a paper has a matte or flat surface vs. a paper with a glossy surface. A PMS number designated for use with coated paper is not commonly the same number selected by designers for uncoated. For example, Pantone 2925C (coated) is better matched with 2995U (uncoated). As a result, graphic designers may need to create a series of different image files for the type of paper being used.
Common File Types Used for Images
File Extension: Description & Image Type
- AI: Adobe Illustrator (vector)
- BMP: Bitmap (raster)
- EMF: Enhanced Metafile (either*)
- EPS: Encapsulated PostScript (vector)
- GIF: Graphical Interchange Format (raster)
- JPG or JPEG: Joint Photographic Experts Group (raster)
- PDF: Portable Document Format (either**)
- PNG: Portable Network Graphic (raster)
- PSD: Photoshop Document (vector)
- SVG: Scalable Vector Graphic (vector)
- TIF or TIFF: Tagged Image File Format (raster)
- WMF: Windows Metafile (either**)
*EMF and WMF files can contain both vector and raster data. They are a native vector format designed for use with Microsoft Office applications such as PowerPoint and Word.
**PDF documents can be saved in two different ways. If saved with layers, then it would be in a vector format. If flattened for use on the web, then it would be considered a raster file.
Summary
Specifying colors and using images across multiple mediums, including digital and print, is a type of science that requires sampling and QA testing for consistency. A color and logo guide associated with a new brand or product rollout should detail what color codes and file types are to be used for different applications.
Vesteras creative professionals can help with creating documentation that provides clarity and instructions for each logo style and brand color – and the types of files that are to be used with different applications.
Contact Vesteras about your next rebranding project to see how we can make your job easier.
Guy Hanford
President
Vesteras LLC
Photo by Pixabay from Pexels
Pantone® is a registered trademark of Pantone LLC, a wholly owned subsidiary of X-Rite, Incorporated.