Making Custom Hats & Cosmetics with Slopbaker

1 Introduction

Slopbaker is a browser-based pixel art editor built specifically for Duck Game cosmetics. It understands the exact canvas sizes, layer constraints, and export format that Duck Game expects, so you never have to worry about getting dimensions wrong.

With Slopbaker you can create or edit Hats, Quacks (full duck skins), Capes, Rocks, and Particle effects — all five cosmetic slots that Duck Game supports for custom content. Everything is saved directly to your Duck Game account via Discord login.

2 Getting Started

1. Join the Duck Game Discord server and look for the bot commands channel.
2. Use the bot command to launch Slopbaker — you'll get a personal link to open in your browser.
3. Click Sign in to continue (Discord OAuth) so your creations are saved to your account.
4. You'll land on an empty canvas in Hat mode, ready to draw.

3 The Interface

Topbar

The floating topbar at the top of the screen contains everything you need to navigate the editor. From left to right:

• ☰ SLOPBAKER — click the logo to open the new/import menu (start fresh or import a PNG).
• Category tabs — switch between Hat, Quack, Cape, Rock, and Particles. Each has its own canvas size and auto-saves independently.
• PREVIEW — see how your creation looks on a Duck in-game.
• SAVE TO DUCK GAME — export and push your design to your account.

Canvas

The canvas is the large dark area in the center. A faint checkerboard pattern indicates transparent pixels. An optional semi-transparent template guide (toggle with the Template button in the bottom bar) shows the approximate silhouette of the cosmetic slot to help you stay within bounds.

Layers Panel

The Layers panel floats on the left. You can drag its header to reposition it anywhere. Layers work like Photoshop layers — they stack top-to-bottom, and only the active (highlighted) layer receives your drawing strokes. Use the toolbar buttons in the panel header to:

• ⊕ Add a new blank layer
• ⧉ Duplicate the active layer
• 📋 Paste a previously copied layer
• ↓ Merge down onto the layer below
• ✕ Delete the active layer

Options Panel

The Options panel floats on the right and has four tabs:

• Tools — pick your drawing tool and configure color, brush size, mirror axes, etc.
• Layer — adjust the active layer's opacity, offset, rotation, flip, and outline.
• Doc — document-wide settings like onion skin and frame management.
• Keys — a full list of keyboard shortcuts for reference.

Bottom Bar

The slim bar pinned to the bottom of the screen gives you quick access to undo/redo, zoom controls, grid toggle, and the template opacity toggle. Your Discord username shows on the far right to confirm you're signed in.

4 The 5 Cosmetic Categories

Each category tab edits a separate cosmetic slot. They share the same tools and layer system but have different canvas sizes calibrated to match what Duck Game expects.

Press Tab to cycle forward through categories, Shift+Tab to go back.

5 Drawing Tools

Select tools from the Tools tab in the Options panel, or use the keyboard shortcuts below. Hold Space at any time to temporarily switch to the Hand tool for panning.

Mirror Mode

Press M to toggle Mirror X (horizontal symmetry) — every stroke you make on the left side is instantly mirrored on the right. Press Shift+M for Mirror Y. Both can be active at once for 4-way symmetry. Great for hats and quacks where the left/right sides should match.

6 Working with Layers

Layers let you separate parts of your design so you can edit them independently. For example, you might put the base color of a hat on one layer and add a logo or shine on a layer above it.

Layer Options (Layer Tab)

With a layer selected, switch to the Layer tab in the Options panel to access:

• Opacity — fade the layer ({ / } for −10%/+10%).
• Offset — nudge the layer position. Arrow keys work too; hold Shift for 8px jumps.
• Rotation — rotate 90° CW with ., CCW with ,.
• Flip — mirror the layer content horizontally (\) or vertically (|).
• Outline — auto-generate a 1-pixel dark outline around the layer (K). Useful for making hats pop against different backgrounds.
• Backspace resets all transforms (offset, rotation, flip) back to defaults.

7 Pro Tips

Use the Template Guide

Click Template in the bottom bar (or hold it active) to overlay a semi-transparent guide showing the rough bounds of the cosmetic slot. This helps you see where the hat sits on a duck's head before you preview it.

Zoom In Close

These canvases are tiny in pixel terms. Zoom in with + or the mouse wheel (Ctrl+Scroll on desktop, pinch on mobile) to see individual pixels clearly. Use 0 to reset the view, or ` (backtick) to zoom-to-fit the entire canvas.

Use Multiple Layers

Resist the urge to paint everything on one layer. Separate the brim, body, band, and decorations into their own layers so you can adjust each part without affecting the others. Merge them down when you're happy.

Mirror for Symmetry

Almost every hat and quack design benefits from symmetry. Turn on M (Mirror X) before you start painting. Half the work, double the result.

Onion Skin for Quacks

The Quack (duck skin) has multiple frames. Toggle Onion Skin with U to see a ghost of the previous frame while working on the current one — essential for keeping details consistent across frames.

8 AI Expressions

The floating Expressions panel (left side, below Layers) uses AI image generation to restyle a Quack frame based on a text prompt. For example: "make the expression angry" or "add sunglasses."

1. Make sure you're signed in with Discord (required for generation).
2. Type a description of the change you want in the text box.
3. Click Generate and wait up to 30 seconds.
4. Review the preview — click Apply to accept or Discard to try again.

9 Saving to Duck Game

When your design is ready, click SAVE TO DUCK GAME in the topbar (or press Cmd/Ctrl+S). This opens the export dialog.

Only the categories you've actually changed since the last save will be highlighted. Unchanged categories are dimmed. Select the slot(s) you want to push and click Save to Duck Game. Your custom cosmetic will appear in-game on your next server join.

Previewing First

Before saving, click PREVIEW in the topbar to see how your hat looks on an actual duck. The preview modal shows a live composite render in the style of the in-game display.

10 Full Keyboard Shortcut Reference

Navigation & View

File Operations

Drawing Tools

Layer & Transform