We developed a Photoshop script that takes the layers in your PSD file and exports them as individual image assets. 

These images are exported at both non-retina and retina sizes for the different mobile devices you are creating for. The images are named and structured the way the layers are named and structured in the PSD file, so give your layers unique names to avoid accidentally overwriting assets. 

We use a tagging system to tell the script what to do with each layer in the PSD.

Prep Your Photoshop Layers

  • Give your Photoshop layers unique names to avoid accidentally overwriting your assets when you import them into Lightwell.
  • Each layer should be 1136x768 pixels or smaller. (Note: The script will automatically export your layers to both non-retina and retina sizes.)

Installation

If you'd like to cut your assets directly from Photoshop, you'll need to install the script using the steps below. 

  • Download the script here.
  • Move the file into Applications > Adobe Photoshop > Presets > Scripts.
  • Restart Photoshop.
  • The "Lightwell Asset Cut" script should be in the drop down menu File > Scripts.

Running the Script

  • Go to File > Scripts > Lightwell Asset Cut
  • Select Retina Configuration
  • Select a destination for all of your images

Note: Your photoshop file must have the .psd extension.

We've developed a specific tagging system within our script to cut layers in different ways. Therefore, each layer will be cut based on how you've tagged your photoshop file. Please see our tagging system below:

Lightwell's Tagging System

Here is an example PSD that we are going to use to help explain all of the features of the photoshop script. Each piece of this character has been broken down into layers.

Now without any tagging on the layers, the script will export three files:

  • one image of everything for retina, 
  • one image of everything for non retina, and 
  • a JSON file with the position of the layers. 

This will become crucial when you have multiple images, since it will keep everything correctly positioned relative to each other.

We will be using the PSD from the previous section to explain each tag.

#Subs Tag

#subs - Add this to a group to have all of the layers inside of it export as individual images instead of one image.

The #subs export files will be named like this:

You will now get an export of each layer as an individual image inside that folder.

#Name Tag

#name - Like subs, each layer inside a group is exported as an individual. #Name also adds the name of the group to the beginning of the exported file. 

Ex: Left-Cloud-Mouth or Left-Cloud-Body-Left-Arm

This is helpful if you're exporting multiple characters who all have an arm, for example. You can add #name in front of them to tell the difference between them.

The #name export will look like this:

#Active Tag

#active - Only exports the layers/groups marked as active within a group. 

Example 1: Exporting A Layer Within A Group
In this example we want to export the head layer inside the head group. Notice how there are two active tags, one on the head group and one on the head layer.

The #active export files are:

Example 2: Exporting A Group
If you only have an active tag on the group and not the layers inside of it, it will export everything inside of the group.

The exported files will be this:

Example 3: Exporting Multiple Groups With Specific Layers
Now if we have an active tag only on the head layer in the head group, it will export every layer but then once it is inside the head group, it will only export the head layer. The mouth and hat layers will not be exported.

The exported files will be this:

#Skip Tag

#skip - Skip layers that you don't want to export. You can do this for layers that you have already exported, or scratch layers that you don't want in the final product.

The #skip export will look like this:

#sprite - Each layer inside a group marked as a sprite will be imported as one image sequence instead of multiple layers

Importing into Lightwell

To use your assets in Lightwell, simply drag the JSON file into the layers panel.

Your assets will appear in the same position and hierarchy you created in photoshop.

Did this answer your question?