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.
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.
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.
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.
Step 5
Select your iPhone screenshot and crop it to the size of the screen. Click Crop when you’re done.
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.
Step 7
After you upload your screenshots, you can remove them or crop them again. You can also add some text or a 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.
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.
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.
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.
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.
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!
That's All!
Now you know how to make a responsive mockup for the iPhone without Photoshop.
If you want to learn more about using Placeit for your designs, try these tutorials as well:
