Tips

Preview templates let you test how your UI components work together without manually rebuilding the same presentation every time. You can create a preview layout, then quickly attach elements to it to check spacing, states, color themes, and composition.

Layout items are the building blocks of a preview template. They let you add, remove, copy, reorder, and select the pieces used by the preview.

Use this list to build a composed screen from several PixMold elements, such as panels, buttons, inventory slots, headers, or decorative frames.

To edit a layout item, select it and click Edit. A modal opens where you can attach an element, choose its state, change the item type, and adjust its slice or layout settings.

On the preview canvas, the selected item is highlighted. You can then move it manually, resize it, and use the canvas to tune the final layout visually.

Large surfaces and complex effect stacks can take time to update through Aseprite scripting. PixMold may still be working even if the interface does not visibly change immediately.

• Start on a smaller surface first.
• Tweak the noise values until the material feels right.
• Save the noise preset or layer style.
• Apply the saved style to the larger final surface.
• Render large outputs only after the look is mostly stable.

Use folders in the Structure window when a project starts to contain many buttons, panels, slots, frames, widgets, icons, or preview parts.

1. Open the Structure window.
2. Right-click in the element list to create a folder.
3. Right-click an element to move it into a folder or manage its organization.

The checkbox next to an element marks it for rendering. Only enable the elements you actually want in the final output.

Use layer styles when several layers need the same border, bevel, shadow, gradient, noise, or material treatment.

1. Select the layer that already has the effect stack you want to reuse.
2. Save its layer style.
3. Select another layer.
4. Apply the saved style to copy the effect setup.

For complete components, use templates or element duplication. This is useful for buttons, switches, toggles, tabs, checkboxes, sliders, and any component with multiple states.

1. Create a clean base element, such as a Button with Normal, Hover, and Pressed states.
2. Save it as a template when you want to reuse it in other projects.
3. Use Copy Element when you only need a quick variation in the current project.
4. Modify the duplicated element instead of rebuilding the full state structure from scratch.

You can use a small element as a reusable corner decoration, then repeat it around a panel with Border Array.

A simple corner ornament can be built from a few layers:

1. Create a new element for the corner decoration, for example Corner_L.
2. Create two layers with the same size, for example 48 x 48.
3. Use one layer as the base shape.
4. On the second layer, add a Mask effect.
5. Set the mask offset to 24 on X and 24 on Y to cut the shape into an L-style corner.
6. Add a third Effect Layer if you want to style the result with border, bevel, shadow, gradient, or luminosity.

Once the corner element is ready, use it as a source for another element. In this example, a Bevel effect is added through an Effect Layer above the Border Array layer so the corner lighting stays coherent across all repeated corners.

1. Create or select the panel element that should receive the corner decorations.
2. Add a Border Array effect.
3. Use your corner element as the source.
4. Set Step to 90 to rotate the source by 90 degrees at each iteration.
5. Set Distance to 25% to place the repeated shapes near the corners.
6. Adjust Odd Tune if the rectangle needs correction on alternating corners.
7. Add an Effect Layer with Bevel if the repeated corners should share the same light direction.

The Step value controls how much the source rotates each time it is repeated. With a value of 90, one L-shaped corner can be reused for all four corners.

For square shapes, 25% distance may place the corners correctly right away. For rectangles, two corners may align correctly while the opposite corners need adjustment. In that case, use Odd Tune to compensate for the rectangular proportions.