Touching Up, Preparing and Optimizing Images for your Website

Touching up pictures for your website can take just a few minutes of your time and can greatly enhance your ecommerce website, gallery or images added to your web pages or blog.

I will run you through a number of simple techniques in order to make a difference to your chosen pictures very quickly.

The screenshots I will show throughout this tutorial are of me using Adobe Photoshop CS5, however all techniques I am using are also available using previous versions (at least CS3) and Elements 7 – the position of the tools might’ve slightly changed but should be in the same area.

When preparing images for a gallery or ecommerce website it is recommended that you choose a picture size that you can apply to all pictures.   Ecommerce sites these days will usually have zoom or expand features when you hover over / click on the product image it brings up a larger image of the product.  The size of this image depends of the picture that you upload onto your website.   Also, if someone is going through a gallery of pictures on your website you don’t want the pictures to be big, small and different ratios.  So, decide – or find out what is the optimal size of pictures for your gallery or ecommerce website.  I would keep them within 800 x 800 pixel dimension so the image easily fits on the screen.

So straight to business and lets start taking some pictures, touching them up and optimizing them for your website:

CHOOSE YOUR PICTURES:

Put the pictures you are working on in a folder on your computer and name that folder.  Keep yourself organized.

OPEN UP PHOTOSHOP:

Whatever version of photoshop you are using – open it up.  Go back to your folder of pictures – choose all the pictures you want to touch up (use Ctrl button to choose multiple pictures by clicking on them) and then drag them into the photoshop workspace (the blank big space in the middle).   Now you’re ready to start editing these pictures.

Explorer-and-Photoshop-Open

FIRST STEP:

The first step in working with an image is to make a copy of it in photoshop.  Go to the layers button and copy the ‘background’ layer.   You can do this by hovering over the layer and right-clicking on it and select duplicate layer.

copy-layer

IMAGE MENU:

Click on image on the top left menu and a sub menu will pop out.   Click ‘auto tone’, ‘auto contrast’ and ‘auto color’.   See what it does to your picture.  Often just pressing one, two or all three of these will lift your picture to a good enough quality so you don’t need to do anything further.

For example – see the image comparison below – that was just by using the ‘auto tone’ option.

Armchair - before      armchair-optimized

[picture of chairs]

It’s a matter of getting used to these.   For example – if you’ve used the ‘auto’ options but your image is still not what quite right – there are many more manual options.  For example – try adjusting the brightness or contrast.  I slightly adjusted the brightness of this lamp as well as the contrast so it gave the crystal a better look as opposed to a rather dull one.

Crystal Lamp crystal-lamp picture optimized

 

[picture of lamp]

After some photoshop work, the lenses and sides of this pair of safety glasses were kind of grey looking.  I adjusted the brightness way up – slightly upped the contrast and then went to exposure and upped it by about .04.   The lenses and sides now seem clear but still visible and the frames have not been adversely affected.

Safety Glasses Safety Glasses Optimized Picture

[picture of glasses]

This table – after using the ‘auto’ options still didn’t look right.  I upped the exposure ever so slightly to make the background a bit whiter.  Then I went to ‘hue/saturation’ and upped the ‘saturation’ of the color ever so slightly – so the browness of the table top showed up a bit better.

Coffee Table  Coffee Table Optimized Picture

[picture of table]

I did the same as above with these statuettes and used the brightness and contrast to get some more definition in them.

Statues of Horses  horse statuettes picture optimized

[picture of horses]

Now for some cropping, erasing, using the paint bucket and the ‘magic wand’ tool.

Sometimes you’ll get ‘pictures’ of products from suppliers in form of a brochure or with some hideous background that does not fit your website.

Below you’ll find the picture I had to work with and what it ended up looking like.  It took me 1 – 2 minutes to do.

beginning-picture finished-picture

Take this example.  I don’t remember what it’s called but I know it’s used for suveying land.    It came part of a brochure and my client is going to sell it.  How to take that picture and make it fit into my website where all pictures of my products have a white background.

For this one of the tools you want to get familiar with is the magic wand tool.   But before this, we need to extract the picture from the PDF and get it into photoshop.

Open up the PDF and get the picture on the screen that you’ll be using.   On your keyboard hit ‘print screen (usually near the top left of your keyboard) – this makes a copy of what’s on the screen currently.  Now go to your photoshop and hit ‘file’ then ‘new’.   Photoshop should automatically size the new file based on your screenshot – so click ‘ok’ and open the new file.   Now paste the screenshot into photoshop by hitting ‘Ctrl and V’.

