Page tree
Skip to end of metadata
Go to start of metadata

Common image sizes

  • Masthead: 1400px by 485px
  • Multimedia image: 730px by 460px
  • Quote: 120px by 120px
  • Spotlight: 560px by 330px

Practice files (used for training)

Feel free to use these photos to practice the techniques outlined below.

Creating a new image for your site

The following is specific to the masthead image, but this technique can also be used for all of the image sizes listed above.

Create a new blank document/preset template (saved presets)

Creating preset image templates saves time. 

  • Choose: File > New
  • If unit of measurement is not set to 'Pixels', set it to pixels.
  • Change 'Width' to 1400
  • Change 'Height' to 485
  • Change 'Resolution' to 72 Pixels/Inch
  • Color Mode: RGB Color | 8bit
  • Background Contents: White
  • Select 'Save Preset'
    • On Photoshop CC: This will be an icon next the title that appears at the top of the New Document dialog, under 'Preset Details'.
    • On older Photoshop Versions: The Save Preset button appears under 'OK' and 'Cancel' on the right-hand side of the New dialog.
       

Opening a preset template

  • Choose: File > New  (by default, you are brought to 'Recent' items)
  • On Photoshop CC:
    • Click 'Saved' to the right of 'Recent'
    • Select the correct preset and click 'Create'
  • On older Photoshop Versions:
    • Open the 'Preset' drop-down
    • Select the correct preset and click 'OK'

Open your photo in Photoshop

  • Choose: File > Open
  • Browse to your image. Select. 
  • Click 'open'
  • Check to make sure the width of the image is larger than 1400 for your masthead
  • Choose: Image > Image Size. | The width must be 1400 pixels or larger. If smaller, please do not use the image.  

You now have two documents open and can click on the tabs to navigate between them. 

Resize Photo to Fit Website Image - Masthead

  • Choose: Image > Image Size.
  • Make sure the "constrain aspect ratio" is on (looks like a chain link)
  • Make sure 'Resample' is checked.

  • Change width to 1400 pixels. The height should automatically change.
  • The photo is now the width of our untitled document
  • Click "OK"

Copy the entire photo to paste the untitled document

  • Choose: Select > All | Edit > Copy
  • Switch to the untitled document
  • Choose: Edit > Paste.

Notice the width is correct but the height of the photo is larger than what we need. You can position the photo vertically where it looks best.

If the photo is not moving with your mouse or with the keyboard's arrow keys, check to make the "Move" tool is selected in the left-hand Photoshop toolbar.

Holding down the shift key while moving the image vertically holds the photos horizontal position.

Save your Masthead (or other component images) for the web

  • On Photoshop CC: File > Export > Save for Web (Legacy)
  • On older Photoshop Versions: File > Save for Web & Devices

  • When saving photos for the web you should always save as a JPEG
  • As a general rule, a quality of 'High, Quality:60' works best because it drops the file size down, yet there’s no noticeable difference in quality.
  • Click Save | Name your image: "masthead-(insert name here)"
  • Consistent naming conventions are a good way to organize your photos

How to get Photoshop on your computer

Windows Users

You can install Photoshop from Software Center. Software Center is installed on all University owned computers.

  1. Click on the 'Start' button on the bottom left side of your screen and click 'All Programs'
  2. Click on the 'Microsoft System Center' folder, and then click on the 'Configuration Manager' folder
  3. Select 'Software Center' to launch the program
  4. Locate 'Photoshop'under the Available Software tab

Mac Users

Please contact the Help Desk to put in a request to have Photoshop installed on your machine.

  • No labels