Generate Your Icons And Splashcreens Or Any Scaled Assets

In this article you'll learn on of our trained monkey trick to handle a boring task such as generating Icons, Splashscreens or any kind of assets you must produce in various sizes.

But let me tell you a short story first !

Once upon a time, I had to generate one cordova app icons and splashscreens

Armed with my strongest goodwill, (a big) Lot Of Laughs, I clicked on the photoshop icon sitting on my task bar. Then follows :

  • Image -> Canvas Size
  • Set the desired size
  • Click Ok
  • File Save As
  • Pick png in the file type (if you can find it)
  • Choose the appropriate location and name
  • Save
  • Revert to original file
  • Repea... arrrrghrrlll feels like death from a thousand cuts...

The thing is I remembered there was nice tools to generate such assets. So I said enough ! I'm going to use one of them.

I was about to run ionic resources --icon and take a nap for the remaining of the afternoon, some cruel one yelled :

stop it you fool ! This will not give results as crisp as photoshop with the appropriate settings ! You shall not generate !

Wait what? No ! Never gonna give me up ! Is that it ????

Me neither ! And a few minutes later I came up with a modified version of this Photoshop script. It was like Ionic but with the specific required photoshop settings.

They generated happily ever after and had a lot of splashscreens and icons.

Yes but...

Somewhere, in the whole wild world, the REPEAT cabal was secretly planning something nasty. A horrendous hag is laughing at this very moment.

We already talked a bit about various environements we use to test, validate and ship our products. The thing is we also end up installing several versions of the same app on our phones. We can of course change their title to identify them as follows : Preproduction app, validation app integration app, etc... but we don't see the name of the app anymore (and we have a lot of them). Or we could add a colored symbol on the Icon !

For instance we would generate those icons:

But since we have up to 5 environments and 3 quality (alpha, beta, final), it is up to 15 combinations.

Easy, just add layers to photoshop and generated sets of icon for each one of the environments. Yes but who will switch the visible layers.... ?

  • YOU will have to open the photoshop
  • YOU set the active layers
  • YOU run the script
  • YOU reset the source
  • YOU REPEAT AGAIN !!!!!! diabolical laughing coming from hell.

From darkness comes light ...

But there was one thing the REPEAT cabal did not expect. Smart monkeys at Geek Learning are like Charlie's Oompas Loompas and they do have more than one trick to show!

And guess what language we will rely on? Javascript ! Wait why? Because Javascript is so 2016 ! It runs in the browser, in the server, in the database and in photoshop ! So let's spawn a new javascript based project, because there will never be enough javascript in 2016 !

The objective would be to have a way to describe all size and variants we need to generate and orchestrate photoshop layers accordingly.

This is how gl-toolbox is born.

How it works

There is a json5 configuration file where you can specify the sizes to generate and set options like output directory or input file (so you won't be prompted each time).

And there are the photoshop source files:

We will use the layer names to specify how they behave. Take a look at the splashcreen file layers:

You can notice that each layer or group can present a trailing _mod* string which specifies a list of modifiers. You we will also notice that some of them are prefixed with variant: which will define a set of variations.

Let's dive into it.

Variants

Variant will allow you to generate a complete set of assets for each one of the child layer or layerset. This is what we will use to generate our int, val, pre and pro icons sets.

The syntax is follows :

  • A root Layer set named : variant:variantname,priority will define variantname variants :). Priority allows you to control generation order if you have several variant groups
  • The name of immediate children (layer or layer set) will be the name of each one of the variants

For instance in our Icons example we have to variant sets: stability and environment.

Modifiers

Modifiers are defined by adding them as a suffix to layer name ( so you can keep a friendly prefix name :)). They are separated by a simple dash:

layername_mod-modifier1:params-modifier2:params

Currently supported modifiers are :

  • dock : allows you to dock an element to any part of the document. It accepts multiple parameters:
    • right : will dock the element to the right. It will also preserve original distance to the right.
    • left : will dock the element to the left. It will also preserve original distance to the left.
    • top : will dock the element to the top. It will also preserve original distance to the top.
    • bottom : will dock the element to the bottom. It will also preserve original distance to the bottom.
  • stretch : allows you to control how elements are to be stretched (horizontal, vertical, both)
  • scale : allows you to control if elements are scaled. It accepts one parameter:
    • reset : restore the layer to its initial size (might not be pixel perfect but works with most photoshop layers)
    • restore: restore the layer to its initial size but only works with shape layers.
    • restorey: restore the layer to its initial height (only works with shape layers).
    • restorex: restore the layer to its initial width (only works with shape layers).
  • vis : allows you to control visibility of en element

And now I'm happy !

To be honest, this was quite a geeky thing to do and you may find this a bit silly. However, it was quite fun and we now use it a lot. We are quite satisfied with the convenience it brings, hence we thought it was worth sharing. We would be happy to hear your feedback or merge your contributions on github ! Thanks for reading.