Photoshop Elements 7.0
User Guide
IT Services
Image Size and Resolution
Image size and resolution units of measurement
Image size and resolution can be quite a tricky concept to understand so the following information
covers the very basics to enable you to quickly and easily resize images correctly.
The first and most important thing to remember when using images on websites is that all sizes
are measured in pixels.
The second most important thing to remember is that all images on websites should have a
resolution of 72 PPI (pixels per inch). You may hear this referred to as 72 DPI (dots per inch)
which is a unit of measurement used when printing. PPI is the unit of measurement that
Photoshop Elements uses.
Why should I resize my image in Photoshop Elements?
If you were to try and insert an image taken directly from a digital camera into Plone it simply
wouldn’t fit as the pixel dimensions are too large. When inserting images into Plone the system will
allow you to specify a selection of different sizes however this method shouldn’t be used for two
reasons.
1. Firstly the quality of the image will become distorted and will never look as good as an image
resized in Photoshop Elements.
2. The second reason is because of file size, by resizing an image in Plone the image will appear
smaller on the screen but the actual file size will remain the same, making your site slower
to download for your users.
Image resolution for different outputs
Output
PowerPoint
Print
Websites
Word document
to be viewed on
screen
Resolution
required
150 DPI
300 DPI
72 DPI
96 DPI
Image sizes for Plone websites
Small 200px
Large 540px Central
Column (Plone)
This is for photographs that will be placed in the main content
column of a Plone site, the width of the photograph will be 200 pixels
wide, the height will be variable.
This is for photographs that will be placed in the main content
column of a Plone site. The width of the photograph will be 540
pixels and the height will be variable. This option is the maximum
width an image can be when using both left and right portlets.
Page 1 of 4
Photoshop Elements 7.0
User Guide
IT Services
Banner Graphic (Plone)
990x140px
Image Size and Resolution
This is for photographs that will be placed as a banner graphic across
the top of your site. When choosing this option it’s important to
remember to change the crop area. Simply click on the change crop
area link, then within the photograph hold down the left mouse key
and drag a rectangular shape. Please note that due to the dimensions
of the banner images not all photographs will work successfully as
banner graphics.
Left Portlet (Plone) 175px This is for photographs that will be placed in the left portlet. Please
note there is a 10 pixel width difference between images in the left
and right portlets.
Right Portlet (Plone)
This is option for photographs that will be placed in the right portlet.
165px
Please note there is a 10 pixel width difference between images in
the left and right portlets.
If the image you want to use on your website has been taken on a digital camera or downloaded
from a commercial image library the chances are the first thing you’ll need to do is change the image
resolution. If however you’re downloading images from the University image library
(http://assetbank.le.ac.uk) you can select the required use of the image at the download point and
the resolution and size will be set automatically for you.
How do I find out what size my image is?
To check the image size and resolution in Photoshop Elements select Image > Resize >Image
Size from the menu bar. The Image Size window will appear containing the current dimensions of
your image. The example shown below shows the dimensions for an image taken on a digital camera
Width 3000 pixels
Height 2000 pixels
Width 31.76cm
Height 21.17 cm
Resolution 240 pixels per inch
Page 2 of 4
Photoshop Elements 7.0
User Guide
IT Services
Image Size and Resolution
Resize the image and adjust resolution
Choose Image > Resize >Image Size from the menu bar
In the Image Size window follow these instructions to resize your image.
Step 1.
Tick the box for Resample Image. This will allow you to change the pixel dimensions
of your image. A useful tip is to also change the drop down box next to resample image
from Bicubic to Bicubic Sharper, this will keep your image as sharp as possible when
making it smaller.
Step 2.
Tick the box for Constrain proportions. This ensures when you resize your image
the width and height will change in proportion to each other. If this box isn’t ticked
your image will become distorted.
Step 3.
Type in the required resolution into the Resolution box. Make sure the drop down
box to the right is displaying pixels/inch. At this point you should notice that the width
and height in pixel dimensions at the top of the Image Size window will have changed
Step 4.
Enter either a Width or Height for the pixel dimensions required for your image.
Page 3 of 4
Photoshop Elements 7.0
User Guide
IT Services
Image Size and Resolution
If you want to resize an image and crop the image at the same time, for example resize an image
portrait to landscape refer to the Cropping Images tutorial.
Version Control
Version Name
V1
Lisa Barber - Geology
Dave Wickins
Jeff Wilkinson
Nevin Moledina
Hazel Guyler
IT Services
Date
23/11/10
Description
First version created
Page 4 of 4