Postcard Studio

Distribute spacing: Under Styles → Position, select at least three objects to distribute them with equal horizontal or vertical gaps. The outer objects stay fixed; distribution uses the selection, not the full card. Groups count as one object and preserve their internal spacing. Rotated elements use their visible outer bounds. The actions are disabled if the selection contains a position lock. Existing overlaps can remain as equal overlaps; the card-edge movement limits still apply.

Postcard Studio is PostPal's built-in design editor. Instead of uploading a finished print file, you design your postcard directly in the browser.

How a design is created — in two steps:

1. Settings. You set name, format and individualisation. "Weiter zum Design" only becomes active once a name is entered and a Studio-supported format is selected.
2. Studio. The Studio opens in fullscreen and is your only workspace from here on. "Zurück" takes you back to the settings at any time, and the name can also be changed directly in the Studio header. If it is left empty, the design cannot be saved. Format and individualisation can be changed in the Studio too — in the right sidebar, while nothing is selected.

Additional files — fonts, logos or InDesign projects we should take into account for printing — are uploaded in the Studio's sidebar. They are print attachments rather than settings of the design.

Saving ends the flow: you then land on the designs list with a confirmation that the design was saved — when creating just as when editing.

You open an existing design from the menu in the designs list. There are two entry points into the same design: "Design bearbeiten" goes straight into the Studio, "Einstellungen bearbeiten" opens step 1. If your design contains vouchers and is used by active campaigns, the corresponding notice is shown in both steps — including the Studio, where you actually change the vouchers.

Editing elements: Select an element on the card or in Layers. Styles holds the relevant position, typography, color, spacing and element-specific settings in vertical sections. Resize the sidebar to adjust its width and scroll it in shorter windows. Which of the two tabs is open is your choice — a selection never switches it, so you can work down a list of layers without clicking back in between. Use Layers to select, reorder, show, hide and delete layers. Selecting or deselecting elements keeps the workspace in place: there is no additional contextual toolbar above the card.

Selection rectangle: Drag on an empty area or a locked background to draw a selection rectangle. Matching elements are highlighted on the card and in Layers while you drag. Shrinking the rectangle removes elements it no longer touches. Hold Shift to add to your previous selection. Locked and hidden elements are excluded from the rectangle's hits. Release to keep the selection; Escape restores the previous selection.

Resizing text fields: Side handles set the width and therefore automatic wrapping while the height follows the text. Corner handles set both width and height. Text fields without manually dragged handles remain content-sized and adjust themselves automatically.

Typing a size: Styles → Layout → Dimensions shows the selection's width (W) and height (H) in millimetres, as in Figma. A typed value applies straight away and keeps the top-left corner in place, rotated elements included. In a multi-selection every element takes the value; when their sizes differ, the field reads "Mixed". A group is scaled as a whole: its members move and grow in proportion, while font sizes stay unchanged. Images keep their aspect ratio while the toggle beside W and H is active; turn it off to drag or enter width and height independently. Circles and QR codes keep their aspect ratio, QR codes snap to the allowed print sizes, and for text fields only H sets a fixed height. For locked layers, W and H are greyed out, like X and Y.

Locking positions: The padlock next to the eye in Layers locks a layer's position; click again to unlock it. For groups, it toggles all members together. On the canvas the Studio ignores locked layers: no hover frame, no click, no selection frame — a click on one reaches whatever lies beneath. A locked layer is selected only under Layers; there its content, color and size remain editable, but dragging, arrow keys, X/Y fields and alignment cannot move it. If a selection moved together contains a locked layer, the entire selection stays in place. Locks are saved per card side with the design and do not change printed output.

Locking the background: The background's row carries the same padlock — except that it starts closed. A freshly uploaded design sits fixed on the side: it cannot be dragged, scaled from its corners or cropped by double-click, and the fields under Position are greyed out. One click on the padlock releases the background, another locks it again. Locking snaps nothing back: the background keeps whatever placement you gave it. Selecting it under Layers, opacity, the 90° turns and both "Design austauschen" and "Design entfernen" keep working while the padlock is closed; on the canvas a locked background can neither be clicked nor shows a hover frame. Existing designs also come back with a locked background; one click makes it movable again.

