Hello! I'm zm soft, a developer who registered in late 2023 and started releasing apps. I'm also planning to release a developer app — check it out when it launches.
Today I want to cover how to create the images you need to submit to the Play Store when publishing an app.
Background
My development environment is Mac. So this article assumes Mac. I should mention that professionally I use Windows — I only started using Mac seriously very recently. That means some of what I write here might be obvious to experienced Mac users, but hopefully it helps beginners like I was.
Tools Used
- Keynote
- Preview
Both come pre-installed on Mac, and that's all I used. I looked into various image editing apps, but most were paid. I wasn't sure how far the built-in apps would get me — turns out, they're more than enough.
General Workflow
Here's how I approached image creation:
- Capture the app's screen
- Add a description of the app
- Crop to the required area
The target is the typical store image style: phone screen in the bottom half, app description text above it.
Capturing the App Screen
First, use Android Studio's screenshot feature to capture the screen. Since I use an AVD (emulator) rather than a physical device, I launch the AVD and take a screenshot using the camera icon.
Adding App Description Text
Next, use Keynote to add the description text. I wanted everything to be consistently sized, so I first set up a frame matching the capture image's dimensions, then scaled down the capture and left room above it for text. The background would look bare on its own, so I added a gradient image behind it.
The black outline shows the original size of the captured image. After framing it, I scaled it down and placed it in the lower portion of the canvas.
Cropping to the Required Area
Finally, use Preview to crop to the frame size. In Keynote, select all the items you need, then open Preview and choose [New from Clipboard] — this creates an image sized to match what you copied. At this point, background images and other elements may extend outside the target area, so edit and crop those out.
Select the area you want (as shown above), then go to [Tools] → [Crop] to remove the excess.
Creating Multiple Images at the Same Size
Once you've established the frame size in Keynote and made one image, use it as the base for the rest. Line up multiple frames of the same size in Keynote and create each variation.
Then just upload the finished images to the Play Store.
Side Note: Using AI for Feature Images
The standard screenshots felt a bit plain on their own, so I also made a few feature images to go alongside them. Bing can generate a decent number of images for free — I used those as backgrounds and added the app's tagline on top. Even without any design skills, the result looks surprisingly presentable.
This is my own rough approach — I'm sure there are better ways. If you have a method you prefer, feel free to share it in the comments.