Working with Photos
Image Sizing
Throughout Cascade you may notice that there are specified image sizes next to image selectors. This means that your images should be this exact pixel size.
Homepage:
Slideshow Photo - 624px x 353px
Column Photos - 280px x 170px
Standard Page:
Topper Image - 698px x 260px
Person with a Page:
Profile Photo - 168px x 210px
Person Without a Page:
Profile Photo - 80px x 100px
Photo Gallery:
Gallery Image - any
Gallery Thumbnail - 162px x 120px
Digital Sign Slide:
Image - 660px x 660px
Version 2 Cascade Websites
Users of v2 websites should refer to the v2 template library for all image sizes.
resize and crop using Canva Photo Editor
Canva Photo Editor is a free online photo editing tool. You do not need to register an account with Canva to use the tool.
- Visit the Canva Photo Editor at https://www.canva.com/photo-editor/
- Click the green "Upload" button
- Select the image you need to edit from your computer's hard drive
- To resize: Click the "Resize" button in the top toolbar and specify the new image dimensions in the width and height boxes. Click Apply.
- To crop: Click the "Crop" button in the top toolbar. Specifiy the desired crop size in the width and height boxes. This will create a bounding box overlay that you can position over your image by clicking inside the box and dragging your mouse. Once you have positioned the bounding box over the area you want to crop, click Apply.
- Once you have resized and/or cropped your image, click the green Download button to download the image to your computer's hard drive.
Resize and Crop Using Photoshop
This guide assumes that you have Photoshop installed on your computer and that you understand how to open the application.
Although Cascade offers a primitive image editor, WCAS recommends editing photos through Photoshop to ensure you have the highest quality images possible for the web. While Photoshop has many powerful image editing features, this guide only targets the cropping and resizing tool. If you wish to gain an in-depth knowledge of Photoshop, classes are offered through HR (See HRD211 - Photoshop: Level 1 and HRD212 - Photoshop: Level 2).
** Your Photoshop preferences may be different than those shown within this guide. If you have trouble locating any of the starred items, contact WCAS IT for further assistance.
- Locate and open Photoshop on your computer. This will open an empty workspace.
- Locate and click File within the main Photoshop menu. This will open the File dropdown menu.
- Locate and click Open within the File menu. This will open a file browser window.
- Within the file browser window, locate and click the photo you wish to crop and resize.
- Once the file is selected, click the Open button within the file browser window. This will simultaneously close the file browser window and open the selected image within the Photoshop workspace.
- Locate and click the Crop tool**. The crop selector tool will overlay your image.
- Locate the preset aspect ratio or crop size selector. If selector displays W x H x Re..., skip to step 9. If not, click the preset aspect ratio or crop selector to view all options.
- Once the preset aspect ratio or crop selector is open, locate and click W x H x Resolution. You will see a checkmark to the left of the text indicating the option has been selected.
- Place your cursor within the set width field. Type the desired numerical pixel width for your photo. Be sure to type px after the number. This ensures that the measurement will be in pixels even if your default unit of measurement is different.
- Place your cursor within the set height field. Type the desired numerical pixel height for your photo. As with the width, be sure to type px after the number.
- Place your cursor within the set resolution field. Type the number 72 (with nothing after it). This is the standard resolution size for web images.
Tip: You may wish to set this as a default size. This allows you to skip steps 7-11 in the future. See the instructions below for setting a default crop size. - You may now move and resize the crop selector as much as you wish.
Tip: Photoshop automatically provides you with the "rule of thirds" grid. As a general rule, try to position the most interesting part of your photo where the lines intersect. - Once you have the crop selector tool aligned with the section you wish to keep, double click with your mouse or hit the enter key on the keyboard. This will appropriately size and crop your image.
- Depending on the original photo size, the image may look small within Photoshop. Steps 7-9 ensured the photo is the correct size. If you wish to see a more realistic preview, locate the view percentage in the lower-left corner. If the percentage is already 100%, you may skip step 15.
- Check the percentage in the bottom-left corner of the Photoshop workspace. Most likely, the original image opened with a small view percentage in order to display the entire photo. Change the percentage to 100%, and the image should appear to be the correct size.
- Locate and click the File within the main Photoshop menu. This will open the File dropdown menu.
- Locate and click Save As within the File menu. This will open the file browser window.
- Browse to the folder where you wish to save the resized image.
- Once you selected the appropriate folder, place your cursor in the Save As field. Type a short but descriptive name for your photo.
Best Practice: We recommend including the dimensions at the very end of the file name. This ensures that you or your colleagues can find a correctly sized image easily in the future.
- Next to the Format selector, ensure the file format is either JPEG, Compuserve GIF, or PNG. If your file is one of the aforementioned formats, skip to step 22.
- If your file is not a Compuserve GIF, PNG, or JPEG, click the Format selector to reveal all available choices. Click and select JPEG. A checkmark to the left of the text will confirm your selection.
- After confirming the file format, locate and click the Save button. This will open the format options window.
- If your image is a JPEG, locate the field next to Quality. If the number is not 8 or higher, select the number within the field. Type 8 into the Quality field. If your image is a PNG or GIF, use Photoshop's default settings.
- Locate and click the OK button. This will save your image to your computer.
After you save your image to your computer, you must upload the image to Cascade.
If you wish to learn how to invoke visual interest when cropping interest, information about cropping techniques are available on MakeUseOf.com.
Back to top