Embedded GUI Design and Development Tool

    Embedded GUI Design and Development Tool
    Download Embedded GUI Development Demos
    Embedded GUI Design and Development Tool


    2 min read

    PSD Structuring and Importing

    Oct 4, 2011 1:10:22 PM

    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.


    Jamie Villeneuve
    Written by Jamie Villeneuve

    Application Engineer at Crank Software

    Post a Comment