Structuring Your Photoshop Import Content

PSD file Structure for Import into Storyboard

In Storyboard the appearance of the UI after using the Photoshop™ File Import feature will depend on properties and attributes that are set from Photoshop™. The content and organization of a Storyboard project can vary depending on the preparation of the Photoshop file prior to Import.

psd_to_sb.png

PSD File Requirements

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.

Application Model Hierarchy

Understanding the Storyboard Application Model Hierarchy will help users decide how to name and organize content in Photoshop to better control how a Storyboard application comes together when using the PSD import feature. Photoshop content names and organization will dictate the name of model elements like Screens, Layers, Groups, Controls and all of 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 has been imported into Storyboard.

storyboard_app_model_psd_import.png

storyboard_app_model_psd_import_sb.png

Artboards

Artboards in Photoshop can be used to restrict content to specific boundaries within a Photoshop file. When imported into Storyboard, an Artboard will become a screen in the resulting application and layer content defined within the Artboard will be applied to that screen. This feature can be used to re-organize several Photoshop files representing the screens of an application into one file that only needs to be imported once.

Unlike other Storyboard objects, there is no naming convention required for Artboards. All Artboards automatically be imported as screens with the name provided.

Below is how a new project is laid out after a PSD file with artboards has been imported into Storyboard.

artboard_psd.png

artboard_storyboard.png

Layer Effects and Blending Modes

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 brought into Storyboard.

By converting content with Photoshop specific rendering to smart objects, the editability within Photoshop still exists while the objects import to Storyboard as expected.

Naming Requirements

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 then include numeric values with the name, e.g., “image.png” “image1.png” image2.png”

Naming Conventions

The importer will organize Photoshop content according to special naming conventions that have been assigned and place items within the Application Model accordingly. Important Naming Conventions:

name_layer

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.

name_group

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.

name_control

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.

name_up and name_down

Naming a PSD layer ending with _up directly above another layer with the same name ending with _down will create a control that behaves like 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.

storyboard_actions_psd_import.png

Common Photoshop Elements

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.

Transparency

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.

Naming Convention Deviation

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.

Sub Group Folders

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.

Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

Comments

0 comments

Please sign in to leave a comment.