Photoshop Image Sizing

Photoshop Image Sizing
by fashionimage.com

A Photoshop Tutorial

An introductory tutorial on image sizing for Photoshop beginners.

Most original images, as scanned or imported from a digital camera, are too large to be readily or conveniently used on the internet. This tutorial gives a quick lesson on how to resize images for use on web sites, forum posts, or for emailing.

Let's look at the image on the right as an example:

For some people it will display just fine on their monitors, but for a fairly large percentage it will be too tall to see all at once. It's too big: 700 pixels high, while most screens are set to display only 600 or less. So, to make it display on most monitors, it needs to be made smaller.

This can be done in more than one way (the crop tool can be used, but I'm going to ignore that for now). The most direct way is to use the 'Image Size' tool, found in the 'Image' pull-down menu.

All photographs
Copyright 2003 fashionimage.com

When you bring up the 'Image Size' tool, for this image you find the following dialog box to the left.

Let's go through what the box is telling you, item by item:

Pixel Dimensions:
1. The size of the image file is 1.05 megabytes.
2. It is 525 pixels wide
3. It is 700 pixels high

Document Size:
(if this image is printed on paper this is what you will get. It has nothing to do with screen display size.)
1. The paper print will be 1.75 inches wide
2. The paper print will be 2.333 inches high
3. If printed to paper, the resolution of the print will be 300 pixels per inch. Note: pixels per inch (ppi) is not the same as dpi. In fact there will be many more than 300 dots per inch if this image is printed. Discussions which refer to this value as 'dpi' are not correct.

General:
1. If the image is changed in this tool, the 'constrain proportions' box being checked means the height and width will both be changed so the image keeps its proportions. If the box is unchecked and you make the height smaller, for instance, the image will look fat.

2. If the image is changed in this tool, the 'Resample Image' box being checked means the number of pixels will be changed; the image file will get larger or smaller, depending on what you do. If it is not checked then no matter what you do in the tool, the image file will not get larger or smaller, and the screen display will stay the same size.

3. The 'Bicubic' algorithm chosen is the best choice for a high quality image resampling.

With that explanation, let's use the tool to change our image size.

First, let's recall that the purpose is to make it display better on most computer screens. That's simple. We know that a few screens are set at 640x480, and that the toolbars on browsers take up some of that real estate. So if we really want to make our image fully displayable for those benighted souls who still use this screen resolution, we have to make our image only 400 pixels or so high.

(The vast majority of screens are now 600 pixels high or greater, so most of the time 500 is a perfectly good choice, but I'm going to ignore that for now.)

To change the image size, we use this 'image size' too, and this screen, like this. > > > >

All that I did was type '400' in the height box where it had been '700'. Photoshop automatically changed the rest of the data to show the effect. Simply press the 'OK' button and you are done, and the image now looks like this.

The image we started with in this example wasn't greatly larger than an acceptable screen size, so when we changed it, not all that much fuzz was introduced by the resampling. But if we start with a very large image and cut it down to a small size, the fuzziness can be pretty noticeable.

How to fix it?

Simple. We go to
Filters>
Sharpen>
Unsharp Mask

and it brings up a screen something like this. > > > >

The settings shown are close to my personal favorites for small images, but what they need to be varies with image and what you want to achieve. Play around with the sliders until the preview looks good, press 'OK' and you are done.'

Now all you have to do is save the image as a JPEG. You can do that directly in Photoshop - just make sure the quality setting is high enough not to lose too much quality, and low enough to result in a small enough file size. Normally a setting of 5 or 6 is fine.

Or you can use the 'File>Save for Web' tool, which is a whole different subject.

fashionimage.com