- 3 minutes to read
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.
The Design Editor provides a better way to limit editable areas - the
<R> marker. To set it up, you can add a rectangle to your PSD/IDML template and apply this 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 shown in the following image.
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 such a card in Adobe Photoshop:
- Create a new template. On the File menu, click New.
- Add a background image. For example, drag it from Windows File Explorer. Add the
<BG>marker to the name of the layer.
- Add an image layer. On the Layers tab, click the menu icon, and then click New Layer.
- 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.
- 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.
- 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.
- Set a region. On the Tools panel, click Rectangle Tool, and then place a shape on the template.
- Add the
<R>marker to the layer name.
- Add paragraph 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 these steps.
Your template may look like this:
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 the Design Editor, you get the product shown in the following screenshot.
Note that the Object Inspector displays no element for the editable area since it cannot be modified by the user in the Design Editor.
If users want to add new elements to the product, they will be placed within the editable area. When a user adds plain text by using the Text button, it will be added as plain bounded text. To allow your users to add plain point text, define the
PointText button in the Toolbox.
The card number can be filled in either manually in the editor or using the
userInfo dictionary from your e-commerce system.