Showing and hiding layers: Every row in Layers carries an eye — elements and groups alike. One click hides the layer: it disappears from the card and is not printed either, the way the same control works in Figma or Canva. The row stays where it is, only dimmed, and a second click brings the layer back. Hidden layers cannot be selected or moved, but can still be deleted and reordered. With a multi-selection active, the eye switches the whole selection. A group counts as hidden only once everything under it is — one click hides the whole block, the next brings all of it back. The state is saved with the design and survives a reload. Two things follow: the postal zone notice ignores hidden layers, and a front left with nothing but hidden layers counts as empty — it needs a background again, or the design cannot be saved.

Changing the layer order: Which element sits in front of which is set either by dragging the rows in Layers or straight on the selection. For a selection, the Layers section in the sidebar follows Position and holds four buttons: "In den Hintergrund" (Cmd/Ctrl + Alt/Option + [), "Eine Ebene nach hinten" (Cmd/Ctrl + [), "Eine Ebene nach vorne" (Cmd/Ctrl + ]) and "In den Vordergrund" (Cmd/Ctrl + Alt/Option + ]). The section appears for a single element just as for a group or a multi-selection. A group travels as one block: its members keep their order among themselves while the group as a whole moves in front of or behind the other elements. Once you have stepped into a group by double-clicking, the ends are that group's own — "In den Vordergrund" then means the front of the group, not of the card. When the selection already sits at that end, the matching button is greyed out. Hidden layers keep their place in the order, and the order is saved with the design.

View: bottom left, − and + zoom in and out in steps; for continuous zoom use Ctrl/Cmd with the mouse wheel or a two-finger gesture on the trackpad. Pan the view by holding space with the left mouse button, or with the middle mouse button. The percentage between the two buttons is relative to the fitted view: 100% is what you see when you open the design — in every format and at every window size. Clicking the number takes you back there.

Canvas settings: with no selection, Styles describes the card itself and lets you change it, without going back to step 1:

• Individualisierung — Plus (unlimited variables, €0.01 per contact) or Basic. Basic lays out the card freely — text, images, lines, rectangles and QR codes with a fixed link — it just prints the same card for everyone. Plus adds whatever varies per recipient: variables in text, greetings, voucher codes, API markdown and QR codes with a variable target URL. Those tools stay visible and clickable on Basic; clicking one offers you the switch to Plus. Switching to Basic removes exactly the elements that would differ per recipient, from every variant — everything else stays, uploaded backgrounds included. PostPal asks first when something would actually be lost. Going from Basic to Plus needs no confirmation, because nothing is lost.
• Format — the same format list as in step 1, narrowed to the formats the Studio can draw. A change removes every variant with its content and uploaded designs, so it is confirmed first as well.
• Below it, the print geometry of the current format: finished size, data size, bleed and safety margin in millimetres.

Consistent element frames: Every element uses the same 1-pixel solid frame. It stays transparent at rest, uses the primary color when selected and the lighter primary color on hover. Text, API text and voucher codes use the same square frame shape as images, QR codes and lines; images and QR codes additionally show resize handles only while selected. A closed group shows only its shared frame. After double-clicking to enter the group, its individual elements show their own hover frames again. Escape leaves this mode. The finished-format preview has no editing frames.

A circle carries the same two sections as a rectangle, minus the corner radii — it has no corners. For rectangles, the sidebar shows Fill and Border, with Border collapsed by default. Corner radii can be linked or edited individually. Lines and rectangles also have an Opacity control from 0 to 100 percent. Fill Color edits the fill colour; use Opacity to control transparency. Choose the line style using the symbol next to the border width. The button beside Radius opens four inputs arranged like the corners: top left/right, then bottom left/right.

