Photoshop: Track transforms in layers comps for Responsive Web Design

  • 1
  • Idea
  • Updated 6 years ago
We're running into problems trying to find ways to handle responsive web design in Photoshop.

I found myself wishing that if Layer Comps could track transforms and width/height changes of text boxes and smart objects, we'd have the makings of a responsive workflow.

Imagine using a layer comp for each desired width. The comps would all use the same set of layered content and a content change on one comp would change it for all. While the positions, sizes and text-flow would be unique to each comp. Responsive!

It falls down right now because you can't change the width of an element (say a text box) for just one comp without changing it in all comps.

So I'm asking for the addition of tracking width/height (ideally ALL types of) transforms and text-box dimensions within individual layer comps!
Photo of Roger Herbert

Roger Herbert

  • 2 Posts
  • 0 Reply Likes
  • frustrated, but hopeful

Posted 6 years ago

  • 1
Photo of Chris Cox

Chris Cox

  • 20280 Posts
  • 765 Reply Likes
OK, apparently this is a new use of the word "responsive".

What do you mean by "responsive" in this context?
Photo of Roger Herbert

Roger Herbert

  • 2 Posts
  • 0 Reply Likes
Yes, it's a bit pseudo. The responsiveness doesn't happen in PS, but rather the use of layer comps makes it much easier to make a CSS media-query friendly design.

The idea is to have a set of layers in a PSD that, on different layer comps, can be not just repositioned, but transformed on a per-comp basis. Thus each comp is a layout that's equivalent to a media query breakpoint in CSS (e.g. mobile, tablet and desktop).
Photo of Chris Cox

Chris Cox

  • 20280 Posts
  • 765 Reply Likes
OK, that helps a bit. I'll have to see if our web design experts can come up with a good way to explain it to our product management.