Category Archives: User Interface

Introducing Photoshop Touch

Multitouch, Photography, Photoshop Touch, Tablets

Combine, Edit, Share. I’m delighted to introduce Adobe Photoshop Touch, a new tablet app for creative imaging. With PS Touch we’re bringing Photoshop fun & power not only to new platforms, but to a whole new audience.

Here’s my brief overview:

To see the app in action, check out Russell Brown’s 10-minute feature tour:

So, when can you get it, and what does it cost?

We plan to release Photoshop Touch for Android shortly, after which we plan to bring it to iOS. When we talk about reaching new audiences, we’re not kidding: Photoshop Touch is priced at just $9.99.

So (to anticipate an inevitable question), why Android first? Many Adobe apps (Adobe Carousel, Ideas, Photoshop Express, Eazel, Color Lava, Nav) have already been released on iOS first, and it’s good to support customers across platforms. We’re busily coding for iOS as well, so I wouldn’t make too much of this particular detail. No matter what tablet(s) you use, we can’t wait to get Photoshop Touch into your hands.

One last thought for now: We’re still very, very early in the evolution of mobile devices for creative work, and Photoshop Touch–along with the many other Adobe touch apps announced today–is just a beginning. We’re eager to hear what you think, and I’m looking forward to hearing ideas & questions here and on Twitter (@PhotoshopTouch). (Today I’ll be largely offline, showing the app in person at Adobe MAX, so I apologize in advance if I’m slow to respond.)

What's with Photoshop & multiple undos?

User Interface

Over on feedback.photoshop.com, customer Michael Piontek notes the following:

Unlike most modern apps, Photoshop only has a single “undo”. If you press command-z a second time, Photoshop will redo the change instead of continuing to undo. Not even Illustrator or InDesign works this way at this point.

To work around this issue, I customize my keyboard shortcuts to use “step backward” (command-z) and “step forward” (command-shift-z). For the most part this works great and I’ve been very happy with it.

But it brings up a new problem: if I change the selected layer, then press command-z (“step backward”) then the layer change is undone as well.

Michael is touching on two separate issues:

  1. The keyboard shortcuts used for undo/redo
  2. Layer selection changes when using “step backward” instead of “undo”

1. Photoshop’s unusual Cmd-Z mapping is due to the fact that the app lets you toggle across multiple history states in one keypress.

For example, you might do something, then click 10 steps back in the History panel.  Let’s say you then hit Cmd-Z.  Would you expect Photoshop to undo the most recent operation (getting you back to where you’d been prior to the last click), or to go to the 11th-back history state (that is, to go further back in time)?  I’d expect PS to do what it does now: it undoes the click instead of digging me deeper.

I’m not sure it’s possible to preserve the current (and to my mind correct) behavior while also making Cmd-Z work in the more common way (which would also be correct). Of course PS could ask customers to make a choice via a dialog, but that’s just a recipe for blank stares.

2. I can’t think of a good reason for the current behavior. When Photoshop added multiple layer selection in CS2, we made some changes to avoid problems caused by old crutches for not having the ability to select more than one layer at a time. This behavior with the layer selection changing when using “step backward” appears to be a rough edge from that work, so it’s worth asking the team whether this behavior can be changed.

Note that a user has provided nice workaround leveraging a script.

[Thanks to Jeff Tranberry for his assistance in researching these questions.]

Beautiful Kinect Graffiti

Multitouch, User Interface

Jean-Christophe Naour uses the motion-sensing gaming platform to paint with light, using his whole body:
[Via]
I’ve had a somewhat similar idea: use the gyroscope a smartphone (or multiple phones) to capture a person’s gestures in space, then use the resulting paths to do 3D painting & animation. That work could happen on the phone itself, or the paths could be imported into After Effects & other apps (think MotionSketch.next.), or even run interactively in Flash, WebGL, etc. Maybe the idea’s too esoteric to have legs, but I’d love to see it tried.

How to collapse/expand Photoshop layer groups (folders) at once

User Interface

Designer Erica Schoonmaker tweeted the other day,

I wish there was a shortcut to collapse all layer folders in Photoshop.

There is! Thanks to Jeff Tranberry, I can now point out the following*:

  • Open/close all layer groups (folders) at the current level of hierarchy: Cmd-click the arrow next to the group
    • This is handy when you want to open/close, say, all the top-level groups without disturbing the open/closed state of any groups nested within them.
  • Open/close all layer groups nested within the current one: Opt-click the arrow next to the group
    • This is nice when you want to open/shut a bunch of nested groups, without affecting any that lie outside the target group.
  • Open/close all layer groups, period: Cmd-Opt-click the arrow next to a group

 

So, to keep things simple: when in doubt, Cmd-Opt-click a group’s arrow and you’ll collapse/expand all groups.

*On Windows please substitutes Ctrl for Cmd and Alt for Opt.

Feedback, please: A Photoshop iPad companion

Tablets, User Interface

In August I asked for ideas on tablet-based companions for Photoshop, and last week at MAX we demoed a paint-mixing prototype. Now the designers have taken a crack at mocking up some companion features that could run on a phone or tablet.
In a nutshell, you get:

  • groups of task-based tools & commands (e.g. all your photography/retouching tools & buttons on one page, or all your painting ones, 3D ones, etc.)
  • interactive, task-based tutorials that drive Photoshop, helping you get things done

The idea is to let you work faster–offering more organized access to tools & knowledge. What do you think? What would you pay for this?

Feedback, please: Potential Web/drawing features in Photoshop

Illustration, User Interface

