PSD Structuring and Importing

Hello Everyone,

As many of you already know, you can easily import PSD files into Storyboard Suite. It’s a great way to quickly create a Storyboard project. We have tried to make it even easier by providing certain naming conventions to follow when structuring your PSD file in Adobe Photoshop. Using such conventions as <name goes here>_layer, <name goes here>_control, <name goes here>_up, and <name goes here>_down prompts Storyboard to automatically create layers and controls with certain actions associated with them.

For example having a group with <name goes here>_control followed by layers <name goes here>_up and <name goes here>_down in the PSD, automatically creates a button control and a variable in Storyboard with press, release and outbound actions. At this point you can save and simulate your application and have a button where the image changes when you click and release the button. All this has been done by simply importing a PSD file into Storyboard. You haven’t even written a stitch or code yet.

Here is a simple PSD structure to demonstrate what I was mentioning above:

This is what the Storyboard Application looks like once the PSD has been imported:

As you can see when the PSD file was imported actions and a variable were automatically created for the button control:

There you have it. Keeping those naming conventions in mind, when you are creating your initial PSD file, will make less work for you after importing into Storyboard Suite.