Template Editor — User Guide

1. Overview

Fotillo Template Editor is a free, browser-based tool for designing photo booth templates compatible with Fotillo photo booth software. No installation required — works directly in your browser. Design your template visually, then export a ready-to-use ZIP package.

2. Getting started

Open the editor in your browser. The home screen offers three options:

• New project — create a template from scratch using the project wizard
• Open existing — import a Collage.xml and PNG files from an existing Fotillo template
• Load project (.fotillo) — resume work on a previously saved editor project

The editor automatically detects your browser language and sets the interface accordingly. You can change the language at any time using the flag selector.

3. Creating a new project

Click New project to open the wizard. Configure your template step by step:

Project name

Enter a descriptive name for your template (e.g. "Wedding-Gold-3photos"). This name will be used for the exported ZIP folder and the Collage.xml file.

Printer selection

The wizard walks through four steps: printer, print format, photos and layout, then name and background. You pick the printer family first, and the editor shows only the formats that printer can really produce from the loaded roll.

Formats are grouped by roll, because the roll decides what can be printed. Each tile shows the print size, the pixel size, the cut lines and a hatched offcut if any is left over. Every format comes in two variants, portrait and landscape. The paper leaves the printer the same way; only the direction of the image and of the cut lines differs.

Custom size accepts any dimensions in centimetres or pixels together with a density. The editor immediately says which format the Fotillo software will recognise and at how many dpi. Office printer offers A3, A4 and A5 for laser or inkjet printing; such a template usually will not appear on a photo booth with a Citizen or DNP printer.

Number of photos & layout

Select 1 to 5 photo fields. For each photo count, choose from several layout presets: side by side, stacked, mosaic, grid, asymmetric layouts or tilted arrangements with slight rotation for a dynamic event look.

Background

Choose between a solid colour or an image background. Both can be changed later in the editor.

4. Editor interface

The editor has three main areas:

Left sidebar

Collapsible sections for all template components: Project settings, Background, Photos, Labels, Graphics, QR code and Validation. Each section expands to show relevant controls and element lists.

Canvas area

Central workspace where you see and edit your template. All elements can be dragged, resized and rotated directly. The dark semi-transparent overlay outside the canvas shows the printable area boundary.

• Zoom: mouse wheel (zooms to cursor position), or + / − buttons
• Pan: Alt + left click drag, or middle mouse button drag
• Grid: toggle with the Grid button — shows 100px grid, centre cross and rule-of-thirds lines

Right properties panel

Shows detailed properties of the currently selected element. Click any element on canvas to see its position (X, Y), size, rotation, and type-specific settings like mask shape, decorator, font and colours.

QR Code

The "QR Code" section sets the position (X, Y) and size of the QR code on the template.

5. Working with photos

Photos are the core elements of your template. Each photo field shows a demo image for preview purposes — in the final print, Fotillo replaces these with real customer photos.

• Add: click "+ Add photo field" in the left sidebar (maximum 5 photos per template)
• Move: drag anywhere on canvas
• Resize: use corner handles (maintains 3:2 ratio) or type exact width in the right panel
• Rotate: use rotation handle or type degrees in the right panel
• Delete: click ✕ next to the photo in sidebar, or select and press Delete

6. Photo masks & shapes

Apply a mask to crop photos into a specific shape. Select a photo, then choose a mask shape in the right panel. The editor shows a preview with the demo image clipped to the chosen shape, surrounded by a golden border.

Use the Scale X and Scale Y sliders (range 0.3–1.5) to stretch or compress the mask shape. Create ovals from circles, narrow hearts, wide stars and other variations.

7. Photo decorators

Add visual embellishments around photos. Select a photo and scroll down in the right panel to see the decorator grid. Click any decorator to apply it instantly.

Each photo field can have a border rendered into Frame.png. In the "Photo border" section of the right panel, enable the toggle, pick a colour and set the width with the slider (1–40 px). The border works with both rectangular photo fields and shape masks — when a mask is applied, the outline follows the shape.

8. Labels (XML)

Labels are dynamic text fields that Fotillo renders at print time. The booth operator or customer can change the text for each event without editing the template. You can add up to 4 labels per template.

At least one label must remain in the template — without it Fotillo will not put any text on the photo. A new project receives one label automatically; you can freely add and remove the others, but when you try to delete the last one the editor shows a warning and keeps it. The texts shown in the editor are samples only — the actual texts are entered in Fotillo, in the menu under the F3 key.

Label types

Formatting options

Each label offers extensive formatting: font family (28 fonts), size, style (normal/bold/italic), text colour, background colour with adjustable opacity (0–255), corner radius and inner padding. All these parameters are saved to Collage.xml and used by Fotillo at print time.

9. Decorative texts

Unlike XML labels, decorative texts are rendered directly into Frame.png — they become a permanent part of the template image. Use them for fixed branding, watermarks, copyright notices or design elements that should appear on every print exactly as designed.

Decorative texts have the same formatting options as labels (font, size, colour, background) but without XML integration. Add them via the "Labels" section in the left sidebar, under "Decorative texts (Frame.png)".

In the right panel, each decorative text has three alignment buttons: ⇤ Left, ⇔ Center, and Right ⇥. Alignment works within the field width — adjust the width to get the desired result. XML labels do not have this option.

