#What you'll learn

How to tune the generated buttons, panels, bars, slots, tooltips and icons.
How to theme a whole kit from your game's palette, and when hand-edits win over the theme.
How to use layers and effects to finish assets by hand.
How to set up nine-slice so panels look right from tiny tooltips to full-screen menus.
How to add pixel-font text and hand frames to Pixxara, Pixxkit and Pixxizi.

#Before you start

You should know the basics from the Pixxico beginner guide: adding assets, the Draw bar, Theme, nine-slice, HUD and Export.
You need a Pixx plan that includes Pixxico. Sign in to use Cloud and to send assets to other apps.
Optional: a palette from Pixxulo and a font from Pixxypo.

Select a generated asset (its list entry shows its kind, for example button or panel).
In the Generator section, adjust its settings:
- Button: Corner radius (0–6) and Bevel (0–4).
- Panel: Corner radius (0–8) and Border (1–4).
- Bar: Fill % and the Fill colour token (for example the accent for health, light for a secondary bar).
- Slot: Corner radius (0–6).
- Icon: Glyph: heart, star, coin, potion, sword, shield, gem, skull and more.
Change the asset's Width and Height to fit your game. Generated assets redraw at the new size; hand-edited ones keep their pixels from the top-left corner (cropped or padded), and nine-slice switches off if the guides no longer fit.

Build or open the palette in Pixxulo and send it to Pixxico (or open it from Library).
Pixxico turns it into a theme: it sorts the palette by brightness and colourfulness to fill base, light, dark, outline, accent and text, and redraws every generated asset.
Open Theme and fine-tune any token by clicking it.
The palette's colours also appear in the drawing bar (Colours of the palette from your Pixx library) so you can paint with them.

In the Asset tab, open Layers and click + Layer to paint details (highlights, a gem, a crack) without touching the base drawing.
Untick Visible to hide a layer while you work; click × to delete a layer.
Under Effects, apply Outline or Outline (corners) (the second one includes diagonal corners), Drop shadow, Flip ↔ and Flip ↕ to the current layer.
Recolour… lists every colour of the current layer; change any of them and every pixel of that colour follows.

Select a panel or button and tick Scalable (nine-slice).
Place the guides so each corner holds the full corner art (rounded corners, rivets, the bevel) and nothing else. The edges between the guides should repeat cleanly.
Choose Stretch for smooth edges and fills, Tile for patterned borders (rope, studs, bricks), which would look smeared when stretched.
Open Preview to see the asset at several sizes, then press H for the HUD preview at realistic game sizes.
If a size looks wrong, move the guides one pixel at a time with the Left, Top, Right and Bottom fields.

Select the asset and open Text in the Asset tab.
Type the label and click the font button to pick one of more than 40 pixel fonts. Search, pick a style or star your favourites. A font from Pixxypo can be added with Font from library.
Pick a Colour token and an optional Outline token.
Click Add text to the layer. On nine-slice assets the text is centred in the stretchy middle, and buttons keep it on all four states.
Set the UI font in Theme for the HUD preview's labels.

Use ⋯ → Move to group… to group assets (for example "Main menu", "Inventory", "Dialogue").
Earlier and Later reorder assets inside a group; the order is kept in exports.
Duplicate (Ctrl+D) an asset to make variants: a gold and a silver slot, a big and a small panel.
Give the kit a name in Kit name (used for exported files); it becomes the base of every exported file name.

Select a nine-slice asset.
Send to App → This frame (nine-slice UI frame).
Pick Pixxara for dialogue text boxes, Pixxkit for panels and badges in marketing templates, or Pixxizi to export it as engine UI with its margins.
The receiving app draws the frame at any size using your slices, with Stretch or Tile as you set it.

Start from the Starter UI kit and send your game palette from Pixxulo to set the theme.
Tune each generator, then hand-finish the button and panel with a highlight layer.
Duplicate slots and icons for every inventory item; pick glyphs or draw your own icons.
Check everything in HUD, then Export → Download ZIP with the scales your game needs.

Make a nine-slice panel for dialogue (generous corners, a Tile border if it's patterned).
Send it to Pixxara as a UI frame and use it as the text-box style.
Send the same theme's palette and your Pixxypo font so text and name plates match.

Send buttons and panels to Pixxkit as UI frames.
Pixxkit uses them for panels and frame badges in social posts and store banners, so marketing looks like the game.

P/B pencil, E eraser, L line, R rectangle, O ellipse, G fill, I picker; [ / ] brush size.
H toggles the HUD preview, N adds an asset, Ctrl+D duplicates, Ctrl+S opens Export.
Theme presets: Sky, Forest, Ember, Royal and Stone. Pick the closest one, then edit tokens.
Assets can be up to 480 × 480 pixels.
Pixxico saves your kit on this device automatically ("Saved on this device"); Cloud keeps a copy in your account.

If a generator setting does nothing, the asset is hand-edited. Use Redraw from the generator (this replaces your edits) or keep editing by hand.
If stamped text is the wrong colour after a theme change, undo the stamp and add the text again, or recolour it with Recolour….
If Send to App doesn't offer "This frame", the selected asset doesn't have nine-slice turned on.
If the text says it's wider than the asset, pick a smaller font or widen the asset.
If a tiled border looks broken at some sizes, make the tiled section's length divide evenly into common sizes, or switch that asset to Stretch.