Image Editing & Filters
Overview
Images are one of the most-used elements in any card design. Chitmunk gives you a full set of image editing tools built directly into the properties panel, no external editor required. Everything you can do here is non-destructive: your original file is always preserved, and you can undo or reset any adjustment at any time.
The image editing toolkit includes:
- 8 adjustable filters: brightness, contrast, saturation, blur, grayscale, sepia, hue rotation, and invert.
- 6 clip shapes: mask your image to a circle, hexagon, diamond, and more.
- 4 fit modes: control how the image fills its bounding box.
- Border and shadow controls: add depth and definition to any image element.
Adding Images
There are three ways to add an image to your canvas:
- Tool strip button: Click the Image button in the tool strip (left edge of the canvas) to open a file picker. Select any image from your device.
- Drag and drop: Drag an image file directly from your file manager onto the canvas. Chitmunk creates a new image element at the drop position.
- Paste from clipboard: Copy an image in any other application and press Ctrl+V on the canvas. The image is pasted as a new element.
Once added, images are stored in your browser's IndexedDB database. They are persistent: your images survive a page refresh and will still be there when you return to your project. The maximum file size per image is 10 MB.
Tip: Images are embedded in your project file when you export or save to Google Drive, so collaborators and print shops receive everything they need in a single file.
Fit Modes
The fit mode controls how the image fills its bounding box, the rectangle you draw or resize on the canvas. Select an image element and choose a fit mode from the properties panel:
- Contain: Scales the image so it fits entirely within the bounding box, preserving the original aspect ratio. There may be empty space (letterboxing or pillarboxing) on two sides. This is the default.
- Cover: Scales the image so it fills the entire bounding box, preserving aspect ratio. The image may be cropped on the top/bottom or left/right edges to eliminate gaps.
- Stretch: Scales the image to fill the bounding box exactly, ignoring aspect ratio. This will distort the image if the box proportions differ from the image proportions.
- None: Renders the image at its original pixel size. If the image is larger than the bounding box, it overflows. Use this when you need pixel-precise placement of a specific asset.
Tip: Cover is the go-to fit mode for full-bleed card art; it fills every pixel of the bounding box without distortion. Contain works best for icons and logos where you need to see the entire image.
Image Filters
Chitmunk provides 8 non-destructive filters, each controlled by a slider in the properties panel. All filters can be combined; they stack in the order listed below.
- Brightness: Range: 0–200%, default 100%. Values below 100% darken the image; values above lighten it.
- Contrast: Range: 0–200%, default 100%. Lower values flatten the image toward gray; higher values make darks darker and lights lighter.
- Saturation: Range: 0–200%, default 100%. At 0% the image is fully desaturated (grayscale). Above 100% colors are intensified.
- Blur: Range: 0–20px, default 0. Applies a Gaussian blur. Useful for background images or soft depth-of-field effects.
- Grayscale: Range: 0–100%, default 0. At 100% the image is fully grayscale, independent of the Saturation slider.
- Sepia: Range: 0–100%, default 0. Adds a warm brown tone, simulating aged or vintage photography.
- Hue Rotation: Range: 0–360°, default 0. Shifts all hues around the color wheel. At 180° reds become cyans, blues become yellows, and so on.
- Invert: Range: 0–100%, default 0. At 100% the image is a negative of itself. Values in between create a washed-out look.
Because filters stack, combining them unlocks creative effects. For example, set Grayscale to 100% and Sepia to 60% for a vintage photograph look. Or push Saturation to 180% and rotate the hue to retheme a piece of art to match your card color scheme.
Reset Filters: Click the Reset Filters button at the bottom of the Filters section to return all 8 sliders to their default values in one click. Your original image is never modified.
Clip Shapes
Clip shapes mask your image to a specific outline. The image itself stays intact, you are only changing which part of it is visible. To apply a clip shape, select an image element and choose from the Clip Shape dropdown in the properties panel:
- None: No clipping: the image displays as a rectangle (default).
- Circle / Ellipse: Clips to an ellipse that fits the bounding box. If the box is square, you get a perfect circle.
- Rounded Rectangle: Clips to a rectangle with rounded corners. The corner radius is controlled separately (see below).
- Hexagon: Clips to a regular hexagon. Great for tile-based games or hex map art.
- Diamond: Clips to a four-sided diamond shape.
- Polygon: Clips to a regular polygon with 3–12 sides. Set the number of sides in the adjacent field.
- Star: Clips to a star shape with 3–12 points. Set the number of points in the adjacent field.
Tip: Clip shapes work great for character portraits (circle), tile art (hexagon), or skill/ability icons (polygon or star). Because the image data is preserved, you can switch between shapes at any time without re-uploading.
Corner Radius
Round the corners of rectangular images using the Corner Radius slider (0–200px). This works independently of clip shapes; it applies a smooth, rounded corner to the image's bounding box before any clip shape is applied.
Corner radius is especially useful for card art thumbnails, avatar frames, and any image that sits over a background and needs soft edges to blend naturally. A small value (4–8px) gives a subtle modern softness; larger values (40–80px) create a more pill-shaped or button-like appearance.
Border & Shadow
Border adds an outline around the image element. Set the color using the color picker and the width in pixels. The border follows the clip shape, a circular clip gets a circular border, a hexagonal clip gets a hexagonal border.
Shadow adds a drop shadow behind the image. Toggle the shadow on or off with the switch, then adjust:
- Color: The shadow color, including opacity. A semi-transparent black (rgba 0,0,0,0.4) is a natural starting point.
- Blur: Range 0–40px. Higher values create a softer, more diffuse shadow; 0 creates a hard edge.
- X Offset: Range -30 to 30px. Positive values shift the shadow right; negative values shift it left.
- Y Offset: Range -30 to 30px. Positive values shift the shadow down; negative values shift it up.
Shadows add depth and help images stand out from the card background. Even a subtle shadow (4px blur, 2px Y offset) can make flat art feel grounded on the card surface.
CSV Image Binding
You can bind an image element to a column in your CSV data so that each row of the spreadsheet provides a different image for that element. This lets you produce a full deck of cards, each with unique artwork, from a single template.
To set up a binding, select the image element and open the Bind dropdown in the properties panel. Choose the CSV column that contains your image references. The column can hold:
- Image URLs: any public HTTPS URL pointing to a PNG, JPEG, WebP, or SVG file.
- idb:// references: keys for images already stored in your project's local IndexedDB, in the format
idb://img_xxx. These are generated automatically when you upload images through the Clip Art Browser or image picker.
Tip: See the CSV Data Merge guide for full details on setting up your spreadsheet and binding multiple elements at once.
AI Image Generation
Chitmunk can generate new artwork for any image element using AI. Right-click an image element on the canvas and select Generate with AI to open the AI generation modal scoped to that element. You can write a prompt, choose a backend (AI Horde or local Stable Diffusion), and generate one or more images.
The generated image is stored in IndexedDB just like any uploaded image. From there, all the same editing tools: filters, clip shapes, fit modes, border, shadow, apply normally.
Tip: See the AI Image Generation guide for a full walkthrough of backends, prompt writing, and batch generation.
Tips & Best Practices
- Cover fit for full-bleed art: When your image should fill the entire card face (or a large panel), use Cover. It eliminates empty gaps without distorting the image.
- Contain fit for icons and logos: When you need to see every part of the image: a logo, a symbol, a small icon, use Contain so nothing is cropped.
- Source resolution: For print, keep your source images at least 300 DPI at the intended print size. Upscaling a low-resolution image before export will not recover lost detail, and low-DPI images may appear blurry in the printed product.
- Clip shapes for portraits: Circle clip is perfect for character portrait medallions. Hexagon is ideal for tile-based or hex-map artwork. These shapes frame subjects cleanly without manual masking.
- Experiment with filters freely: All filters are non-destructive. Try pushing saturation, rotating hue, or adding a sepia tint to quickly adapt a piece of stock art to your card's color scheme, then reset in one click if it does not work out.
- Layer shadows carefully: Multiple image elements with heavy shadows can make a card look muddy. A subtle shadow (2–4px blur, 1–2px offset) on one or two focal elements is usually more effective than shadows on everything.