Recently, I shared a blog post on how to design a scrolling computer screen graphic and a lot of people got really excited about it. Including me! When AnnaKate showed me how to create the scrolling effect on a computer screen mock-up I FLIPPED out with excitement. Today, I want to share with you a new mock-up graphic technique I recently learned that left me nerding out for dayyys: How to design a mockup in perspective in Photoshop!

 

 

Related: How to Make a Scrolling Website Graphic in Photoshop 

 

If you didn’t know, I collaborated with my dear friend and branding photographer, Laura Foote, to create a lifestyle line for my favorite source for stock photos, The SC Stockshop. I had been a customer of Shay’s for years, but something was missing in my arsenal of images to use for social media, marketing, and website graphics: images that felt more real life.

 

Don’t get me wrong, I’m still ALL about Shay’s STUNNING flat lays and desktop stock photography and still use the Brand Builder set I purchased 5 years ago (has it really been 5 years! Woah!). But when it comes to connecting with real people online, mixing in images that feel like you can actually connect with the person on the other side of the screen is important, too.

 

So we created the Lifestyle Stock line. You’ll see images that were captured right in my home for a cozy home office style work environment and the accessories you may actually have next to you. When we set out to create the lifestyle line, we wanted to make sure to differentiate our work from Shay’s. Shay has already perfected the flat lay and crisp desktop mockup. Seriously, they are mesmerizing to look at! So Laura and I focused on creating images with a nod toward a more natural and casual aesthetic.

 

While the elements I styled in the images were intentionally picked to convey a more everyday look, Laura also carefully captured the elements in a way that felt that way, too. That meant a lot of images captured at an angle or what we call perspective.  Images in perspective show depth and feel more lifelike than a flat focused image. In the lifestyle line, you’ll see a few images with a mockup screen centered and flat, but many of the images show the computer or phone screen in perspective.

 

 

So naturally, I have been wanting to figure out how to overlay a website screen grab when the mockup image is in perspective and I recently figured it out! I shared my excitement on Insta and a bunch of other people said they wanted to learn how, too, so I created this tutorial video to show you how it is done in Photoshop! I promise it is easier than it looks. Just a few extra steps than your traditional screen overlay and the effect is AWESOME!

 

How to design a mockup in perspective in Photoshop

 

 

Helpful tips

1. You can easily grab a screen grab of an entire web page at once. I use a Chrome Extension called Full Page Screen Capture to take one picture of an entire page!
2. All of the SC Stockshop images are perfectly priced at $19 each. You can do the same concept for a phone, iPad, laptop, or desktop stock image to show off your website!