Does Cloudinary support working with PSD layers?

The answer to this question is of course - Yes.

When dealing with multi-layered PSD files, the page parameter (pg_ within URLs) allows referring to a specific layer in context of transformation.

When using this flag, pg_1 will show all the layers together, pg_2 will only show the first layer, pg_3 will show the next layer, and so on. All layers are also shown by default when omitting the page parameter completely.

In order to create a transformation that shows multiple selective layers (not all of them), layer transformations must be used. For example, here's a PSD file showing 2 strawberries using 4 layers (each strawberry has its shadow on a separate layer):
http://res.cloudinary.com/demo/image/upload/strawberries.psd
 
And here it is as again rendered by Cloudinary as a PNG:
http://res.cloudinary.com/demo/image/upload/strawberries.png

 
In case you would like to show only the right strawberry (layer #2):
http://res.cloudinary.com/demo/image/upload/pg_3/strawberries.png
 
In case you would like to show only the right strawberry along with its shadow, you will be extracting the shadow and adding the strawberry as an overlay (l_ within URLs) while referencing the necessary layer number using the page parameter.
 
The next step (a bit more advanced) would be to place both objects in its authentic locations as it was on the original PSD file:
 
Here we used some advanced image characteristics provided by the transformation mechanism:
  • iw/ih = initial width/height respectively
  • w/h = layer's width/height respectively
  • px/py = original x & y position coordinates
In this example the base image (right-hand shadow) is positioned in its original coordinates and padded to its initial dimensions based on the PSD canvas.
The right strawberry is then added as overlay, padded to the right dimensions based on the layer size and coordinates and positioned correspondingly.
 
It uses the same transformation directives as the former example to place back the objects to their original location, using the right-hand strawberry as the base and left strawberry as the overlay. 
Have more questions? Submit a request

Comments

Powered by Zendesk