Friday, January 3, 2020

How to Make a Responsive Mockup for the iPhone Without Photoshop

How to Make a Responsive Mockup for the iPhone Without Photoshop
Final product image
What You'll Be Creating

If you've created an app that works on different devices, it's good to let your potential users know about it by showing the app on a responsive mockup. You can do it easily with the online responsive mockup generator at Placeit.

Follow along with us over on our Envato Tuts+ YouTube channel:

How to Make a Responsive Mockup for the iPhone Without Photoshop

Step 1

Go to Placeit.net. Navigate to Mockups and find the Responsive Devices tab.

responsive devices mockups

Step 2

Here you can see a whole library of potential mockups for your app. There are many devices available, but if you’re particularly interested in one, you can narrow down the search using the filters on the left.

filter search results

Step 3

Even after applying the filter, you’ve got over 100 propositions to choose from. You can show your app on many screens at the same time, either in a neutral setting or inside a photographed scene. Place your cursor over the mockup to see an example of it being used. After you find the one you like, just click it to start editing. I used this mockup template.

select your interactive mockup template

Step 4

Believe it or not, you’ve done most of the work already! Once you’ve chosen your mockup, you just need to upload the screenshots of your app to it. Depending on the mockup, you’ll find a couple of Upload Image buttons on the left. Click the first one—here it will be the iPhone screen.

upload first image

Step 5

Select your iPhone screenshot and crop it to the size of the screen. Click Crop when you’re done.

crop first image

Step 6

Give it a second to upload. After it appears on the mockup iPhone screen, you’re ready to add another screenshot. Click the other button and repeat the process, this time selecting your iPad screenshot.

upload second image
crop second image

Step 7

After you upload your screenshots, you can remove them or crop them again. You can also add some text or a graphic.

add text or graphic

Step 8

Once you’re done, just scroll up and click Download.  You can purchase this one design, or download it for free as part of your unlimited subscription.

download mockup

Responsive Mockup Templates

See how easy it is? Now let me show you a couple of mockups that you can use to present your app to potential customers.

Mockup of a MacBook Pro and an iPhone

With this mockup, you can easily show the app in its mobile version, as well as on a wider screen. It looks simple and elegant.

Mockup of MacBook Pro and an iPhone

iPhone Mockup in a Natural Setting

Nature is very trendy now, so why not use a natural setting to present your app? This mockup offers you space for three mobile screenshots.

IPhone Mockup in a Natural Setting

Android Mockup

If you're going to sell your app in the Google Play store, you need something eye-catching! This mockup template offers you dozens of modern-looking backgrounds, along with different fonts for the text.

Android Mockup

iPhone App Store Screenshot Maker

Create a neat screenshot for App Store in seconds with this mockup template. Play with different colors, fonts, and graphics to create a perfect presentation for your app.

IPhone App Store Screenshot Maker

App Store Screenshot Maker With Angled Screen

If you need something more dynamic, you'll like this one! Here the screen is angled, which gives an organic feel to the presentation. Combine it with a cool background and a clean font for the best look!

App Store Screenshot Maker with Angled Screen

That's All!

Now you know how to make a responsive mockup for the iPhone without Photoshop.

responsive iphone mockup generator

If you want to learn more about using Placeit for your designs, try these tutorials as well:


No comments:

Post a Comment