Kanin's BotBaseImage Builder
The Image Builder designs images from layers: shapes, text, the member's avatar, the server icon and your own pictures. Modules use these images when they send a message, for example the welcome card the Welcomer module attaches when a member joins. Text layers can hold variables, so every member gets their own name on the card.
Where images come from
- Image templates belong to a module, such as the Welcomer's Welcome Image and Goodbye Image (800 x 300). Open them from Templates > Images with Edit or Set up, then open a variant from the group. Their size is fixed.
- Canvas images are your own designs. Image Builder in the sidebar opens a blank 512 x 512 canvas, and New canvas image in the Media Library creates one with a label. You can set their size from 100 to 2000 pixels on each side.
Every saved image is listed in the Media Library.
The editor
Top bar, from the left: Back, the image's name (click it to rename), the template it belongs to (such as @welcomer.welcome), the canvas width and height, the image's variants and Save. An image template can have several variants (here Welcome card and Classic welcome); click one to switch to it.
Tools, on the left edge:
| Tool | Key |
|---|---|
| Select | V |
| Text | T |
| Rectangle | R |
| Ellipse | E |
| Image | I |
Pick a tool, then click or drag on the canvas to place the layer.
Add a layer, at the bottom right: Rectangle, Ellipse, User Avatar, Server Icon, Custom Image and Text.
Layers, on the right: the top of the list is drawn on top. Drag a layer by its handle to change the order. Hover a layer to show its buttons: show or hide, lock or unlock, and delete.
Canvas controls, at the bottom: Fit (or the 0 key) fits the canvas to the window, and the minus and plus buttons zoom. Undo and redo are at the bottom right (Ctrl+Z and Ctrl+Y).
Edit a layer
Click a layer on the canvas or in the list to select it. The panel on the right shows its properties:
- Color at the top, and the layer's Name.
- Transform: X, Y, W, H, Rotation and Opacity.
- For shapes: Fill Type (Solid, Linear Gradient or Radial Gradient), Corner Radius, a border and a shadow.
- For images and avatars: the Source, how it should Fit, and a Corner Radius (50% or more makes a circle).
- For text: the Content, then the font Size, Weight, Align, Color, a Max Width and a shadow.
Keyboard shortcuts while a layer is selected: the arrow keys move it by 1 pixel (10 with Shift), Ctrl+D duplicates it, Delete removes it and Esc deselects it. Hold Space and drag to move around the canvas.
Variables in text
Click Insert Variable under a text layer's Content to add one:
| Variable | Value |
|---|---|
{user.display_name} | The member's display name |
{user.name} | The member's username |
{user.id} | The member's user ID |
{user.mention} | The member as a mention |
{user.join_position} | Their position when they joined |
{user.color} | Their top role color |
{server.name} | The server's name |
{server.member_count} | The member count |
Filters work too, for example {user.display_name | upper} or {server.member_count | number}. See Variables.
The canvas shows your own name and the server's real values, so you can check the layout.
Save
Click Save at the top right. When you came from Templates, you return there. Pictures you use in Custom Image layers come from the Media Library, so keep them there as long as an image uses them.
Every image change is recorded in the staff logs under Image Builder.