Have you ever needed to edit a logo to match your website’s colour scheme? Or cut out a headshot for a presentation you’re working on? Follow these simple steps to remove the background from an image free in less than 5 minutes.

This visual ‘how-to’ guide is geared toward simple graphics such as logos or photographs shot on clear, plain backgrounds. For images or graphics with more complex compositions you may need to use a different technique.

Source your image

To get the best results possible you’ll want to start with the highest quality image you can. If you’re working on a logo or graphic this means sourcing the image directly from the designer. If you’re working on a photograph, then this should come from the original photographer.

If that’s not an option you can purchase photography from sites such as iStock or Getty. Alternatively you can use Google Images but make sure you have permission to do so and that you’re saving a high-resolution version. You can filter your search results to larger images by using the Size dropdown menu found under Tools.

You may be able to obtain a company’s logo from their website (so long as you have permission to do so) by right clicking on it and then selecting Save Image As… to download it.

2. Open your image

First head over to PhotoPea.com then either drag and drop your image from step 1 into the window or select Open from the File menu in the upper left to browse your device.

3. Select the Magic Wand tool

Select the Magic Wand tool from the toolbar on the left hand side. This can be accessed via a long click on the Object Selection tool to open a flyout menu which contains the tool.

Once selected you’ll need to adjust a few settings from the top bar to suit your image. The first of these is the Contiguous option. When this is enabled, only pixels of the same colour that are touching each other will be selected by the tool. When disabled then all pixels of that colour will be selected regardless of whether they are touching or not. As a general rule you’ll want to keep this enabled for photographs, but disabled for logos although your results may vary.

The only other setting that may require tweaking is the Tolerance setting which controls the sensitivity of the Magic Wand tool. When making a selection, the tool will assess its colour and then look for more pixels in the image whose colour values are within the specified tolerance range. The setting has a minimum value of 1 and a maximum of 100. A lower tolerance means less pixels are selected and vice versa for a higher tolerance. The default setting of 10 works in most cases but again your results may vary.

4. Remove the background

Using the Magic Wand tool, begin selecting areas of the background. Your selection will appear with a dashed border and can be removed by pressing Backspace or Delete on your keyboard. For simple compositions such as logos on a flat colour you may only need to make one selection. However for more complex images like the one pictured it’s likely you’ll need to make multiple selections and deletions.

Areas of the image which have are now transparent are indicated by the chequerboard pattern. Any jagged edges or leftover pixels can be addressed either by undoing your selection (Ctrl/Cmd + Z) and adjusting the Tolerance as detailed in step 3 or alternatively using the Eraser tool.

5. Save your image

Once you are happy with the results you will need to save your new image. Select File from the upper left then Export As > PNG. The PNG file format is necessary to preserve the newly created transparency which will be lost if exported as the more common JPG file format.

The dialogue box that appears will allow you to set the final image’s size and quality. The specifics of this will depend on its particular application.

Saving images for the web is all about striking a balance between good image quality and small file sizes. If you’re not sure of the dimensions you need you should liaise with your web developer. If that’s not an option then here are some rough guidelines:

  • Unless the intended use is as a large background image then it’s rare it will need to be larger than 1000px wide
  • Images that are intended for use as large backgrounds should generally be saved as JPGs instead to keep file sizes down. These will export with a white background by default so see the handy tip below for changing background colours.
  • You should try and keep the file sizes as low as possible, generally around 2-300kb and definitely no bigger than 500kb. Experiment with the image dimensions and quality to get this number as low as you can without compromising the image quality too much.

The guidelines on images for offline or print use are little more lenient as quality becomes more important than file sizes. Again the best course of action is to liaise with your designer but here are some tips:

  • Images for print-based media should be as large as possible in as high a quality as possible. Just be wary of blowing images up beyond their original size as this can cause pixelation.
  • Images for presentations and slideshows should be exported as close as possible to the size they’ll be displayed at. For tablets, laptops and desktops this can between 768px and 1600px for full screen images. Exporting images larger than this for TV screens and projectors can be worthwhile but check out the next note for something to be aware of.
  • Most email clients won’t deliver attachments with a file size larger than 25mb so be careful about including too many high resolution images in your files. A full screen PNG can often be 2-3mb so including 8-10 of these will often mean your file is too large to be sent via email.

Once you’ve tweaked your settings you can click Save to download the file to your device. You’re done!

Bonus step – recolouring

You can take the process one step further by recolouring your new creation. Either with a different background layer for photographs or recolouring the artwork itself for logos.

For photographs, you can create a new coloured background by selecting New Adjustment Layer in the lower right then Color Fill from the flyout menu.

This will create a new solid colour layer in the layers panel. Click and drag this new layer under your original image to place it underneath. Double clicking on the coloured swatch will open up the colour picker where you can set a new background colour.

To change the colour of a logo you can follow a very similar process. Click on the Layer Style icon in the lower right then select Color Overlay from the flyout menu.

Use the colour picker in the next window to choose a new colour for the logo artwork.

Love this post? (We thought you would!) Subscribe below to get more handy tips and guides from Learn-it.