Stateful Design
Reuse, “stateful” design, and screen-flow using Layer Comps and Place Linked Smart Objects
I’m kind of a process nerd. I like to find the most efficient way(s) to do something.
We (the whole Photoshop team) have been working on trying to make Photoshop better for screen designers (like myself).
Some of these screen-design-er-ish features may have gotten lost in the waves of media and updates surrounding the Creative Cloud 2014 launch. One of which could be “layer comps in smart objects.” (What does that even mean?)
To me it means I can finally complete stateful design in Photoshop. (I’m pretty sure I made up that phrase but let me know if someone else coined it. What I mean by stateful design is the ability to design, well, with states.)
Example 1 : The State of a Head
You’ve had some project at some point that needed some user heads right?
Create a single file (heads.psd) with several heads in it — and create a layer comp per user as below.
2. Place Linked that file into any (and all) files in which you’ll be needing yer user heads ever again. (You could decide to do the styling in the heads.psd file or in the new parent files.)
3. Instance the Linked Smart Object (cmd-J the layer or opt-drag the head)
4. Change the state of the layer comp for each instance of head.psd in the properties panel with the head.psd layer selected.
4. Voila. A single(external file) lots of heads to be placed in parent files. Smaller files & Stateful design. High fives all around.
Example 2: A Screen Flow. Maps Document. Whatever you want to call it.
So I made a great screen design psd with layer comps to indicate the pages and sates. But I want to see them as a screen flow. Because layer comps (even though we’ve made them better…) are HARD TO VISUALIZE IN MAH BRAIN.
So I create a new container (or map) document and do the same thing I did above (with heads.psd). But this time I ‘place linked’ my screens.psd file. Duplicate so it’s instanced (cmd-J the layer or opt-drag). And finally line up and move around my layer comps to create a screen flow. Hurray.
A double click on the linked smart object will open that linked SO. (Be careful here to edit the layer comp you intended to target, as the opened linked psd will not know (yet) what layer comp you wanted to edit in the child file—don’t worry you’ll figure it out.)
With little imagination you can extrapolate this to button states and more. I have toyed with several atomizations of a design. There are bazillions of ways to go about nesting files and design bits for optimal flexibility and reuse.
It could be your new way of working in Photoshop. Maybe you already do this and I’m a dummy for mentioning it. I dunno. But if you have any questions, feel free to hit up any of the designers on Photoshop.