Photoshop’s vector shapes & layer effects (strokes, gradients, etc.) are mainstays of Web & mobile design work, but they haven’t gotten updated in a while.  If the Photoshop team were to improve this area of the app, what improvements would you find the most important?

The following list isn’t exhaustive, but it includes popular requests we’ve heard.  It would be great to get your feedback via this quick survey.  We can’t do everything (certainly all at once, anyway), so please let us know what matters most.

 

  1. Enable “real” vector shapes (stroke & fill directly editable, without reliance on layer effects or a dialog box)
  2. Support dashed- and dotted-line strokes
  3. Enable smart shapes:
    1. Preserve corner roundness when scaling rounded rectangles
    2. Support other parameterized shapes (e.g. stars with an adjustable number of points; lines with arrowheads)
  4. Make various layer effects enhancements:
    1. Apply effects at the layer group level
    2. Re-order effects
    3. Duplicate effects (e.g. apply multiple strokes per layer)
    4. Enable panel-based editing of effects (instead of relying on a dialog box)
    5. Add/edit effects on multiple selected layers at once
    6. Make graphical styles “live” (i.e. if edit the style definition, all styled objects update)
  5. Enable layer search (i.e. type to filter by layer name or attributes)
  6. Improve snap-to-pixel behavior
  7. Improve text rendering
  8. Export text & graphical styles as CSS
  9. Support guide sets (e.g. for grid layouts)
  10. Support linked files (i.e. edit one file to update buttons, icons, etc. across multiple PSDs)

 

Notes:

  • We want to know what’s more important than other things, so please bear that in mind when assigning relative ratings.  (That is, don’t make everything “extremely important” or “not important.”)
  • Please don’t tell me that Photoshop should never be improved vis-à-vis Web & mobile design, and that everyone should use Fireworks (or Illustrator or whatever).  You may be completely right about those apps, but it’s just not relevant to this survey.
  • Inevitably there’s some amount of overlap among these items (e.g. applying effects at the layer group level would offer an alternative to applying multiple copies of one effect on a layer; for example, you could stroke a layer, then add another stroke on a group containing that layer).

 

Many thanks in advance,
J.

Tablet companions to Photoshop?

Tablets, User Interface

In playing with Photoshop Express for iPad, Jesus Diaz from Gizmodo observed:

I got a craving for something very simple, which I hope Adobe can make (and which will be extremely useful for me and other desktop Photoshop users): Release an application to convert the iPad into a Photoshop control surface. I will love to display this application while I’m working on the image and quickly use it to apply filters and transforms. Or just access many of the Photoshop tool palettes, adopted to touchscreen use.

Photoshop-control apps such as Photokeys, Keypad, and perhaps others already exist & have for some time.  Do you use them?  I haven’t encountered anyone who’s mentioned using them, but that doesn’t mean it’s not happening.  How widespread is this desire?

Other companion ideas that spring readily to mind:

  • Using multitouch input from a tablet to drive Liquify (for pinching, rotating, etc.)
  • Using multitouch to mix paints together, a la a real artist’s palette, then send the results to Photoshop (i.e. what gets mixed on the tablet is streamed into your PS brush)
  • Using a tool like Configurator to assemble custom layouts of tools, buttons, interactive tutorials, etc. that would run on a tablet and drive desktop Photoshop
  • Other?

Your feedback and ideas would be most welcome.

Thanks,
J.

The Van Halen of cameras

Photography, User Interface

Apparently people are digging Samsung’s two-screen compact camera, which features a now-larger front-facing screen for compositing self portraits (and hypnotizing babies).  Interestingly, in “Jump Mode,”

The front LCD will provide a visual cue to those in front of the camera to jump in unison, and immediately trigger the ST600 or ST100 to take three consecutive images to help users capture an image that essentially freezes their subjects in mid-air.

Also interesting:

The Smart Gesture UI allows for the quick access and use of key features with either a simple tilt or a hand gesture. Users can quickly scroll through photos by slightly tilting the device in either direction, swiping their finger across the screen, or by selecting the appropriate photos for a slide show.

Video: Local layering ideas

Image Science, Uncategorized, User Interface

Jim McCann is a graphics researcher (you might remember his interesting work with gradient-domain painting), and I’m happy to say he’s joining the Adobe advanced technology staff. He has some ideas about dealing with the limitations of traditional graphical layering models (as seen in Photoshop, After Effects, Flash, etc.):

For more videos & papers on the subject, check out the project page. [Via Jerry Harris]

Stylus recommendations?

Tablets, User Interface

Why is it I can draw more accurately with our 2-year-old’s Magna Doodle than I can with an iPad? Simple: it’s the stylus.

I tried a stubby Pogo stylus a few months back and had an instant aversion to drawing with a big, flat, round disk. I see that other styluses are available, but I’ve yet to find a good set of comparisons. If you’ve successfully used a stylus to draw on an iPad, I’d like to hear your recommendations.

Incidentally, the imprecision of drawing with a finger certainly raises the value of natural media brushes (e.g. a realistic pencil simulation). Crappy input driving a high-precision line looks bad, but crappy input driving a deliberately crappy (sketchy) line looks more like “I meant to do that.”

[Update: Incidentally, just so people know, I’m not completely incompetent when it comes to drawing.]

The spinning progress indicator in Photoshop CS5

CS5, User Interface

I’ve heard a number of questions about the new spinning progress cursor (screenshot) that Photoshop CS5 uses. The cursor simply replaces the 1984-vintage MacApp watch cursor (non-standard in Cocoa), for which Apple provides no modern replacement on OS X.

