Layout editor

A layout determines what the finished picture looks like: how many captures are on it, where they sit, what surrounds them. Layouts belong to the event.

The editor opens through "Layout editor" in the menu or through the icon at the top of the admin area.

How it is built#

The header bar sits at the top. On the left are "Back", the on-screen keyboard and the layout menu, which shows the name and size of the open layout. It switches between layouts, each shown with a small preview, and holds "New", "Duplicate", "Export layout", "Import layout" and "Delete". In the middle follow "Canvas", "Insert" and "Photo slots", on the right undo, redo, the shortcuts (?), "Preview", "Test print", "Reset" and "Save". Layers and properties sit to the right of the canvas.

More room for the canvas#

The menu on the right can be collapsed with the arrow button at its edge. This pays off on tablets and small screens once fine alignment starts and the canvas would otherwise appear small. The next time the editor opens, it is expanded again.

On narrow screens the areas are stacked and the editor fills exactly the screen height: the header bar at the top, wrapping onto several lines if needed, the canvas below it and the menu at the bottom. The menu collapses downwards, and the canvas grows into the freed space.

The canvas#

"Canvas" in the header bar opens size and background of the layout. The size counts in pixels of the finished picture; for a 300 dpi print on 10 × 15 cm that is 1800 × 1200. The ⇄ button between width and height swaps portrait and landscape. A size needed more often can be saved as a preset and is then available in all layouts.

Creating a layout#

1. In the layout menu of the header bar, click "New" and choose the format to match the paper format (6 × 4 or photo strip, for instance). The dialog shows the available formats as tiles with an aspect ratio preview; custom dimensions can be entered below them. Name and description of the layout belong in the same step.
2. Insert and arrange the placeholders with "Insert" > "Photo slot". "Photo slots" > "Arrangement" places common layouts of one to six photo slots in one step.
3. Add graphics and texts with "Insert" — logo, date, names, frames.
4. Use the layers to set the order: whatever should sit on top of the photo goes to the top.
5. Save, then check in the preview.
6. In "Capture modes & layout assignment", enable the layout for the mode you want.

Several elements can be selected together with the Ctrl key held and then aligned. With three or more elements, the two buttons below the alignment distribute them evenly – for example a row of photo slots or logos.

The selected element shows eight handles for its size and a dot above it for rotating — for photo slots just as for text, graphics, shapes and QR codes. The four round handles in the corners change width and height together, the four square ones at the edge centres change only one side: the side ones the width, the top and bottom ones the height. On a photo slot with a fixed aspect ratio that ratio applies at the corners only; an edge handle leaves it deliberately. On a text the font grows along at the corners only — the side handles set the width at which the text wraps. Small elements keep just the four corners, otherwise the handles would lie on top of each other. Unselected elements stay without handles so they do not catch each other's clicks.

At the corners, images, graphics, shapes and QR codes keep their aspect ratio; dragging there with Shift held changes it freely. The handles at the edge centres still change one side only.

While a single element is being moved, it snaps to the edges and centres of the other elements and to the edge and centre of the canvas; a thin line shows what it snapped to. The "Snap to other elements" checkbox below the alignment buttons turns this off, and holding Alt suspends it for a single drag.

The arrow keys move the selected element by one pixel, with Shift by ten. Ctrl+C and Ctrl+V copy elements, also into another layout; Ctrl+D or the "Duplicate" button in the element section places a copy slightly offset next to it. The "?" button in the header bar, or the ? key, lists all shortcuts and handles.

For fine work the view can be enlarged: Ctrl+mouse wheel zooms around the pointer, Ctrl+plus and Ctrl+minus in steps, as do the buttons at the bottom right of the canvas. The percentage there gives the size relative to the finished picture; clicking it or pressing Ctrl+0 fits the canvas again. When zoomed in, the mouse wheel scrolls the view, and holding Space or the middle mouse button pans it.

A selection frame picks several elements at once: drag on empty space, and every element the frame touches is selected. With Ctrl held they are added to the current selection. A click on empty space clears the selection.

In the layer list, the grip ⠿ on the left of each row moves a layer forward or back by dragging – with the mouse as well as with a finger. A line shows where it will land.

The lock in the layer list protects an element from being moved by accident – useful for a background image or a frame graphic that gets in the way while working on texts and photo slots. On the canvas a locked element can neither be grabbed nor rotated, and a click on it reaches the element below. Alignment, arrow keys and the selection frame leave it in place. It stays selectable through the layer list, and its settings can still be changed. The open lock only appears on the row under the pointer and on the selected one.

A grid can also be shown and, separately, switched on as a second snapping aid; spacing and colour are free to choose. The spacing counts in canvas pixels, not screen pixels. If an element snaps to another element at the same time, that wins — reaching for it is almost always what was meant.

Background and frame images#

A background or a frame is an element like any other: insert it with Insert > Image and move it to the right position in the layer list. Below the photo slots it becomes a background, above them a frame. A layout may hold several images, for example a background and a frame together.

An image at least as large as the canvas fills it completely when inserted. If it is larger, the editor offers to set the canvas to the image size. Smaller images sit in the middle at their original size.

Photo slots > Detect from frame graphic reads the transparent cutouts of the selected image layer and creates photo slots there. This pays off with ready-made frame graphics that have photo openings. If the frame graphic gets in the way afterwards, the lock in the layer list helps.

Effects#

Corner radius, drop shadow, inner shadow/glow, border and glow are available for elements and for photo slots. On a photo slot the effect sits on the fitted picture. The dialog opens like the one for an element: double-click the slot, double-click it in the layer list, or use the pencil there. For a text, the effects are in the "Text" section of the sidebar on the right.

