Layers Cake

Adobe Photoshop 7One sure sign that you’re getting old is when you notice yourself stubbornly refusing to move up to newer versions of your software. For instance, I’ve been using Adobe Photoshop version 7.0 more or less since it was first released. And though this version was released five years ago in 2002, and though I own a full version of Adobe Creative Suite ( newer, but no spring chicken, itself), it’s still the version that I prefer to launch every time I sit down to work in front of my Intel-based iMac.

I realize that, compared to more recent editions, version 7.0 is quite feature-limited. But in some ways, I prefer those limitations, especially its inability to nest layer folders. I know, that’s a little nuts, but I find that being restricted to a single level of layer folders helps me keep all the constituent layers in my files organized. I’m the kind of obsessive nut who likes to properly name every layer in my files, and to keep them neatly organized; I’ve found that nesting those folders works against that.

Most of all, I stick to Photoshop 7.0 because it’s fast. It boots up almost as quickly on my aging 12-in. PowerBook G4 as it does on my much newer, much faster iMac, which lets me work on the same files whether I’m at home or at work. I’ve long considered the secret to using Adobe software to be to run older versions on newer hardware, and this is my primary evidence that doing so works.

How Grids Are Made

All of which is a long-winded, roundabout way of introducing some notes on how I constructed Yeeaahh!, the theoretical redesign of a famous Web portal that I created in order to demonstrate the principles of grid-based layouts. Folks have asked whether all of this work was done in Photoshop or not, and how I work with that program’s guides to create accurate grids.

The first answer is that yes, unequivocally, Photoshop is my tool of choice for creating designs for the Web. In this task, it has tremendous drawbacks, but I’ve yet to find another tool that will as accurately translate a designer’s intentions.

The second answer is that I just don’t use Photoshop’s built-in guides to try and create grids, at all. I find that feature to be particularly inaccurate when accuracy is exactly what I want; its unreliable snap-to behavior never leaves me feeling reassured whether or not an object is aligned to the right or left of a guide. It’s maddening.

Instead, I create blocks of solid color — usually in Web-safe #FF0000 red — to represent my grid, group them together in a layer folder ordered at the top of my layers palette, and set each of them at roughly 40% transparency. This allows me to toggle the grid on and off, and also to swap variants on the grid — different combinations of units and columns — at will. Much, much easier than using Photoshop’s guides.

Right: A working document with layers turned on to reveal the grid’s units. The red color blocks are set to 40% transparency.
Grid Layers 1
Right: Layers turned on to reveal the grid’s columns.
070402_grid_layers_2.gif

Upgrade and Away

To wrap all of this up, I wanted to say that I haven’t completely given in to old age. After five years of using Photoshop 7.0, I’m finally considering upgrading to the most recent version. This latest edition of the program, which comes bundled with any of Adobe’s many confoundingly bundled variants of its Creative Suite 3 product, looks promising in that it’s been rewritten to take advantage of the modern day speed available in Intel-based Macs. Hooray. I’ll admit though that I don’t know what the difference between, say, Adobe Creative Suite 3 Premium Standard Pro Home Ultimate Edition and the other seventy-three options are, but I have faith that with a slide rule and a farmer’s almanac, I’ll be able to suss out the right upgrade for me. I’ll let you know.

