PSD to HTML is Not Dead

Nick Pettit’s article PSD to HTML is Dead on Treehouse provoked a passionate discussion. While the article is a nice summary of the current PSD to HTML workflow and its limitation, it’s missing a few important points. In this article, I’ll show you why PSD to HTML is not dead.

PSD to HTML evolved

Nick is describing evolution in web industry towards responsive web, better tools and frameworks and more flexible workflows, but is forgetting that PSD to HTML and Photoshop evolved too.

PSD to HTML and Photoshop are parts of web industry evolution

Converting PSD to HTML/CSS was never easier than today. All relevant browsers support HTML5/CSS3, so there is no need to slice designs in the old-fashioned way even when you work with PSD. Instead, we now have wonderful plugins like CSS Hat which make converting layer styles to CSS3 a breeze.

PSD to HTML is Not Dead

Designing by coding or coding by designing?

If you are a designer, your expression language is visual. You are giving things shape, moving them around and creating relations among them. Now imagine that instead manipulating objects directly, you will have to write definitions describing their visual properties and relations in HTML5/CSS3. Then you would have to check all your ideas in a browser instead seeing it immediately. Is this effective web design workflow? Definitely not.

Designing by coding isn’t an effective web design workflow

Achieving your creative goals (or, simply, desired look and feel) by designing by coding isn’t an effective workflow. Much more promising is the opposite direction promoted by tools like Macawcoding by designing where you design in tools similar to Photoshop and code is auto-generated.

Adobe strikes back

Does Adobe just sit there and watch their flag ship sink?

This brings us to another wrong assumption in the Nick’s article – do we really think that Adobe isn’t aware that Photoshop is becoming less suitable for modern web development process? Do we think that they will just sit there and watch their flag-ship and de-facto standard in web design become a plain photo editor?

I don’t think so, and let’s explore why:

  • Adobe is actively involved in web development and has declared a mission to move the web forward and give web designers and developers the best tools and services in the world
  • They have tools like Adobe Edge Reflow CC which allow creating responsive websites, and can now even connect to Photoshop for better responsive workflow
  • Adobe has added a functionality similar to that in CSS Hat to Photoshop CC
  • Adobe has introduced Photoshop Generator which opens a lot of possibilities for plugins authors, whether it’s designing for mobiles or tools similar to Macaw which could generate HTML5/CSS3 directly from PSD.

All these actions show that Adobe is trying to overcome Photoshop’s limitations for modern web design.

So instead of expressing our condolences, let’s end with a more positive message – the PSD to HTML workflow is not dead, like anything else it evolves and adapts to current designers and developers needs and towards more automation.

x PSD to HTML

PSD to HTML

Still using Photoshop for web design? Let us convert your PSD to HTML quickly and with pixel-precision!

Get a Free Quote

About the author

Lubos Kmetko started to work for XHTMLized as a front-end developer in 2006. He is currently responsible for quality assurance and development standards and processes.

More posts by the author

Comments

gaspar Jan 22, 2014

Fortunately what is dying is the mentality that a HTML page is pixel perfect like a PSD.

buzzedword Jan 22, 2014

I think this missed the point a bit. PSD to HTML is absolutely dead, and you’re actually reinforcing the point. “PSD to HTML” is a workflow in which a designer’s final product is a PSD handed off to a developer to cut and slice up and turn to HTML. You said it yourself, with things such as CSS Hat, the Edge Suite, let’s not forget about Muse, Photoshop by itself is no longer the sole tool being used to create an export format for a developer. However, the PSD itself is irrelevant to the actual creation of the page, and is used purely as reference.

I don’t think you should be viewing this as “the death of photoshop,” as it will always be one of the most important tools in a designer’s arsenal. Rather, there are now more tools between a designer and a developer that can add to their shared vocabulary to achieve the same vision. But the days of handing off a PSD to be sliced up are pretty much behind us, and I’m glad. Understanding that the web is not a pixel perfect fixed document like that file format, and putting the tools in a designer’s hands to understand that without having to code is essential to modern web design.

Trapser Jan 22, 2014

Nobody in their right mind uses Adobe products anymore.

So your arguments fall flat.

gaspar Jan 22, 2014

I code for more then 13 years and I dont know how to use slice tools in Photoshp.
If we think PSD to HTML the art of using slice tool of photoshop, yeap is death.
I can’t remember if it ever been alive. maybe in the 90s for beginners

Lenin Jan 22, 2014

Lubos, imagine that you are an expert in code, you know css3, html5 and JavaScript do you think you’d have the same opinion then? I don’t think so.

HTML to PSD will never die, but the reality is that it will almost exclusively be use by designers who refuse to learn code.

what I see with designers defending so passionately PSD files is a resistance to even consider the possibility of designing on the browser because code is not an easy thing to learn, but the reality is that if you are a designer and you learn code really well you will never use a PSD file ever again.

The main problem with PSD files is that they rely to much in the visual aspect of an static single page and the web is completely the opposite of that, so it’s extremely hard to define the interaction and to create user journeys with PSD file so designers become decorators and not architects, and honestly, I rather be an architect.

“Design it’s not just what it looks like or feels like, Design is how it works”
my fear is that most designers who refuse to code will never experience the wonderful power of designing functions and systems and will forever be limited by static single pages.

