Chris Mendez in NodeJS, For Developers

How to create an iOS Splash Screen or Launch Image using NodeJS

So far I've discovered three different ways to create a Launch Image (aka Splash Screens) for iPhone and iPad. The first two methods are for designers and the last approach is for NodeJS developers. The process is pretty straightforward but if anyone has any comments or questions, please share.

For Mac (only) Designers

If you are a designer and you own a Mac, then I highly recommend SketchApp. I love Sketch and thankfully, you can download this free template for creating Launch Images.

For PC Designers

If you're a PC designer then this free Photoshop PSD from @3liStone does a pretty good job.

For NodeJS Developers

Thanks to ImageMagick and ticons this project should take less than 5 minutes.


Step 1: Brew + NodeJS

Step 1, open Terminal and either install Brew or make sure you're up-to-date.

brew update && brew doctor  

Install NodeJS —which includes both Node and Node Package Manager (NPM)

brew install node  

Step 2: Imagemagick + ticons

Install ImageMagick (for image editing) and ticons.

brew install imagemagick && sudo npm i -g ticons  

Please make sure that you include -g in your command. This makes it possible to install ticons globally.

Step 3: Create LaunchImage.js

Create a new file titled LaunchImage.js and paste the code below. This script will take your orignal image and start making renditions.

var ticons = require('ticons');  
var path   = require('path');  
var util   = require('util');

//This is where you put the name of your original file
var fileName = "name_of_your_splash_screen_image.png"  
//This is where the renditions will be generated
var outputDir = "~/Desktop/name/of/directory"

ticons.splashes({  
    input: fileName,
    outputDir: outputDir,
    platforms: ['iphone'],
    classic: true
}, function (err, output) {
    if (err) {
        throw err;
    }
    console.log('generated files: ', output);
});

Step 4: Execute LaunchImage.js

node LaunchImage.js  

Congratulations!