Back to Top
Skip to Site Search Skip to Utility Nav Skip to Top Nav Skip to Left Nav Skip to Content
Close Main Menu

Preparing an Image

Overview

Now that you've selected your photo, you may find that it needs to be tweaked and/or resized to fit your web page content. This is best done via external tools to maintain the quality of your image.

Determine which tool you will use:

  • Photoshop (or Photoshop Elements)
  • Web Resizer (http://webresizer.com/resizer/) (crop, resize, contrast, sharpen, color saturation, tint)
  • Pixer.us (http://pixer.us) (crop, resize, contrast, sharpen, color saturation, tint)
  • Another graphics or online program

Note: Instructions will be given for basic resizing and cropping of the three listed above. If you choose another program, the basic concepts are the same.

Instructions

Open your image file in Photoshop

  1. Open Photoshop.
  2. In top menu, click "File -> Open."
  3. In the popup, navigate to the image file and select it.
  4. Click "Open."
Open file in Photoshop

Image Resolution

Most images from your camera are 300 ppi, which is fine for print. But images for the web should have a resolution of 72 ppi.

  1. In the top menu, click "File -> Image Size."
Changing the image size
  1. In the pop-up change the resolution from 300 to 72.
  2. Click "OK."

Note: When you change the resolution, the dimensions of your photo will change. As long as the dimensions don't get much smaller than the dimensions you need, you are good to go.

Setting the resolution to 72

Image Crop and Size

Whether you resize or crop first depends on how you will use the image. Images come out of your camera in a 4/3 ratio. This is good for most slideshows and images in content.

The size of your image depends on what you are using the image for. Check Image Sizes. (LINK)

Cropping Your Image

You can zoom in on a particular section (keeping the required minimum width in mind for content or a slideshow) or crop for a page header (minimum width of 971px).

When cropping, keep in mind the rule of thirds. If you were to divide an image into 3 sections (both horizontally and vertically), the point(s) of interest should be at or near at least one of the intersection(s) of the lines.

  1. Click the Crop icon in the left toolbar.
  2. Drag the edges of the dotted-line box to crop your image.
  3. Double-click on the image to apply the crop.
Cropping an image in Photoshop

Resizing Your Image

Straight out of your camera, your image is far too large to be used on the web.

  1. In the top menu, click "File -> Image Size."
Menu for Image Size
  1. In the popup, change the width to the desired width (see Image Sizes).
  2. Click "OK" to apply the change.

Note: Always make sure you've set the resolution to "72" before resizing.

Resizing an image in Photoshop

Creating a Preset

Cropping, resizing, and changing resolution can be done in one fell swoop for images that you need to all be one size, etc. This is especially handy for slideshow images where they all need to be the same width and height.

This is a 3-step process. First, you are resetting resolution and size, then you set the crop size, and finally, you save the crop as a preset.

Step 1:

  1. Open your image.
  2. In the left side bar, click the "Crop" tool (5th one down).
  3. Just below the top menu set the following values in the boxes.
    1. 1st box: 675 px  (width of your image)
    2. 2nd box: 450 px (height of your image)
    3. 3rd box: 72 (resolution)
    4. Drop-down box: px/in  (scale to use)
Crop preset boxes and crop tool

Step 2:

  1. Click the drop-down box on the left side.
  2. From the drop-down menu, select "New Crop Preset."
Crop Preset drop down menu

Step 3:

  1. In the popup, confirm the name of preset or change it to help you identify it.
  2. Click "OK."

Note: Now you can apply this preset to an image. It will change the resolution, crop, and resize all in one step.

New crop preset popup window

Using a Preset

  1. Open your image in Photoshop.
  2. Select the Crop tool from the toolbar on the left.
  3. At the top, click the dropdown for a list of crop presets.
  4. Choose the crop preset you created.
  5. Double-click the image to apply the preset.

Note: You can check the settings by going to "Image -> Image Size."  You should see the new size and a resolution of 72 applied.

Selecting the saved preset in Photoshop

Go to the Online Site

  1. Go to "http://webresizer.com/resizer/"

Upload Your Image

  1. Click "Choose File."
  2. From the pop-up, navigate to the file you wish to upload.
  3. Select the file.
  4. Click "Open."
  5. Click "upload image."
Uploading a file to Web Resizer

Editing the Image

  1. You will see the "optimized" image on the left and the original image on the right.
  2. Note the width of the "optimized" image. We need to reset this to the width you want.

Display of original and optimized images

Editing Controls

  1. New size: Set this value to the width of the finished image. Refer to image sizes to get the correct size.
  2. Rotate: Leave set to "none" unless you do need it rotated.
  3. Sharpen: Sharpen can help keep an image crisper when resizing. It does NOT help with out-of-focus images.
  4. Image quality: Leave as is.
  5. Tint: Leave as is.
  6. Exposure: Adjust if your image is too dark or too light. You cannot bring in detail in blown-out  areas where something was overexposed. Sometimes you can bring in detail from dark areas though.
  7. Contrast:  If the photo is a little dull or washed out, increase the contrast a little.
  8. Colour saturation: Sometimes raising the saturation can make an image "pop." On the other hand, if someone has lots of red in their face, lowering this value a little may help.
  9. Border:  Avoid black borders!!!  It is preferred you have no borders.

It's recommended that you may a single change and click "Apply changes" to check the result. Then make another change and check it again.

Editing controls

Cropping Your Image

Your crop size can only be as big as the optimized image, so set the size of your image first, before you crop.

  1. Click the "Crop Image" link above the image.

Note: If you don't like the crop or need to resize first, click "start over." This resets all settings.

Crop image link
  1. Click and drag the little squares to set the crop area. (You can see the crop size in the boxes above the image.)
  2. The crop size area is reflected above the image and in the New Size box below the image.
  3. Once you have your crop area set, click "apply changes."
Crop box on image

Downloading Your Optimized Image

  1. Click the "download this image" link between the images and the editing controls.
  2. In the popup, navigate to the folder where you want to save your image and click "Save."
download this image link

Go to the Online Site

  1. Pixer:  http://pixer.us

Upload Your Image

  1. Click "Choose File."
  2. In the popup, navigate to your image and select it.
  3. Click "Open."
  4. Click "Upload & Edit."
Uploading an image to Pixer

Resizing Your Image

  1. Click the "Resize" option.
  2. On the left the Resize window is displayed.
  3. On the right the image is displayed at its current size.
  4. Use the slider bar to size the image. You can see the changes on the right.
  5. Click "Apply" when finished.
Resizing an image in Pixer

Cropping Your Image

  1. Select the "Crop" option.
  2. On the left the Crop window is displayed.
  3. On the right your cursor will become a crosshair.
  4. Click and drag on the image. A dotted-line box will appear.
  5. Move the box and/or the lines until you get the crop you want. The size is displayed in the boxes on the left.
  6. Click "Apply" when finished.
Cropping an image in Pixer

Other Options

You can also do the following:

  • Rotate
  • Flip
  • Brightness & Contrast
  • ColorFX (Grayscale, Sepia, Invert, Red, Green, Blue)
  • Sharpen & Blur (It's always a good idea to sharpen an image that you've resized.)
  • SpecialFX (Stay away from this option. We don't use them on our websites.)

Downloading Your Image

  1. Click the "Save" option.
  2. On the left the Save image window will display.
  3. Choose either "JPEG" or "PNG" format.
  4. In the popup, navigate to the folder where you wish to save the image and click "Save."
Downloading an image from Pixer
  • Access to either the training web site or as a web editor to your site.
  • Cascade: Basic I training
  • Photoshop or access to another graphics program or processor (can be online).

Keep in Mind

  • Images publish to the web.
  • Images should be optimized (resolution set to 72ppi)

Naming Convention

  • Keep it short (few words).
  • No special characters, no spaces (use hyphens between words).
  • Cannot start with a number.

Character Limits

  • Title: There are no character limits, but keep it as short as possible while still descriptive.

Definitions:

  • Resolution: Number of pixels per inch. 300ppi is good for print. 72ppi is good for web.
  • PPI:  Pixels per inch.
  • Resize: Changing the actual size of an image in a graphics program. You can reduce the size, but it is not recommended to increase the size because the image can become pixilated.
  • Crop: Allows you to select a portion of an image and discard the rest.
  • Crop Preset: Photoshop and some other graphic programs allow you to save settings so you can use them again.

Summary

UNG follows Section 508 Standards and WCAG 2.0 for web accessibility. If you require the content on this web page in another format, please contact the ADA Coordinator.

Back to Top