About screenshots for the app stores

Another alternative is to make your own with a free open source program called Gimp. It is a very powerful and so not very simple app, but there is plenty of free documentation and tutorials. 

To grab the templates you’ll need for the app stores, click the download icon here. 

First step is to get your screenshots. In this tutorial I’ll be using the screen for a Pixel 6 phone. In your emulator, go in and make a new virtual device or use your existing one. 

Load your app, and get some good shots of your app. The Android emulator is at the right, iOS simulator at left, and both have the screenshot button circled for reference. 

Open your first screenshot in Gimp. The first thing you will do is give your screenshot rounded edges. 

In the menu bar click on Filters, then Decor, then Round Corners. In the dialog box that comes up, make the radius 100, add drop shadow or not as you like, but clear the Add Background option. If you leave Work on copy option checked, it will make a new untitled Gimp file for you. 

Now you’ll have your screenshot with rounded corners. Save it by going to File, Export As… and choosing a good location. Save as png. 

Open the Android or iPhone 6.7.xcf template from the zip file you downloaded earlier. Once there you can hide the existing template screenshot by clicking the eye next to the screenshot in the layers panel at the bottom right. It’s still there, just hidden. Try clicking on that eye to hide it and then reveal it again. Hide it when you are ready.

Now load your screenshot into the file like this: Click File, then Open As Layers to insert your app’s screenshot as a layer. Find it in the layers panel at the bottom right. (Or if you feel comfortable doing it, you can add it by just dragging your rounded corner screenshot file from your file manager straight into the Layers panel, and drop it above the Background layer. If it comes up behind (below) the Background, just click and drag it up above Background.)  

Now click on the background layer at right and change the color with the paintcan tool. 

First click on the color selector and choose a new background color. 

Now click on the paintcan tool and click in the yellow area to change the color.  

Now it’s time to add the text. Make a new layer by clicking on the new layer button at bottom right. Make sure the last option at the bottom is Fill with: Transparency.

Click on the screenshot layer and the move tool (top left tool) and move the image down.

Then click on the text tool (the “A”) in the tool panel and draw a rectangle above the screenshot.

Choose your font, font size, text color, etc. at the left. The font I have here is Avenir Heavy.

There are some more text tools in the bottom left panel – I’ve clicked on center text here, circled in red. 

You can make multiple screenshots in the same file by using layers. Here I’ve added another color background by duplicating a layer (right click on the layer you want to duplicate in the layers panel and click Duplicate Layer), and I’m about to duplicate it again to get a third background color. I can hide and show those backgrounds as I like to show those colors on different shots without having to change the color repeatedly. 

You can also duplicate and show/hide layers with the rounded corner screenshots as well as the titles to put many shots into one file. 

Note that Gimp’s file extension is xcf, and to use the final product you have to Export As, not Save As png. 

To take your screenshots to the App Stores or the web, click on File, Export As… and export as png. In Gimp to specify what format you want, just put it in the filename – so export as yourfilename.png. 

Keep going with your other screenshots til you have what you need. 

The Google Play Store also requires tablets, but the 10-inch shots can work for both 7 and 10 inch requirements. Go back into the Virtual Device Manager in Android Studio and make a new virtual devices by clicking Create Device, then choosing Tablet at the left, and then New Hardware Profile. In the box that comes up give it a name like My 10 inch tablet, and define it as 10 inches and with resolution of 1080 x 1920. Click Finish. That creates the hardware profile – keep going by selecting the system image and finishing up.