Skip to main content

Working with Layers

Every image, video, text field, shape, and effect occupies a layer. The Layers tab controls selection, visibility, stacking order, and grouping.

HyperTheme Layers panel with the Token layer selected

Read the layer list​

Each row contains the same core controls.

ControlPurpose
EyeShow or hide the layer
Drag handleMove the layer within the stacking order
Layer iconIdentify the layer type
NameSelect or rename the layer
XDelete the layer

The selected row uses a highlighted outline. The preview above the tabs shows the selected asset when a preview is available.

Understand stacking order​

Rows near the top appear in front of rows below them.

Use this common order as a starting point:

  1. Interface elements
  2. Foreground artwork
  3. Logos and main content
  4. Midground effects
  5. Background video or artwork
  6. Base background

Drag a row upward to move the layer forward. Drag a row downward to move the layer behind other content.

If a visible layer is missing from the canvas, check whether another layer covers the element.

Select a layer​

Selected layer in the Layers tab and its matching canvas element

Select a layer from either location:

  • Select a row in the Layers tab.
  • Select the matching element on the canvas.

Selection stays synchronized. Selecting the Token row highlights the token artwork on the canvas and loads the Token settings in the Properties panel.

Use the Layers tab when elements overlap or sit outside the visible canvas.

Create layers​

HyperTheme creates layers through several workflows.

Library assets​

  1. Open the Library tab.
  2. Upload an image, video, or audio file.
  3. Drag the asset onto the canvas.

Bottom toolbar​

Select a toolbar icon to add text, scrolling text, shapes, sprite sheets, flip books, metadata, or backgrounds.

PSD import​

Import a layered Photoshop file to bring supported PSD layers into HyperTheme.

Duplicate​

  1. Select a layer.
  2. Press Ctrl+C.
  3. Press Ctrl+V.

The duplicate starts with the source layer's settings and animations.

Name layers​

Rename a layer as soon as its purpose becomes clear.

  1. Double-select the layer name.
  2. Enter the new name.
  3. Press Enter.

Use short names built around purpose and state.

Good examples:

background-video
game-logo
wheel-selected-frame
metadata-title
fx-blue-lines

Avoid generic names such as Layer 1, Image, or final-v3.

Show and hide layers​

Select the eye icon to change layer visibility.

Hide layers when you need to:

  • Reach artwork behind another element.
  • Reduce canvas clutter.
  • Compare two design options.
  • Review the theme without one effect.

Review hidden layers before publishing. A hidden visual layer stays absent from the finished theme.

Delete layers​

Delete a layer from the X at the end of its row or from the Delete key after selection.

Deleting a layer also removes its assigned animations. Use Undo immediately after an accidental deletion.

Groups keep related content together and support shared transforms.

  1. Hold Ctrl while selecting the layers.
  2. Select Group above the layer list.
  3. Rename the new group.
  4. Collapse the group when the child layers no longer need attention.

Useful group patterns include:

backgrounds
main-content
metadata-panel
wheel-display
intro-effects

Use groups when several layers move, scale, rotate, or animate as one unit.

Set a group pivot​

The pivot defines the origin for rotation and scaling.

  1. Select the group.
  2. Open Pivots in the Properties panel.
  3. Choose a preset or Custom.
  4. Preview the related animation.

Common choices:

PivotTypical use
CenterSpin or scale around the middle
TopHanging or swinging motion
Center LeftDoor or panel opening from the left
Center RightDoor or panel opening from the right
BottomRotation around a base
CornerScale or rotate from one corner

HyperTheme Properties panel with position, scale, pivot, and rotation settings

Edit layer properties​

The Properties panel changes with the selected layer type. Common settings include:

  • Opacity
  • X and Y position
  • X and Y scale
  • Pivot
  • Rotation
  • Tiling
  • Stroke
  • 3D perspective

Move the playhead to 0s before editing base layer properties.

Organize a large project​

Use a repeatable setup order:

  1. Add source assets.
  2. Name each layer.
  3. Set stacking order.
  4. Group related layers.
  5. Set base position and scale.
  6. Add animations.
  7. Preview the full timeline.

For larger projects, prefix related layers with the same category:

bg-stars
bg-video
ui-start-button
ui-title
fx-glow-blue
fx-particles

Troubleshooting​

A layer is missing​

  • Check the eye icon.
  • Move the layer higher in the list.
  • Use Ctrl+0 to fit the canvas.
  • Check scale and opacity in Properties.

A layer is hard to select​

  • Select the row in the Layers tab.
  • Hide any layer covering the target.
  • Zoom into small elements.

A layer moves during preview​

  • Select the layer.
  • Review its timeline animations.
  • Remove any unintended movement or scale animation.

Properties appear disabled​

  • Select a layer.
  • Move the playhead to 0s.

Final layer review​

  • Every layer has a clear name.
  • Stacking order matches the intended composition.
  • Related layers use groups where shared movement matters.
  • Hidden layers are intentional.
  • Unused layers are removed.
  • Group pivots match their animations.
  • The theme plays correctly from 0s.

Next steps​