Photoshop is Dead, Long Live the Web
In a few years time we’ll look back on this period of web development as one of transition. We’ll look back and laugh and think it somewhat bizarre that we had plugins like the Flash player. Younger developers will stare in disbelief when we recount that using Photoshop was an integral part of the design process.
But let’s rewind a bit. As the project co-ordinator of jPlayer I remember when all this started to change. The reason we created jPlayer back in 2009 was to scratch our own itch. I couldn’t believe that all the web audio player libraries used Flash in a visual way. That is to say at the time it was only really possible to play audio on the web using Flash (or similar) plugin – that doesn’t mean we have to style the interface in Flash. Our objective with jPlayer was to allow the styling of the interface as we would any other part of our web page and just use Flash for audio. It seemed insane to us that if we made a the visual change to the CSS styles of the web page, the audio player would remain unaffected in its own little black-boxed universe. Instead we would be required to open it up in Adobe’s Flash IDE and edit it from there or at best hack about with some sort of configuration file. We knew it was possible to do better and so we created jPlayer that relied on Flash technology only for the audio part. It was a big hit.
As soon as the audio tag emerged we incorporated that and used Flash as a fallback. The interface or API didn’t change and now most people rely on the browser’s native ability to play audio and video.
Gimme Some Skin
But still something wasn’t quite right, in order to change all but the simplest jPlayer skins we still needed to use Adobe Photoshop (or similar). And this up to very recently was the standard technique for the restyling of many web page assets: buttons, backgrounds, rounded-corners, drop shadows, gradient fills, logos etc.
But guess what? Things are about to change.
The Rise and Rise of the Vector
OK, so I’m going to make a bold assertion. You no longer need Photoshop or any other image editor to make a professional looking (and functional) web site. In fact in many ways your website will be better for it. Recently Brad Frost wrote a blog post : The Post PSD Era where he makes the case for no longer using Photoshop for design comps. Turns out, this was not the blog post I was looking for. I’d hoped he was going to talk about how new browser technologies make Photoshop obsolete – that’s aside from it’s original raison d’etre which was to touch up photos.
What we no longer need Photoshop for
So what is it that makes this staple of the budding web-designer no longer relevant?
It all really comes down to a new age of web design, one that features vectors heavily. Let’s break it down:
Icons, you know those visual indicators we put on buttons and stuff? What a complete pain that used to be – fixed size, fixed colours, transparency layers, anti-aliasing, roll-over states. I’m feeling a renewed bought of SAD coming on just thinking about it. And then if you needed to change any part of that, back to Photoshop you went. Now of course with the advent of retina screens with roughly double the resolution of normal screens squeezed into the same dimensions, we either make two versions of the graphic or we constrain the image to half it’s normal size, hoping that browsers cope — as they usually do –with the resizing of the image, that way it doesn’t look pixelated on retina screens.
But wait, help is at hand in the form of icon fonts which allow us to create custom fonts and use them as icons, which allows us to style colours, sizes, transparency and even drop-shadows with CSS. You can read more about this technique in my previous article Icon Fonts and how to Create a Pixelfree Audio-Player
Rounded Corners, Drop-shadows and Gradient Fills
Remember rounded corners? I’ve got a theory – they used to be fashionable because they were hard to do. All sorts of tricks were required to get your rounded corners working properly and so it was a good way to prove that as a web-designer you were worth your salt. Now of course that it’s trivial to make rounded corners using the border-radius CSS property, it’s no longer de rigeur. It’s all back to basics with ‘Flat Design‘ as witnessed on any web design guru’s latest paired-down site. Buttons of course used to be rounded affairs, with a dash of gradient fill, some subtle use of drop shadow – some people even made text part of the image! Now of course they tend to look more like this.
CSS3 to the Rescue
That’s not to say that you can’t use gradients, drop-shadows and rounded-corners. It’s just that it’s not difficult any more and perhaps related, no longer fashionable. To be honest I’m a big fan of flat design, I see it as design reduced to it’s very essence but then — and maybe this is a good time to mention this — I don’t consider myself a web designer, or at least particularly good at design. But using frameworks like Bootstrap and other people’s work I can create a ‘passable’ looking (and responsive) web-site without spending any time at all in Photoshop. Actually I use GIMP – all the more reason.
Canvas and SVG
Canvas and SVG (Scaleable Vector Graphics) are two API’s you can use to draw things on the screen. Canvas and SVG are very different animals, but on first inspection can produce similar results. An important distinction however, is that Canvas is raster based, whereas SVG — as you can probably tell form its name — is vector based. This means that Canvas API operates on the pixel level, whereas SVG works using vectors and shapes. Canvas is lower level and so can be faster and more suitable for applications such as games whereas SVG is more flexible and better integrated into the web page, defined as XML and rendered into the DOM. SVG can be slower because every shape adds overhead to the rendering. Canvas on the other hand is not really storing state in that way – it’s just pushing pixels, and doing it very efficiently. Note also that you can resize Canvas based images and animations to fill the screen and you’re browser will scale this admirably. Incidentally WebGL is based on a 3D version of Canvas. SVG being integrated into the DOM brings many advantages, you can detect events and adjust shapes and sizes as you would any other web based object. A great application of SVG is D3.js – an example of a good Canvas library is Processing.js and of course there is the wonderful Three.js for WebGL.
All of this to say that there really is no excuse to use Photoshop (or Flash) any more unless you plan on supporting older desktop browsers and if you like you can provide a visually degraded experience. Yes, it should work but it doesn’t have to look exactly the same in all browsers.
All in all, the vector approach is a very good thing because as a web designer, it will save you both time and money. In short, it’s time to drop the bitmap, Grandad.