Home > Basic Photoshop Tutorials > What is Resolution in Photoshop

What is Resolution in Photoshop

th7bThis tutorial series goes over exactly what resolution in Photoshop is, what it means to designers, and how to optimize your resolution in Photoshop for printing.


Web Graphics vs Print Media

First and foremost, designers should be aware that there are crucial differences in designing graphics for websites as opposed to designing graphics for print. Web graphics are designs that will never see the day of light on paper and are meant to be viewed strictly on the computer. This includes items such as website logos, banners, buttons and so forth. On the other hand print media are items that are intended to be printed, includes items such as business cards, flyers, brochures etc.

Measures – Pixels and Inches

pixels

The million dollar question: How many pixels are in an inch?

Answer: As many as you want there to be!

Naturally, this is a hard concept to wrap your head around at first, but after I explain it you will feel ashamed for posing this question. You’ve more than likely heard the term “high resolution” image, but what does “resolution” really mean? Where else does “resolution” come into play? Think about the computer/laptop monitor (sorry tablet owners) you are currently viewing this website on. You have settings to change the “screen resolution” which affects the quality of the display output you see on the monitor. The physical size of your monitor does not change as you change the screen resolution (duh!), but the amount of pixels spanning the screen does. An 800×600 resolution (the good ole days) has 800 pixels across the width of the monitor and 600 pixels down the length of the monitor). Compare this with a 1920×1080 resolution. This would mean that your same monitor now has 1920 pixels across the width of the monitor and 1080 pixels down the length of the monitor. Remember again, the physical dimensions of your monitor did not change (e.g. 21” monitor). Thus, the pixels are much more densely spaced in the 1920×1080 resolution resulting in a sharper image. Why is understanding this important to us?

1

See the image above with the two monitors with identical physical size. The monitor on the left has a higher screen resolution setting (higher density of pixels) compared to the monitor on the right (lower density of pixels). The result is evident. The exact same website displays much smaller on the website with the higher screen resolution setting.

This is why print media CANNOT be measured in pixels. Pixels are simply dots on a screen, it cannot be conveyed to a physical measure such as inches or meters. When designing print media in Photoshop, always enter the dimensions of your document in a physical measure such as: inches, centimetres, millimetres etc.

The inverse is true when you are designing web graphics (graphics that will be viewed strictly on a monitor). A hard measure such as inches or meters does not translate to any significance on a monitor, since as we showed; screen resolutions dictate how large or small an element will appear on a monitor. Thus when designing web graphics, we use dimensions that are in pixels.

Resolution Setting in Photoshop

dpi

Resolution ties into graphics design with the term/unit known as DPI. DPI stands for dots per inch. This should make sense, as we defined resolution as the density of pixels, pixels being “dots”. DPI is literally the amount of pixels present in a square inch of your graphics document. By default you will notice that Photoshop sets your DPI to 72 pixels/inch. This means that there are 72 pixels for every square inch of your document. When viewing a graphic strictly on a monitor, this resolution is more than sufficient.

Thus when designing web graphics, use a resolution setting of 72 pixels/inch.

However when we need to print these graphics and view them on physical media such as paper, 72 pixels/inch is not sufficient. Creating a document at 72 DPI and printing it would result in your image appearing pixelated (i.e. insufficient pixel density).

When designing print media in Photoshop, as a rule of thumb, we use a resolution setting of 300 pixels/inch.

However, this isn’t a magic trick that makes any image high resolution. There is a cost or trade-off we must pay. To understand this, start by creating a new document in Photoshop that is 5” x 5” with a resolution of 72 pixels/inch.

dpi-at-72

Leave it aside and create a second new file that is also 5” x 5” but now set the resolution to 300 pixels/inch.

dpi-at-300

You should have two document windows open at this point.

jayslogo

Next, save the above image to your desktop. In Photoshop go to File > Open and browse and open up this image. Use the marquee tool to select the entire image (or hit Ctrl +A to select all), copy the image (Ctrl +C), and then paste the image in the 72 dpi document. Repeat the same steps and paste the image into the 300 dpi document as well. Look at both of them side by side:

image-at-72dpi

image-at-300dpi

So what exactly happened here? You have two documents that are of the same physical dimensions, however when you paste the exact same image into the higher resolution one, it takes up less space in the canvas. This my friends is the trade-off. Since the second document is at a higher resolution, the pixel density is higher. Thus that 280px x 280px logo, will occupy a much larger portion of the canvas at 72 dpi, where the pixels are less dense, as opposed to the 300 dpi document, in which the pixels are more densely packed.

So how will this affect you? Say you’re trying to design a poster on an 8.5” x 11” sheet and want to add some stock images into it as part of your design. Once you set the document’s resolution to 300 dpi, you’re going to need fairly large stock images (pixel dimensions wise) in order for those images to take up any significant amount of space on your canvas. That Blue Jays logo at 280px x 280px would just be a tiny spec on a 8.5” x 11” set at 300 dpi.

Is 300 dpi resolution critical for print media? Of course not, it just a rule of thumb. It all depends on the application and what media you will be printing on. If you are really having issues filling up your canvas at 300 dpi, try dropping the resolution down to 250 dpi or even 200 dpi. When printing on regular card stock, you might not even visually notice a difference.

Continue reading the next tutorial in this series: Printing from Photoshop which covers how to obtain high resolution stock images using Google Image search, as well as tips for optimizing your graphics for print.

Share!Share on Facebook0Share on Google+66Pin on Pinterest1Share on StumbleUpon0Share on TumblrTweet about this on Twitter0
Categories: Basic Photoshop Tutorials Tags: