How to create an Ipad Mockup

How to Create an Ipad Mockup

I am starting to get a little giddy, and possibly too excited.  Today is my first post for Say Hello Photography!  This is a project I’ve been wanting to do for a while and just never had the time.  Enough about how overwhelmed with happiness I am!  On to the tutorial!

You want to make a mockup right?  Why shouldn’t you?  If you have a blog or a website this is an incredibly fun and easy thing to do!  Having a mockup of your website on a computer or ipad screen looks fantastic and is beneficial to your brand.

Create an Ipad Mockup for Your Website

To create an Ipad mockup you will need just a few things:

  •  ipad
  • props
  • photoshop
  • camera
  • screen shot of your website from your ipad

The first step to creating your mock up is to grab your ipad (you could also use an iphone or a computer).  Find some natural light outside in some shade or inside by a big window. Grab a few props (flowers, coffee, pencils, office supplies, etc.) and style your photo with the ipad.

How to Create an Ipad Mockup

Take a few shots and choose one that you love.

Open the image in photoshop.

How to Create an Ipad Mockup

Create a Rectangle shape.

How to Create an Ipad Mockup

Push Command T for Free Transform and then choose Edit and under Transform click distort.  This will allow you to drag each corner of your rectangle to fit the corners of your ipad.

How to Create an Ipad Mockup

After you’ve aligned the rectangle hover your mouse over the rectangle layer and right click. Click Convert to Smart Object.  Then right click again and click Edit Contents.

How to Create an Ipad Mockup

Once in the smart object window add your ipad screen shot of your website by clicking File and then choosing Place Embedded and then choose your image (ipad screen shot).

How to Create an Ipad Mockup

Rotate your screen shot to fit the rectangle and click Command T if you need your image to be smaller or larger until it is close to the size of your smart object (rectangle shape).

After it’s positioned highlight both the rectangle layer and the screen shot layer.  Then hover your mouse between the two layers until your mouse changes shapes and right click.

Change the lightness of the screen shot by choosing Hue Saturation and taking the lightness down just a bit.

How to Create an Ipad Mockup

To save the results click Command S.
Navigate back to the original file and you are done!

How to Create an Ipad Mockup

Be sure to upload your new mockup on your site, use it in a blog post or a gallery slider!  It’s lovely!

Till Next time!


How to Create an Ipad Mockup

Follow my blog with Bloglovin

2 thoughts on “How to create an Ipad Mockup

  1. Hi Tara,

    Just discovered your blog via Creative Market today and love your very first blog post! I had been looking for a super simple way to create a mockup and your tutorial provides exactly all the info I need step by step. Awesome! Thanks so much :).

  2. HI! I am so glad you like the post and it was what you needed! I just looked at your blog and I love it! Great ideas and beautiful posts as well! Thank you for the encouragement! 🙂

Leave a Reply

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