Photoshop is a pixel-based editor working with hierarchical layers. Yotako extracts knowledge from such layers and transforms it into interactive web or mobile interfaces.
Photoshop was not originally designed for UI (User Interface), that's why you should follow these guidelines in order to use your Photoshop PSD files with Yotako.
In photoshop you usually compose your UI in a specific design area. This area can either be a canvas or artboards.
You can have multiple design areas. Yotako will consider each artboard as a UI page. Artboards can be of different sizes, moreover the scale of your design does not matter.
Canvas documents are commonly used for photo editing or illustration design. There is only one design area, so Yotako will consider this area as a UI page.
Layers that are not fully contained in the design area will not be created in your final UI.
In order to tell Yotako how your UI is composed, you have to think in terms of widgets. The term "widget" refers to UI components such as buttons, checkboxes or progressbars. Unfortunately, the concept of widget does not exist in Photoshop, that's why you have to follow three rules when you're creating your layers:
Widgets can be represented by one or multiple layers. For instance, a Text widget is just composed of a single layer:
For more complex widgets like Textfield, multiple layers are required:
This way, you can create advanced widgets. Usually widgets will be composed of a main group and multiple sub-layers such as images, texts, shapes, sub-groups...
You should use specific names for each layer in order to let Yotako know which widget you want to represent. Each of the following examples are valid layer names for a checkbox widget:
As you can see, Yotako is not case sensitive as long as the widget name appears.
Yotako currently supports 4 types of layers provided by Photoshop:
Unfortunately Yotako does not support the following types of layers yet:
Every widget can have multiple states. A state is the representation of a widget in a specific variation. Widgets have native states. For example, a Checkbox can be in a 'checked' or 'unchecked' state. To specify a state name, you should name your layer like this:
checkbox [checked]
To specify a state, name your layer this way:
checkbox [checked, disabled]
Once you get the code from Yotako, you may want to retrieve the widgets by their names. Since Yotako only knows about layer naming, you can specify a name for a widget like this:
checkbox (my-checkbox-name)
As seen, there are multiple types of layers in Photoshop. Since Photoshop is not originally devoted to UI design, you can design the same UI components using different layers:
For optimal use and to get the most from Yotako we suggest you to use shape layers.
Indeed:
Here is a list of currently supported object effects:
In Photoshop you can use blend clipping (masks) to manage your UI, currently this feature is not supported, so you should always rasterize the layers.
This section references how to create widgets using the Yotako guidelines. It provides for each widget the required layers and sub-layers hierarchy, as well as conventions for names and types of layers.