A simple guide to using Photoshop Elements to change images for the web
Throughout this web site I have used Adobe Photoshop Elements to help me with the images I have used. Here, I describe and illustrate some of the simple 'one click' techniques that are useful for web page builders.
Image resizing
There are several uses for Elements.
The first
and most
important for a web site designer, is to reduce the size of an image to
be suitable for the web. We can talk about size in two ways:
a)
file size
b) actual
image size
The file size is important because it determines how quickly your image can be downloaded by a web surfer. Modern digital cameras can create image files which are far too big for the web. For example, the two images below are the same physical size but much different file size. There is some loss of quality but for the web, this makes little difference due to monitor resolution. The first image will take much longer to download, especially if the person doesn't have super-fast broadband access.
The actual file size of the original image is 1085Kb. So the final web version is 80 times smaller and will download much faster. The image on the left is set on 'maximum' quality, whereas the image on the right is set on 'medium' quality. If you look closely, there is a difference, but you can decide if the fall in quality is acceptable or not. If not, then increase the quality until you are satisfied.
78.82Kb_
12.84Kb
There is another difference: I have also reduced the physical (actual) size of the image. This is to fit on the page in exactly the way I want. Actual size is measured in pixels, and although pixel size depends on the monitor, most monitors have standard settings, for example 840x600.
The original photo was 1600x1200 in size, and is too big to fit on a computer screen, so I reduced the size to 300x225. This reduces both the file size and the actual size. Below are three examples to compare actual size. All are on 'medium' quality setting.
300x225_
200x150_
100x75
Cropping
You may want to use your complete image, looking exactly the same way as the photo was taken. But often you want to change the shape of the image or only use a small section. This is known as cropping, and is very easy using the 'crop' tool, or the 'marquee' tool in Elements.
Below are three possible cropped images. On my site I use the top 'banner' shape very often.
600x90
300x200_
50x200
Quick effects
Elements has a number of 'one click' correction effects that can enhance your image or change it beyond recognition. In the 'Quick Edit' area, as well as a one click 'Smart fix' button, there are some sliding buttons that allow major contrast and colour changes.
Contrast
low
mid-tone contrast
high
contrast
Colour
You can change the colour saturation, from monochrome to intense colour. You can change the colours themselves, or the temperature or tint of the image. Take a look below. Again, these are very simple 'one touch' changes.
Saturation
minimum colour
saturation
maximum colour
saturation
Hue
hue: purple
hue: green
Temperature
temperature: red
temperature: blue
Tint
tint: green
tint:
magenta
Filter effects
Elements has 'filters' that allow you to add artistic effects to your image. These could be watercolour effects, or ink pen, or chrome metal, glass, or many others. Your only limit is your imagination as Elements does all the hard work for you. Take a look at these examples.
ink
outlines
dark
strokes
cutout
diffuse
glow
Combined effects
Here is a finished example of the changes that Elements can make in seconds to any photograph.
original resized image
ready for the web