tutorial-launch-image-icon-assets

Launch Image and Icon Generator Tutorial

René Free, Tutorial 5 Comments

Now with Apple Watch and iPad Pro support!

I recently updated the Launch Image and Icon Generator file for Photoshop to support iPad Pro files as well. With this Photoshop file you can generate icon and launch image assets for iOS and Android devices at once.

This generator is mainly focused to create the assets for Corona SDK. But as far as I can tell you can use it for any app development environment. The exported asset’s naming convention and sizes does match the guidelines of iOS and Android.

So even if you are not a Corona SDK developer, this file will help you if you need image assets for your app.

In this tutorial article I show how to use the file and effectively generate 54 image assets just with a few clicks.

Download

The file is part of our free Basic membership plan. The Basic plan does offer many resources to support indiedevs with their projects. To download the file you must subscribe to our free Basic or paid Premium membership plan.

Holy Squid!

Not a Member?

Get tons of useful files, articles and tutorials for free!

The PSD file can be found in your member download section. After you unzip the file you get a file called LaunchImagesAndIcons-2016.psd.

When you open the file LaunchImagesAndIcons-2016.psd in Photoshop a new folder will be created in the same directory.

The new folder is called LaunchImagesAndIcons-2016-assets. This is a Photoshop feature called Image Assets.

Image Assets scans your Photoshop layer names for a certain syntax. For example if you name a layer icon.png and the Image Asset feature is activated, this layer will be exported as a PNG file to the aforementioned folder.

Now this file contains layers for each of the image assets that Corona SDK does support. At the time writing this file exports 54 image asset files: icons and launch images for iOS and Android. If you want, you can also export Apple Watch icons.

The smart thing about this files is, that each different version of the icon does use the same image. If you edit the image at one place, the change will be reflected to every version! That applies to the launch images as well. A huge time saver!

Overview of the PSD File

If you open up the PSD file you will be presented with a Photoshop workspace like this:

In the layers panel you will find the following layers and layer groups:

In the layers panel you will find the following layers and layer groups:

  • lc-auto-1x=off this is a special layer if you are using Slicy. The PSD file is also compatible with Slicy. It is like a parameter so that Slicy does not automatically create SD versions of the exported images.
  • Labels does only contain the text labels. Not important for the image assets.
  • TV contains only a Android TV Banner right now. If new devices like AppleTV or Amazon Fire TV will be supported by Corona SDK, their image assets will be found in here.
  • iOS Icons contains all icons for iOS devices
  • Android Icons contains all icons for Android (and Ouya) devices.
  • LaunchScreenFormats contains all the different launch images.
  • Icon-1024.png this is the big pink icon in the top left corner.
  • Default-Portrait@2x.png and Default-Landscape@2x.png are the two big green launch images you can see in the lower half of the workspace.

How to Edit the Launch Image

Ok, click on the arrow of the Default-Landscape@2x.png layer to see what’s inside.

Here we see a @bounds layer. Again this is needed for Slicy support only. Otherwise you won’t need it. And if you are using Slicy, do not touch it.

And there is a green color layer called SPLASH SCREEN – DOUBLE CLICK TO EDIT <<<<<.

This is the layer where we can edit the launch image.

Double click the layer miniature (double clicking the name will rename the layer).

Now Photoshop opens a new image. And this is the embedded image where we will take changes.

Now let us make some changes. I removed the DevilSquid and inserted a rocket icon. When your changes are done save the image and close it.

After that you should be presented with the following workspace. As you can see the change has been reflected to all versions of the launch image. Even the hidden ones has been changed too.

Change the Clipping Portion

As you can see, the rocket on the small TV banner to the left is a little big.

Can we change the size of the contents only for this single asset?
Yes we can!

Click on the arrow of the TV group layer to show its contents. In there you will find the Banner-xhdpi.png group layer. Expand this as well and single click the SPLASH SCREEN layer to select it.

Now press CMD-T to transform the layer. You see that the layer on the workspace gets a transformation control border.

Use one of the corner handles to resize the layer with the mouse.

While resizing hold down Shift key to resize proportionally. And if you hold down ALT key additionally the image stays centered.

Furthermore you can use the arrow keys to move the layer.

If you are satisfied with the resize use the Return key to confirm the transformation.

Cool, fixed a single asset image, while the rest stays at its place.

In fact you should check every asset if the image is in place or needs some adjustments. Use the eye icons in the layers panel to show or hide layer groups.

  • Dear Fellow!

    Please consider to say Thank you
    by liking our Facebook page.


Customize Single Assets

Let us say, we want the landscape version be different from the portrait version.
Would this be possible?
Yes, it is!

As you have seen above, every single asset is placed in its own layer group. If you want, you can add as many layers to these groups as you want. Here is an example.

Open the Default-Landscape@2x.png layer group. Select the SPLASH SCREEN layer with a single click.

Now click the Create a new layer button in the lower right of the layer panel.

A new layer gets inserted above the SPLASH SCREEN layer.

Now use the any of the paintings tool to create some enhancements. And do it better than I did 🙂

And that is it.

Remember that these modifications added with a new layer are NOT reflected to the other assets. Only modifications to the embedded SPLASH SCREEN layer itself are reflected.

Don’t forget to save your work. Every time you save, all the assets get automatically exported to the assets folder.

How to Edit the Icons

This works the same way. Just open the Icon-1024.png group layer and edit the ICON – DOUBLE CLICK TO EDIT <<<<< layer by double clicking its miniature.

Again you should check the clipping portions of the icons and fix them if needed.

Now you should have a good understanding of how to use this Photoshop file and create launch image and icon assets with a few clicks. I hope that this file is a real time saver for you!

Happy time saving
– René

Links & Resources



Please support DevilSquid


Comments 5

    1. Post
      Author
  1. Hi
    I am getting a missing font error , when i open the psd in photoshop cc 2017, what fonts are used in the template

    thanks

    1. Post
      Author

      Hi popeyesfx, thank you for checking out the icon generator file.

      I used the font Helvetica Neue Thin. But the text where this font is used is only for orientation in the document. It is not part of the exported images. So you can just substitute the font with a different one.

      Best
      René

Leave a Reply

Your email address will not be published. Required fields are marked *