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.
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.
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!
- 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.
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.
How to Edit the Icons
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
Links & Resources
Please support DevilSquid