The New Photoshop: What We Need in a Proper Next-Generation Digital Design Tool

Photoshop has become the de facto imaging standard, but it's arguably not well suited to web design work. In this article, Simon imagines what a next-generation digital design application would look like.

The New Photoshop: What We Need in a Proper Next-Generation Digital Design Tool

As a web and mobile designer, I want a lean, mean, digital design app. An app that makes design a pleasure, not a battle. One which outputs client-friendly layouts straight from the app, and does it beautifully.

Sadly, it's not Photoshop.

Photoshop has become an all-purpose, go-to tool for everyone. It's a massive application, weighed down by years of iterations both major and minor, and now it can do pretty much any imaging task you want to throw at it. Vector illustration, CMYK support and unsurpassed photo editing tools make it the de facto standard for every professional visual artist and designer on the planet.

But this all-purpose approach is its biggest failing. It's simply too complex for a specialist web designer to use. I understand that Adobe couldn't possibly add all the features I and other digital designers desire, because it would weigh it down too heavily into one camp. Photoshop is Adobe's cornerstone imaging app, and it has to be an all-purpose tool, capable of turning its hand to anything.

Photoshop CS3 screenshot
Photoshop CS3, in the middle of creating a web site layout.

Even though people are turning increasingly to "designing in the browser" using HTML, CSS and JavaScript, I think that there will always be a market for a visual design tool, especially among designers less well versed in the intricacies of code. To design in a browser, you have to be pretty good at the code, and that's not everyone's cup of tea.

In this article I'm going to set out my stall as to how I see a different kind of tool — one which will take us forward into the brave new world of digital design in the 2010s. My tool would behave very differently to Photoshop.

I'm going to go through what amounts to a checklist of the main features. Let's kick off with something very close to every web designer's heart: stylesheets.

Stylesheets

I don't want to change every single instance of a font by hand. It takes ages and is prone to error and omission. Instead I'd prefer to do it as I do in a webpage — or indeed in any print layout application — and use a stylesheet. Then I could change all the instances of text in a page to another typeface, just by changing one value in an inspector.

“I don't want to change every single instance of a font by hand.”

And not just typefaces of course. Colours, drop shadows and every other visual style that you apply to an object could become controllable like this, just as in the relationship between HTML and CSS.

Just think how easy it would be to try variations on a design if this was part of your workflow. Even better: The stylesheet could be compatible with CSS3, so the approach you use in your visual layout is the same as that used in the code itself.

Another really useful addition would be adjustment stylesheeting, where adjustments applied to one image could be shared across multiple images in your document. Want to try a nice cross-processed look on the 40 images in your multi-page document? No problem. Edits would of course be non-destructive. Users of Apple's Aperture and Adobe's Lightroom will know roughly what I'm on about here.

Multi-page layouts

Currently, if you're creating multiple related page layouts within Photoshop, you have 2 options:

  1. Create a single PSD with multiple layers grouped, and then grouped again into super-sized "pages", or
  2. Create multiple, simpler PSD files, using a single file for each page layout.

In option 1, your file quickly becomes entirely unmanageable as you get spectacularly lost in hundreds of layers. The file is, by necessity, huge, and there are duplicate layer groups cloned all over the place. You can see how this looks below:

Photoshop Layers palette
Creating multiple layouts in one PSD is a recipe for madness. The Layers palette is not a good metaphor for dealing with this much complexity.

In option 2, where you're creating multiple PSDs for multiple layouts, it's easy to get them out of sync as they start to drift in style from file to file. Plus there's no chance of sharing basic elements like a header background.

So what you need is multi-page layouts with shared components for things like headers, footers and sidebars. This, combined with stylesheets, should make every job much easier.

What about exporting and sharing? With a multi-page system, I could simply export all the visuals as a single, multi-page PDF in one easy step for review. But why stop there? We could add cover pages, tables of contents and annotations, in an easily-themed style. This would give you practically instant documents to share with clients and other stakeholders. While we're at it, let's have easy sharing over the web too, right from the app.

