After trying many times to regulate the manner in which Web site production is organized on the many design teams I’ve led, I’m still not at peace with the amount of control that should be imposed on other designers. On the one hand, everyone works in a unique manner, and it’s counter-productive to shoehorn a single, unified and overly detailed process on designers, who are typically free-thinkers when it comes to this working style. This I accept readily, but there are some things, admittedly low-level things, that I find it hard not to at least want to control.
There are more profound — and touchier — examples than this, but the one that has me preoccupied lately is the relatively trivial matter of organizing Photoshop documents. By and large, most designers approach the construction of a Photoshop document in an ad hoc manner, creating new layers as they are needed, not always naming them properly, or defaulting to Photoshop’s automated, serial numbering scheme, which happens to be generally devoid of meaning. I’d venture to guess that the vast majority of Photoshop documents are created in this way, and more often than not without negative consequence.
Photoshop in Production Shops
Below: Photoshop cruft. A more or less typical combination of named and unnamed layers in a Photoshop document. And yes, I’m still using an older version of the program.
But when working in a production environment, there’s a lot to be said for being highly organized with the constituent parts of these files: the application is far from an ideal tool for Web site production to begin with, and the natural (and completely understandable) cruft of redundant, obsolete and/or superfluous layers generated by a designer over the life span of a production document can exacerbate an already difficult process. Add two or three or more designers to the mix — everyone adding, obsolescing and altering layers with no overarching mindfulness of the document’s construction, and you end up with a structural mess.
I’ve toyed with the idea of putting in place fairly strict guidelines around the creation and management of these documents for what might generously be called “the greater good” of a project. Specifically: there should be as few layers as possible (especially among text layers), all layers should receive unique and logical names (completely eschewing Photoshop’s default “copy” appendage to duplicated layers), obsolete layers should be deleted, etc.
The Wrong Tool for the Wrong Job
They’re simple enough rules, in my mind, but they’re open to a lot of interpretation — how many layers are too many or too few? what exactly is a logical name? — and trying to impose them is more or less committing to a path of micro-management. It’s true that design production is a kind of micro-management to begin with, but it occurs to me that what’s really lacking here isn’t so much a unified mindset for production teams, but rather a truly flexible visualization tool for Web production.
I’ll never deny Photoshop’s raw and unparalleled power in rendering singular concepts, but it’s starting to become a real liability when it comes to communicating interactivity, as the thorny problem of layers management indicates. To be fair though, what I’m saying is that Photoshop is just the wrong tool for the job. But short of actually coding the final experience — which some would argue is the simplest, best solution — there remains a huge opportunity gap for a new kind of software tool. I know, I’ve talked about this before, and there’s almost nothing new I’m adding to the argument now. Basically, I just want to reiterate: I want a new production tool.
+
Photoshop is technically the wrong tool for 90% of the jobs it’s being used for. It remains primarily an imaging tool. Regarding naming layers this is a problem that plagues all group projects. Programmers moan about unannotated code, Flash designers want properly organised assets, etc… I always tell everyone working on a project to name stuff as logically as possible so that “it makes sense out of context” — it doesn’t always of course but it works well enough most of the time. If you want to take it further Photoshop lets you annotate sections of your work. Add versioning to that and you have a pretty robust design framework. But admitedly pointless for visualising interactivity.
I agree that a new visualisation tool would be great but I can’t actually visualise what I would like it to do exactly. There’s a real risk that such a tool would in itself define the output.
At Netymology, we usually just build a quick and dirty prototype to test interactivity, Dreamweaver can speed this up especially if you skip standards compliance or clean code at first. A group can work simultaneously on a testing servers so if the tasks are assigned properly it’s a reasonably painless process.
I admit that for many projects I prefer simply create visual comps and discuss interactivity off those, this is usually enough to develop an alpha version that looks and runs according to spec.
Ultimately, it’s a matter of being considerate. I don’t care how sloppy your work habits within Photoshop are; if you know someone else will be working within the file you’ve created, you owe it to them to keep the document organized. Nothing gets my goat quite like opening up a PS doc with hundreds of unnamed layers. It is simply inexcusable.
Agreed. When I switched to CS2 (when I was working with you folks) I was sort of taken aback by the idea of sub-layers. It made sense of course but then grouping stuff got really intense and it became a sort of insane lexicon of its own to start naming layers. Like “dotted line light grey” or “dotted line with drop shadow”, etc, etc.
This is why using the right tool for the job can make a real difference. Personally, I’ve stopped using Photoshop for Web site production a long time ago and replaced it with Macromedia Fireworks.
Although Fireworks won’t help in giving organizational discipline to designers it can help with the proliferation of layers simply because its basic workflow is vector based. Fireworks’ layers are more akin to Illustrator’s than Photoshop’s and any number of “bitmap objects” can reside on one single layer alongside vector objects and text.
As for creating interactivity, Fireworks has the edge over Photoshop there as well since layouts can be sliced and interactivity added to individual slices all within the same interface. Fireworks uses animation frames to “store” over, down and other button/image state graphics.
When you take into consideration the added flexibility and precision of vector tools as well as the ability to optimize and export slices without having to go to a separate “Save for Web” dialog not to mention that, in my experience, Fireworks consistently exports smaller Web optimized images of better quality than Photoshop or ImageReady, it becomes a very compelling choice for Web site production work.
Of course Fireworks doesn’t alleviate the need for Photoshop for heavy raster image manipulation since its bitmap tools are nowhere near as extensive as Photoshop’s (although they are perfectly adequate for most tasks,) but for everything else related to Web graphics and layout production it does the job quicker and easier and with more precision and flexibility.
In fact I don’t understand how designers can still try to produce Web layouts in Photoshop. Even starting in Illustrator then moving to Photoshop/IR would make more sense to me.
Ok, good, I’m not the only one who has moved from using Photoshop, which I am only intermediate with, to using Fireworks, which I’ve actually used since 2002. I love working in both programs, and I’m worried that most of what makes Fireworks great is going to die on the vine now that Adobe and Macromedia are merging. Personally, I have copies of CS2 and StudioMX2004 on my machines, and I use the tools that work best for me.
Of course, if I’m working on a website and really want to see if the interactivity is going to work, coding it up in CSS with a bunch of content in Lorem Ipsum is relatively easy as well…
I agree with the other guys. Macromedia Fireworks is the program for making graphics for web developing. Has been using this program a few years and it is really great for it. Now I am back to PS only because my employeer has strict rules what programs we can use, and it really stinks. 🙁
I couldn’t agree with you more that Photoshop is the wrong tool for the job. Personally, I use Illustrator. I don’t have to worry about destructive resizing or other actions. I can name everything I want as well as select items just by clicking on them (amazing, I know). And best of all, if the design is destined for Flash production, I can simply export an SWF of the design and import it into Flash with NO painful redrawing involved.
Occasionally, on a text heavy site with many pages, I may design it in InDesign to take advantage of it’s great text box functionality and pagination.
I am intrigued by the possibilty of using Illustrator for web layouts. I have thought about trying it in the past, but havent had the guts to really try it.
Patrick, do you, (or someone else) have a sample .ai file they could email me so I can see how they organize their Illustrator web layout files? I am so darn used to PS, that it would be good to see how another designer uses Illustrator before I dive in. thanks in advance!
[My email is ward@wardpoulos.com]
Interesting. I’m pretty much a diehard Photoshopper, using it for everything possible.
Now that you guys mention it, Photoshop can become a real pain to manage comps in once you get beyond 15-20 layers and start to scroll for ages, endlessly opening and closing layer folders.
And the whole “save for web…” is just endlessly annoying, for some reason it’s much slower and the keyboard shortcut is a joke (shift, option cmd s or something).
I think I might try different programs for now, but I can definetly follow the need for better comping tools.
I use both illustrator and photoshop. And at the risk of being obsessive compulsive totally micro-manage my files. Coincedentally, I’ve just written up my photoshop file management process in the notebook with a view to posting it. Must be something in the water.
What I like about PS is that it’s pixel perfect. What I like aboout Illustrator is that I can very, very quickly knock up my layout and then take it back over to photoshop for refining.
PS can be a pain in the ass when it comes to laying loout text although the paragraph pallete is really good and does take a bit of the pain out of it.
If I’m designing a table or a form, I will usually put it together in CSS and then screen cap it and paste it into the photoshop document. I absolutely loathe forms and tables in Photoshop.
I don’t know if there really could be one killer ap for designing pages but I find that by using a few you save yourself a lot of time.
I like the Idea of designing a site with loads of templates in InDesign and it would be great for presenting to clients. But I would be interested to see how it transferred over to HTML.
What I can’t stand, as mentioned earlier is people that leave a file in a shables with unnamed layers everywhere. It really only takes about 10 minutes to clean up a file at the end of the design process. There is No excuse. (end rant)
Lots of people have recommended Fireworks to me, both here and in my older post touching on similar matters. I want to give it a shot, but I just can’t get past that Macromedia interface — I find it pretty intimidating, or at least the learning curve it implies. But I do like the idea of using vectors principally and pixels as assets. It’s (somewhat) closer to the way a real Web page works.
I find the macromedia drawing interface quite cumbersome although there does seem to be a lot of enthusiasm for it, perhaps it’s something worth perservering with.
Interesting comparison between the vectors and assets being closer to a real page. I guess it’s similar to the way designing for print works to with the use of linked files and fonts.
It’s funny, how the majority of web design is done within the one package, I guess it’s a case of evolution where existing tools have had to be adapted to meet a new need.
I too would be interested in seeing others’ Illustrator files. Here’s mine:
http://www.gridworkdesign.com/fireontheprairie-slices.ai
I’ve mainly used it because of the non-destructive resizing and the pen tool, although I’m sure the results could easily be duplicated in PS.
PS – send them to seamusmh@gmail.com
I do agree that a new tool is needed. Fireworks isn’t it though. No tool that I’ve used is aware enough of the nature of XHTML, semantic structure and content management systems. What I need is some application that would let me create the XHTML (even outside the program) and then create the look and feel based on those semantic elements… It’s far too much the other way round at the moment.
Aegir,
I don’t think we can expect any graphic app to become aware of the nature of XHTML. I myself use Fireworks to create the layouts, slice and optimize the graphics then export them but I create the code in Dreamweaver and TopStyle which are dedicated Web authoring tools. I never use code exported from Fireworks and I appreciate it for its creative toolset, not its weak HTML export feature (ImageReady is even worse IMO).
I myself prefer to concentrate on visuals when I’m at at the design stage. I usually think about the markup at the slicing stage and only export the minimum number of graphics I’ll need and do as much as possible with CSS and semantic XHTML. It works well for me and I rarely have to modify a layout to bend it to the limitations of XHTML/CSS.
Fireworks works well for me because I can re-export individual slices quickly and easily when I need to modify something. I also often end up with two files, one with the main layout and one for “elements” which are mostly small graphics used for tiling backgrounds and things of that nature. It’s a seamless workflow for me with Fireworks while this was awkward and tedious in Photoshop.
I was a little intimidated when I started using Fireworks, and now when I have to do things in Photoshop, it feels so tedious compared to Fireworks.
Needless to say, it was definitely worth the couple of hours I had to spend going through tutorials. I haven’t looked back since.
Fireworks is built out for the way web developers think. Photoshop was developed for photographers, everything else was just added on as an after thought.
I think Photoshop definitely has its merits, but you should really consider trying out Fireworks, its way of managing layers is incredibly easier than Photoshop.