How to resize pictures in Photoshop

Since one of our clients has just purchased Photoshop Elements, I thought I'd knock together a little article regarding how to resize pictures in Photoshop.

Now, if you don't know, Photoshop Elements is kind of a "Photoshop lite" — but it's got quite a lot of the same features, and certainly enough to satisfy all but the most geeky graphics persons.

At any rate, to resize pictures in photoshop (and, sorry, these are Windows instructions but I assume the same sequence works for Mac and Linux users):

1. Start up Photoshop and go to File > Open to select your picture (which we call an "image"). Or, if your computer is set up to open pictures in Photoshop, just double-click the image and let Windows open Photoshop.
2. Now that you've got your original image open in Photoshop, don't resize it — always leave the unedited original intact. What you want to do it create a Photoshop document from the image, resize (and/or retouch, enhance or otherwise alter) the Photoshop document, and then generate the image in a Web format.

   Since the original image is likely the only thing you've got open in Photoshop at this point, it's already selected. Just:

   1. Cntrl A to select the entire image (you'll see some dashes surrounding the image; believe it or not, these are called "marching ants").
   2. Cntrl C to copy it to your Windows Clipboard.
   3. Cntrl N to start a new document — this will be the Photoshop document and, conveniently, it should be the same size as your image.

      Note that images to be used on the Web only need to be 72 pixels per inch — so if the New window says anything higher than "Resolution: 72", change it to 72.

   4. Click Okay. Photoshop will open a new document that should be the size of your image (which Photoshop is aware of since you copied it to your clipboard first).
   5. Cntrl V to paste the image from your clipboard into the new Photoshop document.

      About Layers: notice here the Layers palette (if it's not open, go to Window > Layers at the top of the Photoshop screen). In Photoshop, you can have images and/or text on top of other images and/or text, and you can move these layers around or otherwise manipulate them separately from other layers. In other words, they're separate, not merged as one. (In the old pre-layer days, we had to be very careful about what we did with images because all effects were merged into one layer, and we had to keep far too many copies.)

      At any rate, notice that there are two layers in your Layers palette — your image and a background. Here's a screenshot (click the image to get a popup of a larger image):

      
      

3. Save your Photoshop document!
4. To resize: at the top of the Photoshop window:
   Image > Image size
   (or, in keystrokes, Alt Shift i — much easier!)
   You'll get this window. Just reset the width (or height), making sure that "Constrain Proportions" is checked. You'll soon know why if it isn't!

   Note: if your image is large, resize a few times or you may get fuzzy results. I usually take large images down 200-300 pixels at a time.

   

5. Save again.
6. Generate your image. Now you'll need an image that's usable elsewhere than in Photoshop:

   Save > Save for Web

   Select what you need, and press Save.

   A note about Web formats:

   • .jpg format: good for photographs and images with lots of color
   • .gif format: good for images with flat planes of color
   • For <br>
   • For .jpgs, you don't need the highest quality available (medium-to-higher quality should give you a good quality image without a huge download time). I usually select around 63-68, depending on the image. People often send me 200K images that I can save, often at better quality, at, say, 30K. Download time is everything. Even nowadays.
7. You're done.