How to easily create website mock-ups in Photoshop

In a recent project with one of my clients, I needed to make a mockup of their website on different devices. I could have gone about this the lengthy way - going to the different devices, pulling up the website, take a screenshot, email (or Dropbox) it to myself, go back to my computer, and .... are you tired yet? 

In a recent project with one of my clients, I needed to make a mockup of their website on different devices. I could have gone about this the lengthy way, but there's a much simpler way -- and it only takes three easy steps.
Three easy steps to brilliant website mock-ups

I have GOOD news! There is a much simpler way to make mockups, and I'm going to show you how in three easy steps. (FYI - You will need Photoshop for this!)

1. is a GREAT resource for all kinds of mockups. (Here's the exact mockup used in the example.) You'll see everything from t-shirts, business cards, to magazines and posters. Anything you may need to mockup your design on, they probably have for you!

It's a lot easier for your audience to visualize your t-shirt design when it's on a t-shirt, rather than just a design on a white background. Think of it like trying on clothes at the mall. If you're like me, something may look good hanging on a rack, but you never know for sure until you try it on. 

2. Quirktools has a tool called Screenfly, which lets you view your website on different devices. They'll even let you get really specific on each device - not just "tablet" but whether you want to see it on Kindle, iPad, etc.

This makes it easy to grab screenshots from various devices, but is also super handy to know what your site looks like on different devices! I recently made a design change on my website, but when I viewed it on mobile later - I hated how it looked! Since it wasn't a huge change, or necessary, I ended up taking it off. 

3. Like I said, you will need Photoshop to do this. Once you download your mockup from GraphicBurger, you'll just open up the Photoshop (.psd) file. Some mockups come with instructions, some don't.

All the layers are named appropriately in mockups. Find the layer that says, "Replace me!" or something along those lines. It will open a second tab in Photoshop, where you can import and place your screenshot. Save, exit, and go back to the mockup window. And, voila! Repeat this process if you have multiple devices like I did in this mock-up. 

Why mess with mockups? 

My client wanted to show their audience that their new website is responsive, so they can utilize the website wherever they are! Because people are SO visual, it's better to SHOW your audience something like this, rather than just throw in an extra sentence.  (Plus - how legit do those mockups look?!)

Have any quick shortcuts that you love to use for your business? Share them!