Custom Background Mockup

In our last article we showed you how to add your own mockup/design to an image of a hand holding an iPhone.

Although that image is a pretty cool way to show off your iOS design, it would be even cooler if you could get the hand+iPhone showing up inside a cafe or on a corner in New York.

mockups over backgrounds

That’s what you’re going to learn here.

We’re going to be using Figma because it’s web-based, powerful, and most importantly, free. If you’re not ready to make a huge investment in the Adobe suite, Figma is an amazing tool for you to get your designs in ready for the world to see.

Here’s a video of the process if you prefer watching over reading. Continue on for a step-by-step guide.

Step 1: Get a mockup

If you already have a mockup inside an iPhone you want to use, use that. If you don’t, check out our last article so you can build one or use ours.

You see here that there’s no background. The hand is just floating in space. That’s exactly what you need at this stage.

mockup without background

Step 2: Decide where you want to show the hand

If you’re designing an app that helps people exercise, you might want the hand+iPhone to appear inside a gym.

Or if you’re building an app that deals with coffee, you might want it in a cafe.

Have an idea to start with. It’s easy to change the background once you’ve cut out the hand from the white backdrop we have now.

Step 3: Cut out the hand and iPhone

Let’s cut out the hand first, and then we’ll get to the iPhone.

To cut out the hand, we’re going to need to use the Pen Tool. You can find the Pen Tool in the top left of the Figma interface. It looks like a pen.

The idea is that you’re going to zoom way in to the graphic and trace around the hand with the pen tool.

This step is best explained by watching the video. You need to make a rough pass around the graphic, and then smooth out the paths with the arrow tool.

smoothing with arrow tool

Once you’ve traced around the hand, add a fill of any color so the hand and iPhone are clearly distinguished. It should look like this:

filled hand

Now it’s time to add in the iPhone. Use the Rectangle Tool to cover the iPhone as well as you can. Don’t worry if it’s off on the corners.

filled iPhone

If your rectangle is so dark that you can’t see the iPhone, change the opacity to something like 30%. Don’t forget to reset it back to 100% after you trace the iPhone.

Now you’re going to use the arrow tool to grab a corner of the rectable and drag it inward until the corner radius matches your iPhone.

corner radius

Step 4: Create a union between the hand and iPhone

Now you have two shapes that you’ve traced: the hand and the iPhone.

We want to use the Union Tool to merge them into one shape.

First select both shapes. You can hold down Shift to select multiple items in Figma.

Once you have both shapes selected, click on the Union Tool at the top-middle of Figma, and select Union Selection.

union tool

You’ll have one unified shape that you can drag around.

Step 5: Remove the background

We have this gray shape, but it’s still draped over a white background. How do we get that out of there?

The idea is that we’re going to use the gray shape as a mask over our original image.

First select the gray shape, and while holding Shift select the white background. Then group them together by pressing Command-G.

The next step is to select the gray shape, right click, and select Use as Mask. The gray shape will disappear temporarily, but don’t panic.

Everything is about to pay off.

On the left pane you see a list of layers.

layer pane

The gray shape is behind the mask. You need to drag it up to the top layer, so it moves in front of the mask.

top layer

There you have your floating hand and iPhone.

Step 6: Add iPhone on top of any background!

Remember that background you found earlier?

Ok, maybe you didn’t look for one yet. Of course there’s Google Images that will get you what you want.

But you can also try Pexels if you want higher quality stock images that are free to use. They’re usually on a higher level than images you find on google because they’re taken by real photographers.

So get a background image, drag it into Figma, and move your floating hand on top of it!

final image

Now you’ve got the building blocks to do whatever you want!

Download the Figma File!

You can download the file here

comments powered by Disqus