Grouping elements: Select two or more elements on one side and choose "Gruppieren" under Styles → Aktionen (Cmd/Ctrl + G). The group then behaves as a single object: clicking any member selects the whole group, it gets one shared outline, and dragging as well as aligning move it as one block — the members keep their relative offsets. When exactly one complete group is selected, the same spot offers "Gruppierung aufheben" (Cmd/Ctrl + Shift + G); only one of the two actions is ever shown.

Editing individual members: Double-click to enter one level of a group. You can select its elements and subgroups there; another double-click enters the next subgroup. Escape moves back one level and selects the group you just left as a whole.

Duplicating elements: Styles → Aktionen carries a "Duplizieren" button next to the grouping one (Cmd/Ctrl + D). It applies to any selection — a single text field, a variable, an API Markdown area, an image, a QR code, a line, a rectangle, a circle or a whole group. The copy lands slightly offset on the same side and is selected right away; if the offset would push it past the edge, it moves back into the printable area. A duplicated group stays a group. Duplicated API Markdown areas and API QR codes are given a fresh API field name, so the original and the copy cannot overwrite one another in the API call. The same section also holds "Auswahl löschen". Shortcut labels follow the keyboard you are on: Cmd on macOS, Strg on Windows and Linux.

Rotating elements: Every placed element can be rotated — text fields, API Markdown, images, QR codes and lines. With exactly one element selected, a round grip with a rotation arrow floats above it. Drag it and the element turns about its own centre, with the current angle shown at the grip while you drag. On its own the drag is free to one decimal place (90.1°, 90.2°, 90.3° …). Hold Shift and it snaps in 45° steps — 45°, 90°, 135°, 180° and so on.

A group rotates the same way. With exactly one complete group selected, it takes the grip its members give up: the group turns as one object about its shared centre, the members keep their relative offsets, and each keeps whatever angle of its own it brought along. The block as a whole is held on the finished card area.

A group has an angle of its own. It counts from the moment you grouped the elements, so a fresh group reads 0° even when its members already sit at an angle. That is the angle the field under Rotation shows, and it can be typed in there directly. Double-click into the group to rotate an individual member or a complete subgroup; the outer group's own angle is unaffected.

The same angle can be typed in the right sidebar under Styles → Rotation, for a single element and for a group alike. Next to the field sit three buttons for the common cases: a quarter turn left, a quarter turn right, and a reset to 0°. The rotation is saved with the design and printed exactly as the Studio shows it.

A turned element is measured by the area it actually covers: a text field set at an angle reaches further than its upright frame does. If that takes it past the finished card area, the Studio moves it back far enough to sit fully on the card while keeping the angle you set. For the same reason the reserved-zone notice also reports a corner that only swings into the franking, addressing or coding zone once the element is turned. A single element or one complete group can be rotated. Rotate a loose multi-selection together with the quarter-turn controls in the right sidebar; it turns about its combined centre.

What to know about groups:

• Groups can be nested: grouping an existing group with another element or group creates a new outer group and preserves its subgroups. You can also create subgroups inside a group you have entered.
• Layers shows the hierarchy as an expandable tree. Groups receive names such as “Gruppe 1”, which are saved with the design.
• A group always lives on one side and needs at least two members. If you delete members until only one remains, the group dissolves. An outer group holding only one subgroup also dissolves, moving that subgroup up a level. When saving, each group must contain at least two direct elements or subgroups. A wrapper around a single subgroup is rejected with a validation message.
• In Layers the members stay one contiguous block: the order can be moved, but a group cannot be split by another element. If the members were not already next to each other, grouping pulls them together — to the position of the topmost member, with anything that sat between them ending up below the block. That order stays in place after ungrouping. If the members were already adjacent, grouping changes nothing.
• When copying or duplicating, fully copied groups and their copied subgroups are preserved. If the parent is not copied, the copied subgroup lands at the top level. Individual copied members remain ungrouped. Pasting switches the selection to the top level so the copy can be edited as a whole.
• During the side swap, groups travel with their elements.
• Groups are saved with the design and are available unchanged the next time you open it.

What you design in the Studio:

