Sometimes when designing a website you may have an image or photograph of an object that you wish to remove from its background and then display it independently of that background.
The following steps will allow you to remove an image from its background using Photoshop CS4 and save it in a format permitting background transparency. On completion of the tutorial you will be able to place images devoid of their background into web-pages and other applications.
Step 1) Open Photoshop and go to ‘file’, ‘open’ and then navigate to the image that you wish to remove from its background.
Step 2) In your ‘Tools’ Menu bar (If you cannot see this go to ‘Window’ in you main menu and make sure that ‘Tools’ is ticked in the drop down list) select the ‘Quick Selection Tool’. If you cannot see this tool then you will need to right click on the ‘Magic Wand’ tool and select it from the drop down list (alternatively you can use the short cut method by hitting the ‘W’ key on your keyboard).
Step 3) In the ‘Options’ tool bar (If you cannot see this go to ‘Window’ in you main menu and make sure that ‘Options’ is ticked in the drop down list) you will also see two icons of the ‘Quick Selection’ Tool, one with a ‘+’ and one with a ‘-‘ sign next to it. Select the one with the ‘+’ sign next to it. Hover the tool inside the parameter of the object you wish to remove from its background and whilst holding the left mouse button, drag the tool towards the outside edges of the object. You will see a dashed line appear. This line represents the selected area of the image that you wish to remove. The aim is to get this line to fit the parameter of the object you wish to cut out.
N.B. You will need to experiment with brush sizes in order to get an accurate line. You can do this by going to your ‘Options’ tool bar (mentioned above) where you will see the word ‘Brush’. Next to ‘Brush’ is an arrow. Click on the arrow and the brush menu will appear. In here you will be able to change the ‘diameter’ of the brush to a size to suit the object you wish to remove from its background.
If your line wonders beyond the parameter of the object you are trying to cut out, you will need to change your tool to the ‘Quick Selection’ tool icon with the ‘-‘ sign next to it in you ‘Options’ tool bar. Where your line has overstepped the parameter and is selecting parts of the background you do not want to be in the selection, hover the tool outside the parameter and again click and hold the left mouse button dragging the tool towards the object parameter pushing the selection line back.
Step 4) Once you are happy with you selection, go to ‘file’ and then ‘new’. Modify the document so that it is large enough to accommodate your selection and set the ‘Background contents’ to ‘Transparent’.
Step 5) Go back to your image and from your ‘Tools’ menu bar, select the ‘Selection’ tool. With the tool selected hover inside your selection, click and hold the left mouse button whilst dragging the selection up to the tab of your new file. You will then be able to drop the selected image into the new file.
Step 6) In your new file, from your main menu select ‘Image’ and then from the drop down menu select ‘Trim’. In the ‘trim’ window ensure that ‘transparent pixels’ is selected and ‘top’, ‘bottom’, ‘left’ and ‘right’ and checked. Click ‘OK’.
Step 7) Now go to ‘file’ and then ‘Save For Web & Devices’. Ensue that the file type on the right hand side drop down menu is set to.PNG and then click save. This will ensure that your image is saved on a transparent background. That’s it, your done!