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