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!
Preview
Video Player
00:00
00:00
00:00
- 2x 2x
- 1.75x 1.75x
- 1.5x 1.5x
- 1.25x 1.25x
- 1.1x 1.1x
- 1x 1x
- 0.75x 0.75x
- 0.5x 0.5x
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