How To Use Mockups To Create Attractive Product Photos [ + FREE Styled Mockup]

May 12 2016
Here's a detailed tutorial on How To Use Mockups to create attractive product images. Plus I have a free Styled Desktop mockup for you!! Woohoo. Click here to download!  let’s dive right into it.
If you are an online shop owner, you know that your sales are directly proportional to the quality of your product photos. The better your product looks in the preview to your customer, higher the chance that they ‘ll purchase the product. Infact look at these stats:
  • 60% of the consumers are more likely to consider a business that has an image show up in the local search results
  • When it comes to e-commerce, 67% of the customers prefer a product that has a high quality photo. Customers value the quality of the image more than reviews, product-specific description and long-descriptions.
Wow! You definitely don’t want to lose out on audience and customers because of poor quality images, do you? Here’s a super easy solution to prevent that!

What are mockups?

I was first introduced to mockups when I started my Etsy Design Shop. I was looking for an attractive way to display my design templates when I ran into an article on Creative Market that was talking about mockups. After that it literally took me about two minutes to put together the product photos for my Etsy shop.
Imagine that you are creating a logo for your client’s candle studio. You would need to demonstrate the logo on the candle so they can get a real time view of the branding.  Now to do this, you would have to draw a photorealistic image of the candle packaging with the appropriate dimensions, shadows etc. which is a lot of time and effort. However high quality visualization is necessary for the success of the product. And that’s exactly where mockups come in. A mockup is a simple Photoshop file that contains the packaging with the appropriate specifications and a separate design layer where you can insert your design to visualize how your design would look on a finished product! Easy – peasy!

Why are mockups beneficial?

Demonstrate your design work: As I explained above with the candle example, mockups help you visualize how your designs would look on the finished packaging or product. This can save you a lot of time and money as you will not have to waste resources on printing and testing each and every design you come up with.
Showcases your product in an attractive way: Good product images visually prompt your audience to take action. So if you want them to download your free wallpaper or that ebook you’ ve created for them – you need to showcase them in an attractive way. And mockups are the easiest way to showcase your products in a setting that you don’t have access to. For example when I started my Etsy shop, I wanted to showcase how my templates looked on a beautiful styled desktop which I really did not have at the time in my life. The best way I could afford that experience for my customers was through a mockup, and it worked beautifully!
Virtual customer experience: Since there is no way  for your customers to see how your product looks for real, mockups is the best way to give them feel of experiencing your product even before purchasing it. So let’s say you’ve created a beautiful wallpaper for your readers to download. By creating a mockup of the wallpaper on a computer screen, you can show them how it will look on their computer screen which prompts them to download it.
And just because you are awesome, here’s a FREE mockup of styled desktop with a computer that I created just for you. Click below to download it right away!

What can you use mockups for?

You can use mockups to showcase anything and everything. Here are a few ideas:
  • Wallpapers
  • Ebook Covers
  • Photography
  • Website Design
  • Templates
  • Calligraphy

How To Use Mockups to create attractive product images:

It is super easy to use mock ups in Photoshop in just 2 easy steps. So let’s dive right into it.
Step 1 : Open the mockup .psd file in Photoshop by going to File > Open > Browse your file location. If your layers panel isn’t open, locate it by opening Windows > Layers (select).
Here's a detailed tutorial on How To Use Mockups to create attractive product images. Plus I have a free Styled Desktop mockup for you!! Woohoo. Click here to download!  let’s dive right into it.
Step 2: Double click on the smart object layer (In this example – Your work here layer) to open it.  Once its open, delete the placeholder image in the layer . Place your product image by going to File >> Place >> Browse your file location.
Here's a detailed tutorial on How To Use Mockups to create attractive product images. Plus I have a free Styled Desktop mockup for you!! Woohoo. Click here to download!  let’s dive right into it.
Step 3:  Adjust the file size and position until you are happy with the way it looks. Here I am using a photo of a party decor item as my product image.
Screen Shot 2016-05-12 at 9.59.44 AM
Step 4: Once you are done, save the file and go back to your main .psd file and you should see your  product image displayed on the mockup screen. Woohoo!
Screen Shot 2016-05-12 at 9.59.25 AM
See how simple that was. And it makes your product look instantly gorgeous. Go ahead and download the FREE mockup that I created for you to show off your creative work in a gorgeous setting.

What mockup would you like me to create for you? Leave me a comment!

  • I LOVE this Chaitra! I Just got your newsletter so I’m stopping by to let you know that I’d love a mockup or two that would be good for showcasing portfolio websites. So something simplistic, with maybe a little splash of excitement. That probably doesn’t make sense, but pretend it does lol 🙂

    • Hey Krista! You are awesome for stopping by. I perfectly get what you are saying – so something like an a desktop or laptop computer in a simple yet creative workspace. Is that right? Basically with more focus on the computer screen itself? x

  • rose

    I would like a mock up of a refrigerator. I would like to showcase some items on a refrigerator.

    • Ah that’s a great idea, thanks Rose! 🙂

  • Thanks for the mock up Chaitra! I would like similar ones that you just sent in the email!! Which can be used to showcase websites, actually even on tablets and iPhones would be good. |

    • Hi Priyanka! How are you? Yes an iPhone one is what I am planning for the next one. Watch out 🙂 x

  • Oh, lovely! I adore desk mockups (for websites/courses) that are feminine in color, but don’t include over the top girly features like purses or high heels or lipstick, because I don’t know about you but my desk is for working creatively – not proving I’m a woman!

    • Hey Kristen 🙂 Ha ha! I agree with you – I ‘m not a huge fan of these too when it comes to Desktop mockups. Thanks for your ideas, I ll definitely keep them in mind when I create the next one!

  • Hey that looks so neat! 🙂

    • Hey Melissa! So good to see your comment. Hope you had a lovely weekend 🙂

  • B.

    This is awesome! Thank you!!

  • I love your mock ups!! I like mock ups with gender neutral items!

    • 🙂 Hey Raewyn! Thanks a lot 🙂 I ll make sure to add that into my list! Thanks for reading x

  • onecraftymiss

    Absolutely in love with this mock up! Thank you for sharing! I’d love to see a great iphone one maybe?

    • Hey there 🙂 Yes that’s definitely on my list for the next mockup. Thanks a ton – I ll reply to your email soon too! xx

  • This an absolute amazing post Chaitra.. I would love to try some mock ups for my food blog…

    • That is a great idea Rajani 🙂 I ‘d love to see what you come up with!

  • Pingback: How To Choose The Right Robo-Advisor For You - Half Banked()

  • Hi Chaitra! I would love a mock-up of an e-book cover. Thanks for your valuable and fantastic content!

    • Ah thanks for the lovely idea, I ll keep that in mind Angela! 🙂

  • Pingback: How to Sell on Pinterest Without Being Pushy or Salesy()


Get the ultimate guide to iPhone photography apps for FREE! Download Now
Hello. Add your message here.