When adding images to a template, you may want to apply transformations onto them, for example, a rotation. Photoshop allows for rotating images, but if you load such a template and replace this image, the rotation won't be applied to the new image.
To solve this problem, you should separate the image from the transform itself. Fortunately, Photoshop offers a built-in mechanism to do this, namely, smart objects.
The smart object is a powerful tool in Adobe Photoshop, representing containers for raster/vector image data and applying geometrical transforms on them. The most important aspect is that transformations and image data are kept separately, so you can change transforms and images independently. For example, if we replace a raster image inside a smart object, the new image is transformed the same way as the original one. The following features associated with smart objects are significant for Customer's Canvas:
Only scale, translate, and rotate transforms are supported in Customer's Canvas. They are applied to image layers and image placeholders. Thus, the user can edit them in the editor after the template loads. In this case, transforms made by the end-user on the canvas combine with the original ones loaded from the smart object. For example, if an image layer is rotated at 90 degrees in a template, the user can rotate it back to 0 degrees.
Unsupported transforms (all transforms except scale, translate, and rotate) are not applied to uploaded images in the Customer's Canvas editor. In other words, the image presented in a PSD template is transformed, but as soon as you replace an image in a placeholder, the transform is discarded.
Here is the easiest way to create a smart object in a PSD template which will apply rotation on an image:
Also, there are a few alternative ways to add smart objects. Customer's Canvas recognizes such smart objects as well. For example:
Now, let us try to open our PSD template with a smart object in the Customer's Canvas editor. You will see that the image is rotated and if you upload another image there, it is still rotated.
You will get the same behavior not only for regular image objects but for image placeholders as well.