TrophyCustomer's Canvas is honored with a 2020 InterTech Technology Award! Learn more 

PSD Files

The Dynamic Image API has been developed so that the designer creating mockups or templates to be processed with this API will work in the usual way. Despite this, not 100% of Photoshop's functionality is supported. In this article, you can find out what features can be used for creating mockups or templates in Photoshop.

Photoshop versions

In general, Dynamic Image works with files created in any modern version of Photoshop. However, from time to time Adobe may introduce breaking changes in PSD file format, and some of functionality may degrade.

The latest Photoshop version where we have tested Dynamic Image is Photoshop CC 21.2.3. The oldest one is Photoshop CS6.

If you are encountering any problems with PSD files created in newer versions, please contact our support team.

Element Types

Layer Types

You can create Image Layers, Text Layers, Shape Layers as well as combine them into Group Layers.

For text elements, you can set all properties on the Character and Paragraph tabs. Dynamic Image can replace text while keeping these settings.

Example of changing text properties

For Shape Layers, you can define the fill and stroke. It supports not just solid fill, but also gradients and pattern fills.

Smart Objects

In addition to the regular layers, you can create Smart Objects. When you transform such an object using, for example, a warp, distort, or perspective tool, Dynamic Image inserts an image in the smart object and applies all these transformations to the new content.

Example of warping smart objects - business cards

NOTE!

Starting with Photoshop 2020, the Warp tool was changed. By default, it has now only angular gripes and lines - the boundaries of the object (the same as the Resize or Scale tool), and internal lines - separators that allow you to create a grid inside the object and can now be added separately.

At this moment, Dynamic Image does not support a customized grid. So, the Warp tool can only be used with default settings (without internal lines), in the same manner as it worked before Photoshop 2020 (where they were drawn by two horizontal and two vertical lines).

Normally, when a content is inserted to a Smart Object, its top left corner will be located in a top left corner of a Smart Object. However, there are some scenarios when you need to shift it inside a Smart Object. For example, you may you need to display different parts of a design on a product with complicated surface, like a canvas or a mug with 360-degree design.

In such scenarios, you may add another Smart Object inside the placeholder and position it so that the portion of an image you want to make visible appear in the outer smart object.

Example of nested smart objects

Groups with Alternatives

As noted above, you can use grouped objects for your convenience. However, grouping provides another useful feature - Dynamic Image allows for switching a visible layer inside a Group Layer.

Example of alternative group elements

During the design time, you may use the eye icon in Photoshop to hide or show these layers for your convenience. Once a developer sends the appropriate command to Dynamic Image, the requested layer will automatically show while the other layers will be hidden.

Such groups may contain not just regular layers, but they can be nested and hold other groups, and smart objects.

Blending Options and Effects

Blending options

You can apply opacity and blending modes that can be set in the General blending section of the layer settings dialog. For example, you can apply textures or shadows to a layer using the blending mode Multiply.

Blending options in Photoshop

At this moment, not all blending modes are supported. You can use the following ones:

  • Color Burn
  • Color Dodge
  • Darken
  • Difference
  • Exclusion
  • Hard Light
  • Lighten
  • Linear Burn
  • Multiply
  • Normal
  • Overlay
  • Screen
  • Soft Light

Effects

Only three layer effects are currently supported:

  • Stroke
  • Color Overlay
  • Drop Shadow

WARNING!

Some of their settings may be ignored. For example, a shadow may look a bit different than in Photoshop, although the main shadow settings are used.

No other effects are supported yet.

Masks

In order to clip images and smart objects, you can use Vector masks. Layer Masks are partially supported - they cannot be applied to Smart Objects.

For example, you can insert a business card layout, which has a bleed zone. Definitely, you want to cut it off in the preview. In this case, you can apply a vector mask to perform this.

Example of mask usage

WARNING!

At this moment, you cannot use Clipping masks yet. Use vector or layer masks instead.

What's Not Supported in Dynamic Image

Adobe has been developing Photoshop for decades, and they invest a lot of money in its functionality. Dynamic Image is not that old, so unfortunately, not all the features are supported. Below are some of the features you shouldn't count on yet.

  • Layer effects other than Color Overlay, Drop Shadow, and Stroke
  • Advanced blending options
  • Adjustment layers
  • Smart filters
  • Clipping masks

Try to avoid them or, if possible, rasterize them. If any of these features are extremely important to you, please contact us at info@aurigma.com. We will be happy to discuss your use case, and perhaps we could add support for certain features of the PSD format.

Recommendations

Smart Object Content

If you are creating mockups with the Warp or Distort transform, it may be important to see how it will change the image. We recommend to prepare some simple technical images for this kind of Smart Objects, for example, a simple grid. It makes sense to mark bleed/trim zone with guidelines as well.

Use grids as technical images in Smart Objects

Layer Names

When creating layers, pay attention to their names. While it doesn't make much difference to Dynamic Image how you name your layers, it's important to have a clear and consistent naming system for your layers when developing an application. For example, when making many similar mockups, it makes sense to give the smart object, into which the designs will be inserted, the same name in all PSD files.

It is recommended to avoid non-standard characters in the names. For example, a slash may cause problems because developers use the groupName/layerName syntax to refer to layers within a group or smart object.

Choose a Reasonable Size

If you are making a mockup that will be used to produce a small 800px preview, there is no point in saving the PSD in high resolution. The larger the PSD file, the slower image generation will be, so choose a proper size. We recommend setting a 2x of the target image size (for adequate display on Retina screens), not larger. For example, if you will display it as 800x800 image, save the PSD file as 1600x1600.

Merge static layers

By creating realistic effects such as shadows and highlights, designers tend to add a lot of items with different settings (blending mode and others). However, having to merge dozens of layers with each request can have a negative impact on performance. So whenever possible, try to merge layers, for example, all shadows - into one layer and all highlights - into another.

Keep source file separately

The previous tips are aimed at increasing the performance of Dynamic Image. However, we realize that a designer needs a large source file with layers divided into parts. In such a case, we recommend working with a PSD file of the original size with all layers, and to prepare a separate file for Dynamic Image by using Photoshop macros and scripting to get optimized PSD files.