https://docs.hyperspin-fe.com/assets/js/1190699f.a9bfa726.js

1"use strict";(self.webpackChunkhyperspin_docs=self.webpackChunkhyperspin_docs||[]).push([[5256],{10012:(e,r,n)=>{n.r(r),n.d(r,{assets:()=>d,contentTitle:()=>a,default:()=>c,frontMatter:()=>t,metadata:()=>i,toc:()=>h});const i=JSON.parse('{"id":"themebuilder/layers","title":"Working with Layers","description":"Every image, video, text field, shape, and effect occupies a layer. The Layers tab controls selection, visibility, stacking order, and grouping.","source":"@site/docs/themebuilder/04-layers.md","sourceDirName":"themebuilder","slug":"/themebuilder/layers","permalink":"/docs/themebuilder/layers","draft":false,"unlisted":false,"editUrl":"https://github.com/HyperSpin-LLC/HyperSpin-Docs/tree/main/docs/themebuilder/04-layers.md","tags":[],"version":"current","sidebarPosition":4,"frontMatter":{},"sidebar":"themeBuilderSidebar","previous":{"title":"Your First Theme - Complete Walkthrough","permalink":"/docs/themebuilder/first-theme"},"next":{"title":"Special Layer Types","permalink":"/docs/themebuilder/special-layers"}}');var l=n(74848),s=n(28453);const t={},a="Working with Layers",d={},h=[{value:"Read the layer list",id:"read-the-layer-list",level:2},{value:"Understand stacking order",id:"understand-stacking-order",level:2},{value:"Select a layer",id:"select-a-layer",level:2},{value:"Create layers",id:"create-layers",level:2},{value:"Library assets",id:"library-assets",level:3},{value:"Bottom toolbar",id:"bottom-toolbar",level:3},{value:"PSD import",id:"psd-import",level:3},{value:"Duplicate",id:"duplicate",level:3},{value:"Name layers",id:"name-layers",level:2},{value:"Show and hide layers",id:"show-and-hide-layers",level:2},{value:"Delete layers",id:"delete-layers",level:2},{value:"Group related layers",id:"group-related-layers",level:2},{value:"Set a group pivot",id:"set-a-group-pivot",level:2},{value:"Edit layer properties",id:"edit-layer-properties",level:2},{value:"Organize a large project",id:"organize-a-large-project",level:2},{value:"Troubleshooting",id:"troubleshooting",level:2},{value:"A layer is missing",id:"a-layer-is-missing",level:3},{value:"A layer is hard to select",id:"a-layer-is-hard-to-select",level:3},{value:"A layer moves during preview",id:"a-layer-moves-during-preview",level:3},{value:"Properties appear disabled",id:"properties-appear-disabled",level:3},{value:"Final layer review",id:"final-layer-review",level:2},{value:"Next steps",id:"next-steps",level:2}];function o(e){const r={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",img:"img",li:"li",ol:"ol",p:"p",pre:"pre",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,s.R)(),...e.components};return(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(r.header,{children:(0,l.jsx)(r.h1,{id:"working-with-layers",children:"Working with Layers"})}),"\n",(0,l.jsx)(r.p,{children:"Every image, video, text field, shape, and effect occupies a layer. The Layers tab controls selection, visibility, stacking order, and grouping."}),"\n",(0,l.jsx)(r.p,{children:(0,l.jsx)(r.img,{alt:"HyperTheme Layers panel with the Token layer selected",src:n(92868).A+"",width:"264",height:"829"})}),"\n",(0,l.jsx)(r.h2,{id:"read-the-layer-list",children:"Read the layer list"}),"\n",(0,l.jsx)(r.p,{children:"Each row contains the same core controls."}),"\n",(0,l.jsxs)(r.table,{children:[(0,l.jsx)(r.thead,{children:(0,l.jsxs)(r.tr,{children:[(0,l.jsx)(r.th,{children:"Control"}),(0,l.jsx)(r.th,{children:"Purpose"})]})}),(0,l.jsxs)(r.tbody,{children:[(0,l.jsxs)(r.tr,{children:[(0,l.jsx)(r.td,{children:"Eye"}),(0,l.jsx)(r.td,{children:"Show or hide the layer"})]}),(0,l.jsxs)(r.tr,{children:[(0,l.jsx)(r.td,{children:"Drag handle"}),(0,l.jsx)(r.td,{children:"Move the layer within the stacking order"})]}),(0,l.jsxs)(r.tr,{children:[(0,l.jsx)(r.td,{children:"Layer icon"}),(0,l.jsx)(r.td,{children:"Identify the layer type"})]}),(0,l.jsxs)(r.tr,{children:[(0,l.jsx)(r.td,{children:"Name"}),(0,l.jsx)(r.td,{children:"Select or rename the layer"})]}),(0,l.jsxs)(r.tr,{children:[(0,l.jsx)(r.td,{children:"X"}),(0,l.jsx)(r.td,{children:"Delete the layer"})]})]})]}),"\n",(0,l.jsx)(r.p,{children:"The selected row uses a highlighted outline. The preview above the tabs shows the selected asset when a preview is available."}),"\n",(0,l.jsx)(r.h2,{id:"understand-stacking-order",children:"Understand stacking order"}),"\n",(0,l.jsx)(r.p,{children:"Rows near the top appear in front of rows below them."}),"\n",(0,l.jsx)(r.p,{children:"Use this common order as a starting point:"}),"\n",(0,l.jsxs)(r.ol,{children:["\n",(0,l.jsx)(r.li,{children:"Interface elements"}),"\n",(0,l.jsx)(r.li,{children:"Foreground artwork"}),"\n",(0,l.jsx)(r.li,{children:"Logos and main content"}),"\n",(0,l.jsx)(r.li,{children:"Midground effects"}

1),"\n",(0,l.jsx)(r.li,{children:"Background video or artwork"}),"\n",(0,l.jsx)(r.li,{children:"Base background"}),"\n"]}),"\n",(0,l.jsx)(r.p,{children:"Drag a row upward to move the layer forward. Drag a row downward to move the layer behind other content."}),"\n",(0,l.jsx)(r.p,{children:"If a visible layer is missing from the canvas, check whether another layer covers the element."}),"\n",(0,l.jsx)(r.h2,{id:"select-a-layer",children:"Select a layer"}),"\n",(0,l.jsx)(r.p,{children:(0,l.jsx)(r.img,{alt:"Selected layer in the Layers tab and its matching canvas element",src:n(79609).A+"",width:"1328",height:"468"})}),"\n",(0,l.jsx)(r.p,{children:"Select a layer from either location:"}),"\n",(0,l.jsxs)(r.ul,{children:["\n",(0,l.jsx)(r.li,{children:"Select a row in the Layers tab."}),"\n",(0,l.jsx)(r.li,{children:"Select the matching element on the canvas."}),"\n"]}),"\n",(0,l.jsx)(r.p,{children:"Selection stays synchronized. Selecting the Token row highlights the token artwork on the canvas and loads the Token settings in the Properties panel."}),"\n",(0,l.jsx)(r.p,{children:"Use the Layers tab when elements overlap or sit outside the visible canvas."}),"\n",(0,l.jsx)(r.h2,{id:"create-layers",children:"Create layers"}),"\n",(0,l.jsx)(r.p,{children:"HyperTheme creates layers through several workflows."}),"\n",(0,l.jsx)(r.h3,{id:"library-assets",children:"Library assets"}),"\n",(0,l.jsxs)(r.ol,{children:["\n",(0,l.jsx)(r.li,{children:"Open the Library tab."}),"\n",(0,l.jsx)(r.li,{children:"Upload an image, video, or audio file."}),"\n",(0,l.jsx)(r.li,{children:"Drag the asset onto the canvas."}),"\n"]}),"\n",(0,l.jsx)(r.h3,{id:"bottom-toolbar",children:"Bottom toolbar"}),"\n",(0,l.jsx)(r.p,{children:"Select a toolbar icon to add text, scrolling text, shapes, sprite sheets, flip books, metadata, or backgrounds."}),"\n",(0,l.jsx)(r.h3,{id:"psd-import",children:"PSD import"}),"\n",(0,l.jsx)(r.p,{children:"Import a layered Photoshop file to bring supported PSD layers into HyperTheme."}),"\n",(0,l.jsx)(r.h3,{id:"duplicate",children:"Duplicate"}),"\n",(0,l.jsxs)(r.ol,{children:["\n",(0,l.jsx)(r.li,{children:"Select a layer."}),"\n",(0,l.jsxs)(r.li,{children:["Press ",(0,l.jsx)(r.code,{children:"Ctrl+C"}),"."]}),"\n",(0,l.jsxs)(r.li,{children:["Press ",(0,l.jsx)(r.code,{children:"Ctrl+V"}),"."]}),"\n"]}),"\n",(0,l.jsx)(r.p,{children:"The duplicate starts with the source layer's settings and animations."}),"\n",(0,l.jsx)(r.h2,{id:"name-layers",children:"Name layers"}),"\n",(0,l.jsx)(r.p,{children:"Rename a layer as soon as its purpose becomes clear."}),"\n",(0,l.jsxs)(r.ol,{children:["\n",(0,l.jsx)(r.li,{children:"Double-select the layer name."}),"\n",(0,l.jsx)(r.li,{children:"Enter the new name."}),"\n",(0,l.jsx)(r.li,{children:"Press Enter."}),"\n"]}),"\n",(0,l.jsx)(r.p,{children:"Use short names built around purpose and state."}),"\n",(0,l.jsx)(r.p,{children:"Good examples:"}),"\n",(0,l.jsx)(r.pre,{children:(0,l.jsx)(r.code,{className:"language-text",children:"background-video\r\ngame-logo\r\nwheel-selected-frame\r\nmetadata-title\r\nfx-blue-lines\n"})}),"\n",(0,l.jsxs)(r.p,{children:["Avoid generic names such as ",(0,l.jsx)(r.code,{children:"Layer 1"}),", ",(0,l.jsx)(r.code,{children:"Image"}),", or ",(0,l.jsx)(r.code,{children:"final-v3"}),"."]}),"\n",(0,l.jsx)(r.h2,{id:"show-and-hide-layers",children:"Show and hide layers"}),"\n",(0,l.jsx)(r.p,{children:"Select the eye icon to change layer visibility."}),"\n",(0,l.jsx)(r.p,{children:"Hide layers when you need to:"}),"\n",(0,l.jsxs)(r.ul,{children:["\n",(0,l.jsx)(r.li,{children:"Reach artwork behind another element."}),"\n",(0,l.jsx)(r.li,{children:"Reduce canvas clutter."}),"\n",(0,l.jsx)(r.li,{children:"Compare two design options."}),"\n",(0,l.jsx)(r.li,{children:"Review the theme without one effect."}),"\n"]}),"\n",(0,l.jsx)(r.p,{children:"Review hidden layers before publishing. A hidden visual layer stays absent from the finished theme."}),"\n",(0,l.jsx)(r.h2,{id:"delete-layers",children:"Delete layers"}),"\n",(0,l.jsx)(r.p,{children:"Delete a layer from the X at the end of its row or from the Delete key after selection."}),"\n",(0,l.jsx)(r.p,{children:"Deleting a layer also removes its assigned animations. Use Undo immediately after an accidental deletion."}),"\n",(0,l.jsx)(r.h2,{id:"group-related-layers",children:"Group related layers"}),"\n",(0,l.jsx)(r.p,{children:"Groups keep related content together and support shared transforms."}),"\n",(0,l.jsxs)(r.ol,{children:["\n",(0,l.jsxs)(r.li,{children:["Hold ",(0,l.jsx)(r.code,{children:"Ctrl"})," while selecting the layers."]}),"\n",(0,l.jsx)(r.li,{children:"Select Group above the layer list."}),"\n",(0,l.jsx)(r.li,{children:"Rename the new group."}),"\n",(0,l.jsx)(r.li,{children:"Collapse the group when the child layers no longer need attention."}),"\n"]}),"\n",(0,l.jsx)(r.p,{children:"Useful group patterns include:"}),"\n",(0,l.jsx)(r.pre,{children:(0,l.jsx)(r.code,{className:"language-text",children:"backgrounds\r\nmain-content\r\nmetadata-panel\r\nwheel-display\r\nintro-effects\n"})}),"\n",(0,l.jsx)(r.p,{children:"Use groups when several layers move, scale, rotate, or animate as one unit."}),"\n",(0,l.jsx)(r.h2,{id:"set-a-group-pivot",children:"Set a group pivot"}),"\n",(0,l.jsx)(r.p,{children:"The pivot defines the origin for rotation and scaling."}),"\n",(0,l.jsxs)(r.ol,{children:["\n",(0,l.jsx)(r.li,{children:"Select the group."}),"\n",(0,l.jsx)(r.li,{children:"Open Pivots in the Properties panel."}),"\n",(0,l.jsx)(r.li,{children:"Choose a preset or Custom."}),"\n",(0,l.jsx)(r.li,{children:"Preview the related animation."}),"\n"]}),"\n",(0,l.jsx)(r.p,{children:"Common choices:"}),"\n",(0,l.jsxs)(r.table,{children:[(0,l.jsx)(r.thead,{children:(0,l.jsxs)(r.tr,{children:[(0,l.jsx)(r.th,{children:"Pivot"}),(0,l.jsx)(r.th,{children:"Typical use"})]})}),(0,l.jsxs)(r.tbody,{children:[(0,l.jsxs)(r.tr,{children:[(0,l.jsx)(r.td,{children:"Center"}),(0,l.jsx)(r.td,{children:"Spin or scale around the middle"})]}),(0,l.jsxs)(r.tr,{children:[(0,l.jsx)(r.td,{children:"Top"}),(0,l.jsx)(r.td,{children:"Hanging or swinging motion"})]}),(0,l.jsxs)(r.tr,{children:[(0,l.jsx)(r.td,{children:"Center Left"}),(0,l.jsx)(r.td,{children:"Door or panel opening from the left"})]}),(0,l.jsxs)(r.tr,{children:[(0,l.jsx)(r.td,{children:"Center Right"}),(0,l.jsx)(r.td,{children:"Door or panel opening from the right"})]}),(0,l.jsxs)(r.tr,{children:[(0,l.jsx)(r.td,{children:"Bottom"}),(0,l.jsx)(r.td,{children:"Rotation around a base"})]}),(0,l.jsxs)(r.tr,{children:[(0,l.jsx)(r.td,{children:"Corner"}),(0,l.jsx)(r.td,{children:"Scale or rotate from one corner"})]})]})]}),"\n",(0,l.jsx)(r.p,{children:(0,l.jsx)(r.img,{alt:"HyperTheme Properties panel with position, scale, pivot, and rotation settings",src:n(42178).A+"",width:"298",he

1ight:"705"})}),"\n",(0,l.jsx)(r.h2,{id:"edit-layer-properties",children:"Edit layer properties"}),"\n",(0,l.jsx)(r.p,{children:"The Properties panel changes with the selected layer type. Common settings include:"}),"\n",(0,l.jsxs)(r.ul,{children:["\n",(0,l.jsx)(r.li,{children:"Opacity"}),"\n",(0,l.jsx)(r.li,{children:"X and Y position"}),"\n",(0,l.jsx)(r.li,{children:"X and Y scale"}),"\n",(0,l.jsx)(r.li,{children:"Pivot"}),"\n",(0,l.jsx)(r.li,{children:"Rotation"}),"\n",(0,l.jsx)(r.li,{children:"Tiling"}),"\n",(0,l.jsx)(r.li,{children:"Stroke"}),"\n",(0,l.jsx)(r.li,{children:"3D perspective"}),"\n"]}),"\n",(0,l.jsxs)(r.p,{children:["Move the playhead to ",(0,l.jsx)(r.code,{children:"0s"})," before editing base layer properties."]}),"\n",(0,l.jsx)(r.h2,{id:"organize-a-large-project",children:"Organize a large project"}),"\n",(0,l.jsx)(r.p,{children:"Use a repeatable setup order:"}),"\n",(0,l.jsxs)(r.ol,{children:["\n",(0,l.jsx)(r.li,{children:"Add source assets."}),"\n",(0,l.jsx)(r.li,{children:"Name each layer."}),"\n",(0,l.jsx)(r.li,{children:"Set stacking order."}),"\n",(0,l.jsx)(r.li,{children:"Group related layers."}),"\n",(0,l.jsx)(r.li,{children:"Set base position and scale."}),"\n",(0,l.jsx)(r.li,{children:"Add animations."}),"\n",(0,l.jsx)(r.li,{children:"Preview the full timeline."}),"\n"]}),"\n",(0,l.jsx)(r.p,{children:"For larger projects, prefix related layers with the same category:"}),"\n",(0,l.jsx)(r.pre,{children:(0,l.jsx)(r.code,{className:"language-text",children:"bg-stars\r\nbg-video\r\nui-start-button\r\nui-title\r\nfx-glow-blue\r\nfx-particles\n"})}),"\n",(0,l.jsx)(r.h2,{id:"troubleshooting",children:"Troubleshooting"}),"\n",(0,l.jsx)(r.h3,{id:"a-layer-is-missing",children:"A layer is missing"}),"\n",(0,l.jsxs)(r.ul,{children:["\n",(0,l.jsx)(r.li,{children:"Check the eye icon."}),"\n",(0,l.jsx)(r.li,{children:"Move the layer higher in the list."}),"\n",(0,l.jsxs)(r.li,{children:["Use ",(0,l.jsx)(r.code,{children:"Ctrl+0"})," to fit the canvas."]}),"\n",(0,l.jsx)(r.li,{children:"Check scale and opacity in Properties."}),"\n"]}),"\n",(0,l.jsx)(r.h3,{id:"a-layer-is-hard-to-select",children:"A layer is hard to select"}),"\n",(0,l.jsxs)(r.ul,{children:["\n",(0,l.jsx)(r.li,{children:"Select the row in the Layers tab."}),"\n",(0,l.jsx)(r.li,{children:"Hide any layer covering the target."}),"\n",(0,l.jsx)(r.li,{children:"Zoom into small elements."}),"\n"]}),"\n",(0,l.jsx)(r.h3,{id:"a-layer-moves-during-preview",children:"A layer moves during preview"}),"\n",(0,l.jsxs)(r.ul,{children:["\n",(0,l.jsx)(r.li,{children:"Select the layer."}),"\n",(0,l.jsx)(r.li,{children:"Review its timeline animations."}),"\n",(0,l.jsx)(r.li,{children:"Remove any unintended movement or scale animation."}),"\n"]}),"\n",(0,l.jsx)(r.h3,{id:"properties-appear-disabled",children:"Properties appear disabled"}),"\n",(0,l.jsxs)(r.ul,{children:["\n",(0,l.jsx)(r.li,{children:"Select a layer."}),"\n",(0,l.jsxs)(r.li,{children:["Move the playhead to ",(0,l.jsx)(r.code,{children:"0s"}),"."]}),"\n"]}),"\n",(0,l.jsx)(r.h2,{id:"final-layer-review",children:"Final layer review"}),"\n",(0,l.jsxs)(r.ul,{children:["\n",(0,l.jsx)(r.li,{children:"Every layer has a clear name."}),"\n",(0,l.jsx)(r.li,{children:"Stacking order matches the intended composition."}),"\n",(0,l.jsx)(r.li,{children:"Related layers use groups where shared movement matters."}),"\n",(0,l.jsx)(r.li,{children:"Hidden layers are intentional."}),"\n",(0,l.jsx)(r.li,{children:"Unused layers are removed."}),"\n",(0,l.jsx)(r.li,{children:"Group pivots match their animations."}),"\n",(0,l.jsxs)(r.li,{children:["The theme plays correctly from ",(0,l.jsx)(r.code,{children:"0s"}),"."]}),"\n"]}),"\n",(0,l.jsx)(r.h2,{id:"next-steps",children:"Next steps"}),"\n",(0,l.jsxs)(r.ul,{children:["\n",(0,l.jsx)(r.li,{children:(0,l.jsx)(r.a,{href:"/docs/themebuilder/assets-library",children:"Assets and Library"})}),"\n",(0,l.jsx)(r.li,{children:(0,l.jsx)(r.a,{href:"/docs/themebuilder/transformations",children:"Transformations"})}),"\n",(0,l.jsx)(r.li,{children:(0,l.jsx)(r.a,{href:"/docs/themebuilder/animation-basics",children:"Animation Basics"})}),"\n",(0,l.jsx)(r.li,{children:(0,l.jsx)(r.a,{href:"/docs/themebuilder/best-practices",children:"Best Practices"})}),"\n"]})]})}function c(e={}){const{wrapper:r}={...(0,s.R)(),...e.components};return r?(0,l.jsx)(r,{...e,children:(0,l.jsx)(o,{...e})}):o(e)}},28453:(e,r,n)=>{n.d(r,{R:()=>t,x:()=>a});var i=n(96540);const l={},s=i.createContext(l);function t(e){const r=i.useContext(s);return i.useMemo(function(){return"function"==typeof e?e(r):{...r,...e}},[r,e])}function a(e){let r;return r=e.disableParentContext?"function"==typeof e.components?e.components(l):e.components||l:t(e.components),i.createElement(s.Provider,{value:r},e.children)}},42178:(e,r,n)=>{n.d(r,{A:()=>i});const i=n.p+"assets/images/properties-panel-0e463915ee69816d19857ae16656d3b8.png"},79609:(e,r,n)=>{n.d(r,{A:()=>i});const i=n.p+"assets/images/layer-selection-26b67eb9b9a11478d60f4190aefa5858.png"},92868:(e,r,n)=>{n.d(r,{A:()=>i});const i=n.p+"assets/images/layers-panel-4635a2f9304cbd5e49ea1439f55683df.png"}}]);