Nicole Han

iOS Launch Screen

Word count: 455Reading time: 2 min
2019/03/29 Share

iOS Launch Screen (Development)

A launch screen appears instantly when your app starts up. The launch screen is quickly replaced with the first screen of your app, giving the impression that your app is fast and responsive.

Design a launch screen that’s nearly identical to the first screen of your app.

Tips

  • Avoid including text on your launch screen. Because launch screens are static, any displayed text won’t be localized
  • Keep it free from unnecessary distraction
  • Don’t use multiple colors or logos
  • Use animation sparingly

Development steps

  1. provide a launch screen as an Xcode storyboard or as a set of static images for the devices your app supports
  2. generate image sets for different sizes - use ImageMagick from Github or online tools
  3. 5.

Generate image sets

  1. Installation (you need install NodeJS first):
    First, paste that in a macOS Terminal prompt to install Homebrew

    /usr/bin/ruby -e “$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
    You can visit https://nodejs.org or install it via Homebrew
    brew install node
    For the very simplest, fastest, most basic ImageMagick installation, run:
    brew install imagemagick
    Test your installation by running:
    identify -version
    Finally, install ios-image-maker by npm:
    npm install -g ios-image-maker (if failed, add sudo at the beginning)

  2. Usage:
    In your iOS project folder, create a file named image-config.json like this:

    {
    “items”: [

    {
    “type” : “assets”,
    “sourcePath”: “./sourceImages/assets” ,
    “destPath” : “./image-example/Assets.xcassets”
    },
    {
    “type” : “icon”,
    “sourcePath”: “./sourceImages/icon” ,
    “destPath” : “./image-example/Assets.xcassets”,
    “name” : “Icon”
    }
    ]
    }
    It defines how to generate images. type can be assets or icon, which represent asset images and app icon respectively. sourcePath and destPath defines where the source image and the generated images.
    After created this image-config file. you can run ios-image command in the same folder:
    $ ios-image
    It help you to generate all 2x,3x images accordinglly

another option:

google “generate ios image sets”, there are tons of tools to help you; I personally recommend “Iconizer”

Image Size and Resolution

A standard-resolution display has a 1:1 pixel density (or @1x), where one pixel is equal to one point. High-resolution displays have a higher pixel density, offering a scale factor of 2.0 or 3.0 (referred to as @2x and @3x).

For example, suppose you have a standard resolution (@1x) image that’s 100px × 100px. The @2x version of this image would be 200px × 200px, and the @3x version would be 300px × 300px.


In conclusion, launch screens can be a way to bring a little delight to your users or an opportunity to reinforce your brand identity. Whatever reason you design your launch screen for, make sure that it doesn’t cause the loading time to go on any longer than it should.

CATALOG
  1. 1. iOS Launch Screen (Development)
    1. 1.1. A launch screen appears instantly when your app starts up. The launch screen is quickly replaced with the first screen of your app, giving the impression that your app is fast and responsive.
    2. 1.2. Design a launch screen that’s nearly identical to the first screen of your app.
      1. 1.2.1. Generate image sets
      2. 1.2.2. Image Size and Resolution