how to use photoshop to size images for print & web

by PETER HOBBS

December 14, 2009

how to learn flash

This article is all about achieving our desired image size at the highest quality possible for both print & web. This is easier said than done. Effective image sizing requires the sound management of those things that 'make up' our images - pixels. Here we learn the art of controlling both the size and the quantity of our pixels. There is a definite protocol that must be followed, a systematic order that is essential to observe. Breaching this formula destroys the clarity of the image, which, if saved, cannot be regained.

 

 

Let's go

best point and shoot camera

Sizing images for the web and print is all done in Photoshop's 'Image Size' panel. Open up any image in Photoshop and then go: 'Image' - 'Image Size'.

 

 

As an example, let's look at the following image taken with my digital SLR camera ...

best point and shoot camera

Now, before we get into any sizing, there are 2 things that we need to assess:

 

  1. Our Pixel Dimesions: This is where we check on the number of pixels we have making up our image. Here we have 3,888 x 2,592 pixels = 10,077,696 pixels. So this would have been shot with a 10 megapixel camera.
  2. Our Document Size: This is where we check on the actual size of our pixels. The size of our pixels are set by typing in a value for our resolution. So, pixels sized to 1/300" means that there would be 300 pixels that would fit accross each inch. We refer to this as resolution - the number of pixels per inch (ppi). Here we go ahead and type in 300 as our resolution (the resolution most often required to achieve a high quality print). First and foremost, however, we need to ensure that our 'Resample Image' button is unchecked so we don't accidentally add or subtract from our original body of pixels. We achieve a size of 12.96x8.64".

 

 

Sizing an Image for Print

We have sufficient resolution (300 or more ppi) should we print an image with a width and height equal to or less than the size indicated in our Document Size section; in our case 12.96x8.64". In this case use the following 3 step procedure to size our print:

 

best point and shoot camera

Step 1: Make sure the Resample Image button (bottom left) is unchecked.

 

Step 2: Type in one of our target dimensions (width or height). Say we wanted to print an image 6" wide, we type the value '6' into our width column. Note that our resolution increases to 648ppi.

 

Step 3: Choose: 'OK'.

 

That's it! We have achieved our target width of 6" (and corresponding height of 4") with a resolution greater than 300ppi. We are now ready to print.

 

Note the following important points:

 

 

 

Upsizing an Image for Print

What if we wanted to print an image larger than 13x8.5" - say, 18" wide. Is there anything we can do?

 

Absolutely! It's a 5 step process as follows:

best point and shoot camera

Step 1: Go ahead and type in the desired width of your print (ensuring that the Resample Image button is unchecked) - in our case 18". Photoshop gives us the corresponding height of 12" (assuming we keep the proportions constrained). The resolution, as expected, goes below the critical 300ppi level.

 

 

best point and shoot camera

Step 2: Check the Resample Image button. Note that this unlinks the resolution to the width and height in the Document Size section. Ensure that Constrain Proportions is checked too (to ensure no image distortion).

 

 

best point and shoot camera

Step 3: Type in the target resolution of 300ppi. Note 3 things:

 

  1. The width remains at 18" (together with its corresponding height of 12")
  2. The number of pixels increases in the Pixel Dimensions section
  3. The file size grows from 28.8MB to 55.6MB

 

 

best point and shoot camera

Step 4: Choose 'Bicubic Smoother' from the drop-down menu. This is the best method in which Photoshop will upsize the number of pixels for us.

 

 

best point and shoot camera

Step 5: Choose: 'OK'.

 

Excellent! We have successfully upsized the number of pixels in our image to help reach our desired print resolution.

 

Note the following important points:

 

 

 

Downsizing an Image for Web

Sizing an image for the web is executed in a different manner altogether. We do not use the Document Size section at all (that's right, we do not work with inches or resolutions of 72ppi in any way). We always use pixels as our 'ruler'.

 

Here's the 4 step process:

best point and shoot camera

Step 1: Check the Resample Image button. Note that this opens up the Pixel Dimensions section by making the width and height editable. Also, ensure that 'Constrain Proportions' is checked (to ensure no image distortion).

 

 

best point and shoot camera

Step 2: Type in the target width - say 280 pixels in this case in the 'Width' of the Pixel Dimensions section. Note that the file size shrinks from 28.8MB to 153.1KB.

 

 

best point and shoot camera

Step 3: Choose 'Bicubic Sharper' from the drop-down menu. This is the best method in which Photoshop will downsize the number of pixels for us.

 

 

best point and shoot camera

Step 4: Choose: 'OK'

 

Perfect! We have successfully reduced the number of pixels in our image to help reach our desired image size for the web.

 

Note the following important points:

 

 

Upsizing an Image for Web

Upsizing an image for the web is executed in the same manner as 'Downsizing for the Web' (see above). The only difference - choose 'Bicubic Smoother' from the drop-down menu. This is the best method in which Photoshop will upsize the number of pixels for us. We cannot upsize to simply any size and expect amazing results. As before, my experience tells me to add no more than 20% maximum.

 

 

I hope this article helps you - 'happy sizing'.

 

 

 

Share

Found this article helpful? Share it with friends.

Facebook Stumbleupon Digg Linkedin Email Reddit Delicious Twitter

 

 

Comments

We look forward to hearing from you. Comments are kept private at this stage.

 

 

Visit our Website

Discover how we can empower your business and website:

Add vitality to your photography

Capture attention with images in motion

Create interaction on your website