Much of the user experience (UX) is directly tied to the images they see. Your mobile app icons should convey the app's purpose.
This tutorial will show you what you should know about designing graphics for mobile apps. We will take you through the different types of icons and what they are used for.
Why are mobile app graphics so important? Because the limited space on mobile devices means the app MUST convey more information in a smaller space. Icons and images are ideal for this purpose.
It does not matter which graphic editor you use to make you icons and images so long as you are able to add text over top of your images. In most cases you won't need to do this but you will in some instances want to add text. We use Paint.net because it is freeware and easy to use. Plus there are several free plugins to enhance it's capabilities.
You MUST have at least 1 App icon and 1 Splash screen. But the more you have the more compatible your app can be with more mobile devices. Here are some "Application Icons."
The above mentioned graphics do not include the icons that go into the app. You will want 4 to 7 icons for labeling the pages in your app. With a small screen space available You want small icons and one word labels for each page. Example: Home, About, Share, Tools, Blog.
Icons for Apple App Store have different size requirements. They are: 180px by 180px square, 150px, 144px, 120px, 114px, 72px and 57px (all square shaped). We will get into the specifics of making icons later in this tutorial.
The Splash screen is the first image a user sees so it MUST identify the app. I like to include the name of the app along with the the main icon or theme and some extra information. You can also give some instructions to the user.
The Splash screen image can be 320px wide by 480px in height up to 1080px wide by 1920px high. This gives an aspect ratio of 2/3. The 320x480 screen size is about the smallest out there. So designing for this size means your screen will fit on any larger device.
Typically the Splash screen is zoomed to fit the mobile device screen it is loading on. The larger 1080x1920px size is intended for larger tablets. You can make just one of these for Google Play and it will work on most devices. I recommend making at least the Splash screen 320x480px.
Here are the required Splash screen size for Google Play: 320px wide by 480px high .png format. Thats it!
Here are the Splash screen sizes for Apple App Store: 320x480px, 640x960px, 640x1136px, 750x1334px, 1242x2208px, 768x1024px and 1536x2048px. All must be .png format.
Splash screens only display when an app is loading. Once the app is loaded or re-synced it disappears and your app is displayed.
The "Feature Graphic" goes the 'Featured App section on the developers webpage. Be aware that you can not include more than 25% text in your graphic. See what I did on this graphic. I included a very large version of the icon and have a large headline with the name of the app.
For this graphic I only include the app icon and the name of the app. You could get pretty fancy here but my recommendation is NOT to, keep it simple. You should take the time to make this graphic look great. Make sure all the components fit perfectly and work well together. Try to get your text as large as possible but not overly big.
This hi-res icon must be a higher resolution of your 'App Icon' that is 48px square. It should contain only your app icon logo and app title.
A couple of places you can get mobile app graphics are iStockphoto.com, BigStockphoto.com and my favorite Toons4Biz.com. Or you can search the Internet as there are several icon sets you can download for free.
The icon graphics use three layers. The first layer has the yellow background and black border on it. The second layer contains the cartoon caricature. The third layer has the text on it. I save them in the .png format and flatten the image when I save. Be aware you will sometimes be asked to save the graphic as a 24 bit (no alpha) format. In Paint.net you can easily select this option when you save.
Mobile App Builder - tutorial teaches you how to begin making your own mobile app.
Mobile App Editor - tutorial teaches you how to use the editor to configure your mobile app.
Mobile App Plans - tutorial teaches you how to select a plan for your mobile app(s).
Hope this helps.