Menu Search
Jump to the content X

In Defense Of Photoshop


Waves of change are currently rippling through every aspect of the Web. The iPad and other mobile devices are changing the way we access the Internet, while HTML5 and CSS3 promise to change the way we develop it. However, another storm is brewing that threatens Photoshop’s throne as the application of choice for Web design. The battle suggests a fundamental shift in the design process from Photoshop to mark-up.

A militia of designers have assembled to launch this coup. Their propaganda is convincing, and their proposed successor is worthy, capable and sexy. Their cause is important, but their manifesto is flawed.

In Defense of Photoshop1

The Argument Link

The argument against Photoshop focuses on the effect of the final product. Photoshop can be used to create impeccable designs, but after hours of hard work, you end up with a static mock-up that is incapable of emulating the experience one gets when the design is converted to mark-up and viewed in the browser. HTML and CSS mock-ups require no explanation. They present the final product in the final environment. They also take full advantage of browser capabilities, such as fluid layouts, progressive enhancement and animation. These are things that Photoshop simply can’t do.

If we compare the two methodologies even closer, we find a number of other disadvantages to the Photoshop approach. For example, Photoshop’s text rendering is nothing compared that of modern Web browsers. CSS classes also make the process of updating similar elements easier than hunting down all instances within a Photoshop document. Even making certain structural changes to a website can be done more easily with CSS. Finally, I can’t overlook Photoshop’s propensity to crash, especially when opening the “Save for Web” dialog.

I admit: the benefits of mark-up are undeniable, and Photoshop doesn’t offer any of them. In fact, the mark-up generated across the entire Creative Suite is rather atrocious and unusable. Why then do I think Photoshop is still the most important Web design tool available today? The answer lies in the creative process.

Process Makes Perfect Link

The creative process is exactly that: a process. Clients may think we simply snap our fingers to make creative goodness flows directly from our brains to the screen, but we know better. We know that it takes hours or days of deep thought to devise the perfect solution. And if you’re anything like me, you often don’t find the perfect solution until you’ve explored a number of dead ends. Essentially, we need time and experimentation to work towards the goals of a project and determine the best way to communicate what needs to be said.

Experimentation is the key to creativity. Without it, the brain simply follows what it regards as the safest route, and the result is as mundane as the thought behind it. Most of the designers I know start all of their designs on paper: creating thumbnail sketches in order to quickly experiment with possible solutions. However, these sketches serve as jumping-off points; the design process is by no means over once the pencil is traded for mouse and keyboard.

Photoshop is vital to good Web design because it extends the process that was started on paper. It gives stakeholders a direct connection to the visuals without regard for the technical execution of the product. In other words, it accommodates visual processing. The designer is given a blank canvas—a playground for experimentation—on which anything is possible.

Experimentation: The Catalyst of Creativity

As designers, our medium is in a visual language. It’s a language of the subconscious, and it allows us to connect to other people through our work in ways that the spoken word cannot. Great design relies on an open dialogue between the artist and the medium. Interfering with that dialogue only impedes the process and distorts the message.

Designing with mark-up, however, creates a disconnect with the medium. Ideas no longer flow fluidly onto the screen. They must first be translated into a language that the computer understands. Like a game of telephone, this methodology requires a great deal of interpretation, which inevitably dilutes the idea and its potency. This chain of translation introduces a latency that kills experimentation and compromises the design.

The Foreman Or The Architect Link

Truth is often seen clearer in extremes. So, let’s try a little thought experiment. Imagine yourself as an architect tasked with designing a large corporate skyscraper. How would you proceed? If you’re like most architects, you would start by sketching, and then work your way into AutoCAD. Eventually, you’d end up with a computer-generated 3-D model. You’d probably take it even further by constructing a small-scale model. All of this processing gives you a better feel for the project without actually building it. It’d be preposterous for the architect to go out and start welding I-beams together as part of his design process; that is the foreman’s responsibility, and construction begins only once everything has been designed.

Designing with mark-up is like welding I-beams without a blueprint. The client understands—or should understand with your help—that the mock-ups are not the final product and that this actually benefits them. They want to get an idea of what the website will look like without having the entire thing built first. It allows them to change the direction of the project before investing too much. Our responsibility is to explain the differences between the mock-up and the final product. Moral of the story: don’t play foreman when you’re the architect.

Don't play the foreman when you should be an architect

A Call To Arms Link

Although mark-up can provide a truer experience for clients, Photoshop is clearly an important part of the design process. Ridding it from our toolbox could prove disastrous. What we need is not to change our methodology, but rather to amalgamate our tools. We need a tool that supports the creative process but at the same time gives us access to the subtleties of our medium.

Modern WYSIWYG editors are off the mark. We need something more like Photoshop, but with capabilities that allow us to create DOM elements as easily as we can create shapes. John Nack seems to be on the right track with his idea of HTML layers2, which would enable users to create and style HTML elements and render them with the WebKit engine all within a standard PSD file. While this idea is not completely practical, it gives us something to work with. Imagine opening the layer styles dialog and being able to add CSS3 styling to an element. What bliss!

HTML Layers
An example of what HTML layers might look like with CSS styling.

Jeffrey Zeldman makes a number of valid points about why creating such a tool is impossible3:

HTML is a language with roots in library science. It doesn’t know or care what content looks like. (Even HTML5 doesn’t care what content looks like.) Neither a tool like Photoshop, which is all about pixels, nor a tool like Illustrator, which is all about vectors, can generate semantic HTML, because the visual and the semantic are two different things.

