Guide: How to apply your UI design to a device image in Adobe Photoshop CC

9 May, 2019

In this blog post I will show you how to apply any UI design to an image of a device in Adobe Photoshop CC.

Step 1 - Choose an appropriate image

First, you need an image to which you can apply a design. This could be anything from a photo of a mobile device, to a laptop, desktop computer or even a billboard.

In my example, I have an old image from the Evoluted archives. It features Neil and Sean from our marketing team working on a laptop.

Step 2 - Clean up your image

I won’t go into too many details for this step, as you can do as much or as little as you feel necessary here. Also, any required changes will drastically vary depending on your selected image. If you do make any changes to clean up your image I would recommend duplicating your original layer, so you always have a copy of the original to go back to.

Here I have adjusted the brightness & contrast, edited out the app icons at the bottom of the screen and removed the reflection from the black area.

Step 3 - Create your mask

Now, we need to create a shape that will serve as a mask for your screen design. Select the pen tool to draw a shape over the screen area. For the best results, I suggest zooming in very close to create your shape. This will give much tighter control for an exact match, especially on things like rounded corners.

Step 4 - Create your screen layer

Next, we create the screen design layer. It is important to create a shape that uses the same aspect ratio (or as close as possible) as the device in your image. Create a new rectangle shape with the rectangle tool (Use a different colour to your mask shape). Then edit the dimensions to match your required resolution or ratio.

In my example image, I believe the screen resolution on this old Macbook Pro to be 1400 x 900. So I edit the dimensions of my rectangle in the properties panel to match.

With your rectangle shape selected in the layers panel, click on the hamburger menu icon in the panel to open up the options list. Select “Convert to Smart Object”. Then click the hamburger icon again & select “Create Clipping Mask”. This will put your screen design inside your screen shape.

Step 5 - Add perspective

We now adjust our screen shape to match our mask shape. Go to the top menu in Photoshop & select “Edit”, then “Transform”, then “Distort”. You can use the Prospective Transform if you prefer but in this example, I found distort easier.

Move the corners of your rectangle to match the edges of your shape mask. Once again, zoom in for greater accuracy. Once you are happy, hit return to apply the transform.

Step 6 - Match your screen to the image

We now have our Smart Object screen shape inside our mask shape. This allows us to easily change what will display on the screen. Double click on the smart object icon on your layer. This will open up your smart object shape in a new tab.

Drag in your desired screen design & scale/position it accordingly. Save the changes to your smart object and return to your main file to see your design applied to the screen shape.

Step 7 - Layer styles & image adjustments

The beauty of using a Smart Object here is that you can also use Layers styles and smart filters at anytime and they remain editable. I use these to make to screen design appear more authentic. The changes required will once again depend on the nature of your image.

In my example I add a layer style of “Colour Overlay” (Black 18% Opacity) to make the screen less bright.
On close inspection my image appears a little grainy, so I want to add some noise to my design to match. I go to the top menu and select “Filter > Noise > Add Noise” (amount:1.5). I also add a small amount of blur in the same manner “Filter > Blur > Gaussian Blur” (amount:0.5). This just softens the crisp edges of my screen design.

Feel free to play around with these setting to find the best results for your image.

Step 8 - Add screen reflection

I also want to add a subtle reflection to my screen design. In my image, the black part of the screen is also reflective (as you can see in the original). So I need to draw a new shape to match using the Pen tool (as I did in step 3).

Once you have your shape, set the fill to 0%. Now we add a gradient layer style. Use 2 white colours, one at 0% opacity & the other at 100%. Mover the 2 nodes close together to create a defined line. Moving these closer together will create a sharper line, further apart will make it softer.

For my reflection I have used light Opacity (10%) & with the gradient at an angle (138°). You can play around with these setting to suit your image.

Finished Image

Now we have our finished image! We can easily edit our smart object at any time to apply a new or different design to our screen.

Written by Will

Creative Director Will has been with Evoluted since 2011. In his role leading the design team, he continues put his extensive experience to use on an impressively-diverse array of websites. Will’s core skills include UX design, creative direction and responsive web design; whilst he’s also earned a renowned reputation as Evoluted’s chief provider of internal, novelty animated gifs.

Up next…
Evoluted Nominated for Large Digital Agency & Content Team of Year
1 May, 2019


Leave a comment

Replying to: - Cancel