Using Photoshop Smart Objects to Create A Mockup


[I] often see people online asking how to create a mockup of their website on a device. Great news! It’s way easier than you think. Knowing how to use smart objects in Photoshop means you are no longer limited to using stock photography or buying expensive mockup kits. If you’re a photographer, even better. Shoot your own brand images, follow this tutorial and you’ll have a whole new range of marketing images you can use to promote your business. Don’t forget to download the free layered image at the bottom of this post.

PS. Want a super speedy mockup of your website on all devices. Head over to Am I Responsive, enter your website address and screenshot the result. And if you know how to use the Chrome Inspector tool or Firebug, you can change the background colour too.



Get my DIY Your Website Ebook

+ get 20% off your first order

You don't have to settle for an average website.

Follow my 5 seriously actionable pro design tips to help you level up your website.


  1. Bill

    Thanks for this tut. Everyone uses mockups some way and I never really learned about smart objects. Really makes it a lot easier.

  2. Alison

    Another really useful and functional tutorial! Thank you Melissa. ((:

  3. Mamad M

    This was awesome! Just what I’ve been looking for. Thanks so much πŸ™‚

  4. Sarah

    Thank you so much for this tutorial, it’s been so helpful and easy to follow!

  5. Kelly Newbury

    Thank you so much for this! I’ve been searching forEVER for an easy tutorial like this!

  6. Katerina

    Thank you so much for this tutorial!

  7. Matt B.

    This is so helpful! Thank you!

  8. John Paul

    Hi, this was such an amazing post.
    I have been playing around with the same technique for Photoshop Mockup Tutorial and it worked great.

    Thanks again for the tip!


Submit a Comment

Your email address will not be published. Required fields are marked *

Free DIY Your Website Ebook +

20 % off your first purchase

You deserve better than an 'average' website...

By downloading our ebook, you agree to receive our excellent marketing emails.