RESOURCES  UNSW EDUCATIONAL DEVELOPMENT & TECHNOLOGY WEBSITE
Flexible EducationWeb & Media ProductionWebCT @ UNSWLearning Resource Catalogue
Web & Media Production
UNSW Educational Development & Technology Centre RESOURCES home RESOURCES home
 
    

 

Producing Content for the WebWeb Design & ConstructionAccessibility in Web Design

Visual content

Issues for visual content
Image production
Image acquisition
bullet Image manipulation
Image creation

Resizing and cropping

Adjusting sharpness
Selective enhancing
Adding text
Summary, activities & explore

Resizing images for web use is one of the main functions of image editing software - even the most basic utilities will do this.

As discussed in Using a flatbed scanner, it is recommended to scan images at a larger size and better quality than the final image, so scanned images will generally need to be resized for web use.

In Photoshop the resizing tool is available via 'Image:image size'. It gives the option to change pixel dimensions, document size and resolution, and the choice to resample or not. Choosing not to resample the image will constrain the file size (pixel size) of the image, while allowing adjustments to the document size/resolution ratio. In some software this option is labelled 'constrain file size'.

It is also possible, within the 'Save for Web' settings, to resize your image ('Image size' tab).

In Fireworks the resizing tool is available via 'Modify:image size' and gives the same options as Photoshop. Other image editors may have slightly different ways of accessing this function

As discussed in Image resolution, it is the pixel measurement that is critical to screen size, although you may prefer to also use a 75ppi resolution to approximate screen resolution.

The 'cropping' tool is located in the toolbox (See EXAMPLE). Clicking and dragging a rectangle selects the area to be saved. 'Canvas size' in the menu performs a similar function, allowing you to key in the size required.

In some software, a 'scale tool' is available in the toolbox.

 

EXAMPLE
Photoshop toolbox

EXPLORE
Resizing images

http://www.scantips.com/basics2e.html

 

 

 
 
 
 

 

UNSW Educational Development & Technology Centre RESOURCES home RESOURCES home