How to Remove Background from Product Images

Hey all!
Today I’m going to show you how to remove the background from a product image and a few tricks to help all your products stand out a little more. For this tutorial I’m going to tune up the homepage slider of our Organico theme and show you how we made our demo homepage a little sweeter.

First thing we need to do is cut out the product image from the background, there are many ways to do this, but today I’ll show you a general technique that uses 3 different tools – Quick Selection tool, Refine Edges tool and the Lasso tool.

Open the image you wish to feature on your homepage and click on the Quick Selection tool and select the product by dragging the cursor over the part of the image that you wish to keep.

Organico Theme Slider Images

Now go in with the Lasso Tool and click subtract from Selection icon at the top and now select all the unwanted areas that you wish to subtract.

Organico Theme Slider Images

To better define the edges of the image, click on the “Refine Edge” button

Organico Theme Slider Images

Change the view to “On Black (B)”

Organico Theme Slider Images

Under “Adjust Edge” move the “smooth” slider until you’ve reached your desired clean and smooth look. In this case I moved it up to 90.

Organico Theme Slider Images

Under “Output” choose the “New Layer with Layer Mask” option and click OK.

Organico Theme Slider Images

Some areas of your products might be difficult to cut out because of their small size or because they’re not perfectly on focus. In this case try using the Refine Radius Tool by clicking on the icon on the left and brushing over those difficult areas.

Organico Theme Slider Images

Now, open a new file and place your product image. In the case of this tutorial, our Organico homepage is a 480 x 694px file with the theme’s texture as the background.

Organico Theme Slider Images

Ok, let’s give the product a few highlights in order to make it pop off the background. Create a new empty layer under the product image and with a textured brush set at 100% opacity, 700px in size, paint some white (#ffffff ) texture (in this demo I’m using a freebie brush from wefunction.com to replicate the texture of the fabric).

Organico Theme Slider Images

Create another new empty layer under the product image and with the same brush, set at 30% opacity, 700px in size, paint some black (#000000) texture.

Organico Theme Slider Images

Adjust the texture until you’ve reached the desired effect then merge the two layers by selecting both layers, right clicking and clicking Merge Layers.

Organico Theme Slider Images

Now with a Soft Mechanical Brush set at 100% opacity, 100px in size, erase the areas close to the edges of the image in order to avoid a cropped or boxy look when the image is displayed on the homepage.

Organico Theme Slider Images

Now, let’s add a nice shadow to the product. To do so you can use the shadowing technique I talked about in a Create Realistic Web Shadows. Just keep in mind that the best shadow is from that of the original picture, so in this case, since my product picture is on a perfectly white background I reused the original shadow and applied it to the new image.

Organico Theme Slider Images

The image is now ready to be exported. To do so, click File > Save for Web and Devices and Select JPG quality 60 and click Save.

Organico Theme Slider Images

Now by following the instructions that we provide with every theme you’ll be able to feature all of your new and improved product images on the homepage!

Organico Theme Slider Images

We hope that this tutorial will improve the look of your homepage slider and, more importantly, your sales!

This entry was posted in Design Tips, Splashing Blog and tagged , , by Matt. Bookmark the permalink.

About Matt

Matt Hall is a web developer, marketer, and WordPress enthusiast. When he isn't organizing new WP projects, he can be found enjoying the sun, exotic coffees, and craft beers with friends.

Splash your Comments

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

*

*