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.
You can implement these frames in Photoshop templates.
To create a placeholder with a frame in your PSD template, you need to perform the following:
<FR>
marker to the names of these layers.<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.
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:
<FR>
marker. Double-click the layer name and type <FR>
.<FR>
marker. Double-click the layer name and type <FR>
.<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:
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.
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 AssetManager and Toolbox widgets in the clientConfig.json
file:
"assetSources": { "Frames": { "type": "PublicSource", "allowedExtensions": [ "psd" ], "rootCategory": { "name": "Frames" } } }
"AssetManager": { "tabs": [{ "name": "Frames", "assetSourceInstance": "Frames" }] }
"Toolbox": { "buttons": [{ "translationKey": "Toolbox.FRAMES", "translationKeyTitle": "Toolbox.TITLE_FRAMES", "iconClass": "cc-icon-frames", "action": "Image", "tabs": [ "Frames" ] }] }
In the asset source, you set the rootCategory name to "Frames", which means that your frame templates are in the ..\assets\images\Frames\
folder. For details on how to configure the public gallery, refer to The Asset Manager topic.