PRINT 18Meet us at Print 18. Chicago, IL. Sept. 30 - Oct. 2

Crop Marks

No one wants a part of the graphics painstakingly designed by a customer to be suddenly cut off. For example, when you 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. Customer's Canvas supports crop marks so that your personnel can identify bleed zones, where they can safely cut off printed products.

In the editor, you can enable safety lines 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.

The safety lines and crop marks on proof images.

Crop marks are shown on both proof images and hi-resolution outputs.

You can set up crop marks by using the IProductDefinition interface. 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.

JavaScript
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.

JavaScript
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.

The crop marks and page information.

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.

JavaScript
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.

See Also

Manual