The "Apply effects to all photo slots" checkbox in the photo slot dialog gives every photo slot the same effects – handy for photo strips and collages where every picture should be framed alike. Name and capture position stay per slot, and a single "Undo" reverts it for all.

The opacity in the same dialog applies to the whole element including shadow, border and glow – for example for a subtle logo used as a watermark. The shadow also has its own opacity; it makes the shadow softer without lightening the element itself.

The dial sets the direction of the drop shadow: the line points where the shadow falls. Drag to turn it, the arrow keys turn by one degree, with shift by fifteen. Angle and distance stand next to it as numbers.

The corner radius rounds photos, images, QR codes, rectangles and texts with a background; shadow, border and glow follow the rounding. Without a corner radius the canvas shows everything square, just as it appears in the finished picture.

Instead of a colour, a border can carry a gradient ("Fill"): gold, silver, rose gold and bronze are provided as presets, plus a custom gradient of two colours. A dial of its own sets the direction. Metallic gradients look elegant on light and dark backgrounds alike and suit weddings and anniversaries. Shapes offer the same gradients under "Fill" in the shape dialog.

The inner shadow falls from the edge into the element. With a dark colour and some distance a photo or a text looks embossed; with a light colour and distance 0 the edge glows inwards.

Visible in photo and printout#

Every element has a "Visible in" setting. It decides whether the element appears everywhere, on the printout only or in the stored photo only.

Elements that do not appear everywhere are shown dimmed and with a badge on the working area.

Printing the single-image QR code#

A QR element knows three targets: the web album, a custom address and the single image. The single-image code leads to exactly this one shot and always appears on the printout only — on screen the guest is offered the code anyway, on paper it is the only way.

Editing text#

Text is written directly on the canvas. Insert > Text places a new text in the centre; the placeholder is selected and is replaced as soon as typing starts. Double-clicking an existing text – on the canvas or in the layer list – opens it for editing.

While editing, a bar above the text offers font, font size, colour, bold and italic, alignment and "Insert field" for dynamic values. Every change shows on the canvas at once, and the cursor and selection in the text stay where they are. "More settings" jumps to the "Text" section of the sidebar on the right. It holds every setting of the selected text, plus visibility and effects; each change takes effect at once.

• Enter starts a new line.
• The green tick, a click next to the text or Ctrl+Enter apply the text.
• The cross or Escape discard the changes. A text that was only just inserted disappears again.
• An empty text is removed when applied; "Undo" brings it back.

For rotated text the bar stays horizontal above it, so it remains easy to hit.

The grip ⠿ on the left lets you drag the bar somewhere else, for instance when it covers something. It stays there for the next texts too; double-clicking the grip puts it back at the text.

Letter and line spacing are in the "Text" section of the sidebar. Letter spacing counts in thousandths of the font size, like tracking in graphics programs: 0 is the font's own spacing, 100 adds a tenth of the font size between two characters, negative values move them closer. Widely spaced capitals often look more elegant in headings. Line spacing counts in percent; 100 % is the spacing texts had so far, so older layouts stay unchanged.

A text can get a coloured background ("Background" in the "Text" section). Its frame then keeps the size it was drawn at instead of shrinking to the letters – handy for a banner or a name tag.

An outline ("Outline (px)" and "Outline colour") puts an edge around the letters. It keeps light text readable on light photos too, such as white lettering with a dark outline over a photo slot. Under "Fill" the lettering can carry a gradient instead of a colour, with the same presets as the border – gold for "Mr & Mrs", silver for an anniversary.

Dynamic text#

A text can take its content from the event instead of being typed in. One single layout then serves many occasions: a duplicated event carries its own name and its own date without anyone touching the layout.

The "Text" section of the sidebar offers buttons below the text field, one per available entry; while editing on the canvas, "Insert field" lists them. A click inserts the matching token at the cursor. Fixed text and tokens can be mixed, for example "Wedding of {eventname}" or "{eventname} on {datumstart}".

The values are inserted when the picture is created — in the saved photo, on the printout, in the preview tile and in the live preview of the capture screen. The layout itself always keeps the token. A change to the event name therefore takes effect with the next capture; layouts never need to be updated.

On the canvas such an element shows the value of the loaded event and has a dashed outline. A mistyped token is reported in the "Text" section before it ends up on a printout.

If an entry is empty — the note of an event without a note, for instance — the text is left out. If the field ends up empty altogether, the element is not drawn. A literal curly brace is written twice: {{ and }}.

Fonts#

Texts use installed fonts. If one is missing, the editor says so explicitly — otherwise the printed picture would look different from the preview.

Text can also be set in bold and italic. If a font has no style of its own for this, it is imitated; with a real style the lettering usually looks calmer.

The font list shows a sample line in each font next to its name. A font you only recognise by its look can be found by scrolling; a search box above the list narrows the names.

Fonts belong to the event and travel with a preset or an event package.

Import and export#

• Export layout in the layout menu of the header bar writes a ZIP file with the layout and its graphics.
• Import layout reads it back in — on another booth as well.
• Templates in dslrBooth and LumaBooth format can also be imported directly, as sold by template vendors.
• Color values from dslrBooth or LumaBooth can be entered in the text field next to each color field. Both programs write colors with eight digits, such as "#FFE9E8E4" – the first two digits are the opacity. The field understands this notation; when typing only six digits, take the last six.
• Borders and shadows of photo slots are carried over on import, as are borders around graphics. A template imported earlier only shows them after importing it again.
• QR codes and the "Date" and "Date and time" items are carried over as well, the latter as dynamic texts. Survey answers, signature, session number and file name do not exist here; after the import the editor lists what is missing.
• Shapes – rectangle, ellipse, line and star – are carried over with fill, outline and shadow.