By Dave Sweeney
From time to time I get people asking how to create images that contain a transparent background. So much so that it’s ample time to write a blog about precisely how to make this happen.
Maybe you’re asking why someone would want to create an image with a transparent background in the first place. One reason is that with a transparent image on a website, the background color can be changed using HTML and/or CSS without having to generate a new image. Sure it’s possible to save the image with the background color that you desire, but this can create several issues that are less than desirable. Colors vary, depending on how they’re implemented and how they are exported. CMYK, RGB, PMS, and any other colors all render slightly different and when compared side by side, the difference is clearly discernible.
You may have noticed that when attempting to save a rasterized image as a JPEG or JPG file, even if you have removed the background from the image, the transparency is removed when saved. So it’s important to understand the different file types and their limitations. For the most part there are two file types for the web that will retain transparency when rasterized images are exported from an image-manipulation software such as Adobe Photoshop; GIF and PNG formats. PNG files are better quality, but the file size is also larger. GIF files are smaller, but the quality is not quite as good, but in most circumstances is fine.
Okay, now let’s learn how to make a transparent image background:
1. CHOOSE AN IMAGE THAT CAN EASILY HAVE THE BACKGROUND REMOVED.
If possible, avoid images where the subject isn’t entirely visible. Even if you ultimately crop the image, I find that it’s easier to start with an image 100% intact. Avoid an image where the subject is cropped, at least on the top, left, or right sides on the image. For the most part you have an image bleed off of the bottom. Of course there are always exceptions to any rule. Ultimately you can use any image you desire, I am just sharing how I choose an image to be silhouetted.
2. TRACE THE SUBJECT OF THE PHOTO
This can be done several ways using Adobe PhotoShop, which is the industry standard for manipulating photos.
I am going to discuss two techniques:
Since this is for the Web and the resolution is low, you can also simply trace the using the Polygon Lasso Tool in PhotoShop. If the shape you are tracing is super simple this isn’t a bad approach, and might save you some time.
A better way is by creating a path using the Pen Tool in PhotoShop. The advantage to this method is that you can go back and alter your path if something doesn’t look quite right. I have attached several images showing the progression of what I am describing, so reference those if you get stuck.
Before you begin creating your path, make sure your image is a layer. To do this, click on the Layer tab and if it is display the word “Background” it mean your image is flat. You want it to be layered in order to have ultimately have a transparent background. If the layers tab is showing “Background” simply double click on the word “Background” and it will then display the word “Layer 0” once you click OK. Once you have drawn the path, locate the Path tab and select MAKE SELECTION from the dropdown menu, and click OK. This will select the foreground of the subject that you have traced.
Now it’s time to delete the background. Since the subject has been selected go under the “Select” menu at the top of the screen and choose “Inverse.” Now you will have the background selected. You could simply click the “Delete” key and make the background disappear. What I like to do is to soften that edge a little so that it looks more natural and not like someone cut the image out by hand with those horrible hard edges. While the background is selected, go back to the “Select” menu then find the “Modify” tab and chose “Feather.” The number that you input will either increase or decrease the softness, and there’s no surefire number that I can give you here. The size of the image and the resolution will affect the amount of featuring that you will see. If the image is low resolution (72 dpi) and under 800 pixels tall, try a number such as 3 and test your results. Okay, so we’ve input “3” into the “Feather Radius,” and clicked “okay.” Press the delete key on your keyboard and if you like the results, stop there. You can even delete multiple times to a different look. If you don’t like what you see, undo your work (under “Edit” in the top menu) and try a different number. You’ll know that your background is gone if you see the grey checkerboard pattern behind your subject. If you don’t see this, if means that your image isn’t layered, and need to go back and make it such.
3. EXPORT YOUR FILE
Now that you have the background deleted and you like what you see, it’s time to export the file. Choose “File” then “Export” then “Save for Web.” Once here, you can choose either “PNG-24” or “GIF” as your file format and save your file. Remember, as I stated above, PNG files are better quality but they are also larger. Generally speaking you should never have any images on your website in which the file size is more than 200k.