Get started

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.

Yotako guidelines

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:

  • Layers hierarchy
  • Layers naming
  • Layers type

This section walks you through Document types and Layer conventions in detail.

Document types

Three document types currently supported are:

  • Web
  • Mobile App Design
  • Artboard

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.

Select document type: Artboard

Each artboard represents a page

Layers hierarchy

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:

  • Text layer

The Checkbox widget, however, allows you to design a checkbox however you like through several layers:

  • Group layer - This group layer should be named checkbox
  • -- emptybox - represents the empty box of the checkbox
  • -- filledbox - represents the filled box of the checkbox
  • -- background - represents the widget shape, colors, position and size.

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.

Layers naming

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:

apples-checkbox CHECKBOX chEcKbOX-35

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.

Three different and equivalent ways to name a checkbox widget

Layers type

Widgets use one or several types of layers among the following:

  • Group layers
  • Shape layers
  • Text layers
  • Smart objects and basic layers

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.

Multiple types of layers

Advanced concepts

In this section you can learn more advanced concepts such as widget states behavior and best practices to get the most out of Yotako.

Nested widgets

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.

Container (purple) that contains an image (red),
multiple texts (blue) and a button (green).

Nested widgets display

Widget states

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 ":" and ":" in the layer containing the type of the widget. For example, _checkbox :CHECKED: 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:

A Checkbox widget with different states. Note how CHECKED and DISABLED are combined to form a new state.

The four different checkboxes corresponding to the defined states.

Widget names

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 "[" and "]"

E.g. _button [btn-default] represents a button widget with the element name btn-default

Elements name can also be useful if you want to use widget states.

The layer shares the same widget name: "btn-info".

Three buttons referring to the same name. This allows Yotako to use a common style for multiple widgets. Note that the third button has a different size, but still refers to the same style.

Why use shape layers?

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:

  • Smart objects
  • Basic layer (Pixelised)
  • Shape layer
For optimal use and to get the most from Yotako, however, we suggest you to use shape layers.
  • Shape layers are easily manageable in Photoshop
  • Shape layers contain extra useful information like background color, border and border-radius
  • Yotako translates rasterized (pixelated) layers into images and it can slow down the loading of your website or mobile app

Three different types of layers

The renderings of the 3 layers are the same, but the knowledge extracted by Yotako are different.

Blending options - fx

Here is a list currently supported object effects:

  • Drop shadow
  • Inner shadow
  • Outline

You can add Blending options by right clicking on the layer > Select Blending options

... Or select the [FX] icon in the layer bottom menu

You can also double click on the item layer

Blend clipping

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.

Blend clipping layers

Blend clipping layers transformed into a rasterized layer

Widgets reference

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.

button

Button widget is composed of a group layer that contain a background shape layer.

    Layers & sub-layers

  • button GROUP LAYER Required
    Main group layer that should contain the sub-layer(s)
  • bg background SHAPE LAYER BASIC LAYER Optional
    This layer represents the widget position and background styles.

Reference of PSD layers

PSD display

checkbox

Checkbox widget is composed of a group layer that contain a background shape layer and shape layers that represents the box item.

    Layers & sub-layers

  • checkbox GROUP LAYER Required
    Main group layer that should contain the sub-layer(s)
  • bg background SHAPE LAYER BASIC LAYER Optional
    This layer represents the widget position and background styles.
  • empty emptybox SHAPE LAYER BASIC LAYER Optional
    This layer represents the empty box position and background styles.
  • filledbox filled SHAPE LAYER BASIC LAYER Optional
    This layer represents the filled box position and background styles.

Reference of PSD layers

PSD display

checkboxgroup

Checkboxgroup widget represents a logic group of checkboxes.

    Layers & sub-layers

  • checkboxgroup GROUP LAYER Required
    Main group layer that should contain the sub-layer(s)
  • bg background SHAPE LAYER BASIC LAYER Optional
    This layer represents the widget position and background styles.

Reference of PSD layers

PSD display

container

