Image Merger Guide

Open the app — Image Merger

Sometimes you need ten covers that share one background and differ only in the title.
Series covers, lecture material thumbnails, that sort of thing.

Opening Photoshop feels heavy, and doing it in PowerPoint leaves the text subtly misaligned every time.
You end up nudging coordinates by hand anyway.

This tool lays text and images over a background and exports a single PNG.
Coordinates can be typed in as numbers, so even ten covers stay perfectly aligned.
You can also save the whole working state and load it back later.

How to Use

Basic Steps

1. Upload a background image in the Background panel.
2. Add text or images and place them over the background.
3. Check the preview and save a PNG with [Download].

Without a background the text and image panels stay locked — there’d be nothing to place them on.

Adding Text

There are two ways.

• [+ Add] : Click it in the left panel and a text layer appears in the middle of the image.
• Double-click the preview : Double-click the spot you want and an input box opens right there. What you type becomes a layer at that position.

Double-clicking is faster if you’ll fine-tune later; the add button is better if you’re placing by exact coordinates.

Vertical writing is there because of classical material. Covers of Korean-bound books and facsimile editions are usually written vertically.

With many layers the screen gets busy.
So only the selected layer expands its settings while the rest stay collapsed.

Placing Images

For things you overlay on the background — ISBN barcodes, logos, stickers.

• [+ Add] : Pick a file.
• [URL] : Enter an image address to load it.
• Paste : Copy an image in another browser window and press Ctrl+V here.

An added image shrinks to half the background size and lands in the centre.
Coming in at full size tends to bury the background entirely.
Change either width or height alone and the aspect ratio is preserved automatically.

Stacking Order (Z value)

Decides what sits on top when text and images overlap.
Text is fixed at Z = 10, so give images a value above or below that.

Give background patterns a low value and logos that must stay visible a high one.

Working in the Preview

You can manipulate things directly on the canvas.

• Click to select. A dashed box appears and the left panel switches to that item.
• Drag to move. The X/Y numbers update live, so dragging roughly into place and then fine-tuning by number works well.
• Delete or Backspace removes it.
• Escape or a click on empty space clears the selection.

Zooming works too — - down to 20%, + up to 300%. [Fit] matches the panel and shows the current ratio.

Good to Know

Managing Fonts

Some jobs can’t be done with the built-in fonts — an institution’s mandated typeface, or a Hanja font for classical material.

Add fonts from the settings (⚙).

• File upload : .ttf, .otf, .woff, .woff2
• Load from URL : a font file address or a CSS address.

Font file    : https://example.com/MyFont.woff2
CSS          : https://cdn.example.com/font.css
Google Fonts : https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap

Give it a CSS address and every @font-face inside is read and loaded at once.
That’s why you can paste a Google Fonts URL straight in.

Saving Your Working State

When making several covers that share a background and differ only in title, rebuilding the layout each time is wasted effort.

• Export (↓) : Saves the background, added images, and text settings together as a ZIP. The filename carries the date and time, so multiple versions never get confused.
• Import (↑) : Loads that ZIP and restores the state you were working in. If work is already in progress it asks first.

Lay it out once, export it, and next time you only need to change the text.

Notes

• Removing the background image deletes the text and images with it. The background is the reference for everything. Export before you remove it.
• All processing happens in the browser and no file is sent to a server.

Open the app — Image Merger