Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.
Start a free Basic trial
to watch this video
Now that we’ve got a foundation of display resolution, let’s take a look at translating this concept into print.
New Terms:
- Dots (print) -- unit of measurement for print resolution made up of cyan, magenta, yellow and or black.
- Subpixels -- the individual colors elements of red, green, or blue that make up a single pixel.
- PPI -- Pixels Per Inch; the density of pixels that will be printed.
- DPI -- Dots Per Inch; the density of a printed dot typically used by offset print presses.
- Offset Printing -- a method of printing whereby an image is created on a plate and transferred to the paper.
Further Reading:
-
0:00
Now that we've got a good foundation of image and display resolution,
-
0:03
let's take a look at a more traditional method to view images, print.
-
0:08
When browsing the web, we often see images that appear high quality and look great.
-
0:13
However, I'm sure everyone has seen just the opposite
-
0:16
when you've gone to print that high quality image.
-
0:18
Perhaps it's smaller than you thought.
-
0:21
Perhaps it's blurry or chunky.
-
0:24
When we print something, we have to work with ink and
-
0:27
need to translate pixels into something else, dots.
-
0:31
A single pixel's illuminated on a screen with subpixels, which give us the colors.
-
0:37
These subpixels emit a combination of red, green, and blue light, or RGB.
-
0:44
Similar to a pixel, a dot on paper is made up of colors, but
-
0:49
that's where the similarities end.
-
0:51
A combination of ink spots in the colors of cyan, magenta, yellow, and
-
0:55
black, or CMYK, are used to replicate colors.
-
1:01
The shape of a dot is slightly different and depends on the type or
-
1:05
printing technique being used.
-
1:07
We won't get into all the nitty-gritty details here but,
-
1:10
as we can see already, the transition from screen to paper is quite different.
-
1:16
The quality of a printed image depends on, one, the image resolution, or
-
1:21
pixel density.
-
1:22
And two, the capabilities of the printer.
-
1:26
The pixel density of images, or PPI,
-
1:29
has a cousin in the offset printing world, dots per inch, or DPI.
-
1:35
Offset printing is a process typically used by printing press companies
-
1:39
that transfers each color in a graphic file into individual plates.
-
1:43
Then the plates are used to imprint each color onto a sheet of paper.
-
1:47
Now I'm gonna stop here for a minute, PPI and DPI are often used interchangeably.
-
1:54
Generally, we'll use PPI since we're working with pixels first in
-
1:58
our applications.
-
1:59
DPI is mostly concern for a print shop, where you may take your design to be
-
2:04
professionally printed on an offset printing press.
-
2:08
It's still an important consideration, but for
-
2:10
most purposes of creators today, we can think in PPI.
-
2:14
So I'm gonna continue using PPI in this course.
-
2:18
Now let's take a look at what goes into making a quality print and
-
2:22
how PPI affects our printed graphic.
-
2:25
So let's take a look at our LCD monitor again.
-
2:28
Remember, this display is running at a resolution of 1920 by 1080.
-
2:33
LCD display pixel density is typically somewhere between 67 and 130 ppi.
-
2:41
We're not able to increase or
-
2:42
decrease the size of an individual pixel on the display.
-
2:46
So generally we see images with a default ppi of 72.
-
2:51
However, if this number is different and you're designing something for
-
2:55
the web or an app, that's okay.
-
2:58
Remember pixel density, or
-
3:00
ppi, won't affect the quality of the image on a display.
-
3:05
Now when we print out this creation
-
3:08
we need to tell the printer the size of the pixel to print as a dot.
-
3:12
When we increase the ppi, we actually decrease the size in inches of the image.
-
3:18
However, it should result in a higher density printed image.
-
3:22
If we decrease the ppi, we actually increase the printed size.
-
3:27
Say, 10 pixels per inch would result in a huge print.
-
3:31
So let's see an example.
-
3:34
Here we have an image that is 300 pixels by 300 pixels and
-
3:38
currently set to 100 ppi, resulting in a printed image of 3" x 3".
-
3:45
If we increase the ppi to 300, the printed image will result in a 1" x 1" graphic.
-
3:53
And the opposite, 10 ppi would result in a larger 30" x 30" printed graphic.
-
4:00
And just to drive it home,
-
4:02
even though we've changed the ppi of the image it's still 300 pixels by 300 pixels.
-
4:08
Changing the ppi won't change the pixel value and how it shows up on our screen,
-
4:14
even if we're looking at a high density or retina display.
-
4:19
Here's a quick grid for reference.
-
4:21
Print and display.
-
4:22
Printed assets, and let's limit this to an 8 and a half by 11 sheet of paper,
-
4:27
should have an output ppi of about 150 for home printers.
-
4:32
For offset printing, 300 is a good number.
-
4:35
But I encourage you to reach out to your printer and work with them directly.
-
4:40
If you're printing photos, this should still apply.
-
4:43
But you can check with your vendor.
-
4:46
For color, ensure you've either started your graphic file in CMYK or
-
4:50
converted your photo into CMYK, to get the most accurate representation.
-
4:56
We'll get into this deeper in the next video.
-
4:59
For displays, we don't need to worry about ppi.
-
5:03
Most applications and images from devices use 72.
-
5:06
And that's fine, one less thing to worry about.
-
5:10
For our color we'll want to stick with RGB.
-
5:14
Hopefully, that gives you a base to work from and
-
5:17
the grid gives you a reference point.
-
5:19
In the next video, we'll take a brief dive into color and color spaces.
You need to sign up for Treehouse in order to download course files.
Sign up