Learning & Support


Creating your Launch Image

Twixl Support Team Updated: - Created :

    If you want to build your custom Twixl App, you can add a Launch Image. We created a special Photoshop template that explains how to do this.

    1. What?

    The Launch Image is what it says: it's the first thing readers get to see when they launch your Twixl App! Apart from the icon, it's maybe the most important identity of your app!

    2. Where to configure?

    You configure the Launch Image of your app in the build setting of your app. It needs to be:

    • square
    • 2208px by 2208px
    • .png format

    3. How to design?

    We use 1 Launch Image for both Phones and Tablets. That means the images gets cropped and you need to adjust your design accordingly. To assist you, we've created a Photoshop-template that you can use as a guideline.

    3.1. Download the Photoshop template

    3.2. Use the PhotoShop template

    1. Download the template
    2. Put it somewhere in the project folder of your Twixl App
    3. Open the file
    4. Open the Layers palette and replace the example design we used by your Launch Image. You do this by:
      1. Double clicking the Layer >> DOUBLE CLICK TO EDIT & REPLACE LAUNCH IMAGE
      2. Edit the design
      3. Save and Close the Layer (the .psb file)
    5. Make sure you respect the Safe Zones when you design your Launch Image:
      1. Purple area: The total available screen estate. Can contain non-essential layout elements that can be cropped.
      2. Red area: The safe zone for your Launch Image. Everything inside the square will not be cropped.  
    6. Save the Photoshop document. But before you do that, make sure the option Generate Image Assets is still activated. This will automatically create a file my-twixl-app-launchimage.png in the same location as the Photoshop template. Go to the menubar, select File > Generate > Image Assets (needs to be activated). You can use that image right away to integrate in your Build Setting!


    For more info about Generating Image Assets in Photoshop, see this KB-article.

    Layers Panel
    LaunchImage template

    4. What's next?

    Now that you finished your fancy Launch Image, you can go ahead and build your app! The following KB-articles will certainly help you with the next steps:

    Was this article helpful?

    0 out of 0 found this helpful