Create Graphic Assets: Icons And Splash Screens

Before using the ConfiGAP app in the Test App menu item, it is helpful to create ALL of the graphic assets that are needed for the app in advanced. This will help to prevent you from slowing down once you have to upload or include icons and splash screens for your app and for the app store.

Icons Creation

You need to create a variety of icon sizes for your app depending on the OS and the App store.

Google Play requires a minimum of least two screenshots that show what the app will looks like on a mobile device. Optionally, you can also add screenshots that show what it looks like on 7'' and 10'' tablets if you have optimized your app for tablets. You can even add screenshots for an Android TV.

Android for Google Play:

NOTE: For submission to Amazon Games you will need an icon that it 114 x 114.

Apple Store requires a minimum of ....

iOS 7.1 for Apple Store:

iOS 8 for Apple Store:

Beside Photoshop and Illustrator which can create icons, there are a number of tools that you can use to create multiple icons at one time. Many of these tools are used with Android Studio; however, you can use them to create icons for your PhoneGap Built projects. Follow the instruction on their website for details.

While not the best option, if you are versed in using Dreamweaver, you can use it to create icons for you:

  1. Create a new folder and name it icons.
  2. Create the largest version of the icon that you need and save it in the icons folder.

    NOTE: In this case, we will be creating icons for Android. So the largest one should be 192x192. Save it as icon192x192.png.

    TIP: Naming the icon with numbers (e.g., 192x192) will help later when you have multiple icon sizes to choose from without having to open the file or view its properties to see its dimensions.

  3. Duplicate that icon as many times as you need in the same folder and give them descriptive names.

    NOTE: In the case of Android from the list above, you need six more icons. Name them by their corresponding sizes.

  4. Open up Dreamweaver and insert ALL of them in a blank page EXCEPT for the largest one (e.g., icon192x192.png).
  5. Select the next largest one and then:
    1. Change the height and width of it in the Properties panel to the size needed (e.g. 144 W and H).
    2. Click on the Resample icon in the Properties panel.
      WHY: To resample the image to a new size permanently.
    3. In the Resample dialog box that appears, click the OK button.
  6. Repeat steps 4 and 5 for each of the other icons and give them their appropriate size and name.
  7. Close Dreamweaver and DO NOT save the file.
    WHY: Because it was only used to create the icons and not to create a page.

Splash Screens Creation

Splash screens are displays when the app starts and are used by the app stores for advertisements.

For the splash screens, you can used the above technique along with creating some additional splash screens in Photoshop or whatever tools you have at your disposal. Later, you can even load a page of your app in Firefox and then press CTRL + SHIFT + M to create different screenshot sizes by selecting them from the drop-down menu (or creating a custom size) and then pressing the camera icon to create screenshots.