Aspects | Creating a 'Zoomed' Preview

Aspects | Creating a 'Zoomed' Preview


Note: This workflow has been tested with the acp3 apps, for other apps it will depend on whether the necessary product features are supported.
This article will presume product setup knowledge of Aspects, Print Areas, Image/Text Areas, and Sync From functionality - if you are not familiar with these elements it would best to cover the Create Your First articles and Tutorials Levels 1 and 2 first, then come back to this article.

Zoom previews may be considered necessary to offer a clearer preview for smaller areas of decoration. A typical example of this may be a Polo Shirt with personalisation available on the left breast. Generally, it is desirable to show the full garment on screen, but this could result in poor legibility of personalisation on the left breast because the area is so small in relation to the full garment preview.

By manually adding a dedicated zoom preview, you can offer both full and close up previews.

How to add a Zoomed Preview

To create zoomed-in previews on a product you simply need to synchronise the text and image functionality across two Aspects, one for the full preview and one for a zoom (close-up).

Product Setup 
1x Aspect for the full front of the product


1x Aspect of the zoomed-in area around the left breast



1x print area for the left breast (full preview). After being set, this print area should be set to PREVIEW ONLY so that it does not generate an artwork file when an order is placed.
1x print area for the left breast (zoomed in) - enabled in artwork generation.
1x text and/or image area for the left breast (full preview print area)
1x text and/or image area for the left breast (zoomed in print area)

Product Configuration

Create image and text areas with matching positioning and size for both Aspects. In this scenario, we don't need to provide the user with an input for the zoomed-out preview, only for the zoomed-in.  So the first step is to Disable User Input for the text and image areas associated with the zoomed-out view.

The next step is to use the Sync to setting on both the text and image areas to synchronise the input from the zoomed-in view (that the user will interact with) to the zoomed-out view so that the same edits will appear there automatically. The sync menu appears via a rollout at the bottom of Text Area or Image Area setup menus (as soon as more than one area exists). 

For text areas remember to enable sync size,colour,font etc as applicable - these options appear when a sync location has been specified.

Then simply repeat this process for each print area that requires it.

The final step is to print test the product and check it is previewing and outputting correctly.

A note on text area scaling:

Text size is proportional to the print area size so make sure that this is taken account of between the zoomed-in and zoomed-out view.

For instance, if your zoomed-in view has a print area that is 400 x 400px with a text size of 36 and your zoomed-out print area is 100 x 100 pixels, the corresponding text size for that print area should be 36/4 = 9 so that the text appears at the same relative size in both print areas.

    • Related Articles

    • Aspects - Best Practise Tips

      3.0 Overview The principle purpose of an Aspect is to provide a preview image of the product on-screen that the user will interact with. The secondary purpose of an Aspect is to set the size of the 2d canvas upon which a numerical relationship ...
    • Virtual Products | Virtual Aspects & Options

      This article assumes a certain level of knowledge regarding Virtual product creation, please ensure that you are familiar with either our academy course for retailers or our knowledge base articles on Virtual product creation. ...
    • Product Creation Services | Blank Products (3d) - Image Asset Requirements

      Introduction This article provides guidelines for the image assets that we request as part of our product creation services for 3d Blank products. These photographs will be used by our 3d modellers as reference in the 3d software package to digitally ...
    • Live Preview Products | Troubleshooting Common Problems

      Overview This article is designed to help troubleshoot some common problems related to product setup and configuration Errors My Smartlink is endlessly loading If you are using a distributed Smartlink, any product changes can take up to 4 hours to ...
    • Blank Products | Configuring 2d to 3d Preview

      Overview 2d to 3d Preview is a live preview option that allows the user to interactively create their product in 2d and then use a button in the app to preview the finished result in 3d. The advantage to this approach is that the user can work ...