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.

Take a few shots and choose one that you love.

Open the image in photoshop.

Create a Rectangle shape.

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.

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.

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).

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.

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

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

Post navigation

2 thoughts on “How to create an Ipad Mockup”

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 :).