Importing Adobe Photoshop files with layers

You can import Photoshop images (psd) with layers to Kanzi Studio and preserve the structure of the psd file. This allows you to use each layer in a psd file as a separate image.

When you import a psd file with layers Kanzi Studio:

  1. Crops the transparent borders from each layer and saves them as png images to Library > Resource Files > Images in a directory with the same name as the psd file.

  2. Creates an Empty Node 2D node named after the psd file and a hierarchy of Empty Node 2D nodes corresponding to the structure of the psd image. Image nodes are used for psd layer images and Empty Node 2D nodes for the psd layers groups.

  3. Applies transformation to each Image and Empty Node 2D node to place it to the same position as in the psd file.

For example, when you import a psd file that contains one layer for the background and another layer that contains a small logo in the corner of the screen, Kanzi Studio creates two .png images in your Kanzi Studio project and two Image nodes that you can use as 2D components in your Kanzi application. Kanzi Studio removes the trashbands from the small logo, meaning that you end up with two images of different sizes. The image layer containing the small logo is placed as a child of the background layer and correctly positioned in relation to its parent.

Kanzi Studio does not support all types of Photoshop layers and layer styles. If Kanzi Studio does not import a layer or layer style, merge or rasterize layers in Photoshop before importing them to Kanzi Studio.

To maintain pixel precision, use integers for all Kanzi Studio 2D layer transformations and avoid stretching or scaling the content.

Importing layers from a psd file

To import layers from a psd file:

  1. In the Assets click Import Assets.

  2. Select the psd file that you want to import.

    Import PSD tool window opens.

  3. In the Select the layers to import all layers and groups are selected by default. Click the layer or group name to either include or exclude it from the import.

  4. (Optional) If your psd file contains text layers, you can import them as KanziText Block 2D nodes so that you can edit the text in Kanzi Studio. In the Import psd text layers as option select:

    • Image nodes to import psd text layers only as KanziImage nodes.

    • Text Block 2D nodes to import psd text layers only as KanziText Block 2D nodes.

    • Image and Text Block 2D nodes inside Empty Node to import psd text layers as both KanziImage and Text Block 2D nodes both stored in an Empty Node 2D node.

    You can set a default value for this option by selecting Edit > User Preferences and in the Advanced tab set the Import psd text layers as setting.

  5. Click Import.

    Kanzi Studio imports the layers you selected and preserves the layer hierarchy from the psd file. The order in which Kanzi Studio renders layers is set by their order in the Node Tree: a child layer appears on top of the parent layer.