Exporting to PDF with an underlayer

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.

Warning#

Do not flatten the resulting PDF file or you will lose the underlayer shape which sits behind your design.

Explore a full code sample on Stackblitz or view the code on Github.

Setup the scene#

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

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.

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.


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

const config = {
  license: 'mtLT-_GJwMhE7LDnO8KKEma7qSuzWuDxiKuQcxHKmz3fjaXWY2lT3o3Z2VdL5twm',
  userId: 'guides-user',
  baseURL: 'https://cdn.img.ly/packages/imgly/cesdk-engine/1.41.1/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();
    });
});