Industry-specific jargon can hinder successful and productive communication. As a graphic and web designer, I find myself explaining similar concepts over and over. What is apparent to me, is not always obvious to clients so here are a few tips to help you better communicate with your designer. And who knows? Maybe you know more design lingo than you think!
Let’s Talk Files
JPEG, PNG, PDF, vector files — there are so many file formats! What are they for? What do they mean? Breathe, I’ll walk you through it.
JPEGs were developed by the Joint Photographic Experts Group, hence the abbreviation. JPG is a file extension for lossy graphics. What’s lossy? Lossy compression is an irreversible compression which means the file size can be reduced but not enlarged. If you need a JPG at a larger size, you either need to locate a version with a higher resolution or you need access to the raw image format. I’ll get into high and low resolutions later.
PNGs (Portable Network Graphics) are raster graphics files. If exported correctly, PNGs have transparent backgrounds. These are optimal files if placing an image over a background.Fun fact: PNGs were created to replace GIFs (Graphics Interchange Format) which we now commonly use for looping animations like this funny one:
PDFs (Portable Document Format) is a common file format used for presenting and exchanging documents. PDFs are also optimal for printing.
Vector files can either be AI (Adobe Illustrator) or EPS (Encapsulated PostScript) file formats. Vector files are two-dimensional computer graphic images. When working with a designer, these are great files to share (if you have them) as they are limitless in scalability and allow the designer to export any file type they (or you) might need. A logo, for example, most likely started as a vector and was exported to different file formats (JPG, PNG, PDF, etc.).
Tip: When it comes to file sizes, start big then go small — not the other way around unless it’s a vector file.
High Resolution vs. Low Resolution
First, let’s discuss DPI (Dots Per Inch).
For web, images need to be optimized at 72 dpi. Although, as technology continues to advance and screens keep getting better, retina images should be exported at 150 dpi.
For print, images need to be 300 dpi.
Q: How big or small does a photo need to be? A: It depends where you are using it!
Full-width images are trending right now, so say you’re putting together some collateral (a printed flyer and a landing page on your website) that will use the same full-width image. What size do you need for each? For the flyer, you need a 300 dpi image that is at least 612 x 408 pixels (px). If the photo is larger, that’s great.
For the landing page, you need an image (at minimum) that is 2000 px wide. If you are using a photo that doesn’t meet those dimensions, you need to find a new photo. If you are looking for stock imagery, we recommend Adobe Stock photos because they are wider than 5000 px and are 300 dpi. Before uploading full-width images to your site, we recommend you optimize the image with a tool like TinyPNG.
Color: CMYK, RGB & Hex Codes
For print, your document should be formatted using CMYK (cyan, magenta, yellow, key or black). For web, you can use RGB and hex code (HTML color codes).
Please note, you can get much brighter colors on the web than you can for print. See the example below:I hope these tips help you feel more comfortable communicating with your designer, or even working with graphics yourself!
Did you already know about everything we covered in this post? Think you could even teach us a thing or two about best design practices for web and print? We’re looking for folks like you to join our team! Check out our open positions here.
