Custom Gateway - Customer Support

Welcome to the Custom Gateway Support Portal

Here you can raise support tickets and read articles on common queries using the topic sections and search below

Print Areas | How to Add Bleed - Setup and preview options



The print output file generated by the system is determined by the width and height mm values specified on the products Print Area. If Bleed is a requirement, then it should always be included when setting the Print Area size in mm. This document will cover the process of including Bleed values, and the different options available to control how this is displayed/previewed to the User. 

Important: This article is written on the presumption that you have a general understanding of the 2d Product Creation process and familiarity with CPP. This is covered in depth in the User Guide:



1. How do I include bleed?

The simplest and most efficient way to include bleed in the print output is to add the Bleed dimensions to your Print Area. For example, lets imagine we have a 16'' x 16'' cushion cover. The print dimensions are 400x400mm without factoring any bleed. In this example, we want to have a 25mm bleed area on each side. Lets visualise that:

We can see from the mock Print Template above that on both the width side and the height side, there are 2 x 25mm Bleed values. That means:

400 + 25 + 25 = 450mm including Bleed

Therefore, on the Print Area setup on CPP, we need to set the Print Width and Height values at 450x450mm to reflect this:


2. What options are there for 'previewing' the Bleed Area on screen?

In our Standard Apps, the Print Area set on a product is shown as a blue dotted line. This serves to inform the User at a glance where the personalisation area is on the product. In most cases when bleed is required, the visible Print Area will be larger than the on-screen product. We can see that clearly in our Cushion example below, as the blue dotted line extends beyond the image used to display the cushion. This is correct, because the cushion represents the final product once it is printed at 400x400mm, and the Print Area is indicative of the full output size with Bleed included. 


In terms of how this Bleed area is presented to the User, there are several options available. All of these options are viable approaches - it should be considered which approach best meets your requirements and what you are trying to achieve. All are based on manipulating the 2D View/Aspect mask specifically.

Important Note: If Users can Move and scale down the uploaded image, then this can potentially cause issues with fulfilment, as the image may not cover the full bleed area. If this is a concern, we advise disabling Move, Rotate and Zoom options on the Image Area.

Alternatively, some of our apps include a layout configuration option called image fill validation which can be used.  This prevents the User from adding the product to cart unless all areas of the print area have been populated with an image. 



If we apply the 2D View/Aspect mask to the cushion area ONLY, then the uploaded image will only appear on the Cushion. Here we can see the mask:

What the User won't see is that actually, their image is being applied to the entire Print Area to meet the fulfilment requirements - instead they see a visual representation of the finished product. We can see how the mask functions in the on-screen preview below:



Utilising the same steps as in A, we can also include a semi transparent (50% opacity) fill to the uploaded 2d View/Aspect mask that covers the Bleed Area. The strength of this effect is controllable by Opacity % - you can utilise different values to achieve different results. 

We can see this mask below; notice the solid black area set for the cushion, and the lighter shaded area around it (which represents the semi transparent fill). 


Once the user uploads their Image, it will be applied to the cushion as normal, but will also now be semi-visible in the Bleed Area. 



There is also a slightly more complex setup where the Bleed Area is made visible on screen at all times.

Important Note: It should be considered that many users may not know, or understand what a Bleed Area is - and therefore it could potentially cause confusion in some cases.

In this example, we use the same Mask setup from Option B - but on the product we create an additional Image Area with a placeholder image set, to always display the Bleed Area. This can be seen on the screenshot below - in this example we are using an image of a red border to represent the bleed, but any image or graphic could be used.

Important Note: 'User Input Enabled' and 'Use Placeholder in Artwork' should both be disabled on the Placeholder Image Area, so that the User cannot interact with this placeholder image. 


Below, we can see how this translates in the App. The red border placeholder image is clearly visible on the product at all times.

Here is a link to a demo product, featuring the setup for all 3 options as outlined in this article. If you cycle through the Aspects to select a Bleed preview option, you can then upload an image to it to see how the image gets displayed:


Was this article helpful?
2 out of 2 found this helpful