Pierre Igot and others are mistaken in thinking that the CS5 cursor is an alternative to (or, more damningly, an attempt to hide) the “spinning beachball of death.” Photoshop uses the beachball when it’s warranted–i.e., when the app is unresponsive. (The beachball is provided by the OS when the app doesn’t process user interface events fast enough.) It has always used the watch cursor in other cases, where the app is busy performing a task but isn’t locked up, and where the task should be done shortly.

Let’s say we’d (inappropriately) started using the beachball in all cases where we’d previously used the watch cursor. Though it would have no impact (positive or negative) on performance, it would have a big impact on perceived responsiveness, and we’d start hearing “CS5 locks up all the time!” This would be especially profound given persistent misperceptions (arguably deliberately cultivated) of what 64-bit means.

Let’s say that instead of using the watch cursor, we’d pop up progress bars all the time, where none existed in the past. Same result: same performance, unhappier customers.

Let’s say we’d stuck with the 1984-era watch cursor (which I saw pop up the other day in Safari). We’d hear “Look, PS is still Carbon/32bits in places!” You don’t think so? I actually have commenters claim that the all-caps text in iTunes (and previously Finder) is somehow due to Carbon. (And arguably, given the decline in society’s use of wristwatches, I can imagine catching flak about relying on a floppy disk-like anachronism.)

We gave this issue a lot of consideration, and ultimately there wasn’t a perfect solution, so we chose a route that modernized the app UI without misusing standard Apple UI or misrepresenting app responsiveness. Maybe it’s something we can improve in the future, and we’re certainly open to feedback.

Of course, the real issue here has very little to do with one cursor vs. another. It has to do with a question of whether Adobe builds “real” Mac software. We do, and we’re making more progress all the time. There’s a lot of detail to unpack here, and being on the road, I can’t get into all of it now. I’ll try to do so soon, and in the meantime you might want to see my thoughts about platform consistency.

Brief thoughts (and a question) on tablets & styluses

Tablets, User Interface

When did my finger start resembling a giant breadstick? More on that in a moment.

Of tablet computers Steve Jobs recently said, “If you see a stylus, they blew it.”

I think he’s right, insofar as he’s talking about requiring the use of a stylus. There’s a big difference, however, between requiring something and enabling it as an option.

Regarding the former, ten years ago I bought and almost immediately returned a big Kyocera-Palm frankenphone. I loved the promise of a phone/pocket computer, but having to pop out a stylus to perform even the simplest tasks was a deal breaker. In contrast, my simple Nokia offered just two soft keys and a rocker switch, but that simplicity led to an efficient UI. Forcing me to use a stylus forced me to ditch the phone.

When it comes to drawing and painting, however, using a finger really sucks for anything precise. Yes, a talented artist can do impressive work, but there’s a reason people don’t use their fingers to draw and write on paper. Have you tried drawing anything with any precision on an iPad? (Don’t just launch an app and screw around; try to draw something very specific.) Maybe it’s just me, but suddenly my fingertip looks enormous, blotting out the area I’m trying to mark. I find myself tipping my whole hand up and down, trying to see what’s underneath my finger.

I don’t know what can be done with the I/O on iPads and future tablets, but I really hope that a vendor can deliver a pressure-sensitive stylus. I think it would be a watershed moment for sketching on the go.

Question: Would you be willing to pay for such a thing? And if so, how much?

PS–Yesterday Steve acknowledged the imprecision of a finger: “The minute you throw a stylus out, you have the [reduced] precision of a finger, you can’t use a PC OS.”

PPS–Somehow I neglected to mention an insight gained talking with artists at Pixar and elsewhere: they find drawing and painting on an iPad interesting, but in a sort of abstract, intellectual way–until you show them the ability to smudge pixels with a finger. That’s when they start lighting up. Pretending that one’s finger is a pencil isn’t that interesting, but using one’s finger as a finger *feels* deeply correct. There’s some kind of lower-brain connection that brings out a lot of smiles.

The Knowledge panel arrives in Photoshop CS5

Configurator, CS5, User Interface

Sometime in the last 48 hours, your copy of Photoshop CS5 quietly sprouted some new functionality. We hope you like it, and we’d love to get your feedback.

Adobe is now delivering the Knowledge panel for Photoshop (see screenshots). This tool delivers interactive step-by-step guidance, walking you through some 70 tutorials written by expert authors. Unlike other tutorials, these can drive Photoshop: clicking links executes commands in PS (e.g. clicking “File->New” brings up the New Document dialog box).

To try out the new panel, make sure you’ve logged in using your Adobe ID and password (click the little “CS Live” icon in the upper right corner), then look for Knowledge under Window->Extensions. You may need to quit & relaunch PS after logging in. (Details below.)

So, why is this important?

In brief, it lets the community make Photoshop smarter & easier to use, leveraging the Web inside the app.

I’ve long been frustrated that Adobe applications–like most large, powerful apps–simply throw the user into the deep end of the functionality pool. Very little in the interface suggests how pieces can or should be used in sequence to achieve a goal. The apps are highly flexible & very general, but users tend to suffer from “the paradox of choice.” They know the app is capable of X, but they don’t know how to do it, and they may feel foolish & resentful.

I’ve long thought we could do better, and last year I presented some ideas for a more task-based Photoshop UI. As I wrote then, we had two goals:

  • Present a more streamlined interface (“everything you need, nothing you don’t”), showing only the tools and commands that are relevant to the task at hand
  • Present best-practice guidance on how to accomplish specific tasks (“not just yet another way to do something, but the *right* way”)

The Knowledge panel delivers on the second of these. Our plan was to deliver it together with a complimentary Toolbox panel (screenshot), tying the contents of both to workspaces. That way, when you’d click “3D,” Photoshop would not only rearrange your existing panels; it would also present just the tools needed for 3D work (plus contextual information), as well as step-by-step guidance on completing common 3D tasks. The same would go for painting, Web design, etc.

