> ## Documentation Index > Fetch the complete documentation index at: https://pictogram.mintlify.site/llms.txt > Use this file to discover all available pages before exploring further. # Designing Images > Guidelines for designing images for Pictogram export const PixelBanner = () => { const [topRaw, setTopRaw] = useState(null); const [bottomRaw, setBottomRaw] = useState(null); const [topCanvas, setTopCanvas] = useState(null); const [bottomCanvas, setBottomCanvas] = useState(null); const [pendingColor, setPendingColor] = useState("#FFFFFF"); const [pendingAlpha, setPendingAlpha] = useState(255); const [error, setError] = useState(""); const [dragging, setDragging] = useState(false); const [fileName, setFileName] = useState(""); const hexToRgb = hex => ({ r: parseInt(hex.slice(1, 3), 16), g: parseInt(hex.slice(3, 5), 16), b: parseInt(hex.slice(5, 7), 16) }); const buildHalfCanvas = (srcData, shadowR, shadowG, shadowB, shadowA) => { const SW = 264, SH = 8, SCALE = 4; const CW = SW + 1, CH = SH + 1; const canvas = document.createElement("canvas"); canvas.width = CW * SCALE; canvas.height = CH * SCALE; const ctx = canvas.getContext("2d"); ctx.clearRect(0, 0, canvas.width, canvas.height); const out = ctx.createImageData(canvas.width, canvas.height); const write = (destX, destY, r, g, b, a) => { if (destX < 0 || destY < 0 || destX >= CW || destY >= CH) return; for (let py = 0; py < SCALE; py++) { for (let px = 0; px < SCALE; px++) { const i = ((destY * SCALE + py) * (CW * SCALE) + (destX * SCALE + px)) * 4; out.data[i] = r; out.data[i + 1] = g; out.data[i + 2] = b; out.data[i + 3] = a; } } }; for (let y = 0; y < SH; y++) { for (let x = 0; x < SW; x++) { const si = (y * SW + x) * 4; const srcA = srcData[si + 3]; if (srcA === 0) continue; const r = Math.round(srcData[si] * shadowR / 255); const g = Math.round(srcData[si + 1] * shadowG / 255); const b = Math.round(srcData[si + 2] * shadowB / 255); const a = Math.round(srcA * shadowA / 255); write(x + 1, y + 1, r, g, b, a); } } for (let y = 0; y < SH; y++) { for (let x = 0; x < SW; x++) { const si = (y * SW + x) * 4; write(x, y, srcData[si], srcData[si + 1], srcData[si + 2], srcData[si + 3]); } } ctx.putImageData(out, 0, 0); return canvas; }; const applyWithColor = (tRaw, bRaw, color, alpha) => { const {r, g, b} = hexToRgb(color); setTopCanvas(buildHalfCanvas(tRaw, r, g, b, alpha)); setBottomCanvas(buildHalfCanvas(bRaw, r, g, b, alpha)); }; const loadFile = file => { if (!file) return; setError(""); const img = new Image(); const url = URL.createObjectURL(file); img.onload = () => { URL.revokeObjectURL(url); if (img.width !== 264 || img.height !== 16) { setError(`Need exactly 264×16 px — got ${img.width}×${img.height}`); return; } const tmp = document.createElement("canvas"); tmp.width = 264; tmp.height = 16; tmp.getContext("2d").drawImage(img, 0, 0); const ctx = tmp.getContext("2d"); const td = new Uint8ClampedArray(ctx.getImageData(0, 0, 264, 8).data); const bd = new Uint8ClampedArray(ctx.getImageData(0, 8, 264, 8).data); setTopRaw(td); setBottomRaw(bd); setFileName(file.name); applyWithColor(td, bd, pendingColor, pendingAlpha); }; img.onerror = () => { URL.revokeObjectURL(url); setError("Could not read image."); }; img.src = url; }; const handleApply = () => { if (topRaw && bottomRaw) applyWithColor(topRaw, bottomRaw, pendingColor, pendingAlpha); }; const canvasRef = canvas => el => { if (!el || !canvas) return; el.width = canvas.width; el.height = canvas.height; el.getContext("2d").drawImage(canvas, 0, 0); }; return
{}
pixel shadow splitter 264×16 → required
{} {error &&
✕ {error}
} {}
shadow {}
{}
setPendingColor(e.target.value)} style={{ position: "absolute", inset: 0, opacity: 0, width: "100%", height: "100%", cursor: "pointer", border: "none", padding: 0 }} />
{}
{}
{pendingColor.toUpperCase()}
{}
{}
A setPendingAlpha(Math.min(255, Math.max(0, Number(e.target.value))))} style={{ width: "38px", background: "transparent", border: "none", color: "#ccc", fontSize: "11px", textAlign: "right", outline: "none", padding: 0, fontFamily: "inherit" }} />
{}
{} {topCanvas && bottomCanvas ?
preview {}
{topCanvas.width}×{topCanvas.height * 2} rendered
:
upload an image to see output
}
; }; Before creating your images, there are a few things to keep in mind to make sure everything looks right in-game. ## Sizes The sizes below apply specifically to MOTD images. For rank tags, emojis and other uses, images can be any size as long as both the width and height are divisible by 8. | Type | Recommended Size | | ---------------- | ---------------- | | Full image MOTD | 264x16 | | Single line MOTD | 264x8 | *** ## Transparency Transparency is not supported. Any transparent pixels will be filled in with black, so make sure your image has a solid background. ## Shadow Line When designing a full image MOTD, be aware that there is a shadow line running through the middle of it. Make sure to design around it so it doesn't interfere with your image. You can configure the color of this shadow line using the [`shadow_color`](/images#shadow-color) setting.