Tips for importing Photoshop embedded GUI design files into Crank Storyboard

This week at Crank we're taking you back to school. But no need to panic, this subject is cool.

With the rapid design import and iteration technology of Crank Storyboard, designers and developers can bring Photoshop PSD and Sketch documents into the development workspace to add animations, events, and integrate with the backend application. But there are a few things to think of when importing and updating your embedded GUI designs using Photoshop.

Tips to easily import Photoshop PSDs into Storyboard

While it's already quite simple to import your embedded GUI design elements from Photoshop into Storyboard, we've created a couple of resources that you can refer to while working in Photoshop to make the import into Storyboard even easier. The following guides describe the Storyboard application model, how the Photoshop import elements map to Storyboard elements, naming conventions, and basic best practices:

• Reference card — Import Photoshop to Storyboard - The Application Model (PDF)
• White paper — Best practices to improve embedded GUI design & development efficiency

We also have video tutorials that walk you through the Storyboard naming conventions and import process that you should keep in mind as you plan your design in Photoshop, and how to re-import new designs into the Storyboard workspace.

Give these resources a quick glance before starting your design process to ensure you understand how you will be using your Photoshop elements in your Storyboard application and how to iterate on changed designs. Understanding where you are going makes it easier to plan how to get there. Woah. Deep.

We are continually working on other short tutorials and simple reference pages to help guide you as you build your embedded GUI applications using Storyboard, so stay tuned for more.

Class dismissed!

Download whitepaper: Best practices to improve embedded GUI design & development efficiency: