Today, we are going back to basics in this Storyboard user interface (UI) tutorial. Table basics. Tables are a special control in Storyboard. While most controls are individual, tables are more like containers that organize several controls inside them. This tutorial will walk you through how to create a very simple table, add background colour, adjust basic settings, and add render extensions. Before we get started building our table, create a new application in Storyboard Designer.
Add a background colour for the application’s UI
First we’re going to add a background to our application.
- Right-click on Screen1
- Select Add
- Select Control
- Give your new control a name
- In the Render Extensions list, select Fill
- Select Finish
You will be asked to select a colour for your background. For the purposes of this tutorial, let’s select white.
This week at Crank we’re taking you back to summer school. But no need to panic. There’s no stuffy classroom, and the subject is cool.
Tips to Easily Import Photoshop PSDs into Storyboard
While it’s already quite simple to import your application’s UI 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 quick start reference pages describe the Storyboard application model, how the Photoshop elements map to Storyboard elements, naming conventions, and basic best practices:
Photoshop to Storyboard – Design Tips and Tricks
Importing Photoshop to Storyboard – The Application Model
We also have a video tutorial available that walks you through the Storyboard naming conventions that you should keep in mind as you plan your design in Photoshop.
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. Understanding where you are going makes it easier to plan how to get there. Woah. Deep.
We are also working on other short tutorials and simple reference pages to help guide you as you build your embedded application GUIs using Storyboard Suite, so stay tuned for more.
WITH THE UBIQUITOUS usage of smartphones, tablets, and other mainstream screens, traditional products that once had analog displays are now being modernized with digital user interfaces (UI). From thermometers to air conditioning control panels to car dashboards, even the simplest and smallest embedded devices often feature graphical user interfaces (GUls). Therefore, manufacturers are focused on delivering quality electronic products with intuitive, easy-to-operate Uls – all without slowing down the development process.
Fast time-to-market means that the design, prototyping, and testing phases must go quickly and smoothly. In general, good project planning and efficient working processes can help with this goal, but what does that specifically look like for UI development? Let’s take a look at the typical development paradigm and identify the sticking points.
Here are a couple of easy steps to import a Storyboard Project Archive into Storyboard Designer.
Right click within the Navigator view or left click File from the top menu and select Import.
Next you will be presented with the Import Selection dialogue. Expand General by clicking on the triangle to the left of the folder. Select Existing Projects into Workspace and then click Next.
Check the Select archive file: radio button and then Browse to the Storyboard Project Archive. Click Finish to import the archive into your workspace.
Storyboard Designer gives you the ability to export your project for either archiving, sharing or demo purposes. Here are a couple of easy steps showing you how to do that.
When your Storyboard Project is complete and you are ready to export, right click on the project folder and select Export.
Next you will be presented with the Export Selection dialogue. Expand General by clicking on the triangle to the left of the folder. Select Archive File and then click Next.
Next you will see the Export Archive file box. Here you will see all the folders and files that will be included in the archive you are about to create. Browse to the location where you want to save and then provide a name for your archive. Review and verify your Options and then click Finish.