Download the Original File.

1) After opening your photo, you will want to be able to move around a bit, so go to View > Screen Mode > Full Screen Mode with Menu Bar

Enlarge

2) Unlock the image in the layers palette by double clicking it. A ‘New Layer’ pop-up will appear, click OK. This will make it so you can re-size the canvas without cropping the image.

Enlarge

3) Go to Image > Canvas Size and enter the exact pixel dimensions of your web image. We’ll just use 500 X 500 for now.

Enlarge

4) Make sure to select the layer where the image resides, and hit Apple T (CMD T in Windows). Once you see the transform box around the image, hold Shift Alt (To make sure the pixel proportions stay the same and the image sizes from the middle) and drag the top left handle in. You want to make sure that the image doesn’t scale down too much. If you do, the background will shine through.

Enlarge

5) Go to File > Save for Web and Devices. These are the setting that I usually choose if I’m saving an image for the web. It really matters on what the image is going to be used for. I try to limit the size as much as I can without the image pixelating.

Enlarge

Download the Final JPEG