Test Apps on iOS screens and create iOS Screenshots with Responsive Web Apps

Hi Thunkers :wave:

With the introduction of responsive web apps, you can now:

  • View your app on many different device screens
  • Create your own iOS screenshots!

To begin with, here is a list of screenshot sizes you need to publish to the App Store.

You can now create all screenshots necessary with Thunkable X!

To preview your app on different sized device screens:

First, publish your app as responsive web app.

Open the link in Google Chrome.

Click Settings > More Tools > Developer Tools to view app in Developer mode.

You want the console window to be on the side of the screen.
If it is on the bottom of the screen, click the three dots on the upper right corner of the developer console and use the images next to the text ‘Dock side’ to move this window to one side of the screen

Your project should now look like this:

In the top left hand corner of the dock, click the icon that looks like a phone and a tablet standing next to each other

Screen Shot 2020-04-07 at 12.36.41 PM

You will now see that your app looks like it is being viewed on a mobile device:

You can use the drop-down menus at the top of the screen to select different devices and screen orientation.

To create screenshots for this device:

Take note of what device you select. Here we have selected iPhone X.

Take a screenshot of this screen.

Open it in an image editor.

This tutorial will use GNU Image Manipulation Program, as it is free to download. You can follow the instructions using an editor of your choice. The aim is to end up with an image that contains only your app screenshot, the whole app screenshot, and no other content.

Open your image in the editor. In GIMP, click File > Open As Layers and select your screenshot.

Crop your image , leaving a slight border around the edge.

Use a magic wand selector to select your screen, excluding the border.

Fit the image canvas to your selection by clicking Image > Fit canvas to selection.

You should have something like this:

Resize your image. This is where we need to recall the device we used to get the screenshot.

We used an iPhone X for this screenshot, which a quick online search will tell me has a dimensions of 2436 x 1125 px and a ppi (pixels per inch) of 458.

Click Image > Scale Image and enter the details to match the device you chose.

Your image will now appear larger in your editor.

Export your image in your desired format. Click File > Export as and select a name and file format for your image. You can accept their default settings for everything else.

And now you have an iOS screenshot of your app!

5 Likes

That’s a great idea. Also if anyone wants to have your screenshots nicely presented in app store visit https://app-mockup.com

3 Likes

Thank you @jane!!!
Great suggestion @eoinparkinson!!

3 Likes