Education & information support division
Introduction to Photoshop Elements
Document No. IS-075
What is Photoshop Elements? 1
The Photoshop Elements interface 1
The History palette 2
Navigating your image 4
The Navigator palette 4
File formats 6
The Select menu 8
Selection tools 8
Selection options 9
The Crop tool 9
How size is defined 12
Resizing an image 13
Changing document size/resolution 13
Changing the pixel dimensions 15
Resizing for the Web 15
Changing the canvas size 15
Saving for the Web 16
First steps 16
Using Save for Web 16
JPEG options 17
GIF (PNG8) options 18
Appendix 1 19
Photoshop and Photoshop Elements - Differences 19
Learning more 21
Getting help with Photoshop Elements 21
This workbook is intended to give you an introduction to Photoshop Elements and allow you to prepare an image for use in screen formats (for the web, PowerPoint etc.). It is by no means a comprehensive guide to all that Photoshop Elements can do, but should cover enough to allow you to make basic changes to an image, resize it and save it in an appropriate format.
This guide can be used as a reference or tutorial document. To assist your learning, a series of practical tasks are available in a separate document. You can download the training files used in this workbook from the IS website at: www.ucl.ac.uk/is/documents
What is Photoshop Elements?
Adobe Photoshop Elements is an image-editing package designed to allow you to edit and improve images acquired from various sources, to prepare them for use on the Web, in documents or for printing. It includes many of the tools of its parent package – Photoshop – but has a simpler interface and lacks some of the more advanced features.
The tools include those necessary to resize, edit and improve image quality, and then save in an appropriate format for use online, or for printing. It should be noted that the quality of an image is dependent, to a large extent, on the original source of that image. It is therefore important to consider the purpose of your image before capturing it, and to ensure you use an appropriate resolution, be it on a scanner or digital camera.
The Photoshop Elements interface
These contain the usual options to save, print, copy and paste, change views and access the help. They also contain a large number of Photoshop-specific tools.
Helpful hint: WTS users will need to open the help system through the Windows Start menu.
This contains shortcut buttons for file operations (new, load, save etc.), clipboard functions (cut, copy and paste) and undo.
This is a context-sensitive menu, which displays options for the currently selected tool. For example, when the Brush tool is selected it allows you to change the brush size, mode and opacity.
This set of tools allows direct manipulation of an image. The tools are grouped by type and individual buttons may give access to a range of related tools: click and hold on any button with a little arrow in the bottom right corner and a pop-up menu will appear showing the related tools and allow you to select one by clicking on it.
Holding the cursor over a tool will cause a tooltip to appear – this gives the name of the tool and also displays a shortcut key in brackets. Tapping this key on the keyboard will switch to the associated tool. Holding down Shift whilst tapping the key will cycle through the related tools, where applicable.
The bottom part of the Toolbox is also used to select colours. The foreground color will be used by the Brush, Pencil and Paint Bucket tools. The background color will be used with the Gradient tool (in combination with the foreground color), can be selected as the starting colour of a new image and may also be used to replace any area that is deleted from an image. You can reset the colours to the default black and white and also switch the foreground and background colours around.
Note that changing these colours will not have a direct effect on existing colours within an image.
This displays information about the currently selected image (from left to right):
Magnification | document dimensions (clicking on the black arrow gives alternative options) | tip and shortcuts for the currently selected tool.
There is a range of different palettes, any of which can be dragged to or from the Palette Well. They have various functions – from selecting colours or fill types to adjusting layers or accessing the document’s history.
This is where the image you are editing is displayed.
The History palette
Strictly speaking Photoshop Elements has only one undo – if you use Edit | Undo, you then only have the option to redo – if you want to go further back than one step you’ll need to use the History. You can do this in two ways – either using the Edit menu’s Step Backward and Step Forward commands (or associated keyboard shortcuts) or using the History palette (Window | Show History).
The History palette by default displays the last 20 changes made to an image (e.g. selections made, paint strokes applied etc.) You can click on any of the listed changes to switch the image back to the state it was in when that change was applied. All the following changes remain in the list until you do one of two things: you can choose to delete all following steps, or carry out a new change on the image, at which point the history will be cleared from that point and replaced with the new action.
Navigating your image
When working on an image you may need to zoom in and out to work on detailed areas or to see the entire image, and pan around to different parts of the image if it doesn’t all fit on screen.
The magnification of an image is shown in various locations – notably in the Title bar of the image (or the Photoshop Elements program bar if the image is maximised) and in the Status bar at the bottom left. The figure is shown as a percentage with 100% being actual size.
To zoom in and out you can use the Zoom tool on the toolbar. By default this will zoom in when you click on the image. You can also click and drag around the area you want to zoom in on. To zoom out, hold down the Alt button on the keyboard – the magnifying cursor will change to show a minus sign – and click on the image.
This has options to zoom in and out as well as to:
Fit to Screen – Changes the zoom setting so the entire image is displayed on screen.
Actual Pixels – Changes the zoom setting to 100%.
Print Size – Displays the image on screen at the size it will appear when printed out (see Resolution in the Resizing section of this workbook for more details).
It’s well worth learning these keyboard shortcuts as they’ll save you a lot of time:
Zoom in: Ctrl + +
Zoom out: Ctrl + –
Fit to Screen: Ctrl + 0
Actual Pixels: Alt + Ctrl + 0
When working with a large image that doesn’t all fit on screen at the same time, or when zoomed in on an image, it is helpful to be able to pan around. This allows you to move to a part of the image so it is visible in the working area.
Use the Hand tool (keyboard shortcut: H) and click and drag on the image to move it around.
Alternatively whilst any other tool is selected, hold down the Space Bar, which will invoke the Hand tool for as long as it is held.
The Navigator palette
This palette shows a thumbnail of the entire image and a red box, which represents the area of the image displayed in the work area. Zoom settings can be entered directly or adjusted with the slider. You can also pan around the image by clicking and dragging the red box to the desired location.
Open it from the Palette Well; or from the menu bar use
Window | Navigator.
Which file format?
There is a vast array of different graphics file formats and it’s important to make sure you save an image in a format appropriate to the task it’s designed for. You also need to consider whether the image needs to be transferred to a different piece of software or to another computer (which may be running a different operating system) and whether the chosen format will be supported.
It’s not practical to cover all existing file formats. Here are some common formats available in Photoshop Elements:
Photoshop proprietary format. Stores transparency, layer information and vector objects (e.g. text).
Uncompressed TIFFs are a good choice for storing high quality images and are recognised by many graphics packages and operating systems. They can also support layers, transparency and vector objects.
Windows OS image format. Not a good choice of format unless the image is being used by the Windows OS – e.g. as a Desktop image.
A compressed format ideal for photographic images. Not suitable for images with flat colour.
Another compressed format. Good for logos with flat areas of colour as well as line-art. Not suitable for photographic images. Supports transparency and also animation.
A relatively new format suitable for both photographic and flat images. Not all features (e.g. transparency) are supported by all web browsers.
To save an image in another file format:
Choose Save As from the File menu (for Web formats it is recommended to use Save for Web – see the Saving for the Web section – page 16).
On the Format drop-down select the format you wish to save in.
Depending on the chosen format, you may be prompted to select various other options including the operating system format, compression settings and so on. In the majority of cases the default options are the most appropriate.
Helpful hint: You should be aware that by saving in a new format you create a copy of the original image. Unless you rename the file the only way to distinguish it will be through the file’s extension. When using an image you should ensure that you select the correct file type, for example when putting an image online.
Selections serve two major purposes: they are used to select an area to cut or copy from an image to the Clipboard and they are used to limit a tool’s effects: once a selection is made actions can only be carried out within the selection.
The Select menu
This menu has various options for working with selections. Some will be greyed out if no selection has been made:
All – select the entire document.
Deselect – remove any existing selection.
Reselect – restores a deselected selection.
Inverse – invert the current selection so that everything outside it becomes selected.
If at any time you find that a tool or effect is not behaving correctly, it may be that you already have an area selected. A simple way to check is to see if the deselect option is available – if it is, there’s a selection present: click on deselect to remove it. If you can’t see the selection check that View | Selection Edges is ticked.
The Marquee, Lasso and Magic Wand tools are all used to create standard selections. The Crop tool is used to remove all unselected portions from an image. The Move tool is used to move an existing selection or layer element. The Type tool is used to add text to an image.
Marquee selection tools
There are two choices of marquee selections available: rectangles and ellipses – these can be constrained to create square and circular selections.
To create a selection:
Select the desired shape from the Toolbox.
Click at the point where your selection will start and keep the mouse button held down.
To constrain the shape to a square or circle, press and hold down the Shift button.
Drag the mouse to increase or decrease the selection area.
When you are happy with the selection, release the mouse button.
You should now see ‘marching ants’ around the area you selected. This area can now be cut or copied to the Clipboard and any effects or tools used on the image will only be applied to this area.
here are various options available when using the selection tools. The general options (from the Options bar) are shown below:
Create new selection
Each time a new selection is created any existing selection is lost.
Add to selection
Any new areas selected are added to the current selection. Selections do not need to be connected.
Subtract from selection
Select part of an existing selection to remove it. Selecting outside of an existing selection will have no affect unless no selection exists (in which case a new selection is created).
Intersect with selection
Works in a similar way to Subtract from selection except that when you select part of an existing selection this will remain and anything outside it will be removed.
Use this option if you want to give your selection a blurred edge – before making a selection enter a value in pixels. The amount of feather required will correspond to the size of the image.
Switching this on will avoid jagged edges in curved areas of your selection.
The Crop tool
This is used when you wish to select an area of an image and discard everything outside that area. It’s possible to achieve this by pasting a selection into a new document, but the Crop tool is quicker:
Click and drag to select an area (you can only make a rectangular/square crop).
Everything outside the selected area will appear darker – this region will be lost when the crop is completed.
Use the handles on the selected area to resize it. It can also be rotated by moving the cursor towards the outside edge of the selection until it changes to a curved double-headed arrow.
Press the Escape button on the keyboard at any time to cancel the crop process.
When you have finished adjusting your selection, double-click inside it to complete the crop. Everything outside the selected area will be removed.
Once you have selected an area to crop, use the following options as required:
Shield – this option darkens the area that will be lost. On by default.
Color – the colour of the shield.
Opacity – the opacity of the shield.
The Image | Rotate menu contains various useful tools for changing the orientation of an image (or part of an image), most of which are self-explanatory. The first set (from Free Rotate to Flip Vertical) is designed to be used on a selection or layer and will be unavailable if only the background layer is selected. (Layers are covered in Getting More from Photoshop Elements.)
Allows you manually to rotate the selected area or layer element.
Move the cursor just inside or outside the corner of the bounding box until it changes to a curved double-headed arrow.
Click and drag to rotate the image.
When you are happy with your changes, double-click within the bounding box to apply the changes.
Allows you to rotate the canvas (i.e. the entire image) by a set number of degrees.
Enter the value and direction in the dialog box.
The canvas will be enlarged to accommodate the rotated image.
Helpful hint: If you’d prefer to do this visually select the entire image (Select | All), and use Free Rotate. You may wish to increase the canvas size before doing this (see Resizing).
(Canvas) 90 Left/Right, 180
These options will all rotate the selection or canvas in the direction and by the amount indicated.
Flip (Canvas) Horizontal/Vertical
These will mirror the selection or canvas on the horizontal and vertical axis respectively. This is useful for when slides have been scanned the wrong way round, though it should be avoided on images with text as the text will become mirrored.
Straighten (and Crop) Image
These tools are designed to straighten an image automatically, for instance one that has been scanned in at an angle, and crop any empty space if desired. It works best if there’s empty space around the image and good contrast between the image edge and the background.
How size is defined
Image size can potentially refer to different things depending on the context:
Measured in bytes. This defines how much disk space is required to store the image. The more detail stored in the image, the larger the file size.
Measured in pixels. This is the number of pixels used to store the image information. More pixels means more detail can be stored, but also means a larger file size.
Physical / Document dimensions
Generally measured in centimetres or inches. This is determined by a combination of the pixel dimensions and the resolution of the image.
The resolution of an image is measured in dots per inch (dpi). It is usually dictated by the method used to render the image – most screens display at around 72dpi whilst printers generally use at least 300dpi.
A pixel is equivalent to a dot, as in dpi, so an image’s physical dimensions can be calculated by dividing the pixel dimensions by the resolution:
physical size =
So when printed at 300dpi an image that is 1200 by 900 pixels will be (1200 divided by 300) wide and (900 divided by 300) tall = 4 by 3 inches.
When displayed on a screen at 72dpi the same image will be (1200 divided by 72) wide and (900 divided by 72) tall = 16.7 by 12.5 inches.
This highlights an important point – to print an image with the same dimensions as it appears on screen will require a lot more pixel information. If you try to print an image at the same dimensions without this additional information the printer will basically stretch it out; and the further it has to stretch it, the poorer the quality will be.
Use View | Print Size to see the size of the image when printed out at the defined print resolution.
Whenever you change the pixel dimensions of an image it is recommended you make a backup of the original.
Since pixels comprise an image’s data, any change to the number of pixels will mean a change to the original data.
Reducing the number of pixels will mean losing data – which it will not be possible to recover.
Increasing the number of pixels will require Photoshop to use existing data to interpolate the additional pixels. This will generally result in a slight blurring of the image and is in no way a substitute for capturing more data in the original image.
Resizing an image
To resize an image from the menu choose Image | Resize | Image Size.
Before going any further you need to decide if you want to change the number of pixels in the image. To do this, ensure there is a tick in the Resample Image box. If you want to leave the number of pixels unaffected remove the tick from this box.
If resampling is switched on, there are three resampling methods available: Nearest Neighbor, Bilinear and Bicubic. The default method is Bicubic – this will result in the smoothest interpolation and is recommended.
onstrain proportions – Ticking this ensures that the image aspect ratio remains unchanged when the width or height are altered.
Changing document size/resolution
When you remove the tick from Resample Image the pixel dimension settings become unavailable – you can then change the document’s physical dimensions or its Resolution:
By changing the Resolution Photoshop will take the pixel dimensions and calculate the resulting physical dimensions.
If you change the physical dimensions Photoshop will calculate the Resolution required to render the image at those dimensions with the pixels available.
So changing either the physical dimensions or Resolution will automatically result in a change in the other.
The drop down boxes to the right allow you to change the measurement units being used and also switch between pixels per inch and pixels per centimetre. As dpi is measured in inches it’s recommended to leave this on inches.
Helpful hint: It is important to ensure you set the right resolution for the intended task, particularly if the image is to be printed. If you print an image at a low resolution you may increase the size of the print, but this will be achieved at the cost of quality. The best way to get large print sizes is to ensure you have enough pixels in the image from the outset.
Changing the pixel dimensions
When Resample Image is ticked, you will have the option to change the pixel dimensions.
Changes can still be made to the physical dimensions and Resolution but they will no longer affect each other – instead the pixel dimensions will be adjusted to achieve the desired physical dimensions or resolution. Alternatively you can change the pixel dimensions directly by entering a number in the appropriate box.
The drop-down boxes to the right of the pixel dimensions allow you to switch to percentages so you can alter the size proportionately. So if you wanted to halve the size of your image you could switch it to percentage and put 50 in the box on the left.
Resizing for the Web
When working with images for the Web you don’t need to worry about document dimensions or resolution – browsers don’t use these values to display images. So all you need to change is the pixel dimensions – doing this will require the image to be resampled.
Changing the canvas size
Making changes to the canvas size will simply add a border to the existing image or cut a section of the image away – it will have no effect on resolution, though it will change the pixel and document dimensions.
From the Image menu select Image Size | Canvas Size.
Enter the required dimensions – use the drop-down boxes on the right to change the measurement units. The dimensions are not constrained, so it is possible to change the aspect ratio in the resulting canvas size.
Set the Anchor point. If this is left in the centre, a border will be added / subtracted from all sides of the image. Otherwise it will be added / subtracted from the opposite side/s to that/those selected.
Helpful hint: When reducing the canvas size you will be warned that clipping may occur – this means that some of the existing image will be lost: you won’t be able to recover it, so proceed with caution.
Saving for the Web
Before the process of saving an image for the Web can begin, there are several preliminary steps to follow:
Resize the image appropriately
You shouldn’t resize an image within an HTML editor such as Dreamweaver MX, as this doesn’t actually alter the size of the image itself – only the size at which it is displayed – so the file size is not reduced. Instead the image should be set to the exact pixel size required in your site layout.
If you want to display a large image on a Website you should consider the likely screen settings of a site’s visitors. If their screen is set at 800 x 600 this will limit the maximum size of the image, if it is all going to fit on screen at the same time. Allowing a border of a hundred pixels around the image to take account of the browser’s menus etc. means your image probably shouldn’t be any larger than 500 x 400 pixels.
Decide on the appropriate Web image format
This choice depends on the type of image: Any photographic images should be saved in JPEG format, whilst images with large areas of flat colour (for instance logos or banner images), or line-art, are best saved in GIF format. If you need to use the same image on several pages with different background colours you could use a GIF and give it a transparent background.
The PNG format is in theory suitable for any image type. However, as it is a relatively new format not all browsers support all of its features.
Helpful hint: Choosing the appropriate format is vital, as each one is designed to achieve the best level of compression whilst maintaining image quality – choosing the wrong format may result in loss of quality or unnecessarily large file sizes.
Using Save for Web
From the File menu choose the Save for Web option.
The resulting dialog box displays two versions of your image: the original, and a preview of the optimised image. Beneath the preview you will see the optimised file size and the likely download time on a particular speed of modem. On the right-hand side are the format and compression options.
You can navigate around your image using the Hand and magnifying tools as in the normal workspace. It is recommended to assess quality adjustments with magnification set to 100%.
This menu can be used to change the preview display.
Browser Dither will show the image as it will appear in a browser limited to Web safe colours – these limitations are now relatively rare and it’s fairly safe to assume that most people will not see your image as it appears in this preview.
The colour settings relate to how colours will appear on different platforms and when using colour management. Macintosh computers tend to display images a little brighter than PCs, so if you have a very light image on a PC it may be worth checking to see that it will display adequately on a Mac. Conversely if you have a dark image on a Mac you should check that it won’t be too dark on a PC.
Size/Download Time – will show the predicted download time of your image for the selected connection speed. A sensible setting is 56.6 Kbps Modem.
Clicking this button will preview your image in the selected Web browser.
This drop-down box contains a range of preset options for different file types. You can use one of these as is, or customise it. Alternatively, select an appropriate file format and then adjust compression settings as follows:
To change the quality setting and compression rate, either choose one of the predefined settings from the drop-down box (i.e. low, medium, high, maximum) or use the slider on the right to increase or decrease the setting. Look at the optimised view and file size and try and get a good balance between quality and file size.
Optimised – tick this to achieve slightly better compression (not supported by some older browsers).
Progressive – this will result in an image that displays progressively in the browser. A low quality version of the image will appear at first and will gradually reveal to the final image.
Matte – if your image contains any transparent areas this colour will be used to fill them in, as transparency isn’t supported in JPEG images. You’ll have more control over this if you remove any transparency within Photoshop before saving.
ICC Profile – this stores a colour profile with the image, thereby increasing the file size, and is only likely to be useful with images where colour fidelity is vital and where the viewer’s machine has been properly calibrated (which is very unlikely).
GIF (PNG8) options
To increase the level of compression in a GIF image, you restrict the number of colours used to display it – the fewer colours, the smaller the file size and the lower the quality. Set the number of colours with the Colors drop-down, or enter the number directly in the dialog box. Photoshop will generate an optimised colour palette, using the best possible range of colours (within the set limit of colours) to represent the image.
Interlaced – Similar to the progressive option in JPEGs. A low quality version of the image will be displayed while the full version is loading.
You can change how the optimised colour palette is generated by choosing between Selective, Perceptual, Adaptive, Web and Custom. Selective is usually the best option, though you may find it difficult to see any difference except with Web, which will only use Web safe colours and is likely to result in poor quality.
The default value for this option is Diffusion.
When you reduce the number of colours used in an image, Photoshop will dither the colours to try and maintain fidelity: it will use a pattern of colours to give the impression of more colour being used in the image. The dither options allow you to change the way this pattern is generated and to what extent it is applied.
Select the desired dither method in the drop-down and, when using Diffusion, the amount (as a percentage) it is applied, using the slider.
(Not all browsers support PNG transparency.)
Ticking the Transparency box will preserve any transparency present in the image.
If Transparency is unticked any transparent areas of your image will be replaced with the colour selected here.
If Transparency is ticked the colour selected here will be used to anti-alias the edges between colour and transparency resulting in smoother edges. This may, however, result in ghosting when the image is inserted on a page with a different background colour. Choosing None will avoid this problem but will result in aliased (jagged) edges.
Animated GIFs can be created in Photoshop Elements by putting each animation frame on a separate layer. Animation is beyond the scope of this course.
Photoshop and Photoshop Elements - Differences
This workbook is based on Photoshop Elements 1 (the version available on WTS). The full version of Photoshop has more tools than Photoshop Elements and may also include additional options for some of the tools available in both. Despite this, everything covered in this workbook should work in the same way in Photoshop. Most differences will involve additional options or slight changes in menu locations. Changes relevant to the topics covered in this workbook are detailed below.
Photoshop doesn’t include a Standard toolbar. Most options on this toolbar are available through the File and Edit menu and keyboard shortcuts.
The Toolbox is laid out a little differently and Photoshop includes more tools.
The Palette well may be empty. Palettes can be opened from the Window menu and dragged into the Palette well as required.
This is not strictly speaking a difference between the two versions of Photoshop, but more a question of different behaviour which may cause confusion. By default (in the WTS version of Photoshop Elements at least), TIFF files are not set up to store layer or transparency information when saved. Whilst layers are not covered in this workbook it still seems sensible to detail how to fix this:
Go to: Edit | Preferences | Saving Files
Under File Compatibility make sure Enable advanced TIFF save options is ticked
Layer information can now be saved in TIFF files.
History – Undo/Redo
The main difference to be aware of is that in Photoshop Ctrl + Z is mapped to Undo rather than Step Backward in the History. This means repeated use of Ctrl + Z toggles the last performed action, rather than undoing several actions. To do this you need to use Step Backward Alt + Ctrl + Z and use Step Forward Shift + Ctrl + Z to Redo several steps.
Photoshop also has a more advanced History palette which allows you to take snapshots of a particular step. This allows you to revert to this step at any point – i.e. it is not affected by the History size limit.
Photoshop splits the options available in Photoshop Elements’ Image | Rotate menu into separate menus:
Image | Rotate Canvas | … – rotate or flip the whole image. Arbitrary is equivalent to Canvas Custom in Elements.
Edit | Transform | … – rotate or flip a selection or layer.
Edit | Transform | Rotate – equivalent to Free Rotate in Elements.
Straighten is not available in Photoshop.
The Image Size and Canvas Size options are available directly under Image | ... rather than Image | Resize | ...
Central IT training
Information Systems run courses for UCL staff, and publish documents for staff and students. Photoshop/Graphics related documents include:
Introduction to Photoshop Elements
This course is for new users and is geared towards preparing images for use on screen – e.g. web, Powerpoint etc.
Getting more from Photoshop Elements
This 3.5hr course tackles more advanced features such as layers, as well as a range of tools to improve image quality.
Using images in documents
Additional booklet with information on how to achieve good print results from images inserted into documents.
Open Learning Centre
There is also a comprehensive range of online training available via TheLearningZone at www.ucl.ac.uk/elearning.
Getting help with Photoshop Elements
Photoshop Elements has a help system which you can call upon at any time while you are working on a Website. Under WTS this must be opened from the Start Menu using the shortcut in the Photoshop folder.
A Web search using a search engine such as Google (www.google.co.uk) can also retrieve helpful Web pages. For example, a search for photoshop selection tutorial would return a useful range of tutorials.