How to speed up 2D art workflows with 2D PSD Importer

2D games are made from hundreds or even thousands of sprites. The 2D team at Unity is continuously working to improve round-tripping workflows, including the steps needed to import, and iterate on, assets. A major improvement is the 2D PSD Importer package. Read on to learn how to import Photoshop PSB files into your project and explore real use cases that can boost your productivity when working with 2D assets.

Exporting and importing layered Photoshop files into Unity can be time-consuming. If you make changes to a source file, you can fall into an inefficient loop of re-importing files as you tweak them. The 2D PSD Importer package solves this problem for you and enhances the import process with new features.

You can install the 2D PSD Importer package from the Package Manager. It doesn’t require additional setup, and you can start importing Photoshop PSB files as soon as you’re ready.

The PSD Importer supports the PSB file format, which is functionally identical to the more common Adobe PSD format. The difference is that a PSB file supports much larger images than the PSD format. 

To create a PSB file from Photoshop, click on File → Save As and, from the Type dropdown, choose the Large Document Format (PSB).

Once you drag and drop the file into your project’s Assets folder, Unity automatically creates a Prefab that contains all the Photoshop layers as children. Each child has a Sprite Renderer component, and by default, they preserve the transform and depth sorting data of the source file, recreating the source image.

You can change the import behavior in the Import Settings. Some of the settings are the same as the default settings for importing any image into a project. Others are new and introduced with this package.

For example, the Import Hidden setting allows you to import the hidden layers of a PSB file and not only the visible layers.

The Mosaic setting generates a Sprite per layer. Disabling it will create a single Sprite out of the Photoshop active layers. This is like exporting a flattened version of the image.

The Character Rig property allows you to create a Prefab that maintains each generated Sprite with its original transform and depth sorting.

If the Sprite contains bone or weight data, the PSD Importer adds the Sprite Skin component required to create 2D animations. This works in conjunction with the Skinning Editor.

Disabling this option generates a Sprite that contains the Photoshop layers sliced but without preserving their order or creating a Prefab Asset.

The Use Layer Grouping setting allows for nesting of the Prefab’s children under new empty GameObjects representing Photoshop’s layer groups. Enabling this option will recreate in Unity the exact hierarchy you have in Photoshop.

There are some rules to be aware of to export a PSB file correctly. For example, you need to avoid Photoshop’s layers with duplicated names. Remember as well that the 2D PSD Importer doesn’t import the Photoshop layer effects.

See the PSD Importer docs for more information on each of the settings.

Now let’s take a look at some helpful use cases.

A first use case is to use the PSD Importer to speed up the importing phase and the image iteration process, resulting in a faster 2D workflow overall.

Imagine a graphic designer creating a bunch of icons, or as is the case in the image below,  different glyphs, one per layer. Having them in different layers help the designer keep a consistent look by having a size or color reference in the same document. Instead of exporting each layer in a single PNG file or exporting a layout with all the elements, it’s possible to import the PSB file.

The icons will be used as flat graphics in the game, so we’ll disable the Character Rig setting, which makes the asset a simple Sprite Sheet. Each layer of the file appears as a standalone Sprite.

The Prefab that is auto-generated when importing the Photoshop file is helpful when you need to keep the resulting image assembled and in place. This happens with characters or any layered element, like this tree:

Once imported, the tree is ready to be placed in the scene. Positions and rotations of each Sprite are correct, and so is the Order in Layer value that handles the GameObjects’ depth sorting order. The higher the number, the closer the GameObject looks to the camera.

Having the PSB source file in the project’s Asset folder and reading directly from Photoshop’s layer data allows artists to integrate with Unity more efficiently and flexibly.

Let’s assume you have imported a Photoshop file containing a character with many accessories such as the one in this image:

Without the PSD Importer, you would probably export all the accessories in a PNG Sprite Sheet and make Unity automatically slice it. Then, you would manually position the accessory Sprites on the character in Unity, recreating the Photoshop reference.

Using the 2D PSD Importer, you can place all the accessories in the final position and make all their desired adjustments in Photoshop. Once satisfied, all you need to do to confirm the new changes is to save the file in Photoshop.

The 2D PSD Importer, in combination with the 2D Animation package, also provides a great solution to prepare your 2D art for animation.

In the images above, we have selected a Prefab created after importing a PSB file and clicked on the Sprite Editor. In this case, we can choose the Skinning Editor and start creating the mesh skeleton by adding bones and weights. We save time here since otherwise we would have to manually assemble the character Prefab.

Learn more about the 2D Animation package here.

The auto-generated Prefab based on the Photoshop layers is also convenient for frame by frame animations.

In this Photoshop file, we have a character animated within the timeline. Each layer represents a frame of the animation. 

The steps to recreate this animation in Unity are simple: 

• Import the PSB file 
• Disable the Character Rig option to obtain a Sprite Sheet 
• Drag and drop the PSB asset to the Scene view
• Click Save in the pop-up that asks you where to save the animation.
• A GameObject with a Sprite Renderer component and an Animator component attached will be created 
• Press Play
• Adjust the animation if needed in the Animation window by selecting the newly created GameObject

Level design is another practical use case for the 2D PSD, such as a 2D background with a parallax effect.

The parallax effect is achieved by subdividing the background into multiple layers and placing them at different depths away from the camera. With the PSD Importer package, artists can work directly on the PSB file from Photoshop, subdivide the background into layers, and see all the changes applied directly to the generated Prefab in Unity.

The 2D PSD Importer package is also useful for importing normal maps. In this Photoshop file, we have a group containing all the character art layers and a group with the generated normal maps.

To integrate them in Unity, we export a PSB file with only the character art visible and a second PSB file with only the normal maps active.

To automatically apply the normal maps, we first obtain a Sprite Sheet by disabling the Character Rig setting. Then, we open the Sprite Editor of the art and add a secondary texture.

Make sure you choose a shader for the Sprite that supports a normal map, such as the Sprite-Lit Shader that is included in the URP/ 2D Renderer, and that works with 2D lights.

These are only a few examples of how 2D artists working on Unity projects can benefit from importing layered files from Photoshop. You can find a video of this tutorial here. Pick up tons of helpful tips for your 2D project in this blog post. Learn about choosing the optimal resolution for your 2D art assets, and finally, check out our latest 2D sample project, Dragon Crashers, to see more examples of how to use the 2D PSD Importer.