The appearance of the Storyboard UI after using the Photoshop File Import feature will depend on properties and attributes that are set from Photoshop. A Storyboard project's content and organization can vary depending on the preparation of the Photoshop file prior to Import.
Note
In order to import files from Photoshop to Storyboard, documents must be in a RGB color mode as an 8-bit file. Other formats are not supported.
When using the PSD import feature, understanding the Storyboard Application Model Hierarchy is helpful for naming and organizing content in Photoshop to better control how a Storyboard application looks and behaves.
Photoshop content names and organization will dictate the name of model elements such as Screens, Layers, Groups, Controls and as well as the image file names in the project image directory. How content is named can also control how it is placed within the Application Model.
Below is how the new project is laid out after the PSD file is imported into Storyboard.
Note
Photoshop group folders that contain additional group folders need to follow the Application Model hierarchy. Layers, Groups, and Controls cannot contain model elements of the same type, e.g., Controls cannot contain other Controls.
Content from Photoshop like text layers, image layers, and smart objects will import to Storyboard as individual controls when they are not part of a group folder. Text layers from Photoshop have the option to import as controls with image or text render extensions. Group folders and layers that are empty in Photoshop will be discarded, so importing an empty layer to Storyboard will not occur and blank images can not be created from Photoshop layers that have no pixels being drawn. Notes created in the Photoshop file will be imported and applied as application level annotations in Storyboard.
Artboards in Photoshop can be used to restrict content to specific boundaries within a Photoshop file. When an Artboard is imported into Storyboard it becomes a screen in the resulting application, and layer content defined within the Artboard is applied to that screen. This feature can be used to reorganize several Photoshop files representing the screens of an application into one file that only needs to be imported once.
Unlike other Storyboard objects, there are no naming conventions required for Artboards. All Artboards are automatically imported as screens with the name provided.
Below is the layout for a new project after a PSD file with artboards has been imported into Storyboard.
Prior to importing a Photoshop file into Storyboard, properties that are unique to Photoshop like layer effects, blending modes, layer fill percentages or masks need to be rasterized or converted to smart objects in order to maintain the same appearance when they are imported into Storyboard.
By converting content with render specific to Photoshop to smart objects, the ability to edit within Photoshop still exists while the objects import to Storyboard as expected.
Photoshop layers that use a percentage of opacity will import to Storyboard with the same opacity. The value can be changed in the properties view under that render extension’s alpha setting.
Model elements must be named using an alpha-numeric format. The naming of model elements can be done using combinations of “Aa-Zz” “0-9” and “_”, the underscore character. How content is named in Photoshop will be maintained when it is brought into Storyboard. When duplicate naming occurs, controls and files in the project image directory will include numeric values with the name, e.g., “image.png” “image1.png” image2.png”.
The importer will organize Photoshop content according to special naming conventions that have been assigned and place items within the Application Model accordingly.
Photoshop group folders named with _layer at the end will import to Storyboard as a layer. Content within these group folders will import as project elements within that layer such as groups and controls. All Storyboard groups and controls can not exist outside of a Storyboard Layer.
Note
Within the Photoshop Layer View, content that is not placed within a parent group folder using the _layer naming convention will be assigned to a Storyboard layer that’s automatically generated. Storyboard Layers that are automatically generated will be assigned default names, “Layer” “Layer1” “Layer2” etc.
Photoshop group folders named with _group at the end will import to Storyboard as a group. Any content within these groups will import as controls within that group.
Photoshop groups folders named with _control at the end will import to Storyboard as a control. Content within these groups will import as text or image render extensions of that control.
Naming a PSD layer ending with _up directly above another layer with the same name ending with _down will create a control that behaves as a button. The control will be assigned events and actions and given an image variable that will work as an interactive button control upon import to Storyboard.