My Photoshop setup

I spend about half of my working week in Photoshop creating UI designs and mockups, and I’ve recently spent some time improving my virtual and physical workspaces. I thought I’d write a bit about my new setup.

Virtual workspace

I’ve used a fairly normal Photoshop palettes layout for years, i.e. the Tools on the left, and everything else on the right (in recent years, two side-by-side columns of palettes on the right edge of the screen).

I like to work in the “full screen with menubar” screen mode, and since the release of the Retina Display iPad, I’ve been becoming frustrated with the off-centre palette arrangement. Recently, I had a bit of an obvious-in-retrospect epiphany: there was no reason to have the tools as the leftmost palette. Instead, I can balance my two primary columns of palettes on either side of the screen, creating a much more centred arrangement:

I’ve pared down the palettes to the bare minimum I need to have constantly visible, to really benefit from the space available on the 27” iMac screen (2560 x 1440 pixels).

Here’s the left column of palettes, vertically shortened for the purposes of the screenshot:

In top to bottom, left to right order, this column contains:

• Info palette, with document dimensions visible.
• Swatches. I rarely use the colour sliders, but often use custom swatches.
• Layer Comps (frontmost) and Notes (occasional use). These are the two palettes of most use when working on client projects.
• History (frontmost; only a dozen or so steps need to be visible) and Paths (occasional use).

Docked to the immediate right of that column, I have the Tools palette, in its default narrow/tall layout. The entire collection of palettes is shifted inwards just enough to keep the vertical ruler visible.

On the right side of the screen, the layout is much simpler. Once again shortened for the screenshot, here it is:

It’s just the utterly essential Layers palette, widened to more easily see the names of deeply-nested layers. Most of my documents have 5 to 7 nested levels of layer groups, so the extra width is very useful (as is CS6’s ability to filter the palette’s contents).

I tend to use the Options bar for text configuration, but on the infrequent occasions when I need more control, I temporarily show the text-related palettes in a free-floating stack (via the button in the Text Options bar). It looks like this:

The palettes are:

• Character (frontmost) and Paragraph (occasional use).
• Character Styles and Paragraph Styles (frontmost).

For all my UI work, I keep pixel-snapping enabled throughout Photoshop (CS6 is much better for this, and has a global option in the Preferences dialog for it). You should also have a read through Marc Edwards’ article on PS CS6 improvements for some of the other significant improvements in the latest version of Photoshop.

Physical workspace

Setting up Photoshop itself is only half of a decent working environment, of course – there’s also your desk and input devices to consider. I have a fairly large desk with a dual-monitor setup that I find comfortable.

I’ve had a major addition to my array of input devices recently, as my wonderful wife bought me a Wacom Intuos5 Touch (medium) tablet for my birthday. I’d previously used a small Bamboo, but the larger surface area (and the ancillary controls on the tablet itself) really do make a big difference. I use it with the optional Wacom Wireless Kit, for extra freedom of movement.

As with all Intuos series tablets, it has a set of keys (and indeed a wheel) along one side, which are capacitive on the Intuos5. You can call up an on-screen (as in your monitor, not the tablet itself) overlay at any time, showing the configuration of the tablet’s buttons, pen and touch functionality.

I find it useful to have the wheel cycle between scroll/zoom, switching layers, traversing the history, and controlling rotation. You’re also free to customise those functions on a per-app basis if you wish.

When just laying your finger on any of the 8 main ExpressKeys, you see an on-screen overlay showing what functions you’ve assigned to each one. You have to physically press the buttons to trigger them, and it’s nice to be able to just touch them to see what they do, without looking away from your monitor.

I have my keys set up as follows. Top group:

• Enable/disable the touch (trackpad) functionality of the tablet.
• Trigger Wacom’s on-screen radial menu (which is fully customisable, including nested menus).
• Enable/disable Precision Mode, which allows you to make very fine adjustments even with coarse movements of the pen.
• Toggle the manner in which the tablet surface maps to my displays; it switches been both at once, then through each display individually, in sequence.

The bottom group is configured to provide the Shift, Command, Option and Control modifier keys, which are very useful in Photoshop.

There’s one last device in my input setup: a Retina Display iPad, running Adobe Nav, which is a kind of remote-control toolbox for Photoshop. I keep it to the left of the tablet, and below my keyboard, when I know I’ll be working in PS for a while.

Adobe Nav is one of several Photoshop “Remote Connections” clients provided by Adobe, and uses the public scripting API – so you could make such an app yourself, without worrying about any internal, Adobe-only magic.

I altered Nav’s setup quite a bit to suit my UI/UX work, rather than the default toolset which is more focused on photo retouching.

One particularly nice aspect of Nav is that you can make buttons for specific sub-tools that are grouped together in Photoshop’s Tools palette, such as (particularly) the various Vector Shape tools. My Nav tools setup is:

• Move
• Rectangular Marquee
• Text
• Eyedropper
• Rectangle Vector Shape
• Rounded Rectangle Vector Shape
• Ellipse Vector Shape
• Custom Vector Shape
• Hand
• Zoom
• Path Selection
• Direct Selection
• Pen
• Add Anchor Point
• Delete Anchor Point
• Convert Anchor Point

It’s a setup that’s optimised for how I work with user interface designs, and I find it easier than reaching up to the keyboard to hit the associated keyboard shortcuts for each tool (especially when having to repeatedly use the Shift key to cycle through tool groups).

As a developer, I limped along for quite a while without taking my Photoshop setup seriously, but since I spent some time tuning it, I feel much more productive.

If you’d like to share details of your own Photoshop and/or physical workspace, or to keep up to date with articles here, you should follow me (@mattgemmell) on Twitter.