• Text fields & background of the postcard. Text fields can contain static text and optional variables such as {{first_name}}.
• API Markdown for API flows, with content supplied per recipient through the API. Designs with Markdown areas are not available for regular campaigns.
• QR codes as URL QRs or API QRs. URL QRs store their target URL in the design; API QRs define API field names whose values are supplied per API request through qr_codes.
• Images that you place individually on the card, resize and crop.
• Lines and simple layout elements.

Upload design: uploading initially places your design on the side as before — and locks it there. Open the padlock on the background's row under Layers first. After that you can move the background or resize it proportionally with its corner handles. Double-click opens the same crop mode as an image: the frame and visible cutout can be edited separately. Enter or a click outside keeps the crop; Escape discards the change. The existing rotation and opacity settings remain available and keep working while the padlock is closed.

Each side has at most one background, which always sits below the other elements. PDF uploads remain supported. Position, size and crop are saved with the design and applied in print. Existing designs retain their appearance until you edit the background. The uploaded file itself remains unchanged. Use Text to add content that appears over the design or changes per recipient.

The Studio is format-aware: it knows bleed, address zone and whether a format is two-sided. It keeps your elements on the finished card area — anything in the bleed is trimmed off. Deutsche Post reserved areas you may use: the Studio points it out at the top, and we check every design before sending. You can still upload a finished print file instead.

Placing images: use "Bild" in the toolbar to upload a PNG, JPEG or SVG file up to 25 MB (SVG up to 10 MB). It is then placed on the card as its own element — up to 30 per side, independent of the background, which still exists.

SVG files are printed as vector artwork and stay sharp at any size. On upload, the Studio checks an SVG the way it will be printed and refuses anything the print cannot reproduce, telling you what to change: convert text to paths first, export styles as presentation attributes instead of <style>, no filters, masks or patterns, colours as hex or RGB. Embedded images must be PNG or JPEG. The Studio does not check their resolution, so an SVG never shows "Auflösung zu gering" — make sure they are large enough yourself. Files over 10 MB or with more than 50,000 elements are better uploaded as PNG or JPEG.

An image has two modes, the way you know them from Figma or Canva:

• Placing (the normal state): dragging moves the image, the four corners change its size on the card.
• Cropping (double-click the image, or "Zuschneiden" in the bar above the design): the whole file is shown dimmed and the visible cutout bright. The handles on the frame reveal or hide more of it, you move the image freely underneath, and the small bar on the image zooms in steps or resets the cutout. Enter or a click next to it keeps the change, Escape discards it.

Frame and image stay separate: the corners decide how large the image is on the card, cropping decides which part of the file is visible inside it. The uploaded file is never modified.

In the right sidebar, click the image row to open its compact image popover. Hover the preview and choose "Upload from computer" to replace the source file while keeping the element's frame and rotation. Fill offers Fill, Fit and "Crop"; choose "Crop" to enter crop mode. The adjacent button turns the image by 90 degrees at a time.

An image may extend beyond the edge of the card — like every other element. Whatever hangs over is trimmed in print; while the element is selected the Studio shows the overhang faded, otherwise it cuts it off at the card edge. It cannot be moved off the card entirely. In Deutsche Post reserved areas the same rules apply as to every other element: you may place an image there and save the design, but the Studio points it out at the top.

If a file is too coarse for the chosen size — below 300 dpi — the Studio marks the image with "Auflösung zu gering". A separate notice at the top right, next to the reserved-zone notice, also counts affected images. Click it to list their file names and card sides, then select an entry to select that image. The notice blocks nothing, it only tells you that this image would print blurry. For sending, an image counts as static content: it is the same for every recipient and does not make a design personalized.

Swapping front and back: in two-sided formats, a swap button sits between the "Vorderseite" and "Rückseite" switches. It exchanges both sides completely — background, text fields, variables, Markdown areas, QR codes, lines, images, along with their sizes and stacking order. A second swap restores the previous state exactly; in the Studio, that is the undo for a swap.

