Safety Lines and Crop Marks
No one wants a part of the graphics painstakingly designed by a customer to be suddenly cut off. For example, if you place a design element right on the product edge and need to print many product copies on a single paper sheet, then it is not an easy task to cut off these copies both without white borders left and keeping the design intact. So, your users should be aware of a safety zone, where they can safely place their design elements. At the other hand, your personnel should know a bleed zone, where they can safely cut off printed products.
Customer's Canvas manages this case using safety lines and crop marks. The safety/bleed lines show the safety zone and allow for warning your users of placing the elements too close to a product edge in the web-to-print editor. The crop marks define the bleed zone on printed orders so that your personnel sees where they can safely cut off the product copies.
Safety Lines
You can define the safety lines through the product configuration in the editor but not through the PSD templates. These lines are shown only at the design time as follows:
Technically, the ISafetyLine interface defines these lines. It contains parameters to set up a width of the bleed zone and a style of safety lines. The width is measured in points (1/72 of an inch). For example, if you need the bleed zone of 1/8 of an inch, you should set margins to 9. You can set up a single margin for all four product sides or two separate margins for top/bottom and left/right sides.
You can configure the safety lines for either all product surfaces or a single surface.
To define safety lines for all product surfaces, pass the IProductDefinition.defaultSafetyLines property to loadEditor.
productDefinition = {
defaultSafetyLines: [{
leftRightMargin: 5,
topBottomMargin: 10,
color: "rgba(0,255,0,255)",
altColor: "rgba(255,255,255,0)",
stepPx: 5,
widthPx: 1
}],
surfaces: ["pocket_calendar", "pocket_calendar_back"]
};
CustomersCanvas.IframeApi.loadEditor(iframe, productDefinition);
Note that the default measurement units in Customer's Canvas are points. If a parameter accepts other units, then the unit name is specified in the parameter name like stepPx and widthPx in this example.
If the IProductDefinition.defaultSafetyLines property is set up, then all product surfaces will have the same safety lines by default. The default safety lines can be overridden for any surface by setting the surface's safety lines as follows:
productDefinition = {
surfaces: [{
designFile: "pocket_calendar",
safetyLines: [{
margin: 9,
color: "rgba(0,255,0,255)",
altColor: "rgba(255,255,255,0)",
stepPx: 5,
widthPx: 1
}]
}]
};
Here, the IPrintAreaTemplate.safetyLines property sets safety lines for a surface having a design template. To set safety lines for a blank surface having no design template, use the IPrintAreaDefinition.safetyLines property.
productDefinition = {
surfaces: [{
width: 200,
height: 150,
printAreas:[{
bounds: { x:0, y:0, width: 200, height: 150},
safetyLines: [{
margin: 9,
color: "rgba(0,255,0,255)",
altColor: "rgba(255,255,255,0)",
stepPx: 5,
widthPx: 1
}]
}]
}]
};
You can configure the safety lines' behavior both globally through the clientConfig.json file and for a single product through the IConfiguration interface. In the later case, you should pass the configuration to the loadEditor method.
If at least one safety line is specified for a surface, the Safety lines check box is displayed under Markings in the user interface.
This button allows the user to show and hide safety lines. You can disable this check box using the safetyLinesCheckboxEnabled configuration parameter to disallow your users to hide these lines. There are several other configuration parameters related to safety lines:
- safetyLineViolationWarningEnabled enables a warning displayed if a design element crosses a safety line.
- proofImageSafetyLinesEnabled draws safety lines on the proof images.
- proofImageCropSafetyLine sets the name of a safety line which proof images are cropped to; if there is no safety line with the given name, proof images are not cropped. For more information, see the Configuring High Resolution and Proof Images topic.
- alignToSafetyLineName sets the name of a safety line which design items can be aligned to; if there is no safety line with the name, then the first safety line in the array is used.
For example, let us enable the warning, crop proof images, and disallow for hiding the safety lines for a product.
productDefinition = {
surfaces: [{
designFile: "pocket_calendar",
safetyLines: [{
name: "line1",
margin: 9,
color: "rgba(0,0,255,255)",
altColor: "rgba(255,255,255,0)"
}]
}]
};
configuration = {
widgets: {
BottomToolbar: { safetyLinesCheckboxEnabled: false },
ObjectInspector: { safetyLineViolationWarningEnabled: true }
},
rendering: { proofImageCropSafetyLine: "line1" }
};
CustomersCanvas.IframeApi.loadEditor(iframe, productDefinition, configuration);
Crop Marks
You can draw safety lines on proof images to verify that all elements are fit the safety zone. To specify bleed zones where the printed page should be cut off, you can draw crop marks.
The following proof image illustrates how you can set up the safety lines and crop marks.
Crop marks are shown on both proof images and hi-resolution outputs.
You can set up crop marks the same way as the safety lines. A JSON object defined by the ICropMark interface specifies crop marks. It defines margins, a style, and other parameters. The following example shows how you can set up both the safety lines and crop marks on proof images for all product surfaces.
productDefinition = {
defaultCropMarks: [{
margin: {
horizontal: 5,
vertical: 10
},
length: {
horizontal: 4,
vertical: 9
},
color: "rgba(0,0,0,255)",
widthPx: 1
}],
defaultSafetyLines: [{
leftRightMargin: 5,
topBottomMargin: 10,
color: "rgba(0,255,0,255)",
altColor: "rgba(255,255,255,0)",
stepPx: 5,
widthPx: 1
}],
surfaces: ["pocket_calendar", "pocket_calendar_back"]
};
configuration = {
rendering: {
proofImageSafetyLinesEnabled: true
}
};
CustomersCanvas.IframeApi.loadEditor(iframe, productDefinition, configuration);
Here, the defaultCropMarks object specifies crop marks for all product surfaces. It adjusts their appearance, width, and color. To define crop marks for a single surface, you should set up them in a print area definition.
productDefinition = {
surfaces: [{
designFile: "pocket_calendar",
cropMarks: [{
margin: 10,
color: "red"
}]
}]
};
Also, Customer's Canvas allows for drawing additional page information like an order number, a file name, a date, and more.
To implement this, ICropMark provides the leftNotes, topNotes, rightNotes, and bottomNotes properties, which allow for printing notes on all four page sides. So, you can print different information on the left, right, and in the center of a note. Moreover, you can specify several strings for a note.
productDefinition = {
surfaces: [{
designFile: "pocket_calendar",
cropMarks: [{
margin: 10,
color: "black",
bottomNotes: [
{ fontSize: 3, alignment: "Left", text: "File:", markMargin: 0.5 },
{ fontSize: 3, alignment: "Left", text: "pocket_calendar.psd", markMargin: 0.5, edgeMargin: 0.6 },
{ fontSize: 4, alignment: "Center", text: "March 1, 2017" }
]
}]
}]
};
markMargin allows for adjusting the notes to corresponding marks, and edgeMargin adjusts notes to a page edge. These properties are coefficients to a font size.
The Trifold Example
Let us look at a real use case of setting up a flexible markup. For example, if you print trifold-brochures, then every printed page is folded into three parts. While designing such a product in Customer's Canvas, you can display safety lines for all three parts, folding lines, and the bleed zone with crop marks.
This is the proof image, so neither safety lines nor folding lines are printed on the resulting hi-res output. We applied the following settings for this markup.
productDefinition = {
surfaces: [{
width: 792,
height: 612,
foldingLines: [{
margin: "264",
isVertical: true,
pen: { color: "green", altColor: "green", width:2 }
}, {
margin: "528",
isVertical: true,
pen: { color: "green", altColor: "green", width:2 }
}],
printAreas: [{
bounds: { x:0, y:0, width: 792, height: 612},
cropMarks: [{
margin: 8,
length: 7,
color: "black",
topNotes: [
{ fontSize: 7, alignment: "Left", text: "trifold-brochure.pdf", edgeMargin: 0.1 },
{ fontSize: 7, alignment: "Center", text: '1/8" Bleed', edgeMargin: 0.1 }
]
}],
safetyLines: [
{ margin: 9, color: "yellow", altColor: "yellow" },
{ leftRightMargin: 255, topBottomMargin: 9, color: "yellow", altColor: "yellow" },
{ leftRightMargin: 273, topBottomMargin: 9, color: "yellow", altColor: "yellow" }
]
}]
}]
};
configuration = {
rendering: {
proofImageSafetyLinesEnabled: true
},
widgets: {
ObjectInspector: {
safetyLineViolationWarningEnabled: false
}
}
};
CustomersCanvas.IframeApi.loadEditor(iframe, productDefinition, configuration);
Note that margins, heights, and widths are in points. In this example, they define the 8.5" x 11" page with the 1/8" bleed zone.
Non-rectangular Products
You can easily set up safety lines and crop marks for rectangular products in the web-to-print editor as this topic describes. Alternatively, you can put bleed lines in a design template in Photoshop as shown in the following image.
Here, the red circle defines the safety zone. This layer has the <VPN> marker to show only in the editor. The black circle defines where your personnel should cut off this product. To hide a layer in the editor but at the same time print it on hi-res outputs, you can add the <VNS> marker to this layer in Photoshop.
However, when a product shape allows for applying the built-in functionality of Customer's Canvas, do not include such lines in your templates. Editing the designer's configuration is more flexible than modifying your PSD files.
See Also
Manual
- Integration with E-commerce Overview
- Understanding Print Products
- Configuring High Resolution and Proof Images
- Supported Markers