When do you need a transparent image background?
Few images are created with a transparent image background. They usually have a background colour, even if it’s plain white.
That’s fine, but what happens when you want to place your image (perhaps it’s a logo) on to a different coloured background?
Both backgrounds would be visible on top of each other and the image wouldn’t look professional.
… and that’s when you need a transparent image background.
How can you check whether your image has a transparent background?
You can easily check whether your image has a transparent background.
For this example, the logo has a white rectangle background (ie it’s not transparent) which, when clicked and dragged across the canvas, conceals the canvas edges (as shown below, indicated by the red arrow).
The image needs to be separated from its coloured background so that it can be uploaded on to another background.
If you want to do this for free, Inkscape is an easy way to create a transparent image background.
Getting ready to create a transparent image background using Inkscape
1. Download Inkscape
Go to Inkscape and download the free package to suit your operating system, eg Linux, Windows, Mac etc.
Once downloaded, go to your desktop and double-click on the Inkscape icon.
Inkscape rarely opens the image at 100% size (see the percentage in the bottom right hand corner of the screen), so you’ll need to increase or decrease the percentage to see the true size of your image.
Next, create your own image or upload an existing image.
For this tutorial, we’ll upload an image.
2. Upload the image
Click File (top left of screen), Open, and select the image to upload.
Unless you’re uploading an image in .svg format (which Inkscape prefers), you’ll see the “png bitmap image import” popup.
Leave the auto populated fields as is, and click OK.
3. Re-size the image, if needed
Click on the image and drag the re-sizing handles (which look like black arrows around the edge of the image) to the required size.
You can check the actual size of the image by the height, width and pixel figures shown in the toolbar. The numbers will change in real-time as you drag the re-sizing handles.
4. Re-size the canvas, if needed
The size of the canvas can be changed by selecting: File (top left of screen), Document Properties and click the “Page” tab:
- if you’ve already re-sized your image and you want the canvas to be the same size, click “Resize page to content”
- if you want the canvas to be a different size to the image, manually select the Page/Custom Size, Orientation and sizing units.
Creating a transparent image background using Inkscape
1. create or upload the image (as described above)
2. click File (top left of screen), Export PNG image (you’re exporting the image to .png format, so this applies even if your current image isn’t in .png format)
3. a pop-up called “Export PNG image” will appear at the right of your screen. Click on your image to ensure the area’s selected and shows the re-sizing handles (black arrows).
4. click the Selection tab and type in the Image Size in pixels
5. click Export As to rename and choose where to save your image
6. click Export
Is the image background definitely transparent?
Open the .png transparent image and carry out the same test as at the beginning of this tutorial – drag the image across the canvas.
This time you’ll be able to see the canvas lines behind the image (as shown by the red arrow below).
That’s it – you’ve created an image with a transparent background!
Note: this blog post is intended to be a general resource only.
- reviews to save you time looking for good value, quality household/fintech products
- blog/tutorials for any of you website newbies to follow my PeasOnToast learning curve
Latest posts by Mrs P (see all)
- Monzo Bank review – 100% smartphone banking exceeds expectations - 16th October 2016
- Atom Bank review – the new player on the banking field - 4th September 2016
- How to use SendinBlue email automation – step-by-step guide - 19th August 2016