Creating Product Shots of your Mobile Service

By February 7, 2017Creative

When it comes to marketing your mobile service whether that be an App or a website, it always helps to have product shots to show said service being used in the real world.

Sometimes, however, hiring a photographer to take those photos can become rather pricey. So what do you do when you need those images, but don’t have the funds to procure them?

The answer is that with a little Photoshop knowledge you can create these images on your own for free. In this tutorial, I’ll show you how.

Step 1: The Screenshot

Before we even touch Photoshop or the computer, the first step begins with your own personal mobile device. For the sake of this tutorial, we’ll be using an iPhone 6, but this can work with any mobile phone.

Using your mobile device navigate to the screen you want to be displayed in your product shot. From there take a screenshot. To do this on the iPhone 6 simply press the home button and power button at the same time.

From here send the photo file to your computer via email, airdrop, iMessage, etc.

Step 2: The Product Shot

The next step is to find the photograph you want to place your screenshot in. There are plenty of ways to do this. You can buy a stock image, find a free photo online, or shoot your own image.

Now open your product shot in photoshop.

Step 3: Combining the Two

From here import your screenshot into the Photoshop document by going to File > Place Embedded, locating your file and clicking open.

Be sure to convert your screenshot to a smart object by right-clicking its layer and selecting “Convert to Smart Object.” This will make sure that if you do make any mistakes, your screenshot will still retain its image quality.

The next step is to ensure you are on your screenshot layer and press “cmd-T” this lets you transform the image.

From hold down the “cmd” key and grab the corners of your image with your mouse. While doing this, drag those corners to the corners of the iPhone screen.

Continue to do this until all your corners have been matched up.

Your Final Result will look like this:


As you can see your image now sits on the phone in perspective and if you would like you could just stop here. However, if you want to add a slight glare to your screen, I will show you how.

Step 4 (optional): Create Screen Glare

Double click this icon  on your screenshot layer to take you to the original unedited image.

From here create a new layer by pressing this icon .

Now select the Polygonal lasso tool located here:

Using this tool draw a triangle in the corner of your image, select your new layer and use the brush tool   to fill it in with white.

Your file should look like this by now:

While still on your new layer change your layer mode to screen and alter the opacity to your desired level. This can be done in your layers panel as shown here:

Once finished your image will appear as so:

Now save this file by pressing “cmd-S.”

Close this file and return to your product shot, and Tada you now have a glare on your screen. Have fun creating product shots!

Ready to fully charge your mobile marketing strategy? Access our white paper on the mobile marketing mix!


© 2018 | All rights reserved Hawke Media.