Skip to main content

Recommended Photoshop (.PSD) Layers Structure for Smart Importer

These are the recommended steps for Photoshop layers' naming and structure of a Control when creating a PSD file with Adobe Photoshop. This procedure makes it easier to apply properties to a Control via the Smart Importer.

    Create a group for the target Control - in this case, a TextButton (blue highlight in Figure 1 below) Create layers for the properties of the Control under the group created in step 1. (red and green highlight in Figure 1) Set the names of the layers to be the same as the property names of the target Control. (layers names in Figure 1 correspond to property names in Figure 2)
    drawing-4-1676358187.png


    How to set appropriate group and layer names:

      The group name is arbitrary. For the layer name, use the property name but remove the spaces. For example, "Normal Image" becomes "NormalImage".


      The below image shows the Smart Importer dialog when a PSD file following the correct format is opened.
      It is imported according to the layer structure of the PSD file.

      drawing-4-1676358219.png


      In the Smart Importer dialog, if you apply the TextButton control to the TextButton node, the layers of the PSD file will be reflected in each property as shown in the below image.

      drawing-4-1676358269.png


      The below image shows the Properties panel after import settings shown in the above image. The contents/layers of the PSD file are reflected in the Properties panel.

      drawing-4-1676358323.png


      The size of the imported Control will be adjusted to the Width and Height of the largest image layer applied to a property.

      In the below image, when Button is applied instead of TextButton, Text property is not applied correctly since a Button control does not have this property.

      drawing-4-1676358342.png


      If you import a node whose layers and properties do not match, a new Group node will be created and the extra property is added as its child element.

      drawing-4-1676358368.png


      Layer Structure and Naming Guideline for Controls

      In general, it is recommended to keep the PSD layer format close to the standard Controls. Below is a guide on how the layers for some Controls should be formatted and named.

        AnalogClock
          SecondsNeedleImage MinutesNeedleImage HoursNeedleImage FaceImage Breadcrumb
            Name EllipsisText Button
              NormalImage PressedImage FocusImage CheckBox
                NormalImage PressedImage SelectedImage SelectedPressedImage FocusedImage CircularSlider
                  BackgroundImage ActiveImage ThumbImage ThumbImagePressed FocusImage Gauge
                    NeedleImage BackgroundImage GroupBox
                      BackgroundImage IconButton
                        NormalImage PressedImage FocusedImage IconNormalImage IconPressedImage IconFocusedImage InputField
                          CaretImage BackgroundImage FocusedImage Menu Icon
                            Image BackgroundImage Menu Item
                              FocusImageOnSelection FocusImageOnDragging DeleteButtonNormalImage DeleteButtonPressedImage Image Menu Screen
                                BackgroundImage FocusBorderImage Mesh2D
                                  Image MultiStateButton
                                    ButtonState1Bmp ButtonState2Bmp ButtonState3Bmp ButtonState4Bmp FocusedImage PageIndicator
                                      PressedImage SelectedPressedImage SelectedIndicatorImage IndicatorImage SelectedIndicatorPressedImage IndicatorPressedImage RadioButton
                                        NormalImage PressedImage SelectedImage SelectedPressedImage FocusedImage Roll
                                          DecorationImage TextEditBackground SpinBox
                                            BackgroundImage ArrowUpNormalImage ArrowUpPressedImage ArrowDownNormalImage ArrowDownPressedImage TextButton
                                              Text NormalImage PressedImage FocusedImage ToggleButton
                                                FirstImage FirstPressedImage SecondImage SecondPressedImage FocusedImage TouchIndication
                                                  Image
                                                  Back to top