Quicker Way to Use Photoshop for Cropping Photos for the Web

If only I could go back and tell myself that I’ve been resizing images the wrong way. When preparing staff photos for the web, for example, I spent so much time cropping a photo so the spacing around the person looks proportional to my other staff photos posted online. I would then change the photo’s dimensions to fit the website template only to discover the new photo needs to be cropped some more or that it was cropped too much. I would then need to hit undo one or more times to make additional adjustments before resizing and testing again. It turns out that there's a much simpler way to edit photos and it’s less prone to errors.

Background

I currently use Adobe Photoshop CS5 on a Windows 10 computer. The staff photos that are sent to me are usually a few thousand pixels wide. To fit the website template, staff photos are reduced to 250 pixels in width.

New Method

When preparing a photo for the web, my first step is to open it in Photoshop, right click the layer containing the photo, and click Convert to Smart Object (see Figure 1).

Figure 1. Convert Photo to Smart Object

Then I change the dimensions of the canvas to match the size needed for the website. To do that, click Image and the Canvas Size… option (see Figure 2). The dialogue box will ask for the canvas' width and height.

Figure 2. Modify Canvas Size

Finally, I resize the photo to fit within the space available. Hitting Ctrl + T on the keyboard (or clicking Edit > Free Transform) brings up the resizing handles for the photo. Then I hold the Shift key, to maintain the photo's aspect ratio, while dragging the corner handles (see Figure 3) towards the center of the image. Once the photo fits inside the new canvas (see Figure 4), I'll save and post the image to the website.

Figure 3. Adjust Photo to Fit New Space

Figure 4. Completed Photo

Final Thoughts

In addition to being a faster way to crop images, the above photo will be easier to change in the future. Let's say I design a new website template and I want the staff photos to be larger. With my old way of cropping photos, I would need to go back to the original photo and start over with all of my adjustments. Smart Objects maintain their original qualities. I can increase the dimensions of a Smart Object without it getting distorted or losing image quality. So, it's just a matter of resizing the image to fit the new template and saving the new files.