Restricting Editing Designs to Certain Regions

Sometimes you may want users to edit a product only in a certain region. For example, if the product is a paper bag, you may need to limit the editable area to its central part. However, the print-ready output may need to include a background occupying the entire bag side. Another product family is bank or loyalty cards. These cards have a black magnetic strip, and design elements should not intersect with it.

One of the ways to implement this use case is to use foreground mockups. The only disadvantage is that they will only give the user an idea that they are not supposed to drag elements into a specific area, but actually nothing forbids them from doing that.

Customer's Canvas provides a better way to limit editable areas - the <R> marker. To set it up, you add a shape into a template and apply the marker. The shape defines an area where users can move elements around and add new ones. This way you make sure that all user changes are located where they are supposed to be.

Let us see how the <R> marker can be used for creating a loyalty card template, for example:

A loyalty card example.

The card number is in the lower-left corner and the logo is in the lower-right corner of the card. Also, there is the area in the middle of the card where you can place any text or images. This editable area cannot overlap the magnetic strip at the top and the elements at the bottom of the card. To design it in Photoshop:

  1. Create a new template. On the File menu, click New...
  2. Add a background image. For example, drag it from Windows File Explorer. Add the <BG> marker to the name of the layer.
  3. Add an image layer. On the Layers tab, click the menu icon, and then click New Layer...
  4. Add your logo image. Drag an image to the image layer. Add the <MAD_f><MAMH_f><MAMV_f><MAR_f><SACBW_f><SACBC_f><LACO_f> markers to disallow moving, deleting, or changing the border and opacity for the image.
  5. Add a card number. On the Tools panel, click Type Tool, and then type [#number#9999 9999 9999 9999] to specify an in-string placeholder.
  6. Add a caption for the card number. On the Tools panel, click Type Tool, and then type Your card number is. Add the <LC_t><OID_f> markers to lock the layer and hide it in Object Inspector.
  7. Set a region. On the Tools panel, click Rectangle Tool, and then place a shape on the template.
  8. Add the <R> marker to the layer name.
  9. Add paragraph (rich) text within the region. On the Tools panel, click Type Tool, drag to create a bounding rectangle, and then enter some text.

You should get the following layers in Photoshop after performing the steps above:

Specifying a region in PSD template

And your template may look like this:

Specifying a region in PSD template

The black rectangle in the middle defines the editable area. The marker combinations disable moving the card number, the company logo, and the text describing your terms. You can only change their content, not the location. The mask of the number placeholder enables a numeric entry only.

When you upload the template in Customer's Canvas, you get the following product:

Editing a region in Customer's Canvas'

Note that no element is displayed for the editable area rectangle in the Object Inspector since it cannot be modified by the user in Customer's Canvas.

If users want to add new elements to the product, they will be placed within the editable area.

The card number can be filled in either manually in the editor or using the userInfo dictionary from your e-commerce system (refer to Working with User Data for more details).

See Also

Manual