Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Digital Media Through Photoshop!
You have completed Digital Media Through Photoshop!
Preview
In this video, we will run through an example image and see it in application in typical and high PPI screens.
New Terms:
- Downsampling- Condensing the size of an image with a higher resolution than the display to fit the resolution of the display.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
Here we have a 300-pixel by
300-pixel graphic we’ve created, and
0:00
here’s how it displays
on our test monitors.
0:05
On the old-school CRT display,
0:07
it looks like it takes up
a significant promotion of a display.
0:09
While if we take the same image and
display it on our higher
0:13
resolution 55-inch HDTV, it takes
up quite a bit less of the display.
0:17
But, if we were to measure it
in inches on the screen itself,
0:22
it's larger than the CRT.
0:26
Even though the TV is much larger and
what's considered HD,
0:29
the small graphic appears
physically larger.
0:32
As I mentioned in the last video,
0:36
only the size of the physical
pixel in the display has changed.
0:38
Each display shows the same
number of pixels for
0:43
our graphic because our graphic
is 300 pixels by 300 pixels.
0:45
A pixel is a pixel no matter
the size of the pixel itself.
0:50
So let's take a look at our 300
pixel square image on an iPhone
0:55
running at nearly same
resolution as our 55 inch HDTV.
0:59
Physically smaller but taking up about
the same proportions as our HD TV.
1:05
One last thing I'd like to mention as
it pertains to misconceptions about
1:10
digital images and resolution,
the fancy enhanced magic we see on TV.
1:15
You know,
where we see the baddie in a crowd and
1:21
we can't quite make out his
face because it's so small?
1:23
Then through some fancy technology and
1:27
voice control, enhance magically reveals
the villain and the case is closed.
1:29
Let's take a look at what
this looks like in real life.
1:34
I'm jumping into Photoshop real quick
here for illustrative purposes.
1:38
Don't worry too much about the specifics
as I work through this example.
1:42
So here's an image of a quality similar
to one found on a security system.
1:46
Typically an HD resolution
of 1920 by 1080.
1:50
Remember from our square example
that no matter the display,
1:54
one pixel is going to display
as one pixel in each device.
1:58
So we have 1920 pixels in each line and
1080 pixels in each column.
2:02
If we zoom in, it doesn't automatically
create new pixels in the image,
2:07
it simply enlarges the size
of a pixel on our screen.
2:11
Thus making the resolution of
the zoomed in area effectively less.
2:14
Let's zoom in as far as we can on this.
2:19
Now we're at 3200% zoom.
2:23
Each pixel here is clearly defined and
is a single color.
2:26
There is simply no more information
to be had in that pixel.
2:30
It's defined as the color and
there isn't anything hidden closer in.
2:33
If we were to see a binary number in
the code for this image, ones and
2:38
zeros, we wouldn't magically
find any hidden ones and zeros.
2:42
If this pixel area here represented,
2:47
say a bad guy's face,
that's all the detail we're going to get.
2:49
The only effective way
to get a clearer image
2:53
would be to start with a higher resolution
image, meaning a better camera.
2:56
So for instance our phone cameras.
3:00
We know the resolution of our
phone is close to an HDTV,
3:03
however our cameras are gonna be
able to take much larger photos.
3:06
For example, this image is 4032x3024,
3:10
that's why to some degree, we're able
to pinch to zoom on our phone and
3:13
see detailed closer up
without losing fidelity.
3:19
But once we zoom in and what would be more
than 100% of the original image size,
3:22
we'll start to lose some of that fidelity.
3:27
Whew, that was a lot.
3:30
Lets do a recap.
3:32
Images or graphics have both pixel
dimensions as well as pixel density
3:34
that make up the resolution of an image.
3:39
Display resolution is represented
by the rows and columns of pixels.
3:42
We also want to consider the size of
the display and the viewing distance for
3:47
our final imagery.
3:51
Displays show us those images
based on the pixel dimensions
3:52
while ignoring the pixel density
because a pixel is a pixel.
3:56
In the next video, we'll dive into image
resolution as it relates to print.
4:01
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up