Cover & Spine Design Tool – Help

Cover & Spine Design Tool – Help

This tool helps you calculate the correct cover size (including spine and bleed) and design a print-ready cover for hard cover or perfect bound books.

1. Book specs

Start by entering the details of your book:

  1. BindingHard cover / Perfect bound
    This controls:
    • Bleed: 15 mm for hard cover, 3 mm for perfect bound
    • Board size for hard cover (extra height and width over the book block)
    • Spine width calculation (adds allowance for the cover material)
  2. Book width (mm) and Book height (mm)
    These are the final trimmed dimensions of the book block (text pages), not the cover boards.
  3. Text stock
    Choose the thickness matching your text paper from the dropdown. This is used to calculate the spine width based on page count.
  4. Number of pages
    Use the total number of text pages (including any blank pages). The tool assumes pages are double-sided and calculates spine width accordingly.
  5. Click Generate cover template.
    The tool will:
    • Calculate spine width
    • Calculate the overall document size including bleed
    • Draw the cover spread on the canvas: back cover, spine, front cover

The summary panel under Book specs shows the book block size, board size (for hard cover), overall document size and the calculated spine width.

2. Understanding the canvas

  • The outer red dashed box shows the full document including bleed.
  • The inner grey rectangle shows the final cover board or trim size.
  • Vertical dashed lines mark:
    • Back cover panel
    • Spine edges
    • Front cover panel
  • The canvas is a single spread:
    • Left area: back cover
    • Middle strip: spine
    • Right area: front cover

Use Preview to hide guides and see how the cover looks without the bleed and frame lines.

3. Background options

In the Background section, you first choose a background type and an area of the cover.

3.1 Background type

  • Image – use a photo or artwork as the background.
  • Overlay colour – place a coloured tint over the background.
  • Solid colour – use a flat background colour without an image.

3.2 Area

You can apply the background or overlay to:

  • Full cover
  • Front cover only
  • Back cover only
  • Spine only
  • Front cover + spine
  • Back cover + spine

3.3 Using background images

  1. Set Background type to Image.
  2. Select the Area you want to fill.
  3. Click Choose image and select a JPG or PNG file (recommended maximum 10 MB).
  4. The image is scaled to cover the chosen area (including bleed) and clipped to that region.
  5. You can click and drag the image to reposition it within its area, but it will always cover the bleed so there is no white edge.

3.4 Using solid colour or overlay colour

  1. Set Background type to Solid colour or Overlay colour.
  2. Select the Area you want to affect.
  3. Choose a colour using the colour picker, or enter CMYK values (see below) and click Apply CMYK.
  4. Adjust the Opacity slider:
    • Solid colour: 100% opacity gives a fully solid background.
    • Overlay colour: 50% is a good starting point to tint a background image.
  5. Click Apply background to update the cover.
  6. Use Clear background to remove the solid colour or overlay from the selected area.

CMYK values are converted to approximate RGB for on-screen preview and for the exported PDF. This keeps the interface print-oriented while still using web technologies.

4. Text frames and images

4.1 Adding text frames

  1. Click Add text frame.
  2. A text box appears on the canvas. Click inside it and type your text.
  3. Use the handles to resize the frame horizontally or vertically.
  4. Drag the frame to move it. The tool will show small red markers when the frame is centred (horizontally or vertically) on the front or back panel.

4.2 Spine text

Two spine text frames are created automatically:

  • One for the title
  • One for the author name

These frames:

  • Are centered across the spine width.
  • Can be moved up and down along the spine, but not off the spine area.
  • Are rotated vertically so the text reads along the spine when the book is standing upright.

4.3 Formatting text

Use the text toolbar to adjust:

  • Text colour – via colour picker or CMYK values.
  • Alignment – Left, Centre, Right, Justify, or Hyphenate (uses justify alignment with hyphenation behaviour).
  • Font family – a range of serif and sans-serif fonts suitable for covers.
  • Font size – from 8 pt up to 60 pt.
  • Bold / Italic – toggle buttons for emphasis.

4.4 Adding extra images

  1. Click Add image.
  2. Choose a JPG or PNG (up to 10 MB).
  3. The image appears on the canvas. Drag to position it and use the corner handles to resize.
  4. If the image is close to the trim edge, snapping helps align it neatly with the bleed edge.

4.5 Right-click menu

Right-click any text frame or image to:

  • Copy – copy the selected object.
  • Paste – paste a copy slightly offset from the original.
  • Delete – remove the selected object from the canvas.

5. Layers, preview and export

5.1 Layer visibility

You can toggle each layer on and off:

  • Background – solid colours and background images.
  • Overlay – coloured overlays used for tinting.
  • Text & images – text frames and extra images.

This is useful for checking how text sits on busy artwork or when adjusting backgrounds.

5.2 Preview mode

  1. Click Preview to:
    • Hide bleed guides and panel lines.
    • Show only the final trimmed area of the cover.
    • Lock objects so you cannot accidentally move them.
  2. Click Back to design to return to full editing mode with guides visible.

5.3 Exporting a print-ready PDF

  1. Once you are happy with your design, click Export PDF (300 dpi).
  2. The tool exports the full cover spread at 300 dpi, including bleed.
  3. The PDF is named according to the binding type (hard cover or perfect bound).

The exported PDF does not include trim or bleed marks; it is a full-bleed file. Your printer will trim to the correct size based on the dimensions and bleed already included.

6. Saving and loading designs

  • Save design – downloads a JSON file containing:
    • All cover specifications (size, bleed, spine, paper, binding)
    • All objects on the canvas (text, images, background settings)
  • Load design – lets you upload a saved JSON file to continue editing an existing cover.

This is ideal when you need to revisit a cover later to correct text, change the price, or update branding.

7. Tips for best results

  • Use high-resolution images (at least 300 dpi at the size they appear on the cover).
  • Keep important text at least 10 mm inside the trim edges.
  • Use contrasting colours between text and background for readability.
  • Test spine text alignment carefully; small variations in page count or paper thickness can affect the final spine width.