Unfortunately we ran out of time to deliver everything in the box. Thus we’re delivering the Knowledge panel as an update, and if you’d like to check out the (somewhat unpolished) Toolbox panel, you can download it here. The Knowledge panel auto-installs in English only, so if you’re using another language version of PS but would still like to use the panel, please grab it and install it. Relaunch Photoshop after installation, and then look under Window->Extensions for each panel.

Both panels were built in Configurator, so you’re welcome to grab the source files to see how they were made. I plan to post details soon on how to drive Photoshop from HTML. I hope to see many authors enhancing Photoshop in this way.

Because of the way the CS5 dev cycle played out, this release offers us a chance to test drive these enhancements without making them a marquee feature. We’re eager to hear what you think. Is this stuff useful? Should we take it further? Please let us know. [Update: here’s a very quick poll.]

Thanks,
J.

PS–I’m incredibly grateful to the many authors (too many to list here) who contributed content, to the Adobe Learning Resources folks, and to Victor Gavenda and the excellent, patient folks at Peachpit who really tied the room together.

Using Mixed Case panel titles in Photoshop CS5

CS5, User Interface

The ALL CAPS panel tabs in CS4 and later are one of the more polarizing aesthetic details of the applications. If you’d like to change Photoshop panel tabs to Mixed Case, grab this plug-in (Mac) or these registry entries (Win).

On Mac drop the plug-in into the “Adobe Photoshop CS5/Plug-ins” folder; on Windows double-click the “DisableUppercaseTitles_ON.reg” file.
[Update: You can do the same in InDesign CS4/CS5. Colin Fleming writes, “Create a folder, name it ‘noallcaps’ (one word, no spaces, no caps), put this folder in the InDesign application folder–done!”]

"Use Legacy Shortcuts" option in CS5

CS5, User Interface

In Photoshop CS4 we changed a number of keyboard shortcuts related to selecting and targeting color channels. At that time I posted a plug-in (Mac)/registry entries (Windows) that one could use to switch many of these changes back to the CS3-and-earlier behavior. To make things easier to discover, in CS5, there’s an option in Edit>Keyboard Shortcuts… to “Use Legacy Channel Shortcuts” (screenshot). That is, you no longer need to use the plug-in/registry entries.

Note that this option can’t change things entirely back to the old behavior. Moving adjustments from modal dialogs to a non-modal panel simply means that some commands would now conflict (e.g. hitting Cmd-1 can’t both display a channel & target a channel). See my earlier post for a more detailed list & explanations of why this is.

Using a dialog box to edit a Curves adjustment layer

CS4, CS5, User Interface

In response to my notes on how we’ve polished the Adjustments panel in Photoshop CS5, I saw a couple of requests for a way to edit adjustments (especially Curves) via a dialog box instead of via a panel. To do so in CS4 you can download and use this panel (screenshot). In CS5 the architecture that supports extension panels has changed, so you need to grab the CS5 version of the panel.
In case you have trouble installing the panel via Extension Manager*, you can download this plain-zipped version (or the CS5 version). Unzip it and drag the resulting “Curves – Dialog” folder into your “Adobe Photoshop CS4/Plug-Ins/Panels” directory.
* If you’re getting permissions errors on Windows Vista or Windows 7, try right-clicking the Extension Manager icon, clicking Properties, selecting the Compatibility tab, and checking the “Run this program as an administrator” checkbox.

Doing the right thing with Cmd-H

JDI, User Interface

Here’s another little glimpse into the future:
Cmd-H_1.png
As I’ve written previously, when OS X took over long-standing Photoshop shortcuts, it created a tricky situation: break Photoshop users’ habits/flow by changing PS to match the OS, or deviate from the new OS conventions?

