If you spend anytime designing, you’ll know that cut out images or shapes are more interesting than square or rectangular images. Have a look at the two flowers below, which one makes the most impact?
Cut outs look great. Just do a Google image search for “product” and you’ll see that the advertising industry has cottoned on to this.
So, how do we create these cut outs and get rid of backgrounds in Photoshop? In this video above I give you two ways (although there are many more): an easy way and a hard way.
Cutting out with the Magic Wand tool (W) in Photoshop
The Magic Wand in Photoshop selects a consistently colored area without having to trace an outline. There are a number of tools that do the same thing like the Background Eraser Tool as well as the Magnetic Lasso Tool but I find the Magic Wand better.
In order to control which pixels the Magic Wand selects you change the Tolerance. A Tolerance of zero selects only the most identical pixels to where you have clicked (likely to be a very small part of the image); a higher number for the Tolerance selects parts of the image that are less and less similar to the pixel you clicked on; and a Tolerance of the maximum 255 selects all pixels that are completely different to the pixel you clicked on (the whole image!)
In the case of the above image a Tolerance of 100 was sufficient to select the sky.
Once the background is selected is can be deleted. Or in order to select the giraffe and not the sky or vice versa, inverse the selection (Select > Inverse: Cmd/Ctrl-Shift-I).
You may want to Feather the selection at this point (Select > Modify > Feather… Feature Radius of 1 or 2) which will blur the edges of the cut-out sightly.
Cutting out with the Path tool (P) in Photoshop
Unfortunately, not all images, like our friend the giraffe above, are as easy to cut out. Our other example is of a figure with a differing background which is virtually impossible to select by way of some cool Photoshop trick. In this case you just have to trace round the object manually.
The best way to do this is with Paths which are Bézier curves and defined by mathematical equations (named after Pierre Bézier, mathematician and engineer who developed this method of computer drawing while working for Renault). I really could write a lot about how to use Paths in Photoshop, Illustrator and, indeed InDesign but the best way to learn how to trace with Paths is to teach yourself.
Basically, you click once where you want to start and then click on the next point along and drag to get the curve you want. You then carry on if your next curve is going to “follow on” from the last curve, if not, Option/Alt-click on the end of the Path in order to start again with a straight line.
Above you can see (almost) how I traced around the figure and deleted the background. You may get a better idea of how Paths work by watching the video.
Further advice on cutting out
One mistake I always see people make with cut-outs is to forget to bump up the contrast. The figure or object you’ve cut out may have contrasted well against the background originally but now the backgrounds gone it usually needs a bit more.
What you can do
Are you missing out by not putting enough cut outs into your designs and websites? I’m always trying to use cut outs as much as possible because they are so much more likely to be clicked on. Try to use cut-out images as thumbnails for blog posts. They look so much better.