In every two-sided format, exactly one of the two sides carries Deutsche Post reserved areas — franking, addressing and coding zones in the postcard formats, the address imprint area in the letter formats. A swap can therefore move elements into an area that should stay clear. When it would, the Studio asks first and names the affected areas. The swap itself moves nothing — your elements stay where they are. Afterwards the Studio opens the affected side and selects those elements for you.

You can save with elements in one of these areas; the notice at the top of the Studio lists them for as long as they sit there. The clipboard is cleared by a swap, because its contents point at a side that no longer exists in that form.

While the Studio is still working, the swap button is disabled: while a background is uploading or rendering, while a color is being converted to CMYK, and while a font is being registered. This keeps an in-flight change from landing on the wrong side.

Additional content such as variables, static text and lines is stored in CMYK for printing. For PDF backgrounds, the preview applies the ISO Coated v2 / FOGRA39 softproof, so colors — especially K100 black — may look less vivid than pure RGB. PNG and JPEG backgrounds remain in their source sRGB color space so added colors, especially black, match the artwork in the editor.

API Markdown shows stored example content in the editor. This example text is only for layout and preview; it is not used as fallback content for real API mailings. The actual Markdown content must be submitted through the matching API content key. Studio variables such as {{first_name}} are not allowed inside Markdown areas.

You can use emoji anywhere text is printed: in static text, in variables such as {{first_name}} and in API Markdown. PostPal prints them as colour Google Noto graphics — in the preview exactly as in the final print PDF. An emoji is never printed as a question mark.

The emoji catalogue ships with PostPal and cannot yet contain very recent characters. A character that is not supported yet is therefore rejected on save when it sits in static text or in Markdown example content, so you can swap it right away. Values that only arrive per recipient through the API cannot be checked at save time: there the preview shows a matching notice, and in print only that one recipient is skipped and reported while every other recipient prints normally.

When adding a QR code, you choose between URL QR and API QR. A URL QR is for CSV, Klaviyo, fixed links or URL templates; its target URL lives in the design and can contain known placeholders. When you choose an account voucher in the right-hand panel, PostPal inserts its dynamic placeholder (for example {{voucher_1}}) into the URL and resolves it to the generated voucher code for each recipient at print time. An API QR is for API flows. It receives its own API field name, and the placeholder for that field name becomes the exact QR content, for example {{voucher_url_1}}. The actual value is later submitted per recipient through the matching API qr_codes key and must be a complete HTTP(S) URL. Multiple newly inserted API QRs are numbered automatically in the Studio, for example voucher_url_1, voucher_url_2.

A URL QR with a fixed target is shown as a scannable QR code directly in the editor, regardless of whether the general preview is enabled. URL templates are resolved with example data in the QR preview. The QR preview also lets you open the currently displayed target URL directly.

QR codes have no outer padding. White areas inside the pattern remain opaque. The selection frame and four corner handles sit directly on the QR pattern. Leave a clear, light margin of at least four modules around it in your design. Test scanning at the actual printed size; patterns, text or dark areas directly beside it can interfere with scanning.

When your design contains API Markdown areas or API QRs, use API-Beispiel in the Studio to generate a current example payload and matching cURL request. The output uses the API field names and Markdown example content from the current editor state. The flow ID, API token and idempotency key are deliberate placeholders. URL QRs and other non-API-bound elements are not emitted as dynamic API fields.

Magnetic alignment guides help when you move an element: an edge or center snaps when it approaches an edge or center of another element or the finished card. Red dashed lines show the alignment. The safety-margin boundaries (6 mm) and the edges of the grey coding, addressing and franking zones also serve as alignment targets. Postal zones remain advisory and do not block placement. Groups and multiple selections align as a whole, preserving their internal spacing. Closed groups provide their combined frame as a target; inside an entered group, its elements and subgroups provide the targets. Rotated elements use their enclosing horizontal and vertical bounds. Hold Alt/Option to temporarily move freely. Guides disappear when you release the pointer and are never printed. Bleed edges, resizing, rotation and arrow-key movement do not receive additional magnetic alignment.