1. Aurigma Customer's Canvas 5.11.0
  2. Creating Product Templates
  3. Photoshop Templates

Placeholders with Frames

While designing such photo products as photobooks or photo cards, your users often want to create photo placeholders that are more creative than just rectangles. Customer's Canvas allows for creating placeholders with additional decorative elements, so-called frames. These elements are attached to the placeholders, and if the user resizes or rotates them, then the frames apply the same transforms. At the same time, changes in the placeholder's content do not affect the frames themselves. These frames may have a complex shape as well as image placeholders. The following images illustrate examples of frames designed in Customer's Canvas.

Frame examples.

You can implement these frames in Photoshop templates.

Frames in Customer's Canvas

To create a placeholder with a frame in your PSD template, you need to perform the following:

  1. Add one or more raster layers representing the frames to the template. Add the <FR> marker to the names of these layers.
  2. Add one raster layer representing the content of this placeholder. Leave it free of markers.
  3. Group these layers together and add the <PH> marker to the group.

This group can be either a stub, empty, or normal placeholder. It may contain any number of frame layers. The order of these layers matters. So, you can place an image layer either lower or higher than a frame in the Layers list. In the first case, you have an overlaying frame. In the latter case, the frame may behave as a background.

If you need a frame of an arbitrary shape, just add a shape layer to this group as the Non-rectangular Image Placeholders topic describes.

Frames only decorate your image placeholders so that you can edit the content of your product and keep the frames intact. To change frames, you need to change your PSD template in Photoshop.

An Example of Placeholders with Frames

As an example, let us describe how you can design a photo with a stamp shape. This design has two overlaying frames: a semitransparent rectangle and photo mounting corners. In Photoshop, perform the following steps:

  1. Create a new template. On the File menu, click New.
  2. Add a photo. For example, drag it from Windows File Explorer.
  3. Add a shape layer. On the Tools panel, click Shape Tool or press U on the keyboard, toggle to a custom shape tool, and draw a stamp shape with the mouse.
  4. Add a rectangle. Add a rectangle shape the same way as you added the stamp shape in the previous step.
  5. Rasterize the rectangle layer. Right-click this layer and click Rasterize Layer.
  6. Add the <FR> marker. Double-click the layer name and type <FR>.
  7. Add photo corners. Drag an image of the photo mounting corners from Windows File Explorer.
  8. Add the <FR> marker. Double-click the layer name and type <FR>.
  9. Group all the layers together. Select the layers, right-click the selection, and then click Group from Layers.
  10. Add the <PH> marker. Double-click the group name on the Layers tab and add the <PH> marker to its name. The layers should look as follows:

    Frames defined in Photoshop.

Put the resulting PSD file in the ~\assets\designs\ folder and open it. Note that Customer's Canvas displays such a layer group as a single item.

Editor handles photos and frames as a single unit.

The previous example illustrates how you can create placeholders with frames in a PSD template and open these templates as products in the editor. Also, you can prepare a collection of frames and allow your users to apply them to their products. To prepare frames for the collection, create PSD files as the previous example describes and arrange these files in a single gallery folder. After that, configure the Toolbox and Gallery objects in the clientConfig.json file:

  1. Add the Frames button to the Toolbox.
    JavaScript 
    "Toolbox": {
    "buttons": [{
        "translationKey": "Toolbox.FRAMES",
        "translationKeyTitle": "Toolbox.TITLE_FRAMES",
        "iconClass": "cc-icon-frames",
        "action": "Image",
        "tabs": [ "Frames" ]
    }]
}
  2. Add the Frames tab definition to the GalleryDialog.
    JavaScript 
    "GalleryDialog": {
    "tabs": [{
        "name": "Frames",
        "type": "public",
        "subfolderName": "Frames",
        "translationKey": "GalleryDialog.TAB_FRAMES",
        "translationKeyTitle": "GalleryDialog.TAB_FRAMES",
        "canEdit": false
    }]
}

Here, you set subfolderName to "Frames", which means that your frame templates are in the ~\assets\images\Frames\ folder. For details on how to configure the Gallery, refer to the Using the Image Gallery folder.

See Also

Manual

Downloads