Tip:
Highlight text to annotate it
X
This demonstration is about understanding resolution. First, open your file.
I am going to open a Lesson file. In this example, I will open a file called "01A_End.psd".
To look at the resolution, go to "Image > Image Size."
And notice that there are two main sections labeled "Pixel Dimensions”, right here,
and "Document size."
The Pixel Dimensions literally define the number of pixels
in the image by width and height. You can see here: Width and Height.
To get a better understanding of what that means, you can multiply width times height to get the total number of pixels in a document
In this example, 2304 times 3456 equals
In this example, 2304 times 3456 equals
7,962,624 total pixels, or they are also referred to as “picture elements."
The total number of pixels also represents the amount of data in the document.
The more data you have, the more possibilities you have for multiple types of media output.
An important concept to understand about the "Pixel Dimensions" values (right here),
is that because it represents the maximum amount
of pixel data in the native document / the original document,
you should NOT increase these values.
Increasing the pixel dimensions will artificially increase the file size,
leaving holes in the image to compensate for the lack of original data.
Photoshop will then "Resample" the pixels around the holes to
make a best-guess as to how to fill in the missing data.
This process is called interpolation, and can result in a choppy, "pixelated" image.
The other section, "Document Size," (right here)
will help you adjust the resolution based on the final media output.
While this correlates with the pixel dimensions,
it can be independently adjusted so that the pixel dimensions are not affected.
If you deselect the "Resample Image" checkbox,
you will see that the Pixel Dimensions become greyed out up here
and they are unadjustable. This will prevent any changes to the actual amount of data in the document.
Changing the Document Size should NOT affect pixel dimensions
unless you are intentionally trying to reduce the amount of data in the document.
While the "resample image" box is deselected, you can modify the document size to achieve your target size.
For print, a common good quality resolution is 300 pixels per inch (ppi).
For print, a common good quality resolution is 300 pixels per inch (ppi).
For print, a common good quality resolution is 300 pixels per inch (ppi).
For print, a common good quality resolution is 300 pixels per inch (ppi).
So if it is important to hit a target the resolution, adjust the "Resolution" value while "Resample Image" is deselected.
Notice that when I changed the resolution from 72 to 300
that the Document width and height shrank from 32 inches by 48 inches to
what you see here: 7.68 inches by 11.52 inches. If we change that back,
you’ll see that it goes back to the transformation.
And then let’s go back to 300 again. And you see it goes back to what I just mentioned.
This is because we are rearranging the same, existing amount data, which is up here unchanged,
so it will produce a higher quality print, thus compacting the print size.
Also notice that the file size doesn't change right here
where it says "Pixel Dimensions: 22.8" megabytes.
This is because we are not altering the amount of data. We are only rearranging it down here in the “Document Size.”
There is a direct relationship between Document Size resolution
and its media output size, which would be right here.
An easy way to think of it is that if you double the resolution,
the document output size will shrink by about half.
For instance, let’s say that if we go back to having a resolution of
72ppi at 32 inches by 48 inches,
we can can assume that when we increase the resolution to 150ppi, which is approximately doubling it,
that the width and height will shrink to approximately half the print size in width and height.
So let’s try that.
Let’s go to 150, and you see that
in fact, that’s correct. At 150ppi
we now have a 15.36 inch by 23.04 inch image,
which is roughly half of 32 by 48.
If we double the resolution again to 300ppi,
we arrive at our 7.68 by 11.52 inch image print size again.
A general rule of thumb is that 72ppi is standard for screen media (like for web and Powerpoints),
150ppi is a decent resolution for most laser printers,
and 300ppi is appropriate for quality printing on inkjet printers or 4-color presses.
Some printing processes require 600ppi, 720ppi,
and possibly higher for extremely high quality art prints in books.
You can also try to target a specific print size.
If you have an image and need to see if it will work at a specific print dimension,
you would, as we’ve done here, deselect the “Resample Image" box
and adjust the width OR the height while "Constrain Proportions" is also selected (which is selected here).
So let’s say, for instance, that we have
to fit this picture sort of like in a 5 x 6 type of frame.
Well, since this is the tallest dimension
and we’re looking at a 5 x 6, we would try to see what would happen if changed this to 6 inches.
And then you would see that this would, in fact, be printing at a 4 x 6 so you would have a little extra space on the sides.
But also, you’ll notice that it bumped the resolution up to 576ppi, which is a really high quality.
But let;s say that we need to print it at a much larger size.
Let’s say we need to do something like 24 inches high.
…like a poster size. You can see that that drops our resolution down to 144ppi, which
is really not that great. It really depends on
what the purpose of the poster is. If someone’s going to be looking at it up close
then this is a terrible resolution for print
If it’s only going to be something that’s going be to try to attract attention from really far away, you might
be able to get away with it for, like, a laser printer.
But if, let’s say, that this was for a high quality photograph
that you wanted to blow up pretty largely, then
this resolution would not work.
This will tell you what your effective document resolution would be at this print size,
and you will know immediately if the quality is good enough or not for a quality resolution print.
Typically, images taken from websites are NOT good enough quality for printing at reasonable sizes,
unless you are downloading stock photos or high-resolution free images from sources like, for instance, morguefile.com.
The reason for this, as I said before, is because the standard target web resolution is 72ppi.
Screen output images, unlike print output,
are good at 72ppi because it is the lowest common denominator
for how many pixels it would fit
for how many pixels it would fit
vertically and horizontally within an inch of space in electronic displays.
Anything larger would have to literally take up more real estate
at 100% on the screen in order to display all of the pixels.
So, let's say that you are designing for the web and want to save our image
out to the correct resolution. We can change the "Resolution" here
to 72, but notice that the pixel dimensions
up here and file size are still huge and unchanged.
We can now select the “Resample Image" box
so that we can make the pixel dimensions match the screen dimensions we want.
Let's say we want the picture to be only 300 pixels tall so
I’d go down to “Height”, so that it fits nicely
on most screens. Notice that by resampling the pixels dimensions down,
the file size up here goes from 22.8 megabytes to only 175.8 kilobytes.
That’s a huge, huge difference.
And that’s what’s really important when you’re looking at doing web kinds of images -- is that you want smaller file sizes.
This makes the file much more manageable for the web, but if you save the original file like this,
it will forever destroy the original data that was there before.
So, be very careful not to overwrite your original image in case you need a larger version later.
Click "Okay" and you will see how much tinier it is on the screen now
because the pixel dimensions are reduced, and because Photoshop is still only showing the image at
a fraction of its actual size on screen.
If we change the percentage to 100%,
like that, you see that
it’s going to put it at it’s actual size.
You can either enter "100%" down here or you could also press
COMMAND + 1 (CONTROL + 1 on Windows).
Now, do not simply "Save" your file.
You will forever lose your original data if you do that. Instead,
go up to "File > Save For Web"
and it will allow you to choose the type of file
type and compression you want. It will also ensure that if
the file is currently at a higher ppi than 72,
it will save out at the target resolution of 72 by default.
because it understands that web images are always going to be at 72.
So technically, you really didn’t even have to go back and change the resolution to 72
because this feature, “Save For Web,” will
do it for you. So if we wanted to actually save something for
the web, like as a JPG, for instance, the one on the left
is the original, and the one on the right is what it would look like
saved out as a JPG. And over here you can choose if you want it to be a JPG,
or GIF, or whatever. You probably would want to choose jpg in this case.
You can choose the compression rate.
100% for “Quality” means that it has
as little as compression as possible
and the lower the Quality is, the more compression it creates. Basically, it’ll throw some data away to compress it.
You can look at it at 100% to see if it is an acceptable quality here
and it also shows you how big the file size would be down here.
And so if you wanted to go ahead and do that, you could click the save button and
tell it where to save it. I’m not going to do that right now.
I’m just going to hit “Cancel.” But that’s how you save images out for the web.
Instead, what you could do, is go back to Image Size
and you could change your dimensions here. BUT
let’s say that you just wanted to start over fresh
but you don’t want to have to monkey with any of these things. Hit “Cancel”
and then you can go up to “Window > History”
And then you see a couple of things here. You’ve got “Open,” you’ve got “Image Size”.
If I click on “Open” it will take me back to
when I first opened the file, and it will give me all of my
original dimensions. So now if I go back up to “Image > Image Size,”
you see that, in fact, my Width is
back to 2304 pixels by
3,456 pixels.
And we’ve got those document sizes that we remembered from earlier.
So that’s one of the ways you can reset your image
back if you think that you maybe messed some stuff up.
That’s only going to work, however, while you have a file currently open.
Once you close that file,
it’s done. You can’t
actually go to History again and change it once you
close it and reopen it. The history is only good
as long as the file is open.
So, that’s the lesson on resolution. If you are not sure about any of the things we discussed, I encourage you to go back and watch it again.