Documentation – working with images

Documentation home

Images are key to adding interest to the website. Most if not all pages on the IDRC Alumni site have images. This page will tell you how to add images to a page.Typically, you will need to crop and/or resize images before you can add them to a page. These two tasks can be done separately or, in some cases, simultaneously.

NOTE: the images below of the software are indicative, but may not match exactly what you will see using your own software.

Why crop an image

There are two reasons to crop an image:

It may be far too large or contain more than you wish to portray. Similarly, when simply resized, it may be too small. Cropping will help keep the main items in the image larger when space is limited.
Images should usually portray one thing, and one thing only. e.g., if the image is of a person, the background should be minimal, and not distract from the person.

Cropping and Resizing Images simultaneously

You can both crop and resize an image if BOTH the width and height of the desired resulting image are known.

The best tools for doing this are Adobe Photoshop or Adobe Photoshop Elements (referred to below as simply “software”). Proceed as follows:

Select the cropping tool if it isn’t already active, by clicking on . The cropping tool should then then be displayed below the Adobe logo in the menu bars.
Set the size (width and height) in pixels in the width and height fields in the top left of the menu bar:

Note: some software may look more like this:
For example, to set the size of the final cropped image to 300 pixels by 187 pixels (the size of images on the home page), fill in the width and height fields as shown:
Now crop the picture. Place the cursor (the cropping tool) in either 1) the top left corner of what you want to keep, and drag the cursor to the bottom right corner of what you want to keep, or 2) the bottom right corner of what you want to keep, and drag the cursor to the top left corner of what you want to keep. The selected area will be highlighted and surrounded by a dashed border with handles in the corners (and in some software also in the centre of each of the four sides ). e.g.

You can drag any handle to improve the cropping of the image.
If the result is what you want, click on . Otherwise, click on and repeat step 4. If acceptable, the final image will look like this (and the size will be adjusted as per the settings entered in step 3 above):

Cropping Images

To crop an image without concern for the final size, proceed as follows:

Select the cropping tool if it isn’t already active, by clicking on . The cropping tool should be displayed below the Adobe logo in the menu bars.
Click on in the menu bar if there is a button). Otherwise, ensure that the width and height fields are empty:
Otherwise, make sure that the width and height fields are empty.
Now crop the picture. Place the cursor (the cropping tool) in either 1) the top left corner of what you want to keep, and drag the cursor to the bottom right corner of what you want to keep, or 2) the bottom right corner of what you want to keep, and drag the cursor to the top left corner of what you want to keep. The selected area will be highlighted and surrounded by a dashed border with handles in the corners and in the centre of each of the four sides. e.g.

You can drag any handle to improve the cropping of the image.
If the result is what you want, click on.

Resizing Images

To resize an image, proceed as follows:

Click on in the menu:
Click on in the drop-down menu:
Click on in the subsequent menu:
You will see:
Make sure that the field is checked. The in the above image indicates that has been checked.
Set EITHER the width or the height field to the desired value. Do not set both fields, or the image will become distorted. When you change the width value, the height value will automatically change. Conversely, when you change the height value, the width value will automatically change.
Click on