How to Make an App Icon and App Store Screenshots (w/ video)

design
screen
icon
publish
tutorial

#1

If you are searching for this topic, Welcome to the exciting process of publishing your app! This is the final step that takes your app idea to the rest of the world.

You will need 4 graphics if you are publishing to both the Google Play Store and the Apple App Store.

In this tutorial, I show you how I created all of the graphics necessary to publish my Thunkable X app to both the Google Play Store and the Apple App Store.

Graphic #1 - App Icon

Create Your Icon

The app icon is what users will select to open your app. It should be a visual cue to what is found in your app. Go to the app store and look at the top 100 apps in your genre to see what your competitors are using for icons, and then design yours to stand out amongst your competitors.

I recommend using Canva.com to create your app icon.

I used ‘Instagram Post 1080 px x 1080 px’ for the size of my icon. When designing, I added a gradient background along with a single graphic.

Resize Your Icon

After you create your app icon, you will need to resize the icon to use across platforms. Thunkable recommends makeappicon.com for this. The online version of this is free.

After uploading your icon, the software will generate a ton of different image sizes that can be used.

I uploaded [email protected] to Thunkable and ‘playstore-icon.png’ to the Google Play Store.

Graphic #2 - Smartphone Screenshots

After taking screenshots of your app on a smartphone, go to ShotBot.io to make some nice graphics. Choose a free template, upload your screenshots, and then customize the text.

ShotBot says they require a certain screenshot size but don’t be too concerned if your screenshots aren’t big enough. The software will resize them and mine look just fine!

Graphic #3 - Tablet Screenshots (Required by Apple)

Thunkable automatically pushes an iPad version of your app to the Apple App Store. This means you are required to make iPad screenshots as well. Don’t skip this step! My app was initially rejected for this reason.

Since ShotBot doesn’t have templates for tablets, I used AppStoreScreenshot.com to create tablet screenshots. It does not have templates for you to use, but it is more customizable - giving you some creative freedom.

Graphic #4 - Banner Photo (Required by Google)

I used the same icon and screenshots created above for the Google Play Store. However, the Play Store had one extra requirement of a banner photo. I made this in canva!

You are required to use ‘1024px x 500px’ as the dimensions. Beyond that, showcase the best features in your app. This graphic is like an advertisement, so it should entice people to want to check out your app.


Please share any additional tools or resources you like below. :wink:

Happy Coding!


#2

@AmbleMind

This is an Amazing tutorial. Please continue with your creations.

Best
Abdul