Each element in the sidebar list has a ⧉ (duplicate) button next to the remove button. The copy appears at the same position as the original, offset by 30 pixels to the right and down, and is immediately selected. Photos can be duplicated when there are fewer than 5. XML labels — when free slots are available (max 4). Decorative texts and images can be duplicated without limit.

10. Graphics & logos

Upload PNG or JPEG images to add logos, decorative frames, branding elements or any graphic overlay to your template. Graphics are rendered into Frame.png and appear on every print.

• Upload via the Graphics section in the left sidebar — drag & drop or click to browse
• Drag to position anywhere on canvas, resize with corner handles, rotate freely
• Multiple graphics supported — layer them to create complex designs
• Transparent PNG files are fully supported for overlays and frames

11. Background

Two background modes are available:

The template background now has three modes: Colour, Gradient and Image. Gradient mode lets you set two colours (start and end), a direction angle (0–360°) and a type — linear or radial. A live preview of the gradient appears in the sidebar as a colour strip. The gradient is rendered into both the Collage.png preview and the exported Background.png.

When the background image is selected, the right panel shows four quick fit buttons. Cover — scales the image to fill the entire canvas (may crop edges, image is centred). Contain — scales to fit inside the canvas while preserving proportions (empty areas may appear on the sides, image is centred). Stretch — fits to exact canvas dimensions without preserving proportions. Original — restores the natural size and sets position to (0,0). After any mode you can fine-tune X, Y, W, H manually.

Solid colour

Pick any colour using the colour picker or type a hex code. Common choices for photo booth templates: white (#FFFFFF), black (#000000), or event-themed colours matching the occasion.

Image background

Upload a PNG or JPEG image. The background loads at its natural resolution and can be positioned, resized and rotated on canvas using green handles. Use "Reset (fit to canvas)" button in the right panel to stretch the image to fill the entire template area. Background images are exported as Background.png.

12. Cutting the sheet

The printer cuts across the full width of the roll, so the same sheet yields different prints depending on the roll: two 15×5 strips from a 10×15 roll, three 10×5 photos from a 10×15 roll in the CZ-01, two 15×10 prints from a 15×20 sheet. You always design one piece; the editor draws the rest as a semi-transparent preview and creates them at export. The number of pieces goes into Collage.xml as PrintCuts.

13. Smart guides & grid

Smart alignment guides

When you drag any element on canvas, red dashed alignment lines appear automatically when the element's edge or centre aligns with canvas boundaries, other elements, or the centre point. Elements snap to these guides with an 8-pixel threshold for precise positioning.

Grid overlay

Toggle with the Grid button in the toolbar to display three layers of guide lines: white lines every 100 pixels, a red dashed centre cross (horizontal and vertical midpoints), and blue dashed rule-of-thirds lines for photography composition.

14. Importing existing templates

Import templates previously created in Fotillo or exported from this editor:

1. Click Open existing on the home screen
2. Drag and drop (or click to browse) the template files: Collage.xml plus any PNG files (Background.png, Frame.png, Overlay and CutOut files)
3. The editor parses the XML and reconstructs the full template with all photos, labels, masks and positions
4. For strip templates: duplicated elements are automatically deduplicated — only the original half is imported for editing

15. Exporting templates

Click Export ZIP in the top toolbar. The editor validates your project, displays a preview of the generated XML, lists all files to be included, and downloads a ZIP package ready to upload to Fotillo.

16. Account and signed export

The Fotillo software checks every template for a digital signature. A template without one opens and works, but prints carry a DEMO mark. The signature is added by the server, which is why the export window offers two buttons.

Use the test export to check the template on your hardware: layout, margins and print quality. Once the template is ready, run the signed export.

Getting started — five steps:

1. Create an account. Click Create account in the top menu and enter your e-mail address and a password. The account becomes active once you click the confirmation link we send you.
2. Copy your Account identifier. You will find it in the account panel. These sixteen characters link your purchase to your account.
3. Buy an export pack in the shop and paste your Account identifier into the order.
4. Enter the activation code that arrives by e-mail into the account panel. The exports are added straight away.
5. Export with a signature. Choose the second button in the export window. The number of exports left is always shown on the start screen.

17. Keyboard shortcuts

18. Languages

The editor interface is available in 13 languages with automatic browser detection. Change language on the home screen using flag buttons or in the editor using the dropdown menu in the top-right corner. Your language preference is saved between sessions.

Supported languages: Polski, English, Deutsch, Français, Español, Italiano, Hrvatski, Ελληνικά, Lietuvių, Português, Română, Slovenščina, Українська.

19. Exported file structure

20. Supported printers

Fotillo Template Editor supports all dye-sublimation printers compatible with Fotillo software. Templates are created at exact printer resolution for optimal print quality with glossy or matte finish.

• Citizen CY / CY-02 / DNP RX1 / RX1HS — Roll: 10×15, 15×20, 13×18 cm
• Citizen CX-02 / DNP DS620 — Roll: 10×15, 15×20, 15×23, 13×18 cm
• Citizen CZ-01 / DNP QW410 — Roll: 10×15, 11.5×20 cm
• Office printer (laser or inkjet) — A3, A4, A5