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.

Photoshop is dead

Remember Flash?

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

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.

flatbuttons

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.

So we can now do gradients in CSS, shadows are no problem and we can round corners. CSS is pretty good for a lot of things but there's some stuff you may want to do with other tools.

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.

Single Post Navigation

One thought on “Photoshop is Dead, Long Live the Web

  1. Interesting post, I would like to add my perspective:

    I don’t think that any illustrator or graphics artist would be typing the source code for this SVG file manually http://de.wikipedia.org/wiki/Datei:Ghostscript_Tiger.svg or going to the lengths of generating such image on the fly in Canvas.

    WebGL, CSS, Canvas and SVG, ttf, otf are just mechanisms to deliver your graphics on the screen. Photoshop is a tool to build those graphics. We might see Photoshop adding more dynamic export formats in the future, but I don’t think that comparing these two directly or implying that one replaces the other is not right.

    In some cases bitmaps offer superior compression, visual quality and performance over vectors, especially on mobile devices (all vectors on mobile need to be rasterized and cached as textures anyway). Trying to render a vector image with a few gradients and transparency on a latest quad core smartphone results in lag. Until that is resolved, raster will be king.

About Us | Contact Us | Developer | Terms of Use | Privacy Policy

Copyright © 2013 Dada Entertainment, LLC. All rights reserved.