2

TL;DR - How does one create a complex User Interface in Photoshop in a way that Photoshop doesn't slow down to a crawl?

I create a lot of complex User Interface scenarios with Photoshop and routinely get to 10-20 layer comps and hundreds (thousands) of layers.

For example:

  1. Layer Comp 1 has a list of items with checkboxes. There is a filter across the top (Aging Accounts that are less than 30 days old, more than 30 but less than 60 ...). There are drop-downs which lets users add x to y; merge x; delete x; and icons which display different information depending upon the above mentioned filter.

  2. Layer Comp 2 has a drill-down (user selected on one of the items and gets a sub-item and a new set of checkboxes are displayed.

  3. Layer Comp 3. User selects drill-down line (checkbox selected) and goes to drop-down. (Drop-down revealed and selection highlighted)

  4. Layer Comp 4: Pop-up is displayed allowing user to ....

By the time you go through several scenarios you have dozens of comps; and dozens of variations.

I use smart objects as much as possible; and organize, group, and label my layers meticulously so finding items is simple. However Photoshop is slowing down tremendously.

My, not so good, solution is to create as many different .psds as is logical. But sometimes (too often) it makes "logical","organizational" sense to keep things in one file.

I hesitate flattening layer groups as I update them often as the requirements change (or more accurately stated they become more and more precise).

What is the best solution to this problem (so many layers that Photoshop slows down)?

Improve this question
11
  • 1
    I've never designed a complex UI but I can't even fathom a time when you'd really need thousands or even hundreds of layers. Without seeing your design and layer panel its hard to say what you might be able to do differently other than throw more hardware at the problem.
    – Ryan
    Commented Nov 4, 2015 at 15:56
  • 2
    I'm afraid you are beyond the point where you use Photoshop as a tool. If you are fine-tuning at this level, don't do it in Photoshop, but rather directly in the browser.
    – Vincent
    Commented Nov 4, 2015 at 15:59
  • 1
    @Vincent - I go back and forth between HTML and Photoshop. I might have to start the HTML phase a little earlier on these more complex projects.
    – Mayo
    Commented Nov 4, 2015 at 16:06
  • 1
    You could always piece the layout and place Photoshop files within a master Photoshop file as a linked file. This would eliminate the need to have all your layers in one file.
    – Scott
    Commented Nov 4, 2015 at 17:17
  • 1
    @DA01 - As opposed to HTML/CSS/js? The main reason is that I switch from Right Side of the brain thinking to Left Side as I get more and more involved with HTML. When I'm still trying to flesh out the design I do best with paper; then with Photoshop when I'm trying to make certain that things actually fit well on the screen. Only when the design passes "Right-Brain" thinking do I start going to HTML for the final high-fidelity prototypes.
    – Mayo
    Commented Nov 4, 2015 at 19:16

1 Answer 1

Reset to default
1

This approach solved the same problem in my workflow:

Layer comps in Smart Objects

I use linked Smart Clips with nested Layer Comps for every section. For instance, create a Smart Clip for the header section with Layer Comps like home, mouse over, active etc. You can select the required Layer Comp of the linked Smart Clip using the properties panel for every Layer Comp of the main document. That way you can have many states separated in many files with a rather flat main structure.

Sorry, this sounds a bit weird, but I hope this helps in some way.

Additional Info: Adobe Help – Layer comps in Smart Objects

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.