Wireframes to visuals

“I'd much rather stay in one app for everything, creating wireframes which I can update to visuals as I go”

Increasingly, I'm creating wireframes for sites and web apps before I do the pretty stuff. This approach allows me to quickly work through the architecture of a design, and get feedback quickly, while keeping the visual design decisions away from the functionality.

I currently use Apple's Pages application to do wireframes (see below). It's quick, and away from Photoshop I feel less pressure and temptation to do visual design. Once these wireframes are signed off, I move into Photoshop and create the final visuals. Instead though, I'd much rather stay in one app for everything, creating wireframes which I can update to visuals as I go.

Apple Pages screenshot
Using Apple's Pages as a wireframing tool for an iPhone app.

It might even be possible to have a mode which temporarily strips out all the visual design work to leave you just with wireframes again, allowing you to update the wireframe documents as needed.

Imagine a 30-page completed wireframe document, to which you can apply stylesheets. You could create a look for a button once, then apply that style across every button element in the wireframe. The final design would come together amazingly quickly, right on top of your wireframes.

Basic templates for common elements

How often do you find yourself trawling the web for PSD files with common digital elements? I do this all the time, looking for form elements from Safari, iPhone menu bars or video players. Let's just build this into the app, in a simple, extendible library system that we can all contribute to. A nice central web-based repository would be great too.

"Just the basics" bitmap image editing

I know this sounds counter-intuitive, but I don't think this app needs much actual image editing support. Our app is a lean, mean digital machine, remember?

Okay, I'd want the basics, which I'll list here and now:

  • Conversion from any other colour mode to RGB
  • Levels, Curves and Exposure control
  • Resize and Crop
  • A good conversion to monochrome
  • Gaussian Blur
  • Basic dust removal (essentially the Spot Healing Brush tool from Photoshop)

That's it. Most features outside this list have no place in this design tool in my view. Retouchers can use Photoshop.

Making improvements on Photoshop's existing tools

There are clearly tools in Photoshop that are very useful, but many of them could do with a serious update. Adobe's not addressing these things, so it's up to us!

The Gradient editor

A pet hate. I use this all the time, and it's terrible. To add or edit a gradient, you have to open up three little palettes, which then often obscure the thing you're working on, requiring you to move windows around until you can see the object again. Rubbish. We can and must do better.

Pixel-perfect vector shapes

Whatever Photoshop does to vector shapes to produce a fuzzy anti-aliased edge to what should be a sharp straight line, we don't want that. Horrible. How many times have you resorted to drawing a one-pixel straight line with the pencil tool because the line shape produced an anti-aliased result? Lots, if you're like me.

2 single-pixel straight lines in Photoshop
Two single pixel straight horizontal lines, created seconds apart. Why has the second one got antialiasing applied, leading to a second row of translucent pixels? No, I don't know either.

I would also like to be able to change vector shapes once they're drawn, for example the corner radius of rectangles and the number of points on a star.

The Layers palette

I reckon we can do without this almost entirely. Again, it sounds like madness, but actually, I don't think we need it. I know I keep coming back to Pages (apologies to the Windows users), but I can create really very nice layouts in this app which doesn't have a layers palette at all. Layers are a terrible way to negotiate a complex document, and we can and should put them to bed.

Preset styles for digital design

There's no shame in this. It can't hurt to have preset styles for the letterpress look, or for an iPhone shiny button. It's just a time saver. We're grownups, and know when we need to use them. Again, this could be part of the basic templates library.

Interface & stability

It goes without saying that the app must be rock solid, and as bug free as you can get it. Extensive, regular alpha and beta programs need to iron out the weird kinks of usability that make an app odd to use. When this thing ships at version 1, it has to be ready, really ready for professional production work. Word of mouth is our friend.

“The Adobe interface is currently an absolute dog's breakfast”

