print vs. web graphics

Posted on December 18, 2016October 5, 2021 by graphicsgrrrl@gmail.com

print vs. web graphics

graphics grrrl

With graphic design, it’s absolutely critical that you set up and save your work correctly, so that your layout is seen exactly as you had intended! In order to do this, you need to know your file’s resolution, color, size and format is perfect for its medium: be that online or in print.

To help you with this, I created this handy dandy quick guide that you can keep near you as you design for easy reference!
Download it here for FREE: Grab your FREE print and web graphics guide!

Before you even begin to design, you should know its intended use. Ask yourself (or your boss or client): is this something that will be seen on a screen or will it be printed? You may experience some overlap where the answer is: BOTH! Mayhaps it’s something that’s put online in order for it to be printed. What do you do then? Well, never fearrr, crrreative, graphics grrrl is herrre…to save the day! (Or, you know, at the very least, tell you how to handle this situation below.)

There are four key areas that help define print from web or screen projects. They are: 1) resolution, 2) color, 3) size/measurement and 4) file format.

If you’re ever forced to begin a project before you know what it’s being used for (sounds ridiculous doesn’t it, I know, but this actually happens in the real world!), then I would err on the side of caution and create it for print. Why? Because it is easier to reduce the number of pixels than to invent, or interpolate, new ones. So, let’s zoom in on the first—and most important factor—when designing for print or web graphics: resolution.

resolution

Resolution refers to the number of pixels in your raster image, such as a photo. High resolution means there are 300 (or more) pixels per inch, or ppi, in your image. If you want to use your image in something that gets printed, such as a brochure or flyer, then it must be at least 300ppi.

BTW: sometimes you’ll hear printers or designers refer to this as 300dpi. I catch myself even saying this because I do a lot of packaging design and anyway, heck, even Adobe, states DPI. But technically DPI refers to the dots of ink that print, not the pixels in the image itself. (But it does only follow that in order for them to print, they must first exist though, right? So, I wouldn’t get bent out of shape over PPI vs DPI.) Just know that your image’s resolution must be 300 or it will be blurry when you print it!

The resolution for design that’s only seen on screens, such as websites, banners, or presentations on computers, pads, kiosks and phones is 72ppi.

FYI: as more devices are being produced with high-resolution retina displays, a PPI between 72 and 120 ensures your work is going to be roughly the same size ratio everywhere. PCs actually happen to have a default PPI of 96 and macs have a PPI of a minimum of 72 up to around maximum of 120. However, the general standard for acceptable quality images is 72 PPI.

color

Color for screen projects is created in RGB. This comes from the dots of Red, Green and Blue light that combine to create visible colors on monitors or screens.

Color for websites is noted in the code as hexadecimal values of 6 letters and numbers such as #00000 for black, #FFFFFF for white, or any color imaginable—even beyond the 256 known web-safe color such as dark blue: #333399 which appear the same across all platforms. (Of course you can use any color for websites, not just these 256; they just may vary slightly from monitor to monitor.)

Color for print projects can be either in CMYK: Cyan, Magenta, Yellow and Black, otherwise known as 4-color process, be it for digital or offset printing.

Or you can also add spot, or PMS (Pantone Matching System), colors instead of or in addition to these four. PMS colors allow designers, clients and printers to all agree on how a color should print. They are often used in logos where the color is part of the brand, so its consistency across all mediums and printing types helps mark the product (Ex: Coca-Cola red). For more information on how color affects brand perception, read my article here.

BTW: the full Pantone set can cost thousands, but I found this very affordable PMS fan that will prove helpful and is all that most people need when they’re first starting out:

measurement

In an ideal world, you know the dimensions of the project for which you are designing. Unfortunately, we live in the real world and things change, so all you can do is ask for the specs and final size of your brochure, flyer, etc. upfront. Whatever they are (or change to) for print, they will almost always be in inches.

Now, of course, the rest of the world is on the metric system, so please know that dimensions can also be provided in centimeters or millimeters. If this is ever the case, you can easily set up your file in any Adobe graphics program to have that unit of measurement.

You can set these dimensions and the unit of measurement when you first create a new document or you can change them once you’ve started. (Obviously, you may need to also modify elements in your design if you change the width and height dimensions, so for this reason, it’s always easier to get confirmation before you begin!)

And grab this FREE handy dandy quick print & web graphics guide for easy reference!
Download it here for FREE:

For web or work seen on screens and monitors, the unit of measurement should be in pixels. That’s because pixels are how screen resolution is generated. As discussed under resolution, many monitors have a high resolution retina display which exceeds 72ppi (pixels per inch), but using the minimum of 72ppi will allow your graphics to be relatively the same size across different monitors.

To change the unit of measure in Photoshop, go to Image/Image Size and change it there for one image:

Or globally change the unit of measure for the application under Preferences:

Click to tweet:

grab my quick guide for print and web graphics!

~graphics grrrl

format

The format of the file you import, save or export in your design programs should be compliant with the medium you choose.

For print, in addition to saving your files in their native file format for the programs (.psd, .ai, or .indd for Photoshop, Illustrator and InDesign respectively), you for sure would want to also save/export your layouts as a .pdf. Doing this gives an extra reference to your printer for what your layout should look like, as it is self-contained with all the images and fonts included.

A PDF, or Portable File Document, can be read and printed with just Acrobat reader, so the viewer does not need to have the design program you used to create it in order to see it.

In addition to the native program and PDF, other high resolution file formats for print include the .tif and .eps. TIF (sometimes written as TIFF) files are ideal for layered artwork and high resolution photos for printing. This would be the best file format for importing into layout programs like InDesign because of its “lossless” compression and best quality. EPS files are usually reserved for vector art that has its images embedded and text outlined, not requiring the fonts, or for raster images that have clipping paths which allow for the object to appear separate from its background.

For web/screen work, files can be saved as .jpg, .png or .gif. JPG is ideal for optimized web photos with no transparency, PNG is ideal for web graphics like logos when you need transparency, and GIF is usually only used very simple web animation and basic transparency.

To keep it simple, I would suggest saving files as a PDF for print work and a PNG for web work. For more detailed information on file formats, read this post.

Now you might ask: isn’t it possible to have a high resolution JPG and low resolution PDF? The answer is: yes, because first you set the image size and resolution and then you save or export the file in any format. So, high res JPGs: use these for photos to be printed via an online photo printing service. Medium res JPGs: use these for PowerPoint presentations. Low resolution PDFs: use these for when PDFs are only going to be viewed online and/or it’s not imperative images print slightly blurry (when file size is more important than quality for easy download).

But what if you are creating a pdf that will be downloaded from a website and needs to print with high quality? This is the real-world scenario I started this post with—so I’m ready to save the day! In this situation, you wouldn’t want the file to be too large, but you also don’t want the print to be blurry. So for this, I would recommend saving it as a PDF-X1a. Now, this depends on how many pages your pdf is, but generally speaking, the file size of the PDF-X1a should be easily downloaded and the quality should allow for it to print beautifully. If you find it’s still too large, you can always reduce the resolution under COMPRESSION. I would not recommend going below 150:

I hope you found this helpful! Remember, with the correct resolution, color mode, size and file format, your designs will be sure to have the impact you intend on your audience: whether they are holding that printed postcard you created or viewing your web banner! If you have any questions, feel free to ask them in the comments below and I’ll be happy to answer them to help you design your brand!