I’ve noticed a pretty big change in how I’m using Photoshop lately. Much of my work consists of iteration through various solutions as I explore user interface for new and existing pieces of our apps. It is common for me to jump from working directly in HTML and CSS to Photoshop and back again. Working in code lets me immediately see my designs in context, in the browser, and often in the way it will behave when interacted with. It’s the most real way to work. But sometimes I want to quickly try an alternate direction or see a change that would be faster to mock-up as an image. That’s where Photoshop is most useful to me.
Maybe I’m just drinking the Kool-Aid, but I’ve noticed that when I do use Photoshop I rarely save the PSD file anymore. It used to be that for every project I’d have one or more PSDs with tons of layer groups preserving each attempted direction. Those files became archives of my process that I kept, but never used again.
Now when I fire-up Photoshop, it is so that I can pull in a screen grab of the piece I’m working on so I can mock-up what I’m thinking. I’ll clone browser widgets, add some text here and there, try a different layout, etc. I don’t worry about naming layers or grouping concepts, but I do make screenshots. I’ll save a new image anytime I have something I might want to come back to later or that I want to get some feedback on. And those images I do keep. They become a sort of visual blog of my process. They make it easy to go back to an earlier idea and are handy to have available when we decide an exploration is worth talking about in more detail. The series of images shows where I went during the process and what I thought was notable. With a layered Photoshop file it was less clear what was what, what order it came in, and why it mattered.
Now, when I reach the end of a project I don’t save the PSD, I throw it away. Like cleaning up your workshop after a woodworking project, you sweep up the sawdust and throw away the scrap wood. Photoshop files are scraps and pieces that I don’t need anymore.
nap
on 30 Jul 09I totally disagree with this, but I suppose it depends on the complexity of the visual design, and what works for you.
For me personally, for anything other than a very simplistic site, I’m going to want a ‘master’ PSD with elements reflecting the current visual that I can use as a basis to make tweaks and updates later with ease. Not having this, in my opinion, is akin to not keeping around the source for a compiled development project after I launch it. I even commit this to version control to keep track of how it evolves over time (although clearly being a binary this is less than ideal for digging ;-).
If the PSD is well-organized into layers that are intelligently named and grouped, then things work great.
nap
on 30 Jul 09Also, I should point out that if you’re just using Photoshop for mockups, that’s all well and good. But there are better options for that sort of thing. I do a lot of ‘exploratory’ interface design in balsamiq for example, and end up throwing most of it away when I start implementing the HTML/CSS for simpler projects (for more visually complicated projects that require a PSD, we move to Photoshop next)
Luciano
on 30 Jul 09Yeah, just throw it away! The price per Gb is so expensive these days, I can’t have a 50-mb psd taking up all that space.
Seriously, c’mon… what do you LOSE by just leaving it around?
Besides, if you take screenshots, the rendering engine of the browser is different from Photoshop for fonts, so if you need to change text, the new text you make it’s gonna look different, even in the same font. You can’t show that for a client, even in a mockup.
Sean
on 30 Jul 09I used to keep every iteration as a layered .psd file, but now I usually just hang on to one “master” photoshop file. I work in a similar manner, and I almost never return to the .psd, but I figure it’s nice to keep in case I need to pass the project to someone who prefers to have a big chunky .psd to refer to.
Chris B
on 30 Jul 09I guess I am a fiend for keeping the PSD file to make future editing/versions easier. I prefer to use Photoshop’s layer comps to keep various versions available. Everything is saved in one file and one can quickly select/flip thru the comps. Comments can be added for details about why a certain version was saved or unique. And the whole set or selected layer comps can be exported. Just seems like a more organized way for me to work.
JF
on 30 Jul 09Nap: We prefer pen and ink for our rough mockups. Jason Z is talking about using Photoshop for photo-realistic mockups. Balsamic is an abstract mockup tool, which is totally fine, we just prefer pen and paper for abstract mockups.
Tor Løvskogen Bollingmo
on 30 Jul 09I wonder. Since you at 37signals loves OS X’s look and feel – why don’t you stress the details in your own UI graphic? Details that’s beyond what you can do with only CSS.
Ryan Carson
on 30 Jul 09Love this idea. Can you share the PNG’s than you ended up not using? Would make a good post.
David Kaneda
on 30 Jul 09I agree completely. While I don’t typically throw out all of my designs, the browser -> screenshot -> Photoshop -> browser workflow has become my default. I just redesigned my site, and while I designed the base grid and texture in Photoshop, most of my iterations will now be in improving small elements with that very process.
Rohit Arondekar
on 30 Jul 09Maybe you should reconsider using a lighter photo editing application. Why use something like Adobe Photoshop for just cloning/moving/adding text ? Actually why not consider using Firebug to make those kind of changes live on the web page ? Possible write an extension/plugin to firebug that allows you to clone/move/add text to web pages live. :)
Jared Mehle
on 30 Jul 09Why would you throw away the Photoshop file. What if you need to come back and tweak an interface element. Are you going to want to create it entirely from scratch?
If all you are doing is taking screenshots and making some quick customizations I could see how you would maybe want to throw that out.
Generally though, I favor keeping Photoshop files around. Even if I don’t intend to use the design or element right away, it’s worth keeping to look at for inspiration or use later. At this point a few 10-20MB files sitting on your drive isn’t a big deal.
Matthew Sanders
on 30 Jul 09Everything in me wanted to argue this at first bit the more I think about it. It makes good sense. For the typical project I work on we don’t have time to ‘recreate’ elements or explore other options beyond a certian point. Because of this, I depend on using Layer Comps when exploring solutions. They simply rearrange already existing layers in the PSD. This keeps a record of explorations as well as reducing file size.
I like your method and would be intereted to her how well it works out for you down the road.
rick
on 30 Jul 09Do you ever wonder why you’re still using Photoshop for this stuff? Why hasn’t someone made something better?
Everyone uses photoshop still… even though it’s gotten more and more complicated and less and less useful.
David Barrett
on 30 Jul 09This may work in your workflow, but not in many. Two obvious examples are panels with a background image - try extracting a background image from a PNG when there’s interface elements on top - or any sort of complex layering.
Say you’ve made a graphical element consisting of several layers of leaves with a pot underneath. You make up a PNG for it, scrap the PSD. But now you find that you got the colour of the pot wrong. Oops.
I’m not sure if I’m reading your post right, but are you only suggesting it for quick alterations?
Bruno Bergher
on 30 Jul 09I agree with Mathew Sanders.
Why wouldn’t you just ‘Save as’ your PSDs along the way? You’d get the same history of variations you could go back to, with the advantage of having separate elements and editable type.
I can’t really see how that would slow you down or impair your process. It would only use a few more megabytes of disk space. : )
Bob
on 30 Jul 09Wow, some of you sound like my crying son. Grow up a little bit and take this as what it is: someone stating how they use a particular tool.
He’s not taking your toy away, just telling you how he uses it.
Nate
on 30 Jul 09Yeah, I’m a white paper and sharpie guy for mockups. And I’d probably use photoshop to do the more photo realistic stuff, like Jason Z. is. But I suck at photoshop.
So I need some kind of middle ground. I’ve tried to take screen shots like Jason Z. is talking about and dumping them into another app like OmniGraffle where I can use their tools to screw around on top of the screenshot. But it’s still too cumbersome and not as easy as pen and paper.
Currently I’m considering if a tablet (Wacom?) might be a good compromise to sketch on top of screenies. Anyone over at 37s fool with tablets at all for this kind of thing?
RS
on 30 Jul 09I’ll point out a distinction between holding on to mockups versus holding on to final design elements. Mockups are always temporary. But when it comes to final design elements like buttons, shadows, icons etc, it does make sense to keep the PSD. In those cases, we separate out the specific elements that we care about and save an authoritative PSD file to a directory in our version-controlled source tree. Each of our apps has a directory called materials/ where we store raster and vector source files for elements that we may want to change or re-use later.
Jason Z.
on 30 Jul 09Just to clarify, I’m not making a 20MB PSD and throwing it away. In most of these cases I just never save it at all. PS stays open, the files stay open and I just use it more as a scratch area until the task is done. I move in and out of PS when it makes sense to but what I’m making there isn’t the end product. When it’s done I close PS and abandon all the junk.
The process is looser and more organic than I’ve experience in the past. It wasn’t a conscious decision, but a gradual shift towards what I think is a less rigid approach that doesn’t leave me worried about what I leave behind. I’m focused only on the end product.
@Ryan Carson – I hope to do more of that soon. That’s what the Design Exploration articles are intended to be: a focus on the process, especially the things that didn’t work. I’m a little behind on writing, but I’ve got at least two good ones to share soon.
Actually why not consider using Firebug to make those kind of changes live on the web page ?
Many times the reason these things are a better fit for Photoshop is because they are graphic in nature, or require substantial changes to the mark-up. I like Firebug for troubleshooting but it’s edit interface is too limited and results too ephemeral to do anything serious. I’d much rather just work in the app code for anything I could do via Firebug.
Jason Z.
on 30 Jul 09Do you ever wonder why you’re still using Photoshop for this stuff? Why hasn’t someone made something better?
Everyone uses photoshop still… even though it’s gotten more and more complicated and less and less useful.
@rick – I wonder this almost every time I use Photoshop. Why isn’t it better for web design? Why doesn’t it have an anti-aliasing mode that makes text look like it does in the browser? Why is the slice tool stuck in 1999? Why do I have to move bezier corners or use the clone tool to change the text on a button? Why can’t I drop-in browser UI elements? Etc…
Matthew Sanders
on 30 Jul 09@Nate : I know Jason Z uses a wacom as his primary input device.
I really like this concept.
Jason Lander
on 30 Jul 09A lot of this process makes sense to. I go through a similar process in regard to saving multiple iterations at different points in the design. However, I always save my PS/AI file of “scraps.” I find them to be useful later at different times. If not for the specific project these scraps pertain to – then others.
Ryan
on 30 Jul 09@Jason Z. -
It’s always nice to see another designer’s flow. I think I’m incapable of designing full pages directly in Photoshop. I have a massive background in drawing/painting, so my ideas always start on paper, then move to the browser. I love the “blank canvas” feeling, and Photoshop is hardly that. Nothing beats a blank piece of printer paper or a white browser window…
Oh, and how does it feel to finally have your comment get the “white box” treatment as an official 37signals member? I can only imagine… great post.
Andy Kant
on 30 Jul 09@JZ, rick – Isn’t this process exactly what Fireworks excels at? It may not be powerful enough to produce a final version, but it seems to have all of the features that you would need to do this quick iterative work.
Alex King
on 30 Jul 09I agree with Andy – I’ve been using Fireworks forever, and while it’s not like it’s the optimal graphic editor that we should have by now, I find it’s way better for web graphics than Photoshop. Great slicing, better vector graphics, etc.
Mike Cuesta
on 30 Jul 09Still using Photoshop for screen design? Really?
Fireworks is much less time consuming.
Terry Sutton
on 30 Jul 09I mean no offence here, but I don’t understand how anyone can be using Photoshop for this anymore.
I’m with you on the sharpie+paper idea – good one- but if you’re going to use software to help with mockups, InDesign is sooo much easier, faster, better, etc, etc.
Craig Minch
on 30 Jul 09This makes sense if you’re just fine-tuning little ui elements, have an approved design and some code to work with. The psd is just a means to get you to the next step in the process. It does become worthless in the end. I still find them real easy to save though.
What do you do when its a fresh page and you don’t have a screengrab to pull in and start with?
visualinventor (tim watson)
on 30 Jul 09Well written as always Jason. I think parts of this everyone can relate to on some level.
How many times have we chopped up a comp only to see it stray from it’s pixel perfection? If you have been doing this any period of time you certainly have and expect (to some degree) it to always stray from that “PSD perfection”. We get the page to “good enough” or “close enough” and call it a day.
Eventually a change will need to take place on the page and we all make the decision to either do it solely in html or we take the psd and then re-save out the parts we need. This is pretty standard. The issue comes in when you choose to do it in html because it was faster (it is faster, really). Then you have a psd that’s out of sync with the main html site. Should u keep the PSD then – or is it a disposable wood scrap?
I enjoy woodworking and I always keep my wood scraps. I cannot count how many times I have saved a scrap only to use it in another thing/place. When you do, something serendipitous happens (magic?) the piece you saved seems to be perfect for the application that’s arisen and voila you were glad you saved it. I would think the exact same analogy applies here.
If you do web design long enough something that could have been discarded is potentially usable again. Ever taken pieces from a comp that wasn’t chosen and use it again? It seems to work better in the new application than it did in the original? This has been my experience anyway. Obviously if you need a new design you design from scratch but if you remember a widget or thingamabob you used before would be perfect in the new application, you reuse it. But if you tossed it then you wouldn’t have it to reuse and I would argue it’s gone from your memory.
There are 2 items at work here: 1 being an outward focused client exposure (work done for other companies external to where you work) and the other being an inward client exposure (product development in-house). This way of doing things (the one JZ explains-and previously) is more conducive to an organic product dev. process. While keeping the psd’s up to date for archival purposes when changes come around is more indicative of external client based dev.
So long story short it’s situational depending on the end product. Not better or worse just different depending on the end result.
Having been in client work and now product dev work I see how this may be beneficial – I am a packrat however, so I am eternally swayed to saving the psd.
Storage is cheap and you just never know when that “scrap” is going to be the genesis for a whole new project.
Amine
on 30 Jul 09Makes sense especially for UI design when jumping from the browser to photoshop..
Have you tried playing around with layer comps? The idea behind them is pretty similar to your technique but you get to keep all the layered files without having to mess with a 20-30 MB psd because unlike folders you get to reuse the same elements and whenever you create a new layer comp it only register the current appearance, position and visibility of all the elements. I’ve been using them lately and I’ve been pretty happy with the process so far.
Michael Dick
on 30 Jul 09I do this all the time with existing sites that need a new element or two…especially with my personal work.
There is no reason to keep your PSD when it’s only used for direction…the final product is in the code.
I love the analogy you have here, how trashing your PSD is like throwing away your scrap wood…genius.
Brandon Ferguson
on 30 Jul 09It’s been a while but wouldn’t Version Cue Allow you to keep all of the versions of the concept and step through how they changed?
zindustry
on 30 Jul 09I have one word “fireworks” that’s it
Fred
on 30 Jul 09I’m really liking 960.gs CSS framework and the photoshop/fireworks templates it comes with. The templates make it easy to create something that can be hammered out the css really fast and accurately.
Colin Sproule
on 30 Jul 09This sounds a lot like my workflow. Do some rough cuts and tests in photoshop and if it looks right move back to the browser and build it.
Matt Moore
on 30 Jul 09This workflow makes perfect sense when your personal deliverable (to engineers) is html/css coded templates. If you’re not doing that, then of course handing off nicely structured PSDs to the front-end developer (and client) makes sense.
It’s just going from point A to point B…however you get there is up to you as long as you get there!
Vesa
on 30 Jul 09I can’t understand how people don’t get what Jason is using PhotoShop for and suggesting programs like Balsamiq or InDesign of Firebug to substitute it.
He has a HTML/CSS design. He want’s to try some graphical changes (move elements around, introduce new stuff…). He takes a screenshot in the browser, edits it in PhotoShop and takes a screenshot of the result. Then he maybe sends the image to somebody to discuss about it, tries complete different approach and so on.
PhotoShop is not perfect for this usecase but it’s meant for graphical editing which suggested other tools are not.
Mike Rohde
on 30 Jul 09Jason, another analogy for using Photoshp in this way might be that of a whiteboard or chalkboard: you create and move elements around to solve a problem, take a few photos along the way for a record and then wipe the whiteboard clean (close the PSD file) to prepare for the next use.
JZ
on 30 Jul 09Well put, Mike!
Sugarenia
on 30 Jul 09I think some of us have missed the point here.
When you have an established service with a working design, you don’t need photoshop to keep track of anything. You use it to move some things around, add a little polish here and there, try some layouts without altering the page code and that’s it. No need to keep the .psd if you’re keeping the acceptable outcomes handy in a .png.
I think that’s what JZ is talking about.
Chad Jaggers
on 31 Jul 09Jason Z, you make some really good points there. This is a new way for me to think about tackling the small items. Love the wood analogy!
I know some, such as @zindustry, are fans of Fireworks but there has to be a better solution out there. I hope that someone at Adobe reads this.
Thanks for the post!
installero
on 31 Jul 09A video of your workflow would be great! Thanx
Grant
on 01 Aug 09I’ve been using Flash for this lately, and find it really good. You can take a screenshot of your existing screen design, break the image apart and leave holes for your new changes.
I have a library of UI elements (like buttons with labels) that I can just drag on to stage, change the label and save each iteration in a separate frame. Using layers and keyframes you can try changes to some elements while keeping others the same.
The real beauty of using nested library elements in Flash is if you make a change to one UI element (like changing the look of a button) it’s easy for that change to be updated across your whole document – a bit like smart objects in Photoshop but cleaner in my opinion.
Worth a try if you’re not too concerned about pixel-perfect precision and already know a bit of Flash.
José P Airosa
on 01 Aug 09Well, personally, it depends much on the work I’m doing. But normally I do like to keep the PSD for future needing.
Jono
on 02 Aug 09You know, there is a solution for those that find Photoshop too complicated for quick layouts – Fireworks. It’s shape tools and handling of layers is far superior for layout design (it treats everything as objects, meaning you can click everything without having to select the layer), and there is no comparison between the slicing tools from PS to FW. The level of something as simple as shape customisation is deep, and so easy to use.
Also, in CS4 you can directly export workable (if slightly rough) html and css directly from your layout. It also handles multiple ‘pages’ in one document, with global shared elements (like navigation) which you can build clicking right in to. This allows you to create a clickable PDF demo that a client can actually navigate through by clicking on button & navigation elements, rather than scrolling through pages.
Fireworks can’t replace Photoshop, and doesn’t intend to. Photoshop is really designed for detailed image/photo editing, but with the powerful tool set comes complications in the interface. Give Fireworks a try!
Francis
on 02 Aug 09My co-worker designer uses Windows Paint, its pixel perfect compared to photoshop alias text and graphics
Jeremiah Staes
on 02 Aug 09Fireworks all the way for mockups and web layout – much better tool for it. Photoshop is only cracked open when I need the in-depth painting tools, and sometimes I’m in Illustrator for say, icon elements. Whether it’s text, bevels, whatever, Fireworks does it all much faster and more efficiently.
I look at it as Photoshop as my canvas, and Fireworks as my wall to hang the canvasses on.
This discussion is closed.