Introducing Layers

Layers are one of the main building blocks for creating screens in Lightwell. Each layer can contain only one visual asset (image, text, or shapes) at a time.

Watch this 3-minute tutorial about layers and what they do:

Adding Layers

The easiest way to add a layer is to click the "+" icon in the Layers Panel. Then, a new layer window will appear giving you the option to create a new layer with an image asset, image sequence, or text. You can upload an asset by selecting from your folder or simply drag-and-drop the asset into the dotted line box. If the asset already exists in your Asset Library, you can click "Create new layer from an asset"and select the visual asset.

🖼️Helpful tips for setting up your first screen:

  • Layers can be added by dragging and dropping
  • Be sure to label each image specifically
  • Images can be grouped into folders with layers
  • Layer at the top will be at the foreground of the screen
  • Resize your background image with the handles to make it wider than canvas

Selecting Layers

You can selecting layers in your Layers Panel by clicking on the layer in the list or on the Canvas.

You can move a selected layer by grabbing and moving it around with the hand. You can also move a layer more precisely by selecting the layer and editing the Position under Layer Controls.

Ordering Layers

To move layers in front of or behind other layers, use the Layers Panel on the left side. Layers at the top of the list are in front of layers at the bottom of the list. You can drag layers in the list to reorder them.

Editing Layers

You can control and edit all the various properties of layers in Layer Controls. The panels within controls include layer properties, position, rotation, parallax and ambient motion.

Grouping Layers

Layers can be grouped together for ease of creation. You can edit a group of layers and have the changes apply to each of the individual layers in the group (such as position, scale, parallax, ambient motion). An action can also be applied to a layer group to create a complex animation to multiple layers at once.

Layer Controls

You can control and edit all the various properties of layers in Layer Controls. The panels within controls include layer properties, position, rotation, parallax and ambient motion.

Layer Properties

Let’s start by changing a few simple Layer Properties:

  • Scale - this property alters the size of your layer. By default, Layers are imported into Lightwell with a Scale of 100%.
  • Position - this property is the position of the layer on the Canvas (Device specific positioning available).
  • Transform - this property rotates the layer or flips it.
  • Opacity - this property changes the transparency of the layer.

Layer Rotation

Adding rotation to a layer is a responsive element that works with device motion. The anchor point for the selected layer is the point which the layer pivots around when it rotates. You can set angle limits to control the bounds of how far the layer can rotate, as well as the ease of movement and resistance of the rotation.

To test rotation motion, first move the Ease of Movement towards "Heavy," then preview on a device by tilting the scene in the Previewer App.

Layer Parallax

Adding parallax to a layer is used as an effect to make 2D environments look 3D. To create a parallax effect, you must give different layers different point depths. When layers have different point depths, tilting the device gives it a 3D effect.

For example, layers that appear closer should have a larger parallax point depth, while layers that appear farther should have a smaller parallax point depth.

Did this answer your question?