Image Cropping Guide

Most likely, your image is larger than the required upload size and does not have the correct dimensions, aspect ratio, or resolution our sites and components require. To ensure the best fit and optimal loading speed, you’ll need to crop it.

Photoshop makes cropping easy by allowing you to set the required dimensions, aspect ratios, and resolution (DPI) for the components you are using without distorting the image.

Ensure you have Photoshop installed. If not, request installation using the IT Request Form.

Open Photoshop.

Steps to Crop an Image

Step 1: Open Your Image

1. Launch Photoshop.
2. From the File menu, select Open, then locate and open your image.
    

Step 2: Select the Crop Tool

1. Click the Crop Tool icon in the tools section.
   
2. You should now see a white outline surrounding your image.
3. On the outline are 8 places where the border is thicker. These are called “handles.”

Step 3: Set Crop Dimensions

1. In the toolbar dropdown at the top, select W x H x Resolution.
2. Enter the required dimensions. For example, if you are trying to upload an image for a component requiring a max resolution of 3200x1800 pixels, you would enter “3200” in the very first box to the right of WxH Resolution and then enter “1800” one box over.
3. Next, make sure the resolution is set to 72 px/in.

Step 4: Adjust the Crop Area

1. You should see that the white outline has changed to the aspect ratio of 3200x1800 and several other rectangles appear over your image.
2. Click once outside the selected crop area to bring up the pointer.
3. Position your mouse within the crop area and click down on your mouse.
4. Move the photo around until the portion you wish to save as an image is within the crop area.
5. To focus on a specific area of the photo, you can also make the crop area smaller by clicking and dragging one of the box handles.

Step 5: Double-click inside the box to finalize the crop

1. You can crop the image by double-clicking inside of the crop box.
2. Another method is to go to "images" in the upper menu and then select "crop" from the dropdown.

Step 6: Naming & Saving Your Cropped Image

1. Once you are done, go to File > Save as.
2. This will bring up a menu where you can specify the filename and the image type.
3. When naming the images, please use all lowercase lettering.
4. Start with the season and year the image was taken (if known) separated by a dash. For example, "fall-2021."
5. Add a dash and then in no more than 4-5 words describe what the image represents. For example, "students-walking" or "barbelin-courtyard."
6. Add a dash and then type in the size of the image. For example, "3200x1800."
7. An example of the final title would be the following: “fall-2021-students-walking-3200x1800.jpg”
8. Make sure all images have no spaces in the file name; if they do, please go back a rename.
9. Select JPG as the file format.
10. Click Save.

Now you are ready to optimize your image using our recommended online optimizer (https://imagecompressor.com/) before uploading your image to your website’s media library.

View an instructional video demonstrating the above steps to crop an image to our required dimensions in Photoshop.

Return to Best Practices Page

If you are cropping a number of images, you can save time by using pre-defined crop tool presets.

Steps to Use Crop Tools Presets to Crop

Step 1: Download Presets

1. Download our custom-made crop tool presets.
2. Save them to your computer’s desktop; you’ll be using them in a second
3. Once installed, they will automatically give you all the various dimensions our components take.

Step 2: Load Presets into Photoshop

1. Select the Crop Tool, then open the dropdown next to W x H x Resolution.
2. Click the gear icon (settings wheel) and choose Load Tool Presets.
3. Locate and open the presets file you downloaded.

Step 3: Use Presets to Crop

1. Go to the drop-down reading “W X H Resolution” or “Ratio” and make sure "Ratio" is selected.
2. You will see your custom preset sizes there.
3. Select the required size from the preset dropdown and crop your image as described above.

View an instructional video demonstrating the above steps for downloading the crop presets and using them to crop (note this video will show these steps done on a Mac, but if you have any trouble, please shoot us a ticket).

Return to Best Practices Page