Paul Knittel

Photoshop as a webdesign tool

Nov 2013

For a long time now Photoshop has served me well as my main webdesign tool. However recently I have gotten really annoyed at it’s many shortcomings as web design tool:

This seems to be a trend reflected throughout the community Smashing Magazine - Repurposing Photoshop It’s not that I find Photoshop a bad program as such. I just think that is has suffered over the years to be the one program for everyone app Photoshop - endlessly rebuilt. It is unavoidable that a one-for-all solution will not be optimised for all workflows. Although added features in recent versions like export to css and adding pargaphy styles have been great steps in the right direction it’s just not enough. Using Photoshop plugins like CSS hat (exporting layers to CSS3) or Slicy (slicing your PSD) or WebZap (repeated elements, grids, etc.) I present to you my round-up of alternative workflows and tools.

Designing in the browser

Keeps you design simple and fast. However it lacks playfulness and tends to be significantly slower in the initial idea phase. Only recommended if you are using a UI kit, which already comes with HTML and CSS.

Photoshop as a Canvas in combination with the browser

This workflow uses Photoshop to create the inital design layout for the front page for example, but then moves straight to the browser. This is great as it allows you to be playful in the initial stages. Then once you got the basic styling sorted out you can applly the same style to other common layout blocks in webdesign, for example the blog page. These are typically annoying pages to design in Photoshop due their repetitive nature. 

Use Adobe Illustrator

Vector tools are great because they are resolution independent. Illustrator also comes with some great features making it more suitable for webdesign. Check out these two articles for detailed examples designing with illustrator and webdesign workflow with illustrator.

Photoshop + Adobe Edge Reflow

This is a great solution if you love Photoshop, but want to test your designs in the browser with responsive behavior. Check out this video for a good overview.

Sketch + Pixelmator

Awesome set of mac only apps. Sketch is an Adobe Fireworks/Illustrator like program, which has a great workflow orientated interface. Pixelmator is a image editing app with a fantastic user interface. Even with it’s latest release 3.0 FX it is still not quite up to the professional standard of Photoshop from reading a few articles. Although Sketch doesn’t solve all the annoyances of Photoshop and Illustrator it does provide a cheap $50 alternative with it’s own set of benefits.

Is Photoshop dead for webdesign?

At this stage I am still undecided what workflow I should settle on. A combination of playing around with Sketch and jumping into the browser earlier might be the way to go. It’s definitely to early to drop Photoshop completely. 

Edit: November 19th

Just came accross this awesome new webdesign tool coming out January 2014 called Macaw. Looks like a great next-gen tool to design websites. It has awesome features like fluid canvas + grids, breakpoints, interactivity and working with CSS3. Looking forward to use it in the future.

Edit: February 13th

Just pre-ordered Macaw. Really hoping it will be the solutions I was looking for.