I have to agree. Any tool that is meant to translate visual elements from canvas to code will inevitably fail in the semantic realm. Computers are monolingual: they need us to make that translation. However, do we need perfectly semantic code if we’re only creating a mock-up? Why can’t we accept the reality that we’re not crafting the final product and simply spit out HTML and CSS that’s “good enough” for mock-up purposes. Once the design is approved, we’ll put on our foreman hat and begin the real construction.

Until our paradigm is rocked by some killer new app, Photoshop will reign as the best tool for designing websites. Although it doesn’t currently speak to our medium the way we wish it did, it proves itself priceless when it comes to the process of designing. Photoshop is a virtual playground of experimentation; dropping it from the process only prevents your design from being fully developed. So, before you switch to the mark-up methodology, understand that you’re sacrificing creativity for a few browser capabilities, which could be explained to clients anyway. For the sake of your client, creativity and work, stick with Photoshop.


For more on information on designing websites in Photoshop, check out my Smashing eBook Mastering Photoshop Web Design5, a book for advanced and intermediate designers who want to brush up on their workflow and improve their Photoshop skills.

Further Reading Link


Footnotes Link

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14

↑ Back to top Tweet itShare on Facebook

Tom Giannattasio happily makes things at nclud. He works as an Editor for Smashing Magazine and teaches at Boston University Center for Digital Imaging Arts. He loves to experiment and share his work on his personal site: attasi.

  1. 1

    Ah, very useful post.

    Every process is about separation of responsibility. When designing a website one should not worry too much about how (apart from the obvious things that are simply not possible in html), when working on the front-end one shouldn’t be led by design try-outs.

    Designing and front-end are two very different things. When combining the two you’re going to end up with inferior designs and inferior front-end code.

    I never really understood why people would want to design with html/css anyway. They are still pretty impractical tools for design.

  2. 2

    Interresting article, but I cannot agree with you in many points. In my opinion neither PS nor HTML should be used to create a mockup. Both way offers good solutions for specific problems (e.g: you can achive nicer gradients and effects in PS, in HTML you can bring in the interaction part of the design process) but they are just not for this kind of job. Fireworks. Or any other wire-framing tool. To be honest I don’t understand why designers don’t use them, they really should.

    P.s.: saying that PS crashes sometimes is not an argument :)

    • 3

      I second that. Fireworks ist just an underused tool to create nice mockups. Different Frames for Hovers or links, different Pages for well different Pages. It’s easier to update your whole Design in one png-file without using different psd-files or searching for groups and layers.
      Of course Photoshop has it’s benefits but its kinda no problem to import a psd into fireworks.

      • 4

        true that Norman! Fireworks is our Industry standard for web design. Photoshop is just used on the side for massive pixel-crunching effects.

      • 6

        True, I don’t understand why so many designers use photoshop alone to design websites.

        First of all it takes a lot more time to design a layout in photoshop, the tools to do simple things like gradients, borders, masks, etc. are a lot more cumbersome than they are in Fireworks.

        Second, in Fireworks you have the wonderful slice tool which is significantly more useful and less time consuming than photoshops slices.

        Third, vectors, photoshop might have some vector support now but it’s still no where near Fireworks or AI and as with many other photoshop tools, working with vectors is a lot more time consuming.

        Add pages (which can even be used to make a flash website) and the possibility to export html (just for the purpose of preview) and there’s no contest. Photoshop is grate for bitmaps, awkward for making website design and terrible at vectors so why not just use it for what it’s good at.

        Designers that are afraid to learn Fireworks should just try it out, it’s a lot more intuitive and makes a whole lot more sense then Photoshop.

        • 7

          Web Designers use FIREWORKS, non-web designers use PHOTOSHOP.

          PHOTOSHOP is for photo mockups, FIREWORKS is for web mockups.

          Stop arguing something so obvious! =)

          • 8

            Andru, you have just labelled a majority of the web community, including many top designers, as “non-web designers”.

            Surely we should be all be able to choose to use the tools which help us achieve the best results, without calling one approach right or wrong?

          • 9


            If you are talking about creativity, then please do not put FIREWORKS in 1st place.

          • 10

            Haha screw Fireworks. What a clunky joke it is. “Photoshop is for editing photos only” – LOL

          • 11


            Both Fireworks and Photoshop are TOOLS. Nothing more.

          • 12

            Andru is correct. Fireworks and Photoshop are both tools in the designers kit. However, if you’re still using Photoshop for web design mockups you are choosing the wrong tool. Clunky and as infuriating as it can be Fireworks is better for the task.

            @sayan Creativity is in your mind not your software.

      • 13

        Agreed Fireworks is the tool best suited for producing web ready images, though use whatever tool you feel most comfortable with, or which suits a particular project.

        Due to either necessity or choice, I’ve used pretty much every macromedia/adobe product at one time or another (even inDesign on one occasion). Creating a design is not just about the tool you use, it is how you use it.

        Personally I barely touch PS or FW for coming up with designs anymore, not that they’re not useful, its just my current process eliminates the need, and most of my design takes place directly in the browser. I’m sure it will change for other projects.

      • 14

        I have been using Fireworks since 1999. And I am familiar with both Photoshop and Fireworks. If it comes to web design, I really do my mock-ups in Fireworks. It is much simpler to create vector based elements. Fw is really a workhorse for designing screen UI, be that a web site or an app. But Fw is for my the final assembly table. Like InDesign is for print designers. I use Illustrator for elaborate vector creations, and Photoshop for cool photo processing, effects and whatnot. Then all is dumped into Fw to make the look of the final layout. If there are simple elements, like buttons, I use vectors in Fw. Just because it is faster that way. Another major reason I use Fw for screen layout design is that this software was originally created with that purpose in mind, and so it has cool functions that one can capitalize upon. Such is the multiple preview of different export options to compare resulting look and file size, or the famous Fw-only PNG8 export with alpha transparency. Whereas Photoshop has zillions of cool features, which we all adore and deify, but the software itself originally was created for the purpose of photo manipulation.

    • 15

      There is an interesting discussion here. As a former fireworks user I find myself constantly wondering why Photoshop hasn’t adopted some of the tools from fireworks. When it comes to designing for the web you would expect your tool to have all the visual elements available out of the box. Now I’m not taking it to the interactive extreme just the visual. Border and line elements should have all the options of css (fireworks does). If we can set borders to dots or dashes in css we should have this option in Photoshop. The same goes with built points and such. The text tools in PS are just hard work for laying out content in mock-ups.

      In saying all this I would still use Photoshop as the main design tool, though its hard work the flexibility is worth it. With adobe owning Fireworks, I not sure why they haven’t adopted some of it’s functions into PS?

      • 16

        Because they still want to keep Fireworks and Photoshop as a separate products.
        Two products = 2x of money.
        Just my opinion though.

      • 20

        level8 design studio

        July 29, 2010 8:16 am

        FW and PS are different because they’re geared toward different uses. I use FW for all my website designs. The combination of vector and bitmap is great. The ability to quickly duplicate a page and take your design in a different direction (without disturbing the original) can’t really be done in PS. Now if you’re looking for crazy photo manipulation and bitmap effects then PS is your tool. I love both programs but spend two weeks with FW and I doubt you’ll go back to PS for site designs. Not to mention how quickly you can create mock-up from your designs.

        • 21

          Personally, Fireworks is the best tool for the job. I’ve used for designing all my websites since 1998. Multi-frame designs with shared layers show your over-states, flyouts, user paths. And find+replace text, font, and color! What a pain to change a font or color on all of your layers in PS!
          I still use PS image editing and FW is more like my InDesign/Quark.

          Unfortunately, Fireworks is on Adobe’s chopping block. CS6 will be it’s last run. I would hope the capabilities would be brought into PS, but I think PS is way overloaded already.

          • 22

            Are they quiting on Fireworks? What a pitty! Anyway, I prefer Corel Draw over Adobe… if it was not for the Macromedia suite they bought. If they dump Fw… well, many people will dump them.

          • 23

            Fireworks is the greatest prototyping tool i ever used, since tried it in 1998, and i will never go back to Ps 4.0.1 for my web site design work.

            Also, i don’t think HTML/CSS and Photoshop conflict each other, you just need suitable tool to do the job. it just likes that you will never use spoon to eat Sushi. :)

          • 24

            I’m on the Fireworks Development Advisory Board, and I’ve heard no such news of Fireworks being on the chopping block. It’s sales are increasing year over year, so I’m not sure why Adobe would consider axing it. Do you care to share where you heard such a rumor?

        • 25

          Sooo confused…. how does Photoshop not have vector support? Are you not using Illustrator and Smart Objects?

          And can you really do a balls-out design on Fireworks. Photoshop is a lot more than a bunch of Layer styles in my designs.

          My beef with PS is when they dropped Imageready and expected you to use Fireworks *just* for slicing and optimization – what a bummer Adobe.

          • 26

            slicing as well as creating animated gifs was incorporated into Photoshop. I missed Imageready too until I realized everything I ever used it for was just added to PS.

      • 27

        Remember FireWork was originally developed by Macromedia as a web design tool where as Adobe Photoshop was purely a photo processing application. They are not the same application. Yes they are some what similar but by far not one in the same.

        I find Photoshop more trouble than it is worth when I can do 99% in FireWork.

    • 28

      I’ve never had photoshop crash in either Vista or Win7 on multiple machines, what’s all this talk about PS crashes? Is this really common or something, even back in XP / 98 days this might have happened to me once every few months when I was working on multi GB sized print docs.

      • 29

        Yeah, I work on a Vista run pc and Photoshop hardly ever crashes on me.

      • 30

        I’ve used Photoshop on a Mac for a couple of weeks and it crashed several times. I can’t remember when it crashed on a PC and I’m using it for about ten years now. I bet Thomas Giannattasio uses a Mac :)

        • 31

          I use photoshop on a mac and i just can’t remember if it ever crashed once. I don’t think so.

    • 32

      I agree: I can not design a site without Fireworks. It allows to “preview” a complete site, before comitting any HTML.

    • 33

      I agree: I don’t understand why we are talking about PhotoShop when talking about webdesign. Ten years ago I discovered that FireWorks was much better tool for webdesign. Nothing changed since then.

    • 34

      There’s no such thing as too much Fireworks love. Photoshop gets opened once every month on average when someone sends me a PSD that just wont open properly in FW, that’s about it.

      Use the tool designed for the job, people.

  3. 35

    Just from reading “The Argument”, it clearly states you havent got a damn clue. This struggle of understanding that you have, is easily overcome.

    There are 2 and only 2, entirely different, areas of building a website.

    1) DESIGN; The design process in which we use photoshop to create how the website should look, we design the display of the content architecture, the navigation buttons, the header, everything that should be ‘seen’ on the website should be designed within photoshop.

    2) DEVELOPMENT; Now quite simply, we’re happy with our design and to get the ball rolling, the development stage takes place. This would involve, html, css, javascript, and maybe even a cms.

    This whole malarky is ART + TECHNOLOGY = INTERNET PRESENCE.

    Now if you’re argument is what we provide our clients with, meaning either a design (jpg/png) screenshot, or a functional html mockup then you need to know they are 2 entirely different things.

    Would you waste your time, creating the design in photoshop, then converting it into so sweet so nice html/css, to then find after you’ve shown the client, that the changes that he wants is actually a change you need to make to the ‘design / psd’ ?

    The html and css, is not as important as the design. Now this may be arguable to you fond web nerds, but its simple. The presence of a website defines the number of visitors / sales and alsorts in the marketing area. HTML and CSS, is only the glue of the website. No general client cares about glue and probably never will. All they want is to have the design you showed them, work for them.

    You might choose to use html 5 and css 3 over older versions, but why? Just because you feel more comfortable with that, or do you think by using html5/css3 your giving the client somewhat ‘the best’?

    • 36

      Spot on!

    • 37

      Thomas Giannattasio

      July 29, 2010 5:05 am


      I completely agree with what you are saying: They are two completely different processes. This was the core of my article. The suggestion of implementing CSS within Photoshop does not mean that I recommend developing a site within Photoshop. That would be ridiculous! I was simply suggesting that if we wanted to present the client with a comp that was truer to the end product, we would need something along these lines. These comps would only be used as a comp. By no means would they be used as the final site, but only a better blueprint for the final site.

      I think we’re saying the same thing here.

      • 38

        Actually there are 3 phases and you’ve completely glossed over the whole content architecture phase.

        If you’re rushing to get to the coding phase because either the client can’t undertand the UI or the design you’ve failed your client.

        If you’re rushing to get to the coding phase to increase your profitability then you are failing the client.

    • 39

      Good god Adam Roberts.. why would you spend 10 minutes writing a response but not 5 minutes reading the article? You just basically argued his point against him. LOL.

      • 40

        The internet makes keyboard heroes out of us all… maybe he needed to smack down someone, bad day…

    • 41

      that was just incredible

    • 42

      They are not two entirely different processes. It’s all design. From colors to code, it’s all part of a total solution.

      To poo-poo one aspect over the other is to give a client a flawed solution.

      Use the tools. ALL of them. When and where necessary. Don’t ignore the development side. Don’t ignore the copywriting side. Don’t ignore the marketing team. Don’t ignore the usability folks. Don’t ignore the graphic design.

      There’s nothing wrong with Photoshop to communicate broad visual direction. However, Photoshop is *not* a web page. It can not communicate the intricate details of interaction. And these things *are* a critical part of the design…both visually and functionally.

      Where I don’t like Photoshop is when it’s used as the ‘master document’ that everything gets signed off on. It’s no where near the final phase of the design process. It should be a milestone, but not set in stone.

    • 44

      Well, I would disagree about the ‘unimportance’ of HTML and CSS. It’s true that clients primarily want their websites to be beautiful, but they never forget to ask me about how will their sites rank on Google. And without good HTML there is no good search engine rankings. With CSS you can make miracles, if you know its true potential. I agree that a website has to be visually appealing, but it’s the interaction part that makes it trully good or bad. That, my friend, is a difference between a nice image (layout), which you call ‘the design’, and a great website. You can’t call yourself a webdesigner and say that HTML and CSS ‘are not that important’. You are a graphic designer who believes he can make websites :)

  4. 45

    I agree to Marcell!!!

  5. 46

    The answer is simple – use Fireworks. It provides enough opportunity for creative process but with its object-based approach is way more suited to modern web work.

    I can’t believe how Fireworks changed my design process. It is so much faster and relates better to CSS-thinking. Photoshop has its merits too (I fire it up to prepare advanced graphics or to retouch photos – but actually much less frequently than I thought I would, Fireworks is pretty capable in basic to intermediate image editing) but these days I would not recommend it as a front line web design tool.

    • 47

      I couldn’t agree more. I switched to Fireworks a couple of months ago (after 10 years with Photoshop) and haven’t looked back since. I still use Photoshop for what it’s good at, like image manipulation and so on. But for actual web layouts and wireframes, Fireworks is just so much better in every way. It’s a mystery to me that Photoshop is still the most widely used software for web design.

      The article mentions that designing in the browser creates a latency that hinders creativity, and I’m actually starting to feel like this is the case with Photoshop as well. It’s just too slow to move elements around and really experiment. Whereas in Fireworks you can very quickly rearrange objects and try different layouts within seconds, giving you a real sense of freedom.

  6. 48

    First flash now photoshop? It’s obvious that they still have so much to do to match photoshop.

  7. 49

    Just throwing this out there, but what if the semantic and the visual CAN become the same thing and the tools and languages DO eventually merge? What if the computer learns aesthetics? What if the web reacted specifically to each user’s brainwaves?

  8. 52


    PSD or Photoshop is and will be always the best tool for Designers. If I want to convert the PSD to HTML I just use services like but I always will use Photoshop to generate and create the designs.


    • 53

      before looking at the link I thought the site was one of those auto-generate types. It’s not. It actually looks like they go in and hand code everything and NOT run it through some algorithm. It’s definitely a good option if you’re in a time crunch but I always prefer coding it myself.

    • 54

      Have you tried using BaseKit? It’s pretty easy to use with a PSD, just make sure that the layers conform to their simple spec and upload.

      There is no waiting times (apart from the upload) and you can change the PSD and upload your theme as many times as you want without any extra costs; ok they have a very small change per month that includes hosting on Amazon (they also have a free 30 day trial account).

      Once uploaded you simply drag and drop their widgets to create your site.

      Think iWeb (done properly) on steroids.

    • 55

      Services like that work well for static web pages. However, without intimate knowledge of (X)HTML/CSS and web principals the designs will always be limited to “I thought the web did this” and “I want it to do this but.” When you start involving transitions and dynamic content then things really become abstract.

      Just like most highly creative and experienced coders don’t hold the most expertise in design, most highly creative and experienced designers don’t hold extensive expertise in coding. I think it’s best to have designers with a solid understanding of coding principals work with coders that have a solid understanding of design principals.

      • 56

        I agree, Benny. It is actually a rare individual who is both an exceptionally creative designer and a highly proficient coder. They’re out there…but they are rare. So, as you state, the best solution is to have a team of highly skilled designers work with highly skilled developers, where each has a solid understanding of the principles involved in their counterpart’s job responsibilities.

  9. 57

    I would be very happy with something that produces the exact same result as photoshop, but just doesn’t make me suffer as much in the process…

  10. 58

    My problem isn’t with photoshop being used as a mocking up tool, I’m perfectly fine with that. Okay, it’s not interactive, but pretty pictures still help sell ideas.

    What my problem is with Photoshop is what a dreadful piece of software it has turned into, with big chunks of its GUI implemented in Flash, a user experience that breaks user’s expectations on both the Windows and Mac platforms, especially on the Mac where it breaks Spaces and Expose, long standing bugs that have persisted over multiple versions of the product without being fixed, and a user experience, something for which the product was once held in extremely high regard, that seems to deteriorate with each new version.

    It’s as if at some point a couple of years ago the Marketing department got put in charge and the opinions of the engineers ceased to matter.

    Photoshop as a concept is sound, but the current implementation has some very serious issues that need to be addressed.

    And ultimately, when it comes to mocking up, the best tool is still a notebook and pencil.

  11. 59

    There’s several things here that I don’t really understand.

    1 ” For example, Photoshop’s text rendering is nothing compared that of modern Web browsers.”

    What? Try using Typekit or similar solutions on a Windows PC, and tell me how those fonts look compared to in Photoshop. The gap is closing, if you’re on a Mac, but that is not the majority at all.

    2. “CSS classes also make the process of updating similar elements easier than hunting down all instances within a Photoshop document.”

    Heard of Smart Objects?

    3. “Finally, I can’t overlook Photoshop’s propensity to crash, especially when opening the ‘Save for Web’ dialog.”

    I’ve been working with Photoshop nearly daily for 4 years now, and I can count the times it has crashed on me with half of one hand, none of those being tied to saving for web. Perhaps it’s time for an upgrade to your Photoshop or your PC?

    As some in the comments have noted, Fireworks seems like a good compromise between Photoshop and HTML5/CSS3, but you’d most likely be using Fireworks and Photoshop together, with a little Illustrator now and then.

    I’ve been wanting to learn how to use Fireworks the way it is now intended to be used, but haven’t had the time. It’s a shame, because it could probably cut down the time it takes to make mock-ups for clients. Creating them simply from web markup language will only work if your designs are fairly simple in style.

    • 60

      Agreed 100%. I really can’t remember the last time Photoshop crashed on me and it stays open on my computer a majority of the day along with several other programs.

      “The argument against Photoshop focuses on the effect of the final product. Photoshop can be used to create impeccable designs, but after hours of hard work, you end up with a static mock-up that is incapable of emulating the experience one gets when the design is converted to mark-up and viewed in the browser. HTML and CSS mock-ups require no explanation.”

      Either way you choose there is still explaining to do to the client. If you have a static mock you will have to explain how the end-user navigates, what user interactions are available and a few other items. But at least the client will know what the end result will look like. If you only do a mark-up version you have to explain to your client what their buttons look like, what their navigation will look like and why their site looks different in other browsers because you decided to use CSS3. But I also need to mention that any good front end developer will get the mock-up to translate 100% in HTML. If not, find a new developer to work with.

      To me designing without Photoshop is like putting a puzzle together with a blindfold on. Who really just sits down at their computer and aimlessly throws up some div’s in their code editor and just hopes for the best?

    • 61

      Thomas Giannattasio

      July 29, 2010 5:14 am


      Thanks for your comments. I’ll address them individually.

      1. Photoshop’s anti-alias algorithms are weak in comparison to modern browsers on modern operating systems. This is especially true with the core web fonts, which were designed and hinted with browsers in mind.

      2. Smart Objects are great for updating multiple instances all at once. However, they’re not nearly as flexible and powerful as CSS. For example, say you want to change the color of all text links in a document. Smart Objects are useless for this task.

      3. Are you serious?! I’d love to have your machine then. I think Photoshop is pretty well-known for crashing. I don’t think I can make it through a week without it crashing a couple times. I’m running a pretty solid Mac w/ 4GB RAM.

      • 62

        “3. Are you serious?! I’d love to have your machine then. I think Photoshop is pretty well-known for crashing. I don’t think I can make it through a week without it crashing a couple times. I’m running a pretty solid Mac w/ 4GB RAM.”

        I’m with George.

        It must be a Mac thing or there must be something amiss with your machine.

        I’m amazed that crashes are a normal part of some Photoshop users’ experiences. I use Photoshop CS4 all day every day on Win 7 Ultimate and cannot remember if or when Photoshop has ever crashed here. It’s rock solid stable.

        • 63

          It is a Mac thing. Believe it or not, Adobe has never gotten around to doing an OSX-native (Cocoa) version of Photoshop — it still uses the Carbon (OS9-compatibile) API. It’s like running a Win95 version on XP/Vista/7 in compatibility mode — a good dietary source of heartache and grief.

          • 64

            I understood that Photoshop CS5 Mac is 64-bit written entirely in Cocoa?

          • 65

            “It’s a Mac thing”

            I Disagree… I use an Early 2009 Macbook with only 2GB and can’t remember if PS ever crashed on me. CS3 on Leopard.

            People ask me almost every day why I don’t upgrade OS X and/or CS apps. I answer with “It ain’t broke”.

          • 66

            Christopher Anderton

            August 2, 2010 8:36 pm

            CS5 is in Cocoa.
            In 5 years, i had 4 crashes in Photoshop (MacOS X). All of them because of trouble with external scratch disks.

            Is it known for crashing? I actually never heard that. On the contrary.

      • 67

        1. “Smooth” anti alias for fonts is almost identical to cleartype. “none” for anything under 9pts.

        2. Link text layers, select one linked layer, hold shift while changing the character option… or you can select multiple text layers using shift or ctrl and make global changes to the character options.

        3. It used to crash for me winxp. My current windows vista, 4 gigs ram, 4 core, CS4, scratch disc on a devoted 10 gig. defragged partition (this helps a lot!)… no crashes.

        • 68

          I think you have just strengthened his points for 2 and 3. What if you wanted to target the equivalent of a + p.someclass or h1 > p in your photoshop file? (he only gave a simple problem as an example).

          Also,yes if you build a computer powerful enough no application will ever crash

          • 69

            This suggests they tried to include “character styles” in CS5 but had to postpone it until a future release. At least they are thinking about this.

            “[Sorry, Jesse, I’m afraid not. I don’t know whether this makes it better or worse, but we had to cut character & paragraph styles from CS5 at the 11th hour. I know they’re something people (esp. Web designers) really want, and making the decision to hold off support until a later release was a real bummer. I think everyone would agree, however, that it’s preferable to do fewer things better than to ship buggy stuff that’s not ready for prime time. –J.]”

      • 70

        A Mac, I knew it :) Photoshop just doesn’t crash on a PC.

      • 71

        Using PS CS2 every day for 2 years on a machine i never turn off and also rarely even close PS (maybe once every 14 days) – never experienced a crash. Oh yea it’s a PC – probably crashes are MAC related.

    • 72

      PS is great up to a point. But then there’s a point in the project where the more efficiency is gained by jumping over into HTML/CSS/JS.

      The benefits are numerous:
      – teams (including client) can now begin seeing and USING the true interactions on the page
      – one can get an idea of the content in proper context
      – iterative tweaking is now much easier via components and includes and master CSS files
      – one can still easily jump back into Photoshop to produce new visuals as needed
      – we’re now 1 step closer to a working site making the development phase shorter

  12. 73

    This is definitely something that I’ve been dealing with lately. It seems that mocking up with HTML gets the job done quicker but can lack a certain punch and may stifle the process as you mention here. When mocking up with Photoshop, everything gets done with a little bit more flare but takes twice as long and isn’t always easily translated over into web. Perhaps it might be a better idea to talk about what method of web design is better given the situation – for instance, let’s look at the pricing, timeline, and complexity of the project and then decide where to jump in. That’s often worked best for me. Maybe the amount I’m getting paid doesn’t warrant the extra creative time, and CSS3 with its massive toolkit will work just fine. Just some food for thought!

  13. 74

    Andrei Gonzales

    July 29, 2010 1:57 am

    This is all missing the point.

    What’s really needed is a tool specifically built for designing websites:

    • 75

      Randy Humphries

      July 29, 2010 6:38 am

      Jason’s suggestions are spot on in that article. I’d almost be content with just a paragraph and character styles palette in Photoshop like InDesign has and a mode to show how the type will render in the various web browsers.

      But I would be very, very, very please with a tool that Jason is suggesting. Let the design/creativity happen in an application that is like photoshop but give it tools that mimic CSS and browsers. The application does not need to output the HTML or CSS.

  14. 76

    Why having this discussion in the first place? If you can create designs and/or mockups with paint, why use a $1000 app to do the same?

    My point is; Just stick with the app (or technique) you’re used too work with and become better with it.

    As a developer (not designer) I’m used to create mockups in HTML+CSS and build from there. I do have basic knowledge of Photoshop since clients send me .PSD files which need to be transformed to HTML and that’s fine by me.
    The biggest problem I see with “designs” is the fact that (most of the time) designers have no idea how HTML and/or CSS works and the design isn’t pixel perfect or has impossible elements like full screen backgrounds (with fixed borders), weird fonts (which have no gracefull fallback) and stuff like that.

    Just make sure you do what you can, with wathever application you’re using and stay in your own field of expertise.

    • 77

      True, but the article is “In Defence of Photoshop” thats why people arguing the pro’s and con’s of Photoshop, i’m sure they will continue with the workflow that is best for them

      • 78

        I know, but these comments almost start to look like “iPhone vs Android” and “Windows vs MacOS vs Linux” threads around the web. Fanboy vs fanboy…

        I guess it’s because of the new eBook by SM, but if you think the book is wrong; write your own! Or just learn how it also can be done with an application you don’t master (yet).

  15. 79

    Building a website isn’t the same as building a real object. There is no physics involved, you are still in a virtual world.

    The result of design and development in web design industry is comparable to finished 3D model in the construction industry. Fully functional website ~ 3D model of a building.

    • 80

      Chris Lorensson

      July 29, 2010 4:10 am

      Obviously it’s not the same thing Norbert but as an illustration it works perfectly I think. Of course there are no physics involved! (Unless you count lifting the mouse and the Red Bull. Mouse, Red Bull. Mouse, Red Bull. Red Bull. ;-)

      • 81

        It would be good, if you could build a skyscraper and than say #topFiveFloors {display: none;}
        Or #city {overflow: scroll;}

        Any “finished” website can always be altered with a keyboard stroke and it’s as hard as making amends to a blueprint or 3D model.

  16. 82

    I follow the argument — but disagree. You say that ‘designing with mark-up … creates a disconnect with the medium’. No it doesn’t. What you mean is that you know Photoshop better than you know XHTML/CSS.

    Both PS and XHTML/CSS are just tools to get a computer to render something the way you want it. There’s no greater disconnect with the medium with one than with the other. It’s just a question of which you are more comfortable using.

    For someone who hasn’t always used PS, ideas may flow just as fluidly working XHTML/CSS.

    And our medium, I’d say, isn’t just a visual language. That’s slightly diminishing the significance of the designer in determining structure, hierarchy and the like. And interactivity, too.

    So while I agree that PS is a very valuable tool for many designers in the ways you describe, I don’t really agree that this comes down to anything more than the designer’s personal preference. I don’t think it’s inherently *better* for a designer than working in XHTML/CSS. Just suits a different kind of skillset.

    • 83

      As a designer and developer I can see where you’re coming from, though I have to agree with both trains of thought.

      When building a sign I’ll first do a PSD mock-up. If the site has a shop or other elements I usually don’t do a PSD for these I just go straight to html and css to design. By just using css and html I can develop a satisfactory design layout but it’s not graphically moving, then again it doesn’t always need to be.

      It’s really dependent on what the end product needs to be. If there is a real graphical element to the site developing a mock-up in css and html would be a nightmare. In a PSD you can develop the elements you need and bring then to your code.

      In my experience part of the problem is people not using the tools right. They flatten things and don’t use the slice tool. The other things are to manage your client well and support them to understand the website development process. Don’t let them bully you into building the site before they have signed off a design.

    • 84

      Thomas Giannattasio

      July 29, 2010 5:21 am

      I agree that there are many benefits to working in the way that is most comfortable for you. I started some 14 years ago by designing in the browser. I had never touched Photoshop, and for years I developed sites with HTML and CSS. However, as I got more involved with the industry, the benefits of Photoshop were undeniable. I felt that I made a shift from developer to designer. I learned to work more visually, which required a lot of experimentation and processing. A text editor simply can’t accommodate that. Photoshop is by no means perfect, but it’s the best I’ve found for the process of design.

    • 85

      Agreed. I’ve found that of late my proficiency with CSS & markup, especially with .less to speed it up, I feel designing in Photoshop has become more of a disconnect. Also webkit with gradients, masks etc.

  17. 86

    Shouldn’t this post be titled “In Defense Of Smashings ‘Mastering Photoshop Web Design’ book sales” ??

  18. 88

    CSS in Photoshop?? Hmmm.. i liike that idea!

  19. 89

    Personally I couldn’t do away with Photoshop; it’s my creative playground. To experiment with an idea, you shouldn’t have to translate it through markup.

  20. 90

    WTF… now Facebook does even know I read Smashing Magazine. I don’t like it. FB is *everywhere* and even if you’re not on FB you can’t escape… :(

  21. 91

    Interesting, but completely flawed I’m afraid.

    Making the analogy of the Architect and the Foreman is a valid one but not as a Pro for Ps. If building a website the Architect would use paper and Visio (the AutoCAD of the web industry). Once that’s done the Foreman would build the HTML and the Designer would be choosing color schemes, images and so forth. You are then akin to an Interior Designer in your building analogy, not an Architect.

    Think of Progressive Enhancement, that approach has to fit more into your website building process long before it normally does. The danger is the Designer gets carried away in Ps and loses perspective about the nature of the medium they are building for.

    Ps has its place, as does Fireworks (my particular choice) but it is quite a way into the project . At the end of the day its just a tool, IMO a rather over-complicated and bloated one, but a tool none the less and you have to realize when to use it.

  22. 92

    I find this article defends more a way of working than a tool used to do the design. First off the problem with the process is usually that it takes off from “photoshop level of thinking” i.e. presentation layer and not what the web app or page is about and what activities it should support.

    There are many types of sketches – design documents – in use, some are ment for the designer herself and others are for communicating (ideas or definitions). For getting to see what an idea would look like, photoshop is good. For delivering ideas or definitions photoshop is not always that good, as it will not define or present flow or ideas of activities too well.

    And that is where comparison to architect comes along: architect thinks more of service, infrastructure and task layers than presentation layer (which still often summarizes the decisions and should play well with other layers).

    But this all depends on what type of browser viewable work is the design done for. Heavily text dependent stuff might be better off with Indesign and real content (if and as the content should be considered as the most important UI). Poster like campaign sites could actually be better of with Photoshop etc.

  23. 93

    I don’t distinguish between “visual” and “technical” in the same way as many people here seem to do. I feel there is an inherent technical aspect to each component of web design. (Structure, functionalities and technical solutions also belong to web design and are often the basis for visual components).
    I don’t design “aspects” of a design strictly separately, but a website as a whole.

    It has never felt good to design using only an image editor, because you miss the opportunity to get inspired by the actual environment, and by technical aspects.
    Also, image editors are relatively inflexible, messy and slow in terms of work flow (especially when you use bloatware like Photoshop).

    For the graphic parts of a design, I often use a very simple WYSIWYG-editor (iWeb) to do a first mockup of pages, and I use an image editor to make the images that are needed in the design. That way I don’t have to worry about code when designing, but I’m still working in an environment that is closer to the real thing, and I can still try out things in code.
    A lot of refining usually still happens when I put the design into final, handwritten code, and regularly the technical aspect of a design will give me a new idea.

    BTW, on a Mac, use Pixelmator instead of Photoshop.

  24. 94

    My overall thoughts on this are Ps is great but needs to adapt to the fact that designers use it for the web. Just some basic visual elements of CSS like border dashes or dots would be a great start.

    Designers developing websites and developers designing will always happen, and we will take different approaches.

    There are merits to both, but if implemented poorly or missing the elements of each other the end product will suffer. Some things just take time, hard work, and knowledge.

    If you are missing some of these toolsets, don’t be afraid to collaborate. Outsource some of the work if need be.

    It shouldn’t be about the time it takes. Put in the time and make sure the client pays for it. Make sure to manage the client well to get a great end product.

  25. 95

    I use, and have always used Photoshop to build web designs. I hear everyone raving on about Fireworks but I’ve never really used it.

    I would be interested in reading some decent articles about why Fireworks is better and how to use Fireworks to build web designs as I’ve only ever found it awkward to use (probably because it’s different to Photoshop).

    Anyone fancy linking me to some? :)

  26. 96

    I’ve had very bad experiences with design firms that act like many of the commenters here have expressed: as though designing in Ps is High Art that some schmuck coder will just make into a webpage. I’m here to tell you that’s a fine way to get a bloated, crappy website that still doesn’t look like the pretty pictures you were sold. I’m sure it’s not the tool’s fault, but I can’t imagine ever again hiring a firm that has designers working in Ps (or any other tool) separately from coders.

  27. 97

    I completely disagree. The translation of the design from brain/paper to HTML/CSS is only as difficult as it is for the individual person, just like the translation of the design from brain/paper to Photoshop is. As someone who is far more comfortable hand-coding with HTML/CSS than using Photoshop, I prefer to skip Photoshop and go to HTML/CSS because I’ve found the frustrations of Photoshop inhibit my creativity (just like you’ve found coding inhibits your creativity).

    I’m not saying everyone should leave Photoshop and we all march against Adobe. I’m saying that people need to find whatever workflow is best for them. Designing websites, like any creative process, is different for every person and we should like it that way.

    • 98

      I would agree that the transition of design from brain / paper to HTML / CSS or from brain / paper to Photoshop should be a relatively simple one for those individuals adept at doing either.

      I also agree that individuals and firms have to use production workflows that best suit their businesses and their target markets.

      Where I disagree is the glossing over of all the very important principles that go into design (not just web design, but all design), like composition, color theory, use of negative space, transition, eye flow, emotional impact, typography, etc. Unless you are both an extremely skilled design guru and a 733t coding guru, it would be very difficult to go from thoughts in your head or scratches on paper to a completed “production” concept on screen that takes all these considerations into account.

      I’ve been using Photoshop since it’s first iteration (we’re talking late 1990 here) and I’ve been developing on the web for 15 years. I went to school for graphic design / commercial illustration, and I am self taught in HTML, CSS, XML, JavaScript (vanilla and OOP), C#, WSI, JSON & REST. I have designed entire Cross-Browser WebApp UI’s that can be skinned exclusively through CSS using very granular specificity, that are still highly functional and yet, visually aesthetic. (Sorry for tooting my own horn…but I felt it necessary to provide background before my next statement).

      In all my experiences, I have never seen any project that was truly a fortune 500, production quality project, that did not have at least 1 iteration (usually more) of comps created for the client and explained by competent sales staff. In addition, I’ve had very few clients that wanted ONLY a web product. In many cases, there is print-collateral and brand identity campaigns that also must be considered. Lastly, as with any services contract, skipping a strictly design phase and creating “working” comps usually leads to clients wanting to change established functionality and / or otherwise introducing change-of-scope requests into the project that can turn a fairly straight forward contract into a never-ending-cycle of revision after revision after revision.

      No matter which program you choose to use, the design phase is just as important to the end product’s success (which is the ultimate goal) as the implementation of that design is. The ability to story-board a site for a client via static comps not only allows you to limit design revisions, it also allows you to easily archive previous iterations, so when the client comes back and says, “You know…after thinking on it, I think I like it the other way better”, you’re not left standing there with a “deer in the headlights” look on your face because you’ve either traveled too far down the “implementation” road to go back or didn’t save the previous iteration’s markup and can’t remember what your client is talking about.

  28. 99

    If you know your crossbrowser HTML and CSS none of the designs you’d make would be hard to construct. At most some of them would (and should) be a challenge to broaden your skillset. You lazy bum you

    And what’s with the paper mock ups? Get a Wacom, Bamboo, whatever, select the pen tool and draw your sloppy mock up’s and save a tree, or whatever.

  29. 102

    I’d like to see how you’re creating some nice collage background with HTML markup and CSS.

    I really agree with you thou. It is nice to show some type of wireframe prototype to a client before create some artworks for them.

    • 103

      Picture this scenario:

      You hire me to build you a house. I draw you an overview of the house. How big the different rooms are, etc. You get excited!

      You hire me to build you a house. I show you how your finished house will look like, what colour the curtains have and what kinda dog goes along with it. You die becuase it’s so god damned sexy you can’t believe it!

      As my customer, which would you rather see first? Worth the extra wait? I should think so.

      Wireframes… pfft

      • 104

        If I hire you, and you build me the house, and I don’t like it :) will you do it again in some completely different style and size without charging me more money?

  30. 105


    As a designer there is no better tool than Photoshop, the end product will only ever look indifferent if the designer has a lack of knowledge for how a website is built along with it’s limitations and capabilities.

    Ignorance is the key in this article, if a designer doesn’t consider the development stage because of his lack of knowledge we will always have they poorer end product.



↑ Back to top