Container widget represents visual container that help you to handle layout positioning. It's composed of a group layer that contain a shape layer.

    Layers & sub-layers

  • All name allowed GROUP LAYER Required
    Should be a group layer, it does not have name convention.
  • bg background SHAPE LAYER BASIC LAYER Optional
    This layer represents the widget position and background styles.

Reference of PSD layers

PSD display

image

Image is a specific widget composed of only one layer that could either be a smart Object or pixelated layer.

    Layers & sub-layers

  • All name allowed BASIC LAYER Required
    Should be a Text layer, it does not have name convention.

Reference of PSD layers

PSD display

listbox

Listbox is a widget composed of multiple items.

    Layers & sub-layers

  • listbox GROUP LAYER Required
    Main group layer that should contain the sub-layer(s)
  • bg background SHAPE LAYER BASIC LAYER Optional
    This layer represents the widget position and background styles.

Reference of PSD layers

PSD display

page

Page is a special widget. In Photoshop a page is represented with artboards. NOTE: Multiple pages in a project can have different sizes.

    Layers & sub-layers

  • All name allowed GROUP LAYER Required
    Should be an artboard layer, it does not have name convention. Artboard are group layers at the root of the Photoshop layers hierarchy, see CREATE PROJECT section.
  • bg background SHAPE LAYER BASIC LAYER Optional
    This layer only represents the widget background styles.

Reference of PSD layers

PSD display

progressbar

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.

    Layers & sub-layers

  • progress GROUP LAYER Required
    Main group layer that should contain the sub-layer(s)
  • emptybar background bg SHAPE LAYER BASIC LAYER Required
    This layer represents the empty state of the Progressbar, we also use it to extract style and position.
  • filledbar SHAPE LAYER Required
    This layer represents the filled state of the Progressbar.

Reference of PSD layers

PSD display

radiobutton

Radiobutton widget is composed of a group layer that contain a background shape layer and shape layers that represent the box item.

    Layers & sub-layers

  • radiobutton GROUP LAYER Required
    Main group layer that should contain the sub-layer(s)
  • bg background SHAPE LAYER BASIC LAYER Optional
    This layer represents the widget position and background styles.
  • empty emptybox SHAPE LAYER Optional
    This layer represents the empty box position and background styles.
  • filled filledbox SHAPE LAYER Optional
    This layer represents the filled box position and background styles.

Reference of PSD layers

PSD display

radiobuttongroup

Radiobuttongroup widget represents a logic group of radiobuttons.

    Layers & sub-layers

  • radiobuttongroup GROUP LAYER Required
    Main group layer that should contain the sub-layer(s)
  • bg background SHAPE LAYER BASIC LAYER Optional
    This layer represents the widget position and background styles.

Reference of PSD layers

PSD display

textarea

Textarea widget represents a textfield for longer input.

    Layers & sub-layers

  • textarea GROUP LAYER Required
    Main group layer that should contain the sub-layer(s)
  • placeholder TEXT LAYER Optional
    This layer represents the default value of the field when no value is set. It's the equivalent of Hint property in Android, and placeholder in HTML5
  • value TEXT LAYER Optional
    This layer represents the value of the field
  • bg background SHAPE LAYER BASIC LAYER Optional
    This layer represents the background of the field

Reference of PSD layers

PSD display

textfield

This widget is suited for short user input.

    Layers & sub-layers

  • textfield GROUP LAYER Required
    Main group layer that should contain the sub-layer(s)
  • placeholder TEXT LAYER Optional
    This layer represents the default value of the field when no value is set. It's the equivalent of Hint property in Android, and placeholder in HTML5
  • value TEXT LAYER Optional
    This layer represents the value of the field
  • bg background SHAPE LAYER BASIC LAYER Optional
    This layer represents the background of the field

Reference of PSD layers

PSD display

text

Text widget represents a text that can be a title or a paragraph.

    Layers & sub-layers

  • All name allowed TEXT LAYER Required
    Should be a Text layer, it does not have a name convention

Reference of PSD layers

PSD display