Now that that’s in there, we’re going to crop (cut) the image so we don’t have all the noise of the brochure but just the picture with some of the background around it.    Do this by hitting the crop button – then going to the top left hand corner where you want to crop and drag (holding the mouse button down) it down to the bottom right hand corner.   When you’re done hit Ctrl and Enter (while holding Ctrl).

crop

Got something wrong?  Hold Ctrl and Alt together and hit ‘z’.   This moves you one back.  Hit it again to move back one more step.

Now you’re ready to use the magic wand tool. The magic wand tool automatically works out objects and borders based on contrast of colors and shapes on the page and marks those areas.  You can then decide what you want to do with these areas – but in this exercise we are just going to delete these areas – as in the background noise – so all we are left with is the object we are selling.  This will not always work but in many cases it works a charm and you will have done your cutting in minutes.

So hit the magic wand tool and click on an area in the background. It will mark it and hopefully marks around the border of your object.  If it has and hasn’t actually gone into your product – just hit ‘delete’ on your keyboard.  This deletes the marked area.   Repeat this process until you have removed all the background attached to the image.

NOTE: After you have completed using the magic wand tool – hit Ctrl D – this cancels out any marked area.   If an area is still marked and you try to use another tool thereafter (such as the eraser tool) it won’t work until you ‘un-mark’ the area.  So you can use this as a debug tool as well – why isn’t my tool working? – ah looks like there’s an area marked still; better hit Ctrl D.

Sometimes you may need to use the ‘erase’ tool.  This tool does what it says – it erases.   You can adjust the erase area by choosing a lower or higher size or the eraser.  You simple right click on your image when you have the eraser selected and it erases the image.

erase-tool

To zoom in (or out) of the image – hit Ctrl + or -.  This way you can get real precise in where you put your eraser tool – or any other for that matter.

In my case – now that I’ve cut out the object that I want (minus the busy background) – I want to add a simple white background – like on most ecommerce websites these days.   Create another layer below the layer you have just been working on.   Change the foreground colour of the colour palette to white – hit the paint bucket icon and by a click of the button the entire area is white with your cut-out object in it.

Now, in my case – I want a square image – 500 by 500 pixels.  But the image is a tall one; so i need to make it into a square.

Go to Canvas Size in the Image Menu.   Adjust the smaller dimension or the two (height and width) to that of the larger so they are both the same and hit okay.  You see that your ‘canvas’ (ie work area) has changed in width (or height).  Fill any blank space with the background colour like I did – just make sure you have the paint bucket selected with your chosen background colour (again, in my case it’s white) and click on the empty spaces.

canvas-size-tool

But now my image isn’t 500 by 500 but actually a bit bigger.   Go back to the image menu and hit ‘image size’.   If you’ve done the above right – you should have the right proportions so now I’ve changed the image size to 500px x 500px (image size option only changes the image size (up and down) proportionally.

change-image-size

Now that your picture is all ready – you want to save it for web and devices.   A few things you need to know here.   Firstly, when adding pictures to a website – you want to ensure that they are the quality you require but that they are the smallest possible size (in terms of bytes) so that your website can load as fast as possible.   If you put images on your site that are 1 meg big; depending on people’s internet connection – this can take a while to load.   The next thing is in naming your image.   If you are interested in people finding your website through organic search – be sure to properly name your image.   If it’s a picture of a green cup with a celtic design – call it ‘green cup with celtic design’.   Don’t call it dsc8734987345 like so many are automatically tagged when taking pictures with your camera.

Okay – click on ‘file’ and then ‘save for web and devices’.    What’s important here is for you to choose the image format ‘JPEG’ (which stands for Joint Photographic Expert Group – and is basically just a standard of compression for an image – there are many different types of images but JPEG is pretty popular).   Then look at what quality you want your picture.   If you toggle from ‘low’ to ‘maximum’ you can see the quality of the picture change from say a bit pixelated to perfect image.   Usually low to medium quality works out just fine but if the image doesn’t look good enough go with high but just remember your page load time and determine page load speed vs quality of picture.  There is usually a happy in between.    At the bottom left of the screen you will find (as you toggle the quality of the JPEG) the size of the image displayed in bytes (bytes by the way is a measurement of units of digital memory).

save-for-web-and-devices-image

 

save-for-web-jpeg-png

 

Once you have determined your ‘save for web and devices’ preferences – click save and make sure you name the image appropriately.

Hope this help and let me know if you have any questions.

Google Rating
5.0
Based on 24 reviews