Our interface should be clean and beautiful, delighting me every time I use it. The Adobe interface is currently an absolute dog's breakfast in my view, and appears to be designed specifically to avoid the tiresome interface conventions of either Windows or Mac OS X, in turn creating a strange hybrid of own-brand interface that everyone dislikes. Presumably this makes it quicker and easier for Adobe to create interfaces across platforms, but I don't really care about what makes life easier for Adobe.

The Photoshop CS5 interface
The Adobe CS5 interface. Not my bag.

And, talking of platforms...

Things that don't matter (at least for V1)

Cross platform support

I'm going to get shouted at for this, but I don't want a cross-platform app. It can be ported later in its lifecycle, but right now, I just want it for Mac OS X, without any concessions to the Windows platform.

Apps — at least the good ones — on Mac OS X look great, and handle brilliantly. At the risk of igniting a platform war, on Windows I see little evidence of this level of attention to detail. Prove me wrong by all means — if apps on Windows can look great and behave as well as Transmit, Coda, Pixelmator and Sparrow, I'll be right there calling for cross-platform support. People always talk about how there's much more software for Windows, but as far as I can see, it's 90% rubbish. And now I'm leaving the country.

Screenshots of Transmit, Coda and Pixelmator
Transmit, Coda and Pixelmator. Great-looking and well-considered apps on Mac OS X.

I would add that there are enough pro designers using Macs to get this off the ground in a big way. With releases through the new Mac App Store, we can focus our efforts on the app, not the sales system. Just ask Pixelmator, who grossed a million bucks in 20 days on the App Store.

HTML export

Unless this works really, really well, it's worthless. Fireworks touts it as a feature, but I've never seen it produce anything worth opening a web browser for.

Good front-end code is not machine-generated. It relies on sensible coherent judgements by experienced pros. No good can come of automated HTML and CSS. Forget it and move on.

Animation and transitions

Designers are starting to use motion a lot more as part of the interaction design process. I'm thinking about accordions, showing and hiding sections of a page, and sliding content around in-page. Sliding, in particular, is especially important for mobile development, but we're starting to see this on the desktop web too. See the site for Michael Surtees' new design firm Gesture Theory for an example of this — try clicking the menu options along the bottom.

For version 1, though, it's enough just to be able to click on a button or link to move from one page to another. This is enough to get a feel for moving round a site and do basic user testing, which is all you really need.

That said, this definitely needs to be in version 2. We're all using jQuery to show and hide elements on the page and move stuff around. It's getting to the point, especially with mobile design, where you need to be able to illustrate this early in the product cycle, so version 2 should be released hot on the heels of 1.0, with this as a headline feature.

Opening and saving PSD files

Unless an app basically mirrors the PSD file format, it's never going to perform this well. Even Fireworks isn't very good at it, and that's part of Adobe's CS product. Let's make a clean break and forget about opening and saving PSD files. I accept I'll have to keep Photoshop in my arsenal too, and that sometimes I'll have to use that for the sake of interoperability with others.

Things Photoshop does well, and we need to keep

Clipping masks

The ability to create a shape and "clip" an image to it is fundamental to my workflow, as I imagine it is to everyone else too. Clipping masks allow you to make an image a defined shape and recompose the "crop" at will. Photoshop does this really well, with the basic shape remaining editable at all times. This needs to work at least as well as it does in Photoshop.

Great type handling

Photoshop is a pro tool, with the pro type handling designers need. Realistically, the basic type handling available to apps within OS X isn't up to scratch. Hit Command-T within TextEdit to see what I mean. Again though, Pages does this much better, so maybe it is all there under the hood.

Rulers and Guides

You need layouts to be pixel perfect, so great support for Rulers, Guides and Smart Guides is a must. Photoshop does this really well, but ideally you'd have the width and height shown next to the mouse pointer as you draw out a selection or shape.

Apps that show promise

There are tools out there that are really getting close to this ideal, but I haven't found anything that I could legitimately move to from Photoshop. Sure, there are apps which, if pushed, I could use to make a website, but they all have some pretty fundamental flaws with respect to design.

