Skip to content

To PDF

When printing on a non-white medium or on a special medium like fabric or glass, printing your design over an underlayer helps achieve the desired result. An underlayer will typically be printed using a special ink and be of the exact shape of your design.

When exporting to PDF, you can specify that an underlayer be automatically generated in the ExportOptions. An underlayer will be generated by detecting the contour of all elements on a page and inserting a new block with the shape of the detected contour. This new block will be positioned behind all existing block. After exporting, the new block will be removed. The result will be a PDF file containing an additional shape of the same shape as your design and sitting behind it.

The ink to be used by the printer is specified in the ExportOptions with a spot color. You can also adjust the scale of the underlayer shape with a negative or positive offset, in design units.

Setup the scene

We first create a new scene with a graphic block that has a color fill.

  document.getElementById('cesdk_container').append(engine.element);


  const scene = engine.scene.create();


  const page = engine.block.create('page');
  engine.block.setWidth(page, 800);
  engine.block.setHeight(page, 600);
  engine.block.appendChild(scene, page);


  engine.scene.zoomToBlock(page, 40, 40, 40, 40);


  const block = engine.block.create('graphic');
  engine.block.setShape(block, engine.block.createShape('star'));
  engine.block.setPositionX(block, 350);
  engine.block.setPositionY(block, 400);
  engine.block.setWidth(block, 100);
  engine.block.setHeight(block, 100);


  const fill = engine.block.createFill('color');
  engine.block.setFill(block, fill);
  const rgbaBlue = { r: 0.0, g: 0.0, b: 1.0, a: 1.0 };
  engine.block.setColor(fill, `fill/color/value`, rgbaBlue);

Add the underlayer’s spot color

Here we instantiate a spot color with the known name of the ink the printer should use for the underlayer. The visual color approximation is not so important, so long as the name matches what the printer expects.

engine.editor.setSpotColorRGB('RDG_WHITE', 0.8, 0.8, 0.8);

Exporting with an underlayer

We enable the automatic generation of an underlayer on export with the option exportPdfWithUnderlayer = true. We specify the ink to use with underlayerSpotColorName = 'RDG_WHITE'. In this instance, we make the underlayer a bit smaller than our design so we specify an offset of 2 design units (e.g. millimeters) with underlayerOffset = -2.0.

await block
  .export(page, 'application/pdf', {
    exportPdfWithUnderlayer: true,
    underlayerSpotColorName: 'RDG_WHITE',
    underlayerOffset: -2.0
  })
  .then((blob) => {
    const element = document.createElement('a');
    element.setAttribute('href', window.URL.createObjectURL(blob));
    element.setAttribute('download', 'underlayer_example.pdf');
    element.style.display = 'none';
    element.click();
    element.remove();
  });

Full Code

Here’s the full code:

import CreativeEngine from 'https://cdn.img.ly/packages/imgly/cesdk-engine/1.51.0/index.js';


const config = {
  license: 'mtLT-_GJwMhE7LDnO8KKEma7qSuzWuDxiKuQcxHKmz3fjaXWY2lT3o3Z2VdL5twm',
  userId: 'guides-user',
  baseURL: 'https://cdn.img.ly/packages/imgly/cesdk-engine/1.51.0/assets',
};


CreativeEngine.init(config).then(async engine => {
  document.getElementById('cesdk_container').append(engine.element);


  const scene = engine.scene.create();


  const page = engine.block.create('page');
  engine.block.setWidth(page, 800);
  engine.block.setHeight(page, 600);
  engine.block.appendChild(scene, page);


  engine.scene.zoomToBlock(page, 40, 40, 40, 40);


  const block = engine.block.create('graphic');
  engine.block.setShape(block, engine.block.createShape('star'));
  engine.block.setPositionX(block, 350);
  engine.block.setPositionY(block, 400);
  engine.block.setWidth(block, 100);
  engine.block.setHeight(block, 100);


  const fill = engine.block.createFill('color');
  engine.block.setFill(block, fill);
  const rgbaBlue = { r: 0.0, g: 0.0, b: 1.0, a: 1.0 };
  engine.block.setColor(fill, `fill/color/value`, rgbaBlue);


  engine.editor.setSpotColorRGB('RDG_WHITE', 0.8, 0.8, 0.8);


  await block
    .export(page, 'application/pdf', {
      exportPdfWithUnderlayer: true,
      underlayerSpotColorName: 'RDG_WHITE',
      underlayerOffset: -2.0,
    })
    .then(blob => {
      const element = document.createElement('a');
      element.setAttribute('href', window.URL.createObjectURL(blob));
      element.setAttribute('download', 'underlayer_example.pdf');
      element.style.display = 'none';
      element.click();
      element.remove();
    });
});