300DPI? 72DPI? JPEG? PNG? CMYK? RGB? Inches? Pixels? The possibilities are overwhelming.
I've gotten a lot of questions on best practices for creating and saving digital and print files for graphic design. If you're not sure how to save your files for print or digital, this post is for you!
When creating your files and setting up your workspaces in various programs like Photoshop, Illustrator and more, it's important to know how the final product will be received. Will the file be consumed on digital devices only? Is it meant to be printed out? If it's digital, what type file is best, and for what type of artwork?
I'm going to do my best to answer all of these questions and more, but if you have any specific questions please don't hesitate to leave a comment below.
File Dimensions: Inches and Pixels
When setting up a file, one of the first things you need to determine is your file's dimensions, measured in a variety of units. For the sake of this post, I'll narrow it down to inches and pixels.
Generally, if you're going to create a print file, it's easiest to think about your file dimensions in terms of inches. A sheet of letter paper is 8.5 by 11", for example.
If you're creating a digital file, you will want to think about it in pixels. Not sure how big something should be? You can easily determine the desired dimensions of your digital file for graphics by using a screenshot or using the inspector in the web browser.
If you're not sure about digital dimensions, it's easy to google the size you need. Here are some common sizes for digital wallpapers:
- Thunderbolt Desktop: 3000px by 2000px
- iPhone 6S+: 1242px by 2208 px
- iPad 2 Air: 2048px by 1536px
File DPI for Print and Web
This is pretty simple. If your files will be viewed digitally, use 72 DPI. If your files will be printed, use 300 DPI.
File Color Type for Print and Web
This is also pretty simple: if your files will be viewed digitally, use RGB (red-green-blue). If your files will be printed, use CMYK (cyan-magenta-yellow-key [black]).
Saving Digital File Types: JPEG vs PNG
For digital files, the most basic way to explain this is if your file is a photo or has photo-like details, save your file as a JPEG.
If your digital file has crisp lines or is text-only, save it as a PNG.
If you're not sure how to save your digital file type, the goal is to have the highest quality file type in the lowest file size possible. Use the Save For Web feature of your graphics program whenever it's available to you, and play around with JPEG (and high, medium, low) vs PNG (64 vs 8) until your file looks awesome and the file size isn't huge.
A Special Note for Digital Files
If you're creating files to be viewed online, I highly recommend learning more about retina graphics so your files will look great on retina screens, like on newer iPhones, iPads, and MacBooks. I wrote an in-depth post on how to make your blog post images retina-friendly and highly recommend doing this for your website, especially for graphics that are seen on every page (i.e. your logo, sidebar graphics, etc).
On the most basic level, say you have a spot on your website for your logo in the header, which is 300px by 150px. To make the graphic retina-friendly, create your graphic at double the size, or 600px by 300px. Then, when you upload your graphic, use CSS to shrink the file to fit the original 300px by 150px spot. This will condense the number of pixels within that given area.
Retina-friendly images get much more complex than that, so if you're a freelance or professional designer, I urge you to do more research on this so your designs will be up to the current standards (and so your client will see their site on their retina screen and say, “Wow” and not ”Why does my logo look blurry?”).
Again, this post isn't exhaustive by any means, nor is it meant to be the end-all-be-all rules for saving your files.
As I mentioned above, the ultimate goal of saving files is to have it look the best at the smallest file size possible, no matter what the final viewing method will be (digital or print).
If you have any questions, don't hesitate to ask them in the comments below. I'll update this post as needed.