In Photoshop CS4 we changed Cmd-` (Cmd-~) to cycle among open documents, matching the standard Mac convention (while continuing to honor the Windows-standard convention, Ctrl-Tab, as well). As expected, it’s been a painful move for some customers*, but sometimes that’s necessary.

With regard to Cmd-H, Photoshop’s keyboard shortcut editor has long made it possible to assign Cmd-H to hiding the app. Doing so takes just a few seconds, yet many people are unaware of this or unwilling to invest the time. Therefore our plan is that in the future, the dialog you see above will pop up once (on Mac only) the first time you hit Cmd-H, asking which behavior you prefer. Special thanks to John Gruber (who independently suggested this solution) for offering the team some timely words of encouragement.

Yes, in terms of these little tweaks, there’s always much more to be done, but we made some good progress in CS4 and plan to make even more in the future. I thought you’d like to see a little proof of that commitment.

* It’s possible to switch shortcuts back by dropping in a plug-in/running a registry entry (here’s the download). In the future we plan to make it easier to control this preference inside Photoshop.

The littlest things

User Interface

[Warning: Contents may cause excruciating boredom.]

I switched from Microsoft Entourage (sorry, old friend) to Apple Mail a few weeks ago*, and I’m almost embarrassed to note my favorite “feature”: Mail doesn’t abusively “help” me by inserting a space before pasted text. Entourage would drive me crazy with that behavior, especially when putting URLs between parenthesis.

On the other hand, I loved how Entourage would auto-insert the correct accent when I’d type “vis-à-vis” (<–pretentious much? sorry). Maybe more importantly, when I’d tab from the address field to the message body, Entourage would remember the previously active insertion point in the body text. (Who cares? I care, as apparently I tweak addresses/subject lines with some frequency.) And Entourage would also keep everybody on the “To” line when replying to all.

Why am I boring you with this? Okay, yes, things are a bit quiet in the office today, but I also want you to know that I’m a perfectionist. I’m writing up a long and hopefully thoughtful piece about the Photoshop UI (responding to recent posts**), and “sweating the details” is a big, big deal to me–and to many of my colleagues. More interesting bits to come.

*Why? By not relying on one giant database, Mail should play better with Time Machine (and, I’m hoping, be less vulnerable to global freak-outs).
** Let’s not try to delve into a discussion of those other points yet. Sit tight. I’m writing a lot.

Inspector panels: Food for thought

User Interface

In previous entries I’ve noted the need for a properties inspector/editor in Photoshop:

The richness that’s possible in a PSD file has totally outstripped the Layers panel’s ability to display & control it. […] Photoshop needs a properties inspector, a panel that lets you view & adjust the parameters of the selected object. […] Such a panel can supplant & control other dedicated panels, making it possible to display more info & yet fewer panels on screen.

New panels in CS4–Adjustments, Masks, and 3D–represent movement in this direction. It’ll take time to unify things more fully.
I mention this because I happened across UI designer Keith Lang’s inspector ideas & thought you might find them interesting:

Some of the details remind me of what’s been shown in Adobe’s interesting “Rome” application sneak peek (worth popping into full-screen mode):

Lots of good food for thought. Feedback is welcome as always.

New panel, scripts let you batch-eliminate "copy" in PS layer names

Configurator, CS4, User Interface

God bless scripters and the spirt of “Just Do It.” Responding to reader feedback here about the desire to remove “copy” from duplicated layers, scripter Mike Hale used Configurator to create a simple panel (screenshot) that does just that–nuking “copy {#}” from all layers or just the selected layers.

  • The panel for Photoshop CS4 is downloadable from PS-Scripts.com. It’s wrapped as an MXP file, meaning you can simply double click it to install it using Adobe Extension Manager. After installing the panel, relaunch Photoshop and look under Window->Extensions for “RemoveCopy.”
  • Sometimes Extension Manager doesn’t play well with Vista (as I think it requires you to be logged in as an administrator), so I’ve posted the panel in a simple ZIP package as well. You can unzip the contents, then place the panel folder into “Adobe Photoshop CS4/Plug-ins/Panels.”
  • You might want to use the scripts on their own (not via the panel), especially if you like to assign keyboard shortcuts to commands. You might also want to use them in CS3 or older versions of Photoshop. Therefore I’ve posted just the scripts as well. Drag the expanded contents to “Adobe Photoshop CS{whatever}/Presets/Scripts,” then relaunch PS. Once they’re installed, you can choose Edit->Keyboard Shortcuts & assign shortcuts if you’d like.

Thanks to fellow coders Trevor Morris and Jeff Tranberry for their quick help in making this happen. Please give Mike props & speak up if you encounter any problems.

Photoshop, you're a tough old bird

Idle Philosophizing, User Interface

How do you change wings on a plane while it’s still flying?

We sometimes feel that way working on Photoshop. It’s essential to keep improving the app, yet with such a rich feature set and so many things baked into customers’ muscle memory, we have to be very wary of breaking workflows. It can be tougher than you’d think.

Last week we were talking about adding a command to Photoshop’s Fill dialog (savvy readers might be able to guess why), and we wanted to assign a unique keyboard shortcut to it. Having ghost-written a version of the Photoshop Power Shortcuts book, I like to think I’m pretty darn knowledgeable on the subject. Yet even I wasn’t aware of all the little nuances & thoughtfulness that went into this old command.

Upon investigating, and just for your reference, here are the Mac shortcuts in play (Windows users swap in Ctrl/Alt as appropriate):

  • Delete (alone) = Clear: Fill with transparency for normal layers, or with background color for background layer
  • Cmd + Delete = Fill with background color
  • Option + Delete = Fill with foreground color
  • Option + Cmd + Delete = Fill with history
  • Option + Cmd + Delete + Shift = Fill with history and preserve transparency
  • Option + Delete + Shift = Fill with foreground and preserve transparency
  • Shift + Delete = Open fill dialog with last-used settings

There’s a whole little language at work here:

  • Opt means foreground
  • Cmd means background
  • Adding Shift means preserve transparency
  • Opt + Cmd means history
  • Therefore all four together = Fill with history and preserve transparency


[Update: Gah–I reversed the roles of Opt & Cmd above; now fixed. Just seeing whether you’re paying attention (yeah, that’s it).]

Why on earth am I rambling about all this? Tryptophan poisoning? No, just a couple of reasons:

  1. If nothing else, I thought this list of shortcuts might be handy.
  2. It’s this kind of fastidious attention to detail that made me delight in Photoshop & After Effects. I remember sitting in an AE class & figuring out the meaning of a couple of modifier keys, then combining them and seeing that, yep, they did just want I expected. My people!, I thought.
  3. This sort of “intellectual density,” as my friend on AE once called it, is exactly why evolving Photoshop is often hard & necessarily slow:
    • First things first, “Do no harm”–or as Stephen Colbert might subtitle it, “Doooon’t [Screw] This Up, America.”
    • The rules and connections are often subtle.
    • If you come up with a new, elegant solution to something, will you have time to retrofit your innovation to the rest of Photoshop? What about to the rest of the Creative Suite? And all at once, without stomping other well-established conventions? Yeah, good luck with that. So now you must choose: Innovation or Consistency?

We’re not curing cancer here. We’re not sending anyone to the moon, or writing software to keep heart-lung machines pumping. But we do care, an awful lot, about making the most beautiful, complete, cohesive tools possible. And if it weren’t challenging, it probably wouldn’t be fun.

Interesting multitouch ideas: 10/GUI & BumpTop

Multitouch, User Interface

Speaking of multitouch, the folks at 10/GUI have some interesting ideas on how to make multitouch practical on the desktop. If nothing else the ergonomic observations are spot on.

[Via]
Then there’s BumpTop, which has been around for a few years & which is now available for download. It’s cool, but as I’ve written previously, I have a hard time imagining it’ll get widely adopted. Here’s the demo:

[Via]

CS4-style Flex skins available for panel dev

CS4, Suite Development, User Interface

Commenters here sometimes slag the use of Flash panels inside Creative Suite apps, saying that Flash leads to poor UI. These comments confuse the technology with how it’s been used. Unfortunately it’s true that some SWF panels (example) have been poorly done.
Endeavoring to drive more consistency, the Adobe Experience Design & developer support teams have created a set of “Scope Skins” for use in CS4 panels. According to the download page,

Scope Skins (for Flex Builder 3) were created to skin Adobe Flex apps to provide the same UI as a native Creative Suite panel. This was done with little impact to the functionality of the standard Flex 3 components.

If you’re creating panels for use in Photoshop and/or other Suite apps, please take a look at these skins and let us know what you think.

MAX session: How to Write a Plug-in for Photoshop

Suite Development, User Interface

Next Monday from 5:00-6:30pm at Adobe MAX, Mark Niemann-Ross will be hosting an interesting session:

This hands-on session will walk you through the process of creating a Flex plug-in for Photoshop. We’ll start with a basic “hello world” shell, add a Pixel Bender filter, and then integrate an online service. You get to take your work home with you and show your mom!

Feedback, please: Task-based workspaces in Photoshop

User Interface

Ever wish that Adobe made a “Photoshop for Photographers?” Or maybe a version with just what you need for Web design, or video?

If so, I’m guessing it’s because Photoshop is so packed with features that the ones you need are needles in a stack of needles. The sheer volume of choices can be paralyzing, and people don’t feel they’re doing things the best way.

Most customers use only a fraction of Photoshop, yet every part of Photoshop is used by a lot of people. Therefore it’s difficult and painful to remove any features. How, then, can we make Photoshop fit your needs precisely without disadvantaging others?

Here’s an idea. We could revise Photoshop’s approach to workspaces with two goals in mind:

  • Present a more streamlined interface (“everything you need, nothing you don’t”), showing only the tools and commands that are relevant to the task at hand
  • Present best-practice guidance on how to accomplish specific tasks (“not just yet another way to do something, but the *right* way”)

We plan to use an upgraded version of Configurator to create custom panels that are associated with each workspace. Please see this PDF walk-through (note the explanatory annotations) and let us know what you think.

Let me be clear up front: This feature needs to be valuable to pros, not just beginners. For some reason people see “help” or “guidance” and think “newbie,” but there’s much more to the story here.

So, what do you think?
Thanks,
J.

[Related philosophical background: Photoshop as seen through Johnny Cash]

Cool interface demos o' the day

Multitouch, Typography, User Interface
  • SLAP Widgets are “real live plastic and silicone objects that are used in conjunction with a multi-touch table to allow users to control interface values through physical push buttons, sliders, knobs, keypads and keyboards.” Here’s a very cool (albeit slow-loading) video of the system in action*. (Can Slap Chop integration be far behind?)
  • Fontplore is “an interactive application designed for searching and exploring font databases… It does all that on an interactive table, using tangible objects to navigate and control actions.” The site includes a brief video demo.

I keep wanting to see great font exploration & management built into Adobe apps. TypeDNA offers a cool Photoshop-plug-in, using optical character recognition to determine a given font’s name, suggesting font harmonies, and more. I’d like to see these concepts taken even farther, offering browsing, comparison, activation, and purchase in all Suite apps via Flash panels.

* Who knew that Frustrated Total Internal Reflection is a multitouch technology & not just the story of my teenage years (okay, most of my years).

Tip: Committing a text edit in PS and AI

Typography, User Interface

Reader “ray” brought up a good point:

“On the mac, when editing text in Photoshop, hitting the enter key finishes the edit* and deselects the text. Hitting escape cancels the edit and reverts the changes.

In Illustrator, hitting enter inserts a carriage return (line break), while hitting escape finishes the edit. This inconsistency is very frustrating, as my muscle memory for these actions is constantly wrong.”

Understood. There is a consistent alternative, though: in both apps, hitting Cmd-Return/Ctrl-Return will commit your changes. Hope that helps.

* Note that on the Mac, Return & Enter are different keys. Return inserts a carriage return (line break), and Enter finishes the edit. Cmd-Return and Cmd-Enter both finish the edit. So, when you want to be done editing text, just remember to add the Cmd/Ctrl key + Return/Enter regardless of app/OS and you should be all set.

Brush locking (aka "Huh?")

User Interface

We’d like to discard an obscure feature in Photoshop & replace it with something better. First, though, I’d like to sanity-check that no one needs the existing feature. (Fair warning: This is some nerdy, slightly esoteric stuff.)

In Photoshop 6 and earlier, it was simple to control the relationship between tablet input & brush size and/or opacity. The app featured two independent checkboxes, one meaning “pressure = size” and the other meaning “pressure = opacity.” Easy peasy.

In Photoshop 7, the brush engine became much more powerful, and in the process these options got a bit harder to use. Brushes gained many new parameters (scattering, hue variation, etc.), each of which had the ability to respond to many new inputs (pen tilt, rotation, stylus wheel, etc.). Therefore the two simple checkboxes had to give way, being replaced by a series of popup menus spread throughout the Brushes panel. The placement was less obvious, but the power was much greater.

The real usability snag, however, came from the lack of clarity around brush presets (which include pressure settings & more) and brush tip shapes. People click presets, thinking they’re just changing brush tip, and they end up changing other settings as well. (From this screenshot, you can see why it’s easy to confuse the two.) The results sound like this:

“Okay, where the heck is the setting for pressure = size? [rummage, rummage] Okay, found it. Now, switch to a different brush… Wait, the pressure setting turned off. WTF? Switch it on again, then switch brushes and… [insert stream of profanity]”

At least that’s what I imagine. And that brings us to the feature in question, brush locking. In Photoshop 8.0 (CS), we tried to make things better by adding a little lock icon next to each set of parameters. The idea was that you could set some parameters (e.g. pressure = size), then lock them down so that they wouldn’t change when you applied different brush presets. That is, the locks would override whatever settings the presets included.

Locking was never a great solution, but it was what time permitted back in the CS cycle. Since then I’ve heard less complaining, but I don’t think that’s because people are using locking. (Am I wrong?) I think it’s simply a matter of folks eventually figuring out how things work or learning to live with some strangeness.

In any case, we think we can do better in the future. Photoshop could offer a pair of checkboxes on the Options Bar (the thing that runs below your menus) that control “pressure = size” and “pressure = opacity,” overriding whatever’s set in the Brushes panel. We also have some thoughts about better differentiating brush presets from brush tip shapes.

So, if you use brush locking in Photoshop and see a good reason to keep it around, please speak up. Otherwise it’s toast.

Thanks,

J.

Instant-turnaround feature requests

JDI, User Interface

a.k.a., Stuff that already works as requested.

Thanks for all the great feedback on our JDI initiative. We’ve been combing through 300+ individual sets of suggestions (!), plus many hundred additional responses. I hope to get a chance to comment on more suggestions via blog comments, and maybe via a dedicated post discussing notable ones.

In the meantime, I’m seeing quite a few requests for things that Photoshop already does. On one hand I’m always happy to tell people that they can get what they want right now–no waiting, no fee. On the other, it’s a bit of a bummer that people don’t find features, much less answers, on their own (and we’re talking about people savvy enough to find this blog).

I thought you might find it useful to have some of these requests, plus their solutions, listed here.

  1. “PLEASE PLEASE stop the open doc window resizing when I zoom in or out, just leave it alone.”
    • This has been a preference since the dawn of time: “Zoom Resizes Windows.” For some weird historical reason, by default it’s enabled on Mac & disabled on Windows.

  2. “Allow resizing of the Curves display” [in the CS4 Adjustments panel]
    • It’s the little button at the bottom of the Adjustments panel, second from the left.

  3. “Curves: Let me Cntrl-click to set a point on the curve again! The on-image editing is fine, but old habits die hard.”
    • You’re referring to using the Adjustments panel instead of the Curves dialog box. Using either one you can Cmd-click/Ctrl-click with either the Eyedropper tool or the on-image adjustment tool.

  4. “Adjustment layers that can limit to groups: right now they affect everything below them. Be cool to drop them in a group and have it only affect that group.”
    • That capability has been there since layer sets/layer groups were introduced: put the adjustment layer into the group, then set the group’s blending mode to Normal. (By default it’s set to “Pass Through.”)

  5. “Ability to remove tools from Toolbar, like the 3D tools.” Also: “Unhide the tools. The pop-out tools is a hold over from when monitors were 640×480.”

  6. “Where is ContactSheet II in PhotoshopCS4? I want it back!”
    • It’s right here: Mac, Win.

  7. “Merge visible into new layer, instead of having to create a new layer, hold down option key, and then choose merge visible.”
    • Hit Shift-Cmd-Opt-E/Shift-Ctrl-Alt-E. (Update: Sorry, made a typo the first time around.)

  8. “Change the default layer stroke color to something usable (Black?)”
    • Haven’t tried CS4, then, eh? What we really need, though, is either to make the Layer Styles dialog sticky (so that the next drop shadow you create starts with the last one’s settings), or to let you set your own default values (your preferred starting point for each adjustment–e.g. global light off).

  9. “Close all other tabs” command, similar to browsers”
    • Cmd-Opt-W/Ctrl-Alt-W; also File->Close All.

  10. “Add smudge tool (with strength slider) to brush presets.”
    • Brush presets don’t record the values in the Options Bar, which would include the Strength slider. You can create a tool preset (via that icon at the left of the Options Bar–the one you never click) that does the trick, however. (Think of tool presets as a higher level of brush preset: they capture everything the brush preset would–brush tip shape, dynamics, etc.–plus whatever’s in the Options Bar.)

  11. “Enable the Save For Web dialog to allow for exporting just selected slices.”
    • The feature is there: Inside the S4W window, select the slices you want & hit Save. In the subsequent dialog (save location/options), choose “Selected Slices” from the “Slices” menu at bottom (screenshot).

And just on keyboard shortcuts:

  1. “Please, enable user to adjust his own hotkeys. I’m using photoshop since 1.0”
    • Yes, but apparently not one who values this capability enough to have chosen Edit->Keyboard Shortcuts at any point in the last four versions. (Sorry, this sort of thing gets a bit depressing. And please let’s not say, “Well, it wasn’t intuitive or discoverable where you put the command…” Sure it is.)

  2. “Cmd-H should hide Photoshop”
    • That’s debatable. In any case you can (on Mac) choose Edit->Keyboard Shortcuts, then open the Photoshop menu, choose Hide Photoshop, and hit Cmd-H. (JDI-wise, I’ve added a request to have Photoshop ask what to do the first time you hit this command.)

  3. “Bring back Ctrl+1-4 channel shortcuts for good (new are too stretchy)”

  4. “Give an option for the Adjustment Layers Palette to automatically hide, perhaps by hitting some hot key.”
    • A) You can choose “Auto-Collapse Iconic Panels” via preferences.
    • B) You can assign a keyboard shortcut to the Adjustments panel, then use it to hide/show the panel.

  5. “Add a shortcut to show/hide current layer.”
    • You can assign one to Layer->Hide/Show Layers.

  6. “Switch Cmd-Z and Cmd-Opt-Z shortcuts.”
    • Bet you know what I’m gonna say! 🙂

Multitouch coolness o' the day: WiiSpray.com

Multitouch

I don’t have a lot of background on the project, but WiiSpray.com–using a Nintendo Wii controller + Flash to enable collaborative graffiti painting–caught my eye:

The site is light on info, but you can see a few photos of the spray can controller. I particularly like the idea of controlling a stencil with one hand while spraying paint with the other.
Previously in a similar vein:

Grand Unified clarification

Idle Philosophizing, User Interface

Thanks for all the feedback on the CS interface ideas I posted Monday. I’m still on the road, so I haven’t yet been able to reply to most comments. I look forward to reviewing them in more depth.

One key point of clarification: I wasn’t suggesting that Adobe try to merge the applications into one behemoth. In fact, I specifically said that’s a total non-starter. Why a number of people wrote in to then say, “Oh my God, don’t merge the apps into a behemoth” is kind of puzzling.

Some other points:

  • I’m also not sure why a few folks said (paraphrasing), “You should only make the individual apps better, and then (when you’re done with that) worry about integration.” Of course, there’s no such thing as “being done” improving the individual tools, and there’s no excuse for putting integration improvements on hold.

  • Philip Kerman wrote, “Look at what software people really love… it’s the awesome fast apps that do one thing and do that one thing very well.” Wasn’t I just saying that instead of building further redundancy into various Adobe tools, we should focus on making each one great at what it does, and on making them all function as an integrated whole? That to me is is the antidote to bloat.

  • Adobe apps are being developed in more modular ways. The Flash panel extensibility that got wide adoption in CS4 hints at a future where modular features can be written once, then dropped into multiple apps.

  • The Adobe video applications (After Effects, Premiere Pro, Encore DVD, Soundbooth) can already share screen content via Dynamic Link. That is, you can do things like send an AE comp to Premiere (or a Premiere sequence to AE) without rendering, with the data changing live in one app as it’s updated in the other. Isn’t that better than stuffing lots of each app into the other (adding overhead and inconsistency)?

  • As you’d imagine, my ideas around app integration are closely tied to my ideas about Configurator & customizability. I believe that each Adobe app should present solutions via task-oriented workspaces, and I believe that each app should itself be a workspace of the greater Creative Suite. You’d effectively be able to pick the parts of the Suite app you’d want for any given project, and within each app you’d pull up just the components needed for the task at hand. (For example, Photoshop would be the pixel-editing workspace of the Suite, and within PS there’d be workspaces geared towards sub-tasks (e.g. color correction).) I’ll try to elaborate on this when time permits.

  • Aiming high doesn’t mean forgetting the small stuff. When I started on Photoshop, PS7 had just shipped. The two biggest applause grabbers were the Healing Brush (crazy Buck Rogers image science) and being able to rename a layer inline in the Layers palette (a completely humble change, one that saved literally zero clicks, but one that just felt totally right). Apps have to deliver both the sizzle and the steak, and we’re working harder than ever on both.

I don’t claim to have any magic bullets here, nor do I claim that any of this would be easy. I don’t accept, however, that “good enough is good enough.” How is developing the Creative Suite going to be interesting for the next 5 years, the next 10? Taking only little steps, going to work while muttering “time to make the donuts” ain’t gonna get it done–not for me, anyway. I believe Adobe can–and must–aim for more transformative changes.

Feedback, please: A Grand Unified Suite?

Idle Philosophizing, User Interface

The Dear Adobe blog asks, “Why does Adobe have 14,000 different applications?,” then makes a modest proposal:

So here it is. The Worst Idea Ever. Combine ‘em all. All of them…. What I want is to open a .adobe file in my Adobe.app, click a “Mode” dropdown, select Photoshop, and get my photoshop windows. Edit all my layers with bitmappy precision. Then, when I need to edit something in vector, I don’t use the pathetic excuse for vector tools in Photoshop mode, I switch to Illustrator mode, and all my bitmappy layers suddenly work as Illustrator objects…

Outrageous! Impossible! And yet, maybe not crazy at all. Read on if interested.

Continue reading →

Polishing the Adjustments panel [Part 3 of 3]

CS4, User Interface

Bryan has now listed some of the benefits of the Adjustments panel in CS4. That doesn’t mean we think things are perfect, however. As Photoshop moves forward–especially as we do more things non-modally/non-destructively–we need to address any lingering legitimate usability beefs. Here are some possible refinements:

  • Enable an option (via the panel flyout) to have panel adjustment text fields take focus when an adjustment is created. If you pop the dialog form of Levels, you can tab into/among the various fields. You can’t set focus on the panel using just the keyboard. We should fix that, either by putting focus there automatically, and/or by adding a shortcut for the purpose (e.g. Shift-Return).
  • Similarly, add an option to auto-select the eyedropper tool and/or on-canvas adjustment tool when creating/selecting an adjustment layer. This would better fit the modal dialog form, where there’s no need to select a tool.
  • Enable a single-key mechanism for activating the on-canvas adjustment tool. (Ah, but what key? they’re all used).

Anything else?
Thanks,
J.