Responsive web design doesn’t mean we should abandon Photoshop, says Dan Rose – but we do need to redefine how we use it
For the longest time, Photoshop was the quintessential software of our industry – a time of relative confidence in how, and more importantly in what size, our web designs would be presented.
But times changed, and so did our needs. We began to explore other tools to tackle web design more efficiently. Designing in the browser has been a great strategy, providing practical accuracy and allowing us to test responsively. Because of this, it has become increasingly popular to suggest ‘skipping’ or ‘killing’ tools like Photoshop and just leveraging what’s available to use in HTML and CSS.
I’ve thought long and hard about parting ways with Photoshop myself. The expense, the crashing, and the inability to interact with a design comp are all less-than-desirable features for a web designer. Many already have abandoned Photoshop, and I imagine more are doing so every day. But is that throwing the baby out with the bath water?
Like many web designers, my love for CSS has been refreshed anew with preprocessors like Sass. I’ve come to fully embrace living in my text editor. However, I feel we’re doing more harm than good with some of the shock value blog posts that recommend we all move away from that blue ‘Ps’ icon in our dock.
While I find it incredibly liberating to not be bound to a fixed canvas, I struggle to be creative in CSS or HTML when it comes to composition, depth and layering. For some projects that’s no big deal, but for others I can’t help but turn back to Photoshop. It allows me to express myself visually, manipulating shapes directly without the abstraction of code. Yes, some of us find it easy to experiment consistently, creatively and comfortably in HTML/ CSS. But the rest of us need a graphics editor.
Yet page layouts in Photoshop can be problematic since they don’t translate to a fluid website, so what to do? The trick, I believe, lies in refining how you use Photoshop.
Consider it as a high-fidelity sketchpad, as opposed to the traditional approach of an environment for pixel-perfect, full page layouts. In doing so, the browser still remains the ‘home’ for your design, while using a graphics editor to experiment and create small pieces of your design, not entire pages. Equally important is starting to play to the strengths of Photoshop without invoking the pain points of fixed-width complex layouts.
If you can empathise with my struggle to design creatively using HTML and CSS, my advice would be to reconsider Photoshop. Having an outlet for high-fidelity sketches might be what gets you over the creative block you face in your text editor. I think it’s safe to embrace designing in the browser, but let your code be influenced by what you’ve experimented with elsewhere.
While identifying pain points and shortcomings in our tools is warranted, suggesting we just ditch them seems shortsighted. A master craftsperson refines their tools. If a tool is terrible because of its fixed canvas, embrace that for a second and use it for sketching instead. Try being resourceful and imaginative in how you approach your toolset.
We need to deliver proficiently and efficiently. We’ve recognised the need to get in the browser faster, undoubtedly. But what we do in conjunction with that should reflect what works best for particular situations. For many, graphics editors can still play a crucial role in the final product.
Our ideas help shape us collectively and have an impact on the tools available to us moving forward. I hope we consider the worth of the ones we have presently, and resolve to refine them in ways that fit our workflows. Using what works and crafting great experiences will always trump ‘keeping up with the times’. For those struggling with the transition to the browser, dusting off your copy of Photoshop isn’t a bad place to start.
Discover the free Photoshop brushes that every creative must have, at Creative Bloq.