XIV Frame: A Complete Start-to-Finish Editing Guide

XIV Frame is a browser-based tool for arranging screenshots and exporting the finished canvas. One photo starts as a single canvas without an automatic split, so you can add a signature and export it immediately. Choose a layout when you are composing multiple images.

Before you start

• You can use up to 16 images in one canvas. The 3×3 and 4×4 grids use 9 and 16 images.
• Each image can be up to 50MB. Larger originals are optimized in the browser after upload.
• Your images are processed in the browser; the original files are not uploaded to a server.
• Preview zoom changes how large the canvas looks on screen. It does not change the exported image size.

1. Add your screenshots

1. On desktop, open the Image source panel on the right. On mobile, tap Photo in the bottom navigation.
2. Click the empty Image 1 card and choose a file.
3. With one photo, you can stop here, add a Signature, and export without choosing a layout. Add more cards for the other screenshots when you are composing multiple images; the upload order becomes the initial composition order.
4. To replace a file, hover its card and choose Change. To remove it, use the X button in the card.
5. Use Swap Order to exchange the first two images, or use the left and right card controls to move an image one position.

2. Add a composite image

1. On desktop, open the top Image tab, then choose Composite inside the Image source panel. This is not limited to characters: you can add sunlight, effects, decorations, or any other PNG element.
2. Click Add image to composite and choose a PNG, JPG, or WebP file. Transparent PNGs can be used as they are; images with a background can be cleaned up in the next step.
3. Review the original and Cutout result previews, then click Remove background. The first run may take longer while the model is prepared in your browser.
4. If unwanted areas remain, open Refine the edges, choose Erase, and drag over the preview. Use Restore to bring back details that were removed.
5. In Canvas placement, drag the image directly on the canvas and adjust Image size, opacity, horizontal flip, and the natural shadow. On desktop, click the composite image and use the arrow keys to move it by 1px; hold Shift with an arrow key to move it by 10px.
6. On mobile, use the Fine position pad. Tap the center button to switch between 1px and 10px, or hold an arrow to keep moving.
7. To remove the composite image, click Remove composite. Your photo sources and signature settings stay unchanged.

3. Choose a composition

1. When composing multiple images, open the Layout tab on desktop or the bottom Layout menu on mobile. With one photo, you can skip this step.
2. Choose Split for images placed side by side.
3. Choose Vertical to stack images from top to bottom.
4. Choose Grid for its four-slot 2×2 arrangement when you have three or four images. With three images, one slot remains empty. For exactly 9 or 16 images, choose the 3×3 or 4×4 grid template.
5. For three or four images, you can also choose Top feature, Bottom feature, Left feature, Right feature, or equal 3-column/3-row presets. Four images also support equal 4-column/4-row presets.

4. Set the canvas ratio

1. On desktop, use the Ratio controls above the preview. On mobile, open Export and find Ratio Settings.
2. The default Original ratio preserves the natural composition.
3. Choose the X timeline profile when you want a 16:9 wide canvas.
4. Choose 2:1 for a long, banner-like composition.
5. With one photo and a 2:1 ratio, use Single image shape to choose Default, Circle, Heart, or Star. The shape applies to the canvas and PNG export.

5. Tune each image

1. Click an image card to make it active. The active card is highlighted.
2. Adjust Selected image scale with the slider or enter a value from 50% to 300%.
3. Drag the image directly on the canvas to reposition it. On mobile, drag with one finger.
4. Scroll over the selected image to zoom it in or out. Hold Shift while dragging on desktop to constrain movement to one axis.
5. Click Reset to restore the active image scale and position.
6. Turn on Lock Image Position after the framing is correct so you do not move it accidentally.

6. Set spacing and transitions

1. In Layout, choose None for a normal gap between images or Soft Blend for overlapping edges.
2. With None, adjust Image Gap from 0 to 100px.
3. With Soft Blend, adjust Blend Width to control how much adjacent images overlap.
4. Use Border Width to add a consistent outer margin from 0 to 50px.

7. Finish the canvas

1. Under Surface finish, choose White, Black, Light Gray, Transparent, or Custom for the canvas background.
2. Choose Transparent when the area outside the image composition must remain transparent in the PNG.
3. Use Film Grain sparingly. Start at 0% and increase it only when you want the images to share a subtle texture.

8. Add a signature

1. Open Signature on desktop or Signature in the mobile bottom navigation.
2. In the Text tab, enter a character name in Upper Text and a server or secondary label in Lower Text.
3. Adjust bold, italic, and letter spacing for each line separately.
4. Choose the position, alignment, font, size, color, and opacity while watching the preview.
5. Move the signature away from faces, weapons, and other important details.
6. Below the signature controls, use Copyright overlay to turn the built-in copyright notice on or off. The notice is fixed by the app; it is not a free-text field.
7. When it is enabled, choose Copyright Position (Left, Center, or Right) and Copyright Color (Black, White, or Gray). Check the preview so the notice remains legible without competing with the subject.

9. Export the result

1. On desktop, click Export PNG in the top-right toolbar.
2. On mobile, open Export, confirm the ratio, and tap Save Photo.
3. PNG is preferred. If an opaque result exceeds 5 MB, the browser downloads a high-quality JPEG instead; transparent PNGs that cannot fit are reported without a download.
4. If you want to start a completely different edit, use Reset in the desktop toolbar or Reset to Default in the mobile export sheet. Save anything you want to keep first because reset restores all settings.

How settings are saved

XIV Frame stores your editor settings locally in the browser. They may still be available when you return in the same browser, but keep the downloaded PNG or JPEG separately if you need a permanent copy.