Looking to showcase your work so that your customers and clients can see it in a real environment? Discover how to design professional screen mockups with these simple steps.
Mockup image via ESB Professional.
Screen replacement mockups are critical in marketing. They demonstrate your business homepage, eCommerce site, app platform, and more to potential customers. Even if your product or service isn’t digital in nature, you likely still have an online presence that you want to market, like an online shop. A screen replacement allows users to see how these pages look in a real environment, like on a computer, tablet, or phone.
Not sure which screen replacement images will work best for you? Check out our Business Mockup Bundle image pack, which features 25 high-quality images that help showcase your brand.
Learn how to customize these mockup images to display your own content in just a few simple steps.
How to Do a Screen Replacement in Adobe Photoshop
Adobe Photoshop features a few tools to create the perfect design mockup from computer screens to poster frames. Let’s go over how to easily mock up a homepage in just five straightforward steps.
Step 1: Upload Mockup Image
To begin, you’ll need to license a high quality mockup image. With Shutterstock’s Plugin for Creative Cloud, you can easily peruse Shutterstock’s selection of high quality images straight from Adobe Photoshop. Simply open the plugin in the program with Window > Extensions > Shutterstock. I searched for the keywords “business man desktop blank” to bring up this professional desktop screen mockup.
Licensing an image from the program is easy. Log into your personal account first; from there, search for the image of your choice and click on it. Hit the License Image button to download straight to your background layer, or preview the image in your document with Insert Preview.
Step 2: Draw Out Guides
Guides are an important step in accurately lining up your screen image. Hit Command+R or go to View > Rulers to bring up the rulers in your program. Then, click and drag from the ruler toolbar to bring down those light blue guides.
Your mockup screen is likely skewed to a degree, meaning the screen won’t be perfectly flat. Set up two guides per corner. Later, you’ll use snap your screen image to these guides. When you’re finished, lock them with View > Lock Guides so they don’t move around when you resize your screen image later.
Step 3: Open Screen Image
For the screen image, you can display anything! I took a screenshot of the Shutterstock homepage. Showing a website page allows you to advertise your business or display how a site will appear in it’s natural environment on a computer screen.
Navigate to File > Open or select Command+O to open your screen image in a new document. Crop your image with the Crop Tool (C) or add adjustments to the design with the Adjustment Layer in the Layers panel. Then, hit Command+A to Select All and click Command+C to copy the image.
Step 4: Insert and Adjust Screen Image
Paste your image into the original mockup document with Command+V and size down the image by using Free Transform with Command+T. Hold down the Shift key to constrain the image proportions. Line up the edges of your screen image with those guides we set down earlier.
Now, we’re ready to distort the website homepage. Drag the Opacity slider down to around 80% so you can get a glimpse of the corners of the computer screen. Activate the Free Transform tool again with Command+T. Hold down the Command key and use the white cursor to manipulate the individual corners of the image. Drag the corners to the guides we drew earlier. Take your time with this step. The mockup won’t look realistic if the image isn’t correctly aligned to the computer screen.
After manipulating the corners of your web image, check your progress by hiding the guides with Command+;. Don’t give up if your corners don’t match up quite yet. Move them around until you’re satisfied with the outcome.
Step 5: Apply Effects
Adjustments are the key to a realistic web mockup. Reduce the Opacity to around 40%, then duplicate the layer by right-clicking on it in the Layers Panel and selecting Duplicate Layer.
This will bring up a pop-up window for your new layer. Hit OK and then adjust the blend modes of the duplicated layer. Click the arrow next to Normal under the Layers panel and select Overlay, then raise the Opacity to 90%. Play around with different blend modes to see what ultimately works for your design.
There you have it! You have successfully designed a professional computer screen mockup in Adobe Photoshop. Mockups are ideal for showcasing your business website or for proposing a web design to a client.
How to Do a Screen Replacement in Shutterstock Editor
If you don’t have access to Adobe Photoshop, you can also create simple mockups in our easy-to-use Shutterstock Editor application.
Step 1: Upload Mockup and Screen Image
Once you’ve opened Editor, you can head over to the Search (S) tool on the left and search for a phone screen mockup, or you can purchase the Business Mockup Bundle and upload one of the photos using the My Content tab.
You have no limits when choosing your phone screen image, but I recommend sourcing an image that fits the proportions of a phone. I took a screenshot of the Shutterstock homepage from my mobile phone to keep within those ideal dimensions.
To upload your own design assets, navigate to the My Content (M) tool on the left side of the software. (You can see all of my content from past designs – that’s because Editor will save the content you upload from your account to use anytime!) Select the Uploads tab and hit Upload An Image or drag the image into the program.
Step 2: Resize Screen Image
Reduce the size of your image to fit the approximate dimensions of the phone screen. Lower the Opacity to 70% to get a glimpse of the edges of the phone screen. Expand the screen image to fit just outside the phone screen border, as seen below.
Resizing your image just outside of the phone screen prepares you to properly skew the image with the Perspective tool.
Step 3: Skew Image
Head over to Advanced Tools on the right side of the program and hit the Perspective tool shown in the red circle. This will bring up light blue outlined circles in each corner of the image.
Select a corner and distort to the edges of the phone screen. Zoom in and move the corners around to align them perfectly to the phone mockup. Again, take your time with this step. Proper alignment is crucial to creating a successful mockup design.
Step 4: Apply Effects
Adjust the Opacity of the screen image to 80% to appear more natural. Under the Filters tab, nudge the Exposure to 10.
You have successfully created a phone screen mockup in Editor! Your options aren’t limited to phone mockups, either. You can easily recreate this look with computer screens, tablets, stationery, posters, and more.
Searching for more ways to advertise and promote your business with easy-to-follow design tutorials? Check these out: