STEP 3: Create the folder structure

Follow the folder structure and naming convention as demonstrated by the “Example App Assets.zip” sample folder downloaded in step 1 . In order for the app to be built correctly, the exact folder structure and folder names must be used so that the app can recognize where the required assets are located.

Station Folder (All Assets)

1. Create a new folder containing all assets for the app called “ CALL LETTERS ” and replace “CALL LETTERS” in the folder name with the call letters of your station, i.e. "WXYZFM"

Android Assets Folder

1. Inside the station folder, create a new folder called “ android_res ”

2. Inside the “ android_res ” folder, create the following sub folders:

1. drawable-hdpi

2. drawable-ldpi

3. drawable-mdpi

4. drawable-xhdpi

5. drawable-xxhdpi

6. drawable-xxxhdpi

7. drawable-port-hdpi

8. drawable-port-ldpi

9. drawable-port-mdpi

10. drawable-port-xhdpi

iOS Icon Assets Folder

1. Inside the station folder, create a new folder called “ ios_icons ” and replace “CALL LETTERS” in the folder name with the call letters of your station, i.e. "WXYZFM"

iOS Splash Screen Assets Folder

1. Inside the station folder, create a new folder called “ ios_splash ”

App 'Splash' Logo Folder

1. Inside the station folder, create a new folder called “ other_img ”

Asset Creation

Create one of each of the following asset types at the largest size required and save each asset into its corresponding folder setup in step 3 .

NOTE: Only the 192x192 icon.png is needed for approval for both Android and iOS app icons

NOTE: Only the 320x320 icon.png is needed for approval if your app 'splash' logo design is also suitable for both Android and iOS app icons

1. Once each asset type has been created, get internal approval for the appearance of the assets

2. Revise the assets if necessary and repeat the approval process until each asset type has been approved

Design Considerations

Please consider the guidelines below when designing or sizing assets.

Additional Recommendations

• At smaller icon sizes, a simpler icon design will display more clearly with less detail

• When designing the icon, keep in mind that it must display well across a variety of device screens that may be using different coloured backgrounds that range from light to dark hues, or different wallpaper images that range from simple to complex details

• The icon design should be consistent across all sizes, and ideally also consistent for Android and iOS apps for stronger brand recognition

• The splash screen design should be consistent across all sizes, and ideally also consistent between Android and iOS apps for stronger brand recognition

• Assets should be scaled proportionately and not stretched or distorted

• Asset file sizes should be reduced as much as possible in order to optimize the app’s launch speed and the app’s overall file size. Please see our recommendations for reducing file size .

• Even if the asset has only 1 colour, saving it as an indexed file is not recommended unless the image detail is extremely simplified and the appearance of the image remains true to original after indexing. Otherwise the asset will most likely appear bitmapped and unrecognizable especially at small sizes.

• See best practices for Android and iOS iconography

For Reference: Digital screens use pixels per inch (ppi) as a display unit. This means that image resolution on digital screens is dependent on the image size in pixels instead of using dots per inch (dpi) which is used for print resolution.

STEP 5: Produce the remaining assets

Once each of the asset types from step 4 are approved, you can produce the remaining assets using 1 of the 2 following options:

Option 1: Image-Editing Software

1. Manually re-size and re-crop each asset by changing the image size in your image-editing software.

2. Start from the largest asset available for each type and work through the chart from step 2 to re-size and/or re-crop it to create the next largest asset for the same type

3. Repeat the process until the smallest asset is completed for each asset type

4. Refer to the folder locations in the chart from step 2 and move each asset into its corresponding folder setup in step 3

For Reference:

• The 2732x2048 iOS splash screen ( Default-Landscape-1366@2x.png ) is the same proportions as the 2048x1536 iOS splash screen (Default-Landscape@2x~ipad.png) and 1024x768 iOS splash screen (Default-Landscape~ipad.png)
• The 2048x2732 iOS splash screen ( Default-Portrait-1366@2x.png ) is the same proportions as the 1536x2048 iOS splash screen (Default-Portrait@2x~ipad.png) and 768x1024 iOS splash screen (Default-Portrait~ipad.png)
• The 1242x2208 iOS splash screen (Default-736h.png) is of similar proportions to the 750x1334 iOS splash screen (Default-667h.png), 640x1136 iOS splash screen (Default-568h@2x~iphone.png), and 720x1280 Android splash screen
• The 640x960 iOS splash screen (Default@2x~iphone.png) is the same proportions as the 320x480 iOS splash screen (Default~iphone.png), 320x480 Android splash screen, and 200x300 Android splash screen
  
• The 480x800 Android splash screen does not share similar proportions to any of the splash screens

Option 2: Icon Generator

1. Use any of the recommended online tools below to help automate parts of the icon production process

2. Once the icons have been generated, refer to the folder locations in the chart from step 2 to move each icon into its corresponding folder setup in step 3

STEP 6: Rename the assets

Follow the asset naming convention as demonstrated by the “Example App Assets.zip” sample folder downloaded in step 1 . In order for the app to be built correctly, the exact filenames must be used so that the app can recognize the assets it requires.

1. Refer to the chart in step 2

2. Start from the top of the chart and copy the exact filename of the asset, including any special characters (i.e., "@", "~", etc.)

3. Double click on the filename of the corresponding asset and paste the correct name

4. Work down the chart and repeat the process for each asset until complete

5. Once complete, review the chart again to ensure that all assets are correctly named and organized, and that the folders created in step 3 are also correctly named and structured

For Reference: The “@2x”, “@3x” in the filenames is a standard naming format used by apps to recognize assets used for retina display.

STEP 7: Upload to SoCast

Submit the station folder created in step 3 via Google Drive, or talk to your SoCast account manager for more sharing options.