Shape
Blog / / Watch Me Work Wednesday

UI Design: Remove the background from any photo or image

Sometimes you just need to remove a messy background from a photo or isolate an object so that you can use it in your UI designs, as profile picture or in your social media creatives.

There is a wonderful, free tool that I found that can help you easily remove any background from any photo or image and isolate your subject. The best part is, it requires absolutely no special software or skills!

Meet, Remove BG

Remove.bg is a great little web site that does one simple thing, it removes the background from your images.

You've probably seen this trend in UI design a lot.

https://dribbble.com/shots/10587842-Designers-App
https://dribbble.com/shots/11606488-Petz-Website
https://dribbble.com/intriligator

An isolated object with a custom background or graphic treatment.

Here is how it works in application and few ways you can use the final image in your UI designs:

Removing the background and isolated people

So first I'm going to head over to Unsplash to find an image I want to use.

Remove.bg

Here is a lovely one that I've found by Prince Akachi

Photo by Prince Akachi on Unsplash

I'm going to upload this image into Remove.bg

Smiling blakc women in blue flowered top with burgundy background
Remove.bg

And in just a few seconds it has completely and cleanly removed the background!

And so know if I go over to my UI design file (here I'm using Sketch)

I can use this image and mask it with my own custom background to match my branding.

Page with profile picture thumnails
Community Design 

This is something that you can use for your own profile images or using it in testimonial for your landing pages.

Removing the background and isolating multiple people

Another cool use for this is with images at larger size for your landing page heros.

Landing page design with two happy friends and circle graphics behind them
Landing page design 

Add a few trendy shapes or blobs to create your own themes and customize the background!

Removing the background and isolating objects

A great treatment for retail items, fashion, clothes and and ecommerce UIs.

Cute asian bog modeling sweatshirt that says Brooklyn
Fashion Website - Dwinawan for Paperpillar 

Remove the background from food

The ability to isolate a plate of food or another edible object really comes in handy if you are designing mockups for restaurants, designing UI's for the food industry or creating images for food blogs.

https://themeforest.net/item/jupiter-multipurpose-responsive-theme/5177775
https://dribbble.com/shots/11918195-Food-Delivery-App

We do a lot of neat things with these kinds of tools in our Product Design Master course and in our Product Design Manual, so if you're interested learning more about UI/UX check those out.

PD-Enroll-Now--1

Stay tuned to the newsletter and our Youtube channel for more of this short tutorials on how to use UI/UX tools and resources!