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.
- 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
- provide a launch screen as an Xcode storyboard or as a set of static images for the devices your app supports
- generate image sets for different sizes - use ImageMagick from Github or online tools
- 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:
Finally, install ios-image-maker by npm:
npm install -g ios-image-maker (if failed, add sudo at the beginning)
In your iOS project folder, create a file named image-config.json like this:
“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:
It help you to generate all 2x,3x images accordinglly
google “generate ios image sets”, there are tons of tools to help you; I personally recommend “Iconizer”
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.