Apple Pages

I've talked a lot about Pages in this article, and with good reason. I do all my wireframing and proposal documents in Pages, and it does this very well. I can create really very detailed documents which have the spit and polish required for pro use. Its basically a cut-down InDesign or QuarkXPress.

The downside though is that it's absolutely not set up for digital use. You can't even set the rulers to use pixels as units, which means you can't do anything precise in the digital realm.

Pixelmator

This is another great app, which essentially mimics the Photoshop interface in many ways. At a pinch you could make a website layout in Pixelmator (I've tried), but you quickly find yourself bumping up against type tool restrictions and the lack of editable vector shapes.

The Pixelmator team's focus is on producing a great image editor for the masses (a strategy which is standing them in great stead), but it doesn't seem to be heading towards being a proper design tool like the one I've outlined here.

Sketch

I tried this quite recently, and it is a wonderful drawing tool. You can create some great work in this app, but again, it's not tailored to design work, instead targeting illustrators. The concept of the "infinite canvas" might be great for illustration, but not for design. It also fails at being rock solid, and its support for clipping masks felt very wrong to me.

Fireworks

Here's the elephant in the room. Across the land, Fireworks fans are shouting at the screen, saying: "Fireworks pretty much does all of this! You want pixel-perfect vectors and shareable objects? They're here! What are you talking about man?!"

Screenshots of Fireworks CS3
Fireworks CS3. It should be great, but...

I hear you, I really do, and Fireworks should be the thing that comes closest to my ideal digital app. But it doesn't.

I have numerous issues with it, but the big one that I can't get past is the interface. Sure it now looks like an Adobe app, but the basic palette workflow hasn't changed much since the Macromedia days, and I never, ever, got on with it. It's clunky, fiddly and seems (at least to me) to be almost deliberately obtuse. Plus, it never seems to get much love from Adobe in the CS updates, which suggests that it's not being actively invested in to any great extent.

Antetype

A new kid on the block, this app is getting there. It's very focused on moving between wireframes to the more polished product, and specialises in web application development. A great tool and one to learn from, but not one for more general web visual design right now.

Conclusion

In this article, I've laid out what I would like from a next-generation digital design application. One which isn't tied to the past or a marketing agenda, but instead looks to the future and provides the tools that visual designers need in this day and age. Maybe it's out there, and I've just missed it. If you know of or make an app like this, my credit card is ready and waiting.

“If you know of or make an app like this, my credit card is ready and waiting.”

Which brings us to the thorny issue of pricing. How much should an app like this cost? Well, Photoshop costs $639 USD, or £609 GBP for the Brits. Personally, while I know it's pro software, and that the price for the standalone product is inflated to persuade everyone to buy a version of the Creative Suite, I think that's overpriced.

Pixelmator is currently on the Mac App Store for $29 USD or £17.99 GBP. That seems very cheap for a pro tool. But that said, they're making decent money, as described above.

I'd pitch this at around the price of Coda or Lightroom, at around $100-250 USD. I think that's a very fair price for a pro bit of software, while massively undercutting Photoshop to encourage takeup.

So what do you guys think? Do you have an opinion on these ideas? Maybe you think it's all rubbish and Photoshop is the one true way? Let's hear your thoughts in the comments below!

Lastly, if anyone reading this wants to make this software, count me in for input, beta testing or anything else. I'll make the tea for your entire office if I can have a new tool before CS6 comes out!

Follow Elated

Related articles

Responses to this article

9 responses (oldest first):

03-Mar-11 18:12
"Two single pixel straight horizontal lines, created seconds apart. Why has the second one got antialiasing applied, leading to a second row of translucent pixels? No, I don't know either."

Ooh, me, me! It's because one of your lines is on a pixel boundary, and the other one isn't. Photoshop is resolution-independent under the hood, so when you draw a line it doesn't necessarily line up with the pixels in the document.

In Photoshop CS3 you can fix this by checking the "Snap to pixels" checkbox in the shape options for rectangles and rounded rectangles - although, inexplicably, not for lines or anything else. (They may have fixed this in CS4/5, I dunno.)
04-Mar-11 05:17
Ah that's worth knowing! Thanks!
07-Jul-11 12:09
On the vector anti-aliasing topic:

This drove me nuts for awhile, too. After some rather exhaustive searching I've found that there are several ways to address this:

1. Make sure you are at 100% zoom (no more, no less) when drawing, moving, or transforming a vector shape. Not always convenient, especially for smaller shapes.

2. Use the "snap to pixels" method that Matt posted above. Be aware that you will still get anti-aliasing of you try to transform the shape at anything other than 100% zoom, though. But, with the snap to pixels option turned on you can re size the shape without anti-aliasing it by using the white arrow tool to select and drag points.

3. Turn on the grid (cmd/ctrl+' or view>show>grid) and select "snap to grid" from the view>snap to> menu. Setting the grid to 1 pixel increments will give the finest control using this method. (under preferences>grids, guides & slices...) I like setting it to grid line every 10 pixels and 10 subdivisions, but there are a lot of combinations that will get the same result.

[Edited by Gaber on 07-Jul-11 12:11]
07-Jul-11 14:52
Good thoughts Gaber. Haven't tried the grid idea, so I'll give that a go, thanks!

Simon
11-Jul-11 05:40
Update: @michaelbuddy on twitter suggests we may have an overly maccy bias, and that we should big up Xara Designer Pro 7 (http://www.xara.com/us/products/designer/).

Xara is a venerable app. I remember using it in the mid-90s to illustrate a children's book a friend was working on, and it was an absolute pleasure at the time. Then owned by Corel, it's now been spun off into a separate company.

There's a couple of things that trouble me looking at it now though:

1) That interface. It's just.. nasty. If I'm sitting in front of something all day, I do not want it to be that. Sorry. I know this is subjective, but still.

2) It's not marketed as a pro app, which suggests that the developers don't have the confidence in the product to compete in the pro marketplace. The site feels prosumer at best.

The thing is, Xara might be brilliant under the hood, but with the interface and marketing acting as a ball and chain around its foot, it's never going to be a pro tool.

Neither is this a Mac/PC thing. For a really, really brilliant pro design tool I'd switch platforms I think. It's about the work after all. I'm afraid this doesn't even make me want to download a demo onto the office Windows box

Simon
11-Jul-11 16:58
@simon: I thought Xara was more of a vector editor, so not really a Photoshop successor? I remember using it in the 90s too - it was by far the nicest, easiest-to-use vector editor around.
12-Jul-11 03:26
@matt. That's true in some respects, but for our purposes, for a design tool, vectors are where it's at.

Simon
04-Oct-11 23:09
Simon,
I'm a big fan of Xara, but I do understand your reservations. I don't have nearly the experience that you do, but I do remember using something called Aldus Freehand 3.1 in the mid to late 90's (who owns that now?). I made maps with it at the time and thought it was a great tool (for its day). I got back into graphics about 5 years ago, this time mostly for website stuff and happened onto Xara 3 at the time. I fell in love with its relative simplicity. I've tried the CS4 suite I'd take Xara over Illustrator in a heart-beat. I do use Photoshop because the selection tools do things that no other program can. Still over-all I think the Adobe line is vastly over-rated. Back to Xara, I agree with your observations about the current interface and marketing. It seems to me that they are becoming a "Jack of All Trades" type of product, when I wish that they would just put their resources into being a great vector graphics program.
05-Oct-11 02:31
@JohnnyA . Freehand was great. It was bought by Macromedia, then went in turn to Adobe, who promptly killed it to boost Illustrator's sales.

Simon

Post a response

Want to add a comment, or ask a question about this article? Post a response.

To post responses you need to be a member. Not a member yet? Signing up is free, easy and only takes a minute. Sign up now.

Top of Page