7

Ask DN: Is there a way to define a Canvas Size to each Layer Comp in Photoshop?

almost 10 years ago from , Product Designer at Roadie

I love the way Flinto allows you to create scrollable views with Slicers. However, changing the Canvas Size for different Layer Comps every time I make a change is making my rapid prototyping flow less rapid.

It doesn't look like there's an easy way to define a Canvas Size for each Layer Comp. Is there a plug-in or workaround that you all use?

8 comments

  • Marc EdwardsMarc Edwards, almost 10 years ago (edited almost 10 years ago )

    I don’t think there’s any in-built way to change canvas size when switching layer comps.

    You could possibly use the Script Events Manager to trigger a script that could do it, but I don’t think there’s a way to key that to only layer comp changes (it would be triggered far more frequently, and likely alter performance).

    I do really like Photoshop’s fixed canvas size though. I think there’s many benefits to Photoshop working like that. There’s a few ways I can think of that may help when working with different mockup heights for Flinto.

    Actions to change canvas size

    You could set up some actions for the various canvas sizes you need, then run them as required. It’s not automatic, but you only need the smaller canvas sizes when exporting, right? Most of the time you can just leave Photoshop with the tallest canvas size.

    Skala Preview should handle that just fine.

    Action to copy, paste, save

    You could create an action for each image size you need to save. Something like this for each layer comp size:

    • Create a marquee selection of the correct size.
    • Copy Merged.
    • Create a new document.
    • Paste.
    • Save for web to a known location with a preset name.

    From there, you’ll just need to rename the document and upload to Flinto. To create actions for other sizes, you’d just need to dupe the action and remake the initial step (the marquee selection). Not completely automatic, but still pretty good.

    Master doc with slices

    If you lay out everything flat in a master document, you could use a folder or Smart Object for each screen. Being laid out flat would let you set up slices for each screen and completely automate all exporting, including canvas size (because the canvas size is much bigger than the bits that need to be exported).

    Skala Preview wouldn’t work too well with things set up like this, unless you were using a Smart Object for each app state — with each state in its own, correctly sized document.

    Layer comps

    I assume the reason you’re using layer comps is because you have many elements that appear across many screens? I find layer comps a bit of a pain to manage, so I typically don’t use them — I just duplicate the items, using a group for each app state. Doing so has it’s own issues, but it feels more robust to me. I guess that does’t change working with Flinto though.

    6 points
    • Brian HarperBrian Harper, almost 10 years ago

      Thanks for the incredible variety of solutions, Marc.

      I don't have much experience creating Actions. I just use yours :) Methods worth investigating for sure.

      Hadn't thought of the Master Doc with Slices idea before. That's brilliant.

      As for Layer Comps, I tend to use them at their most basic level: Just visibility with no saved position or appearance. Still basically have groups for the body of each app state and reuse nav bars, tab bars, and the like between comps. I figure it saves me at least one click of hiding one state's group before switching to the next state.

      Thanks again!

      0 points
      • Marc EdwardsMarc Edwards, almost 10 years ago

        Sorry, I shouldn’t be so pushy about my views on Layer Comps. I definitely see the benefit!

        0 points
        • Brian HarperBrian Harper, almost 10 years ago

          No worries, Layer Comps can be a pain sometimes.

          By the way, I'm going with your first solution at the moment. I keep the canvas tall while designing, then run an Action when I want to export. The Action just trims away the bottom based on the bottom-right pixel color (I usually have an iOS tab bar or Android navigation bar at the bottom of each comp and have solid backgrounds), saves the PNG, then reverts the trim. That should hold me over for a while :)

          0 points
  • Nathan ManousosNathan Manousos, almost 10 years ago

    Exporting through Slicy would produce images at the appropriate heights automatically, but sounds like might not work with your layer comp workflow.

    0 points
    • Brian HarperBrian Harper, almost 10 years ago

      Good call. Might be worth changing the workflow slightly to accomodate Slicy. Adobe Generator might also do the trick if I just use Layer Groups as Marc suggested.

      Thanks, Nathan! And thank you for making Flinto. It makes my stuff look good with minimal effort :)

      1 point
  • Brian HarperBrian Harper, almost 10 years ago

    I suppose I could just work on a very tall canvas at all times and just slice to export mockups of different heights. Maybe take advantage of Layer Based Slices and strategically position a background layer for each Layer Comp. There's got to be a more elegant solution though.

    0 points