Get started

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.

Pages

In photoshop you usually compose your UI in a specific design area. This area can either be a canvas or artboards.

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.

Single artboard per page. Example of single page layers.

Canvas

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.

Arboards. Layers.

Outside and clipped layers

Layers that are not fully contained in the design area will not be created in your final UI.

Widgets outside the page.

Layers to widgets

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:

  • Layers hierarchy
  • Layers naming
  • Layers type

Layers hierarchy

Widgets can be represented by one or multiple layers. For instance, a Text widget is just composed of a single layer:

  • Text layer
Design of a Text. Text layer.

For more complex widgets like Textfield, multiple layers are required:

  • Group layer - This layer should be named Textfield
    • Placeholder - represents the placeholder (default text) of the widget
    • Background - represents the widget boundingbox and background styles.
Design of a Textfield. Textfield layers.

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...

Layers naming

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:

Naming convention.

As you can see, Yotako is not case sensitive as long as the widget name appears.

Layers type

Yotako currently supports 4 types of layers provided by Photoshop:

Types of layers.

Unfortunately Yotako does not support the following types of layers yet:

  • Smart objects (converted to Bitmap)
  • Fill
  • Adjustment

Widget states

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]
Providing states.

Widget names

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)
Naming widgets.

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
  • Bitmap
  • Shape
Different types of layers.

For optimal use and to get the most from Yotako we suggest you to use shape layers.

Indeed:

  • 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

Blending options - fx

Here is a list of currently supported object effects:

  • Drop shadow
  • Inner shadow
  • Stroke
Blending menu.

Blend clipping

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.

Clipping images. Rasterized image.

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 conventions for names and types of layers.

button

Layers & sub-layers

  • button btn shape layer bitmap layer REQUIRED
    It represents the bounding box and background style of this widget.
button layers. button design.

checkbox

Layers & sub-layers

  • checkbox shape layer bitmap layer REQUIRED
    It represents the bounding box and background style of this widget.
checkbox layers. checkbox design.

checkboxgroup

Layers & sub-layers

  • checkboxgroup group layer REQUIRED
    All checkboxes that are contained in this group layer will share the same checkboxgroup
checkboxgroup layers. checkboxgroup design.

container

Layers & sub-layers

  • * shape layer bitmap layer REQUIRED
    It represents the bounding box and background style of this widget.
container layers. container design.

image

Layers & sub-layers

  • * image img bitmap layer REQUIRED
    -
image layers. image design.

listbox

Layers & sub-layers

  • listbox group layer REQUIRED
    -
  • background bg rectangle shape layer bitmap layer REQUIRED
    It represents the bounding box and background style of this widget.
listbox layers. listbox design.

progressbar

Layers & sub-layers

  • progressbar group layer REQUIRED
    -
  • progressbar emptybar background bg shape layer bitmap layer REQUIRED
    It represents the empty bar boundingbox and background style of this widget.
  • fillbar shape layer bitmap layer REQUIRED
    It represents the filled bar style.
progressbar layers. progressbar design.

radiobutton

Layers & sub-layers

  • radiobutton shape layer bitmap layer REQUIRED
    It represents the bounding box and background style of this widget.
radiobutton layers. radiobutton design.

radiobuttongroup

Layers & sub-layers

  • radiobuttongroup group layer REQUIRED
    All checkboxes that are contained in this group layer will share the same checkboxgroup
radiobuttongroup layers. radiobuttongroup design.

text

Layers & sub-layers

  • * text layer REQUIRED
    -
text layers. text design.

textarea

Layers & sub-layers

  • textarea group layer REQUIRED
    -
  • background bg rectangle shape layer bitmap layer REQUIRED
    It represents the bounding box and background style of this widget.
  • placeholder default text layer
    This text layer represents the default text of a textarea widget.
  • value text text layer
    This text layer represents the current value of a textarea widget.
textarea layers. textarea design.

textfield

Layers & sub-layers

  • textfield textinput inputtext group layer REQUIRED
    -
  • background bg rectangle shape layer bitmap layer REQUIRED
    It represents the bounding box and background style of this widget.
  • placeholder default text layer
    This text layer represents the default text of a textfield widget.
  • value text text layer
    This text layer represents the current value of a textfield widget.
textfield layers. textfield design.