Photoshop is a pixel-based editor that works with hierarchical layers. Yotako extracts knowledge from these layers and transforms it into interactive mobile or web interfaces.
Photoshop has not been originally designed for UIs (User Interfaces), that's why you should follow these guidelines to use your Photoshop PSD files with Yotako. The guidelines are quickly to use and easy to understand.
Check out the ready to use examples in the Gallery.
You just need to take care of two things, document types and layer conventions.
Document types refers to the type of documents you should use.
Layer conventions are simple rules that apply when creating widgets. The term "widget" refers to UI components such as buttons, checkboxes, progressbars... As Photoshop is layer-based, widgets are represented by one or multiple layers. The conventions apply to these layers on three aspects:
This section walks you through Document types and Layer conventions in detail.
Three document types currently supported are:
To create one of these documents, open your Phosotop and on the top menu go to File > New and select the one you prefer. These Photoshop documents enable you to create multiple artboards. Each of the arboards represents a page of your UI.
The width and height of the document don't affect the UI rendering. Each artwork can have its own width and height.
Widgets as buttons or images are represented by one or multiple layers depending on the widget at hand. For instance, the text widget only needs one single layer, but for more complex widgets like Checkboxes multiple layers are required. You will find a full description on how to layer every widget in the Widgets reference section below, and a lot of ready to use examples in the Gallery.
For instance, a Text widget is just a single layer:
The Checkbox widget, however, allows you to design a checkbox however you like through several layers:
This way, layer hierarchy enables us to create more complex widgets. Most of the widgets are represented by a layers group and multiple (potentially optional) sublayers.
In order to know which widget you want to represent, Yotako requires the use of specific names for each layer. The first layer of a widget should contain the widget type. For instance, each of the following examples are valid layer names for a checkbox widget:
As you can see, it doesn't matter where the word "checkbox" appears or if it uses capital letters or not. The only thing that counts is that the word "checkbox", i.e., the type of the widget, appears at least once in the name.
Widgets use one or several types of layers among the following:
The section Widgets reference details what layer type is required for each type of widget. For instance, a Text widget uses a Text layer while a Checkbox widget uses a Group layer with three optional Shape layers.
In this section you can learn more advanced concepts such as widget states behavior and best practices to get the most out of Yotako.
In web or mobile UIs, widgets can fit together to compose more complex UI blocks. Simple example: a button that contains a text. Advanced example: a form can contain an image with some text, a listbox and a searchbox.
In Photoshop, you can represent these UI blocks as a hierarchy of layers. If you want to add content to a widget you should simply add nested sub-layers into the widget group.
All widgets can have multiple states. A state is the representation of a widget in a specific variation.
Widgets have native states. For instance, a Checkbox can be in a "CHECKED" or "UNCHECKED" states, among others. The Widgets reference section covers all the predefined states for each widget.
You can also provide custom states if you want, for example, a Button in a "TAKO" state.
To specify a state name, just put the state name between the characters
":" in the layer containing the type of the widget.
represents a checkbox widget with the state CHECKED.
If you want to add multiple states to the same widget you can do the following:
_checkbox :CHECKED, DISABLED:
_checkbox :CHECKED DISABLED:
When using several states for the same widget, it is useful to name the different variants of the widget with the same name. Yotako will use this information if you provide it. Naming widgets is also useful if you want to reuse a widget several times in your UI design. For example you may want to create one style for each button in your UI, so all your buttons could refer to the same widget name.
The widget name should be added to the layer containing the type of the widget and should be contained between the characters
represents a button widget with the element name btn-default
Elements name can also be useful if you want to use widget states.
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:
Here is a list currently supported object effects:
In Photoshop you can use blend clipping in order to work with layers positions, effects, colors, etc. If you use this technique, remember to 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 the naming and layer type conventions.
Checkbox widget is composed of a group layer that contain a background shape layer and shape layers that represents the box item.
Checkboxgroup widget represents a logic group of checkboxes.
Container widget represents visual container that help you to handle layout positioning. It's composed of a group layer that contain a shape layer.
Image is a specific widget composed of only one layer that could either be a smart Object or pixelated layer.
Listbox is a widget composed of multiple items.
Page is a special widget. In Photoshop a page is represented with artboards. NOTE: Multiple pages in a project can have different sizes.
Progressbar has an initial state and a completed state. In order to represent the UI behavior of this states, the widget should be composed of the empty progressbar background and the filled background.
Searchbox widget represents a textfield which is aimed at search actions.
Textarea widget represents a textfield for longer input.
This widget is suited for short user input.
Text widget represents a text that can be a title or a paragraph.