designing in Photoshop is like going to gun fight with a knife.

Nate Jan 22, 2014

As tools like http://codepen.io/ and http://jsfiddle.net/ develop more into IDEs I could see them pretty much replacing most of the design needs in PS. The web technology is starting to do neat design stuff (with svg, css, fonts, etc).

It might take a few more years for the drawing tools to develop, but ‘designing in-browser’ makes more sense in the long run if that is your end-target.

Samuel Jan 22, 2014

You didn’t address the argument of the fixed canvas that comes with a PSD. SO when I get this fixed canvas I’m suppose to make it a responsive webpage. Unless you hand off 3-4 PSDs a page your not even getting us halfway there as far as a complete design. Making 3-4 PSDs and you could have marked up and styled the page yourself. Which is one of my biggest problems with your argument. Pretty much PSD -> HTML is DEAD.

gaspar Jan 22, 2014

Lenin is not only “PSD files that rely to much in the visual aspect” clients too. That’s it’s the main problem. I believe that is something that will change with time.

The designer could have all the graphic aspects of the site in the head but somehow he need to pass that to client or a coder. It could show low-fi mokups but it’s not the same thing.

Anon Jan 22, 2014

> de-facto standard in web design
Perhaps in 2005.

> flag-ship […] in web design
Because Dreamweaver and InDesign were obviously never intended for web design, right?

> become a plain photo editor
Photoshop has always been an image manipulation tool first and foremost.

You also fail to mention anything regarding the output of such tools. Granted, this being an article on a site that sells PSD to HTML conversion services, it’s plain to see why you’d have the opinions you do.

Lubos Kmetko Jan 22, 2014

Thanks everyone for your valuable comments!

First of all, it doesn’t matter that we sell PSD to HTML services, we know the industry is changing and that we need to adapt (but that’s our problem). If PSD to HTML is about to die, this article won’t save it anyway.

Motivation for writing it comes from a human curiosity and a need to confront ideas with other people. I was a front-end developer for many years so this topic is close to me. If you want you can check my other article on this – http://xhtmlized.com/blog/free-psd-to-html/

New workflows and tools are usually adapted by the most agile designers / developers (like you might be) but you’d be surprised how many great designers are out there who still work in Photoshop and yes, they deliver 3-4 PSDs with various responsive versions of each page. And those are well thought designs even this type of workflow indeed isn’t ideal.

But that can be improved in the future, just check what’s possible to do with a Photoshop Generator here – http://standin.io. Again I’m not here to defend PSD to HTML or Photoshop – point of this article is to think about PSD to HTML from a broader perspective.

Daniel Jan 22, 2014

PSD to HTML is long dead as a straight workflow port from Adobe Photoshop. The generated code was never good anyway, The divide between developers and designers in web has been closing steadily over the years. Front-end development is the way forward.

Photoshop / illustrator will always be used to make rad designs, but it shouldn’t finish there. Cut your essential pieces and code the rest. Make it responsive, W3C compliant and bullet proof. I would recommend learning HTML5, CSS3, jQuery and then later some PHP.

Learning the code is way more valuable than using a plugin that generates code. Use Dreamweaver in code-view. Understand what is actually happening under the hood. Inspect-Inspect-Inspect (Google Chrome).

Designers don’t give up so easily, it’s really not that hard.(remember having to learn flash action script back in the day??… ) Failing is the only way you really learn. All the answers are online – http://www.google.com | http://www.w3schools.com | http://www.codecademy.com/ | http://www.kirupa.com

Nick Pettit Jan 22, 2014

“Do we think that they will just sit there and watch their flag-ship and de-facto standard in web design become a plain photo editor?”

If Photoshop is simply a photo editor, I don’t think it’s going to lead to long slow decline for Adobe. Photoshop is perfect for editing photos and that’s fine. I make lots of designs that involve photography and I always use Photoshop to optimize those images for web.

Eventually though, any non-photographic assets will be SVGs and Illustrator is more suited for that. The problem with Illustrator is feature bloat. Adobe seems very afraid to implement a dramatic redesign and remove features, which makes it’s incredibly overwhelming for the task. I think more new contenders like Inkscape will come along soon. Better yet, web based vector tools that can export SVG, like Mondrain (http://mondrian.io/).

For completeness, I should mention that I don’t think Illustrator is necessarily the answer to responsive design either. Its fixed canvas leads to many of the same problems as Photoshop. I still think it’s the best tool for creating SVG assets though.

Joe Krupa Feb 14, 2014

”Then you would have to check all your ideas in a browser instead seeing it immediately”

That’s called testing my friend. Design in a browser and only. PSD2HTML is 100% dead.

Jack Harris Jul 24, 2014

The argument for designing in the browser is the equivalent of a print designer designing on press. The browser is a delivery mechanism and there are as many ways to design for the web as there are designers. I am always surprised by the declarations that certain tools and methods are dead. Pencils aren’t dead. I still work on paper before i do anything else. Look at the resurgence of letterpress, another “dead” technology. Let’s agree that we should work in whatever way is comfortable and efficient and respects best practices.

Jeff Couret Aug 14, 2014

I think responsive design kinda killed psd2html. Over at my company http://WebNola.com we haven’t sliced or need a design sliced in years.

Would you like to add something?

Please note that we need at least your name and comment to proceed.