In: Tutorial0

Image Transparent Background

Image Transparent Background in Photoshop

From sleek designs of website to product image, pictures sometimes look better without background or when they are given a transparent one, especially images that will be displayed on web pages.

Thanks to Photoshop, one or two magic on the software will give the picture its needed transparent background. The steps to remove background from image can be a bit tacky, especially if the objects to be worked on have some complexities. Maybe you have not seen reasons why you should make your image background transparent, a transparent background will make all the difference in the classiness and look of your images

Why Need Photo Transparent Background

A transparent background for your image, especially products advertised on websites results in very attractive and fascinating features of the image. In addition, making the background of your image transparent will provide an environment for your product image or picture to be placed on any dynamic color changing background.

When your image is placed on a responsively designed site with a transparent background, it will uniquely interact with its background differently depending on the screen size of the users.

Website logos also perform best when created on a transparent background; this will allow you to be able to place the logo anywhere on your website irrespective of the background color of the page. This step by step explanation on how to make photo background transparent will make you a pro in a couple of minutes!

Photoshop Selection Tool

Making your image background remove involves deleting what is not needed in your image and keeping what is essential. Photoshop has several selection tools which are used for this purpose but choosing the right one to use largely depends on the image you are working on.

If you are working on an image that is very contrasted to its background such as a dark object placed on a very light background or a logo that has a single color, the selection process to make the background transparent is simpler than  an image with a very busy background. The following selection tools below are used in making image transparent background in Photoshop;

The Magic Wand Tool

The magic wand tool is majorly used in selecting pixels with identical color.

For example, if you have a logo designed on a white background, using the magic wand tool, simply click on a white area to select it, then press the delete button to remove it. This action can be repeated a number of times if you have multiple sections of background divided into portions by the image you are working on.

The Rectangular and Elliptical Marquee

rectangular marquee tool

(Rectangular marquee tool)

elliptical marquee tool

(Elliptical marquee tool)

This tool is majorly used in selecting objects which has a perfect circular or rectangular shape. The tool is placed on the object you want to keep and it selects it out, leaving the background out to delete.

 

(Rectangular marquee tool used)

(Elliptical marquee tool used)

 

 The Lasso Tool 

The lasso tool

This Photoshop selection tool has a whole lot of Photoshop power resident inside it, it works perfectly when used in form of a pencil used to draw shape from a point to another (It is used by drawing a selection mark from a point and ending it at the starting point). The selection can be made perfect by reselecting or deselecting with other selection tools where necessary.

the lasso tool selection used

How to make Image Transparent Background in Photoshop Using the Magic Wand Tool

Firstly, open your jpeg format photo on Photoshop. When you open the layers panel, you will find it resting to the right hand side of the image window. If you were not able to access it. It can also be opened by clicking on the dropdown menu at the topmost part of the application window when you click on windows> layers.

layer

Click on the background layer twice in the layers panel, then a new layer dialog box will pop up with the option to rename the layer; you can rename it if you like or leave it as default layer 0, then click ok. With this, you have successfully unlocked your background layer, anything deleted henceforth from it will be transparent.

The next step is to use the magic wand tool to select the image alone. This action will cause a marching ant effect around the image when Photoshop makes attempt to select the image from the background.

magic wand tool selection

If the selection made is not perfect, you can still make use of the magic wand tool in separating the background from the selection or add more of the image to the selection, depending on what you currently have.

If your image is not completely removed from the background, select the subtract icon from selection option at the option bar then carefully click on the parts you want to separate from the background using the magic wand tool.

Once your image has been successfully selected, type shift + ctrl + I as a windows user or shift + command + I as a mac user to select the inverse of your image or you navigate the cursor to the top of the application window, then click on select, then inverse to carry out the same action.

transparent background tools apply

Once you have the background (inverse) selected, hit the backspace or delete key on your pc to delete your background, then you will have a transparent background. A transparent background of a picture/ image background remove is always represented with a checkerboard pattern which has a white and gray color, then use the keyboard key ctrl + D or command + D on a mac to deselect the selected image.

Save the image in the appropriate PNG – 24 formats which allows for transparency in multiple layers. If you are using the Photoshop CC version, choose file> export > export as from the dropdown menu located at the top of the application window to save your file in png-24 format, you can also use the keyboard shortcut keys by pressing the shift + alt + ctrl +W keys on the windows or shift + option + command on a mac pc.

If you are not using Photoshop CC version but you are using any of the older versions of the Photoshop and the ‘export as’ option is not present, you can select save for web and then choose PNG 24 from the dropdown menu placed at the right hand side of the dialog box, set the format to PNG and check the transparency box if it is ticked. Ensure the smaller file is not ticked.

A file size will be predicted for the size of your PNG image file, make sure the size is kept in check, around 200kb  or smaller  because a large file size will make the loading of your web page very slow. A logo or the picture of an object with an opaque or complex background might not be well blended with the background of the website when they are ready.

Leave a Reply

Your email address will not be published. Required fields are marked *