Alignment, Layout & Transforms

Advanced · 8 min read · By Chitmunk Team · Updated Oct 18, 2026

Overview

Chitmunk includes a full set of precision layout tools for aligning, distributing, and transforming elements. Lining up a row of stat icons, centering a title, tilting a shape a few degrees: these tools do it exactly, without eyeballing and nudging by hand. Mastering them is the difference between a card that looks roughly right and one that looks polished and professional.

Multi-Select Alignment

Select two or more elements, then use the Align buttons in the inspector to snap them into position relative to each other (right-click offers Align Left, Right, Top and Bottom too). The six alignment directions are:

• Left: Moves all selected elements so their left edges line up with the leftmost element.
• Center: Lines up the horizontal centers of all selected elements.
• Right: Moves all selected elements so their right edges line up with the rightmost element.
• Top: Moves all selected elements so their top edges line up with the topmost element.
• Middle: Lines up the vertical centers of all selected elements.
• Bottom: Moves all selected elements so their bottom edges line up with the bottommost element.

Distribution

Select three or more elements and use the Distribute buttons to space them evenly. Unlike alignment, distribution does not move the outermost elements; it only adjusts the ones in between.

• Horizontally: Places equal spacing between elements from left to right.
• Vertically: Places equal spacing between elements from top to bottom.

Distribution is essential for creating uniform grids, rows of icons, and stacked lists. Select a column of text boxes and click Vertically once; they snap into even spacing instantly.

Make the Same Size

Select two or more elements and use Make the same size in the inspector. The first element in the selection acts as the size reference; all other elements resize to match it.

• Same width: All selected elements take the first element's width.
• Same height: All selected elements take the first element's height.
• Same size: All selected elements take both the width and height of the first element.

This is particularly useful for making a row of stat boxes or icons that all need to be exactly the same size. Select them all, click Same size, and they are uniform, no typing in numbers required.

Align to Card

These buttons center a single element (the Center row in the inspector) or a multi-selection (Center on the card) relative to the full card area, including bleed.

• Center across: Centers the selected element(s) horizontally on the card.
• Center up-down: Centers the selected element(s) vertically on the card.

Use this for a quick way to perfectly center a title, logo, or hero image. Select the element, click Center across, and it snaps to the exact horizontal midpoint of the card.

Align to Safe Area

The Align to safe zone buttons (Left, Right, Top, Bottom, under Position & size) snap a single element flush to the print safe zone boundary instead of centering it. Content pinned to the safe zone will not be at risk of being cut off during printing. They appear when one element is selected.

• Left / Right: Moves the element's left or right edge to the safe zone boundary.
• Top / Bottom: Moves the element's top or bottom edge to the safe zone boundary.

Opacity

Every element has a per-element opacity slider in the inspector (under Transform & blend, inside More; images keep theirs with the other image settings), ranging from 0% (fully transparent) to 100% (fully opaque). Opacity affects the entire element, including its fill, stroke, shadow, and any children if it is a group.

Common uses include:

• Watermarks: Set a logo or text to 15–30% opacity to create a subtle background stamp.
• Ghost text: Placeholder or flavor text at reduced opacity to de-emphasize it visually.
• Layered effects: Stack multiple shapes or images at partial opacity to blend them together.

Blend Modes

Blend modes control how an element's colors interact with the elements below it. Chitmunk supports 12 modes, with Normal, Multiply, Screen and Overlay listed first under "Common" and the other eight under "More" in the Blend menu:

• Normal: No blending: the element renders on top as-is. The default for all elements.
• Multiply: Darkens by multiplying color values. White becomes transparent; dark colors intensify. Use this to overlay dark textures or ink effects onto a colored background.
• Screen: The opposite of Multiply: lightens by inverting, multiplying, then inverting again. Black becomes transparent; light colors glow. Use this for light rays, sparkle effects, or fire overlays.
• Overlay: Combines Multiply and Screen, darkens dark areas and lightens light areas. Great for increasing contrast and punch.
• Darken: Keeps whichever pixel is darker between the element and what's below it.
• Lighten: Keeps whichever pixel is lighter.
• Color Dodge: Brightens the underlying layer based on the element's color. Creates intense highlights.
• Color Burn: Darkens the underlying layer. Creates rich, saturated shadows.
• Hard Light: Like Overlay but more extreme, strong contrast with harsh transitions.
• Soft Light: Like Overlay but gentler, subtle contrast enhancement without harsh edges.
• Difference: Subtracts colors, produces inverted, psychedelic effects. Useful for special stylistic treatments.
• Exclusion: Similar to Difference but lower contrast and softer.

Anchor Points

The pivot point (anchor) defines the center of rotation and scaling for an element. By default it is the element's center. You can change it with the 9-dot Pivot point grid under Transform & blend (inside More) in the inspector.

The nine positions correspond to the corners, edge midpoints, and center of the element's bounding box:

• Center (default): The element rotates around its own midpoint.
• Top-left corner: The element pivots around its top-left corner, useful for fanning a hand of cards or a hinge-style turn.
• Any edge midpoint: Useful for flipping around an axis or creating a door-swinging effect.

When you rotate an element, it always rotates around its anchor point. Changing the anchor point before rotating gives you control over where the pivot sits, without needing to manually reposition the element afterward.

Skew

Skew shears an element along the X axis (horizontal lean) or Y axis (vertical lean), from −45° to 45°. Find the X and Y fields under Transform & blend. They are there for every element type except QR codes and tables, which cannot be skewed.

Use cases:

• Italic-style effect on shapes: Skewing a rectangle gives it a dynamic, angled look without needing a custom shape.
• Perspective simulation: Skewing an image slightly along X can suggest depth or motion.
• Stylized text boxes: Combine a skewed shape background with normal text on top for a parallelogram-style header.

Flip

Flip mirrors an element along its horizontal or vertical axis. Unlike rotation, flip produces a true mirror image.

• Mirror left to right: Shift+H, or the first Flip button, mirrors the element left-to-right.
• Turn upside down: Shift+V, or the second Flip button, mirrors the element top-to-bottom.

The Flip buttons are in the inspector's Position & size. A common use is mirroring a decorative flourish or border element: design one half, duplicate it, flip it, and position the copy to create a symmetrical ornament without needing separate artwork.

Tips

• Use the alignment tools instead of manually nudging elements into place. Even experienced designers waste time nudging. The alignment buttons are faster and exact.
• Distribution is essential for consistent card layouts. If you have a repeating grid of elements, distribute them once and they will be perfectly even, regardless of how many there are.
• Blend modes are powerful but can be subtle at first. Start with Multiply and Screen; they cover most practical use cases and the results are predictable.
• Save pivot point changes for intentional rotations. Changing the pivot point affects where the element turns, so set it back to the center when you are done with a specific transform.
• Opacity and blend modes stack: a 50% opacity element using Multiply will look different from a 100% opacity element using Multiply. Experiment with both together for fine-grained layering control.