+
  1. I also use Photoshop 7, but surely the reason it starts up as fast on a Powerbook as on an (Intel, right?) iMac is that the iMac is hampered by RosettaЁ

  2. At least the icon with PS 7 is good.

    Never cared for the CS1/2 feathers and the new Ps business is plain silly. But that’s already an old discussion.

  3. I’ve been using PS CS3 Extended for some time and I can tell you that while there are many added nuisances, they have done some fantastic interface design improvements, but more importantly the speed at while it runs/loads etc. is phenomenal, especially on intel macs. (I hope that I don’t get censored now that CS3 is released. Oh well.)

    On a similar note, until my own switch to Apple hardware a few months ago, I had used Emagic’s Logic Platinum 5.x (my main application for work) on Windows for about 6 years. You know, how the saying goes so I won’t even try. But if something works for you in your own creative process then why add potential stumbling blocks?

  4. I have to use Photoshop 7 on Win XP at work creating websites, and I sorely miss CS’s ability to save Layer Comps into a file. But I worked with CS on a G5 at my last job- and I sorely miss things I used to use everyday.

    Probably the same as most things in life: you make do without, but as soon as you fully adjust you just can’t go back.

  5. I think that’s exactly right, Kyle. A lot of what gets rolled out in every new release of Photoshop (or any program) just isn’t particularly necessary, especially if you never teach yourself to rely on it.

    For instance, I use the newer Photoshop CS2 at the office and when I get back home to use my old copy of Photoshop 7, I don’t miss those CS2 features much if at all. Of course, to be fair, I’m spending most of my time at the office managing, and not doing heavy duty design.

  6. I find it interesting that so many designers put together their layouts in Photoshop. Personally, I’ve always found Photoshop to be clunky, especially in the beginning stages of the design when I’m moving elements around the page a lot. The auto-select feature is inaccurate at best in recent versions of Photoshop (especially with text), and constantly having to identify and select a layer in the layers palette really distracts me from my process. Does this not annoy anyone else? Maybe I just haven’t found the right way to work around it.

    I always start my designs in Illustrator, which allows me to move elements around the page much quicker and play with different layout possibilities without having to consider layers in my thought process. It’s only when I more or less have the layout in place that I move to photoshop to add the creative details, textures, etc.

    All that being said, if there is one Adobe app that has progressively grown worse over time, it’s Illustrator. Version 8 was a joy to use, everything since has just gotten slower and less stable and I can’t think of a single new feature they’ve added that I feel is invaluable.

  7. i have cs2, but only because i got it from my school.
    i’m happy with it.
    on another note, thanks for answering my email, khoi.
    it really helped!

  8. Glad to see that someone else has stuck with PS7. I’m also considering upgrading, but probably not until I replace my 5+ year old G4 Quicksilver with something more recent (hopefully some time this month).

  9. I use CS2, and to be honest, I could continue using CS as I’m pretty sure I don’t use any of the new features that came with CS2.

    I do all my designing in photoshop and the most used keyboard (and mouse) shortcut I use is cmd + click. Rather than going through the layer palette and searching for the layer I cmd + click on whichever layer and it becomes the active layer. This works in almost every situation for me (except when the layer is turned off).

    If I could have one wish for Photoshop, it would be nice if there were a version more for the web designers, meaning that one could styling layers similar to styling layouts in CSS.

  10. I never use Photoshop or Illustrator for the initial design, I go straight to html using background images I can switch on and off by commenting out a few css rules for the grid.

    Just wondering, was this design implemented in html, or did you use the Photoshop document for the presentation?

  11. I really think you should try out Adobe Fireworks, which is like Photoshop for web graphics. It gives you a lot less tools than PS, but the tasks you need for mockups are consideably easier to use.

  12. I’ve been using Photoshop 7 until quite recently too. I have to say though that the new interface in CS3 Beta is very nice when working on a single monitor machine. So I think I will be taking advantage of the fact that you can still upgrade to CS3 from Photoshop 7, I was worried I was going to be left out in the cold!

  13. Adobe are notorious for their overloading each upgrade with tons of new palettes and filters. CS3 looks promising, but you should be able to fine tune any adobe app to your needs a lot more – delete features you don’t want etc., Like a master prefs for the app. Strip it right back to the essentials you use. Would be especially handy for overwhelmed non-professionals or students. I don’t understand why many apps don’t work like how you buy web software, fonts or a CMS – buy the basic app cheap, then if you want extra features pay for them separately. I have CS2 illustrator and Pshop but I never use them as they are slow and only use illustrator CS2 when I need to ‘streamline’ something. Oh, how I loved Streamline 😉

  14. Universal vs. Rosetta is quite a sticking point for the growing minority of us on Intel Macs. I must admit to being a version laggard too, but the CS3 Beta runs on my humble Intel Mac Mini with a responsiveness difficult to shake a pointy stick at: even compared to CS1 on a dual 2.5GHz Power Mac G5. Adobe have clearly used a lot of their existing Intel expertise and brought the necessary tuned parts over from the Windows builds.

    Having a quiet, cheap, little Mac hooked up to a meaty display makes for a compelling Photoshop machine. Especially if like me you already had the display but couldn’t quite stretch to one of those sweet 24″ iMacs.

    So in conclusion: give CS 3 a try if you can. Just give it a few minutes to feel the speed difference on an Intel. It doesn’t seem to perform so badly on my 12″ PowerBook either, but as it’s the 2003 Universal vs. Rosetta is quite a sticking point for the growing minority of us on Intel Macs. I must admit to being a version laggard too, but the CS3 Beta runs on my humble Intel Mac Mini with a responsiveness difficult to shake a pointy stick at: even compared to CS1 on a dual 2.5GHz Power Mac G5. Adobe have clearly used a lot of their existing Intel expertise and brought the necessary tuned parts over from the Windows builds.

    Having a quiet, cheap, little Mac hooked up to a meaty display makes for a compelling Photoshop machine. Especially if like me you already had the display but couldn’t quite stretch to one of those sweet 24″ iMacs.

    So in conclusion: give CS 3 a try if you can. Just give it a few minutes to feel the speed difference on an Intel. It doesn’t seem to perform so badly on my 12″ PowerBook either, but as it’s the 2003 <1GHz original, it was never particularly awesome even on PS7.

  15. One thing that makes CS2 essential for me, and the thing that I miss when I sit on a workstation with CS or older, is the ability to select multiple layers with Shift+Click or Ctrl+Click and working with them this way (just like you would select multiple objects in Illustrator), as opposed to linking in previous versions of Photoshop. Actually with CS2 I don’t link layers anymore. Also.. maybe it’s just me, but on my work machine (Windows / Intel), CS2 feels snappier than CS.

  16. Acrobat 5, for me. In version 8 the Reader (why Reader instead of Acrobat Reader — does it read anything besides PDFs?) only takes 100MB, while Acrobat 5 folder is only 90MB.

    Actually, the way application folders get fatter is worrisome:
    и Acrobat 5 – 90MB,
    и Acrobat 6 – 380MB,
    и Acrobat 7 – 450MB.

  17. I can’t stand how slow recent versions of PS have gotten, especially trying to work on an Intel; but, after using CS2 I can’t stand going back to earlier versions for two reasons:

    1) Smart Objects – I used to bring in an image, keep a large version hidden and rescale a duplicate, no more i say!

    and more importantly

    2) Select multiple layers, and edit multiple text layers. I can’t tell you how much of a difference this makes to my workflow – it makes up for the slowness of emulating on Rosetta.

    But I really would love a lighter Photoshop for web designers (I know, I know, try Fireworks)

  18. The speed issue makes sense but not the feature issue, you old geezer!

    I like to my push mower ’cause I know how to fix it and it ain’t got no gas powered parts. Only kidding.

    You are right my CS2 is slow as @$#^@! on my G4 PowerBook.

  19. Photoshop 7 eh? I can give you one small, but excellent reason to upgrade: the Underline.

    In PS7, the text underline was one or two pixels too high and didn’t look like a HTML underline. For that reason alone, mockups done in Photoshop look weird and sometimes you have to go in and manually adjust draw the underlines. In CS2, that’s fixed and a simple underline looks exactly the same as it does online.

  20. That is a good reason; it’s amazing how long Adobe let that tiny feature remain broken.

    As I mentioned, I benefit from that and other improvements when I use Photoshop CS2 at the office, but I haven’t come to really rely on them. None of them seem crucial to getting design work done.

    But with CS3’s speed improvements on Intel Macs, I feel like I can finally justify paying for an upgrade and taking advantage of those little enhancements — like proper text underlining — that have been added over the course of the past two versions.

  21. FYI, underlines suck in CS3.

    I did my last 2 mockups sans-underlines because I just didn’t have the patience to draw them manually and I couldn’t stand the look of the way CS3 rendered them.

  22. We skipped CS2 at our studio, but I’m pushing hard for the upgrade to CS3 in some form. (Can’t decide between standard, premium, sharkskin, mango flavored and ultimate.)

    Anyway, the smart layers (filters on a layer) is what I’ve been waiting for FOR years. Being able to “paint” the unsharp mask on, just like I do with color correction via Layer Masks makes it all worthwhile.

    I have this feeling that Adobe KNOWS they have us by the short hairs. Intel goodness + lovely new features in PS == MUST HAVE NOW, DON’T CARE WHAT IT COSTS type behavior.

  23. Funny timing. Kevin Tamura and I were just talking about the best way to work with grids in Photoshop. I’ve got the same issues with guides that you do, plus I find them really annoying to turn on and off.

    What I came up with is almost exactly what you’ve got here, not surprising as it seems to be the logical way to do it. Now, if only CS3 had an option that’d do the math for me…

  24. Guides become actually useful (read: accurate) to me once i discovered that if you shift-drag, they will snap to your current ruler’s increments. Then you won’t have to worry which side items are aligned to.

  25. derek,

    I use the shift + drag guide too, but it only works if you are zoomed in/out at the level where the increments of pixels are to your liking, which for me is about half the time.

    When I do this I generally zoom in enough to where there is a 1px increment in the ruler.

  26. Re: Guide Snapping…

    Turn on “Snap To Edge” for guides. Then use the rectangular marquee (which always snaps to whole pixels) to draw out your boxes. With the selection still active, pull out your guides, and they will snap perfectly to the edge of your marquee.

  27. I use Illustrator mostly because I can rough out things faster that I ever could using Photoshop. I do usually have to go back and re-render most graphics because they lose their sharpness in AI.

    CS2 was a step forward in stability, but isn’t without it’s quirks. I like the inclusion of paragraph and character styles… keeps the me in check on the number of text styles I will encounter when going to code. (Window>Type shows character and paragraph styles)

  28. An interesting piece.
    I currently use guides, and have done for many years. Easy to create new grids with exact measurements, shift-snapping etc.

    The inaccuracy drives me nuts, of course, so I read this with interest.

    I have to argue with Keith, who says he finds it really annoying to turn them on and off. Wha?! A press of cmd-; and they’re hidden. If you use Vinh’s method of different layers for grids, that’s harder to quickly flick them off and on.

    Khoi, these grid layers look to be a good idea. So I’m going to try and integrate them *with* guides, and fuse my own working process, taking the best bits from each practice. That’s really what designs about, after all 🙂

    I think from the recent versions of Photoshop, the only feature I would miss would be Layer Styles. I use them so much for simple things like colour overlays, gradients and textures, and would feel like I had one hand tied behind my back without ’em.

    I’m a firm believer that 90% of Photoshop users (in any profession) only use 10% of its features.

    Another vote for CS3. I haven’t tried CS2 on my Intel Macs yet, straight to CS3 beta. The speed increase is great, over my G5/CS2 combo.

  29. While I’m not sure I understand all the intricacies of guides in Photoshop, I do know this:

    – It’s possible to position a guide “somewhere between two pixels”. That is, if you’re zoomed in and you drag a guide, you can (and most likely will) end up positioning it not at the left or the right of a specific pixel, but somewhere in between. Really weird, but true. However, content (obviously) cannot be positioned between two pixels, and thus you end up with some content at a pixel, and a guide juuuust to the left or right of that content.

    – But there is a fix! Hold down shift after you’ve started dragging the guide, and you’re constraining the guide to move one whole pixel at a time, thus ensuring it doesn’t end up sitting between two pixels.

  30. Completely off-topic but ah…yes…PS7! The prefect mix of features and responsiveness. CS1 and CS2 are just…slow; software must be able to keep up with your mouse pointer, and CS1 or 2 can’t while PS7 can…

    Plus, upgrading for features you use once a year…nah.

  31. Just wanted to chime in quickly. If you are still in Photoshop 7 you are missing out on great features like smart filters (filters that can be applied without rasterizing your layers) and smart objects (PSDs within PSDSs) — smart objects especially can make folders completely obsolete and give you the freedom to scale back up. With above additions Adobe is making some good strives in the direction of non-destructive and resolution independent image manipulation.

    That said Photoshop is aging and in the way Adobe is implementing new technologies on top of it’s legacy ways, it feels much like grandpa is more concerned trying to prevent breaking a hip than to hobble up stairs and innovate. Photoshop is doing too much in too many different ways to please everybody, no wonder it exhibits erratic neurotic behaviours.

    I can understand that Adobe doesn’t want to alienate it’s user base, (I remember, I first opened up PS 2.0 in 91) but if it can’t make the journey any more, I think it’s time for another application to start fresh. Everbody cries out when things change, but when they do change for the better the noise quickly dies down and you are left which much happier, more productive users.

    That said, I would like to advocate change: If we are designers working to improve things for the better, shouldn’t we look for that in the way we work as well?

  32. I’m with the Illustrator crowd. I find it much faster to work in than Photoshop. I guess I need the pasteboard for quick ‘to-and-fro’ing. File sizes are much smaller. For a site redesign, I’ll often use Photoshop, which allows me to play with the existing layout.

    I’m also on PS7, I10, etc. I hate to pay Adobe for lack-luster new features, especially when they introduce as many new bugs each time, and they refuse to fix old bugs. I’m very disappointed with the way Adobe is operating… Let’s not talk about Acrobat or FrameMaker…

  33. With all the Illustrator/Photoshop discussion, I’m really surprised no one’s mentioned Fireworks. It doesn’t do everything Adobe’s products do, but it’s very easy to use, lean and, most importantly, built for the purpose.

  34. I’ve used Fireworks before, and I can see the appeal. But what I remember was that it’s pretty slow, sometimes painfully slow. Has the latest version been improved for speed?

  35. Yes, PLEASE tell me if the new Fireworks is faster! I am sitting here right now, trying to convince myself to buy the new Studio 8 upgrade.

    (I think I’m going to do it anyway, just for Flash 8. I must have been taking a nap when that suddenly became the new standard for video.)

    But I love Fireworks, and would love it more if it would only stop wheezing when I toss more than a couple of megapixels at it.

  36. Apart from the guide snapping (I use Byron’s tactic to get arround that) what drives me mad in all Photoshop versions is the inability to select transparent layers with comman+clicking on them. I havent upgraded to the CS3 release and I hope they have fixed this.

  37. I’m with you on the reasons for using older versions. I kept using PS 5.5 for a long time before moving up. Never fooled with v6 much; I think I went straight to CS2 (involuntarily–it’s a long story involving Katrina). Before 5.5, I stuck with v2.5 because 3 was so klunky and 4 didn’t seem like any improvement. Likewise with earlier versions of Illustrator. Why do they have to keep slowing it down? It boggles the mind.

    That said, I use both Photoshop and Illustrator for my web comps. Illustrator for unique bits of type, and Photoshop for assembly. Lately, I’ve started using Quark as well, it works pretty well for creating the “run of the mill” page type. Then I take a screen shot of my Quark type and drop it into Photoshop. (My programmer likes to complain about Quark’s horrendous CSS, oh well!)

    I will also chime in on the Photoshop guide complaints–they’re never consistent. I think the reason why is that when you set the guides, Photoshop will let them fall between pixels, leading to the erratic behavior. Why can’t it snap the guides (when placing them) to the nearest pixel? C’mon, Adobe!

  38. CS2 crashes my G5 every time I start one of the applications – UNLESS I manually go in and remove half the fonts from my font folder. That and the irritating way it won’t let you select folders using the spacebar-click shortcut… I’ve reverted to using my CS1 apps.

    This time I will run the demo version of CS3 for awhile before automatically jumping on to the upgrade bandwagon and plunking down over a grand just for the UPDATE.

    My hope – better integration with Dreamweaver and especially Flash. Anybody have any experience- pro on con- along those lines?

  39. For the kind of interactive work I do in the game industry, I am increasingly finding PS to be a bottleneck. After Effects is making a strong showing however.

    Pluses:
    – guides work as you’d expect and snap to pixels, not subpixels

    – all filters and transforms are both parametric and non-destructive

    – any element can relate to any other using javascript, which is great for prototyping things I’ll later be implementing in Lua.

    – marks (like PS) can be both vector and birtmap based, however parametric control of masking is exceptionally useful + creative

    – UI is significantly better organized & configurable than PS

    – trivial to replace assets with other assets without altering the keyframes, scripts, settings you worked so hard on!

    The Big Minus…
    Asset management is a nightmare when projects grow past a certain size

  40. Hey Khoi,

    I actually asked you that exact question after your presentation at SxSW. I owe you a ton I’ve already used the technique on two projects since then! As for the CS3 upgrade, it’s definitely worth it just for the speed boost alone. The older versions of photoshop are terribly slow compared to the new version on intel macs. I used the CS3 beta and it booted up in only 2 seconds on my macbook pro.

    – Jim

  41. My process looks pretty similar, with one little but handy trick. I set up an action on F1 which makes the folder named “Grid” visible, and Shift+F1 does the opposite, making it much faster and easier to see and disappear the grid. As long as you always name your grid folder exactly the same, it’ll work in any PSD.

  42. I love Art.I have a strong Photoshop work skill & experience So Plz give me a chance where I can apply my art fillings & gather experience.

Thank you! Your remarks have been sent to Khoi.