Resolution Basics for Print and Screen

Understanding resolution is one of the first prerequisites to beginning any design project.  Whether you're designing graphics for a website, printing a photo-quality poster, or creating a large outdoor banner, knowing a few basics about resolution will save both time and money as well as allowing you to produce excellent project results.

What Is Resolution?

Basically, the resolution of an image determines how clear it is to the viewer.  Higher resolution images produce clearer and more detailed images, like the image on the right.  More technically speaking, the resolution of an image is determined by the amount of digital information or ink drops per area.  Because you're reading this to learn more about this topic, we'll discuss the technical aspect of resolution.

It Starts With Units

Depending on where you are located, resolution is measured differently.  However, in all cases, resolution is determined by the amount of "stuff" in a given space.  That "stuff" is usually pixels on a screen or dots of ink.  Resolution for television or computer monitors is generally measured in lines across the screen.  The space part of resolution is measured in inches or centimeters.

PPI vs. DPI

When starting a new design project in Photoshop, for example, one of the first things that need to be defined is the resolution of the project.  As designing is done through a computer screen, pixels are used to determine resolution.  A pixel is an individual unit point or block of light with a single color property.  For example, the text and the area surrounding the text in this paragraph is made up of black pixels and a mixture of red, green and blue pixels that produce the color white.  Therefore, screen resolution is measured in pixels per inch or ppi.

When printing a project with ink, the printer uses extremely fine dots of ink to produce an image on paper.  These dots are typically measured in picoliters.  There are one trillion picoliters in one liter.  Needless to say, these individual dots of ink are very small and virtually invisible to the naked eye.  Each printer manufacturer boasts smaller and smaller ink dot sizes for greater detail but they all report their resolution in dots per inch or dpi.

Choosing The Right Resolution

For the web:

Even though computer monitors are improving every year, most graphics destined for the internet are produced at 72 pixels per inch (ppi).  Any resolution much greater than this will not necessarily result in a clearer image on the screen.  It will simply produce a larger image.  We will discuss how this works in a future post on Advanced Resolution for Print and Screen.

For outdoor banners and signs:

Printing anything at 72 dpi will result in a pixelated or grainy image.  Therefore, the resolution of printed images needs to be increased.  I have found that large banners for outdoor use that are made to be viewed from a distance can be designed and printed at 150 ppi/dpi and still achieve excellent results.  Designing at a higher resolution will not produce noticeably clearer graphics but will use more ink.

For photo and poster prints:

The printer I use can print at a maximum resolution of 1200 dpi.  However, I design all of my posters at 300 ppi and print at the same resolution.  The results are magazine-quality. Just for kicks, I printed an identical image at 600 dpi and could not tell the difference without using a magnifying lens.  Photo printing produced similar results.  The only difference is the amount of ink used in the process.  A 600 dpi image consumes four times as much ink as an image printed at 300 dpi (600 horizontal dpi x 600 vertical dpi = 360,000 dots per square inch; 300 horizontal dpi x 300 vertical dpi = 90,000 dots per square inch).

Something else to consider is the type of paper used in the print.  Many bond papers will become saturated and wrinkle with anything above 300 dpi while heavier photo and metallic photo papers can accommodate a higher ink load.

While this explanation of resolution is not total, it should give you a good starting point when considering your next design project.  If you're ever in doubt, it is always best to begin your project in a higher resolution as scaling it to a lower resolution is easier than scaling it up to a higher resolution.  Basically, this means it is easier to eliminate pixels from your original than it is to create pixels that were never there in the first place.  The only real drawback to this method is finding the space to store a greater file size.  As with anything else, it's best to get it right from the beginning.

Using The Color Wheel

Finding the right color for a design project can sometimes take as much time as creating the actual content.  Of course, you could just choose your favorite colors but they may not fit with your theme.  Generally, there are two different avenues you could take: complementary colors or analogous colors.

Complementary colors are often referred to as opposite colors.  They are two or more colors that provide the greatest contrast.  For example, purple and yellow are at odds with each other and, therefore, considered to be the perfect choice for eye-popping contrast.  The color wheel is designed so these polar opposites are found on opposite sides of the wheel for easy reference.  Complementary colors can be a great choice for web graphics, high-energy posters, and anything created to attract maximum attention.

Analogous colors are colors that "match" each other.  They exist adjacent to each other on the color wheel.  For example, navy blue, aquamarine, and light green are considered analogous.  People with socially acceptable taste usually dress in analogous colors...of course, taste is always considered personal opinion.  However, most would agree it is better to wear colors that match than to look like a clown. Analogous colors in design are mostly used for more serious projects that suggest high-class or target mature audiences.

Rules are meant to be broken and nowhere is that more true than color selection.  So, use the color wheel as a guide and don't afraid to experiment.  Play around with this interactive color wheel to help you decide what to include in your next design project if you get stuck.  Now, go and color your world!