Create a Device Mockup
If you design websites or mobile apps, eventually you’ll want to show off your work. This is especially true if you are selling the design or showing it in a presentation. I put often put together proposals for clients, so they’ll get an idea of what a design or app will look like when it’s on a device. This isn’t hard to do with Photoshop. I’ll show you how to create a device mockup from a stock photo in just a couple of minutes.
You’ll need a stock photo
Sure, you might be able to find a free one online. There are millions of images out there, but they are likely owned by someone. Instead, you can pick up a professional level stock photo from somewhere like GraphicStock. They have 250,000+ stock images and graphics to choose from. The example shot below is taken from GraphicStock. They even have a free 7 day trial. If you want to try out this tutorial and follow along closely, I’ll provide you a link to the image once you’re signed up.
Click Here To Sign Up For a Free 7 Day Trial to GraphicStock
Now that you’re signed up, you can download the sample image from here. Download the jpg version, which is perfect for what we’ll be using it for. Select the magic wand tool. The great thing about the image we chose is that everything is on a white background and the screen is white, too.
With the Wand Tool selected, check the Contiguous option at the top of the screen. This makes it so that you will only select the color within the bounds of an area. Without it selected, you’ll end up selecting all of the white areas throughout the entire image. Click the white are of the screen.
On your keyboard, hit Cmd + J (Ctrl + J if you’re on the PC) to duplicate the selection onto its own layer. The selection will be gone, but you’ll have a white area the exact shape of the screen.
Right-click on the new layer you just created in the Layer’s Panel and from the flyout menu, choose the option to convert it to a Smart Object. You’ll notice that your layer icon has changed.
This means that you can double-click the layer to open a temporary Photoshop file. You’ll see the white shape of the screen by itself. Now, we just need to import the image we want on the screen and contort it to match the white shape.
I chose these human anatomy buttons to simulate the idea of an anatomy app. You can download them from here. I opened them up in Photoshop, using the rectangular Marquee Tool to select just the area with the buttons. I hit Cmd+ C to copy them. Then I switched back to the temporary Photoshop file with the white rectangle. I hit Cmd + V to paste the buttons.
You may have to shrink the image we pasted in, which is easy. Simply hold down the Shift Key to scale the image in proportion, so it’s not distorted.
To contort or distort the image to match the white box, we’ll need to transform the image. Hit Cmd +T to transform the image. You’ll see handles around the image. If you hold down the Cmd or the Ctrl key, you’ll see your cursor change when you hover over the control handles.
Move the corners inward and outward, until they match the shape of the white box. Save the temporary file, and now you can close it.
If you pop back over to the original file we were working on, the anatomy buttons are now within the bounds of the screen of the iMac image. If you want to change the image or adjust the current one, just double-click the Smart Object layer again and make your changes there.
Conclusion
How did you do? Were you able to create your own mockup? You can do this with any device in Photoshop. Showcase your work on Galaxies, HTCs, iPhones, iPads, and more. If you ran into any trouble, post your questions here and I’ll try to help you as best as I can.
