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.


  31. 106

    Chris Lorensson

    July 29, 2010 4:06 am

    hmm.. nice write-up dude!

    While I do believe there is always a ‘best’ way to do something, down here on Earth things usually get done the quickest when people just do it the way they know how.

    I don’t think this is an ignorant article, I just think it’s pointing out serious issues in the modern web design workflow. Sure- we need some incredible amalgamation of Photoshop/Fireworks/Dreamweaver or what have you, but as said above, Adobe doesn’t want to sell us one product, they want to sell us three products. Ho-hum.

    I tried out Fireworks and loved some of the CSS/HTML-esque features such as ‘states’ and things like dotted borders, but in the end I switched back to Photoshop bacuse I just couldn’t get along with FW.

    Lately for functional prototyping I’ve been using Axure Pro – which seems to very easily do 95% of what I need to represent (functionally), but the extremely low level of design it offers is hard to swallow.

    I think I’ll continue using sketches -> PS -> DW

    Thanks for the article!

  32. 107

    Photoshop is a good tool but nothing beats Illustrator when it comes to designing webpages.

  33. 108

    Gather content > Wireframe hierarchy > Design layout and artwork in Photoshop > Build in Dreamweaver.

    Everyone has their own way of doing things though, there’s now right or wrong way.

    • 109

      I’m with Pete. Best approach. Maybe I would just say – design the wirerame in fireworks (because that’s all it’s good for.)

  34. 110

    Wow! A lot of people on here got out of the wrong side of bed this morning didn’t they! I mean Adam Roberts, you need to go and talk to someone man.

    Thomas your article was an interesting read but I agree with most people here that the design stage and the build stage are 2 different task that need to be addressed separately. I like the idea of including CSS in Photoshop as an additional option but I’d hate to rely on PS to do all/some of the markup for me (have you ever sliced up a mock-up and exported it as html? Yuk!).

    I personally use Illustrator and Photoshop to create my visuals depending on the project. When I first started building websites I found my designs were being limited by my lack of XHTML/CSS knowledge as I was always thinking to myself, “If i design it like this will I be able to build it?”. This should obviously not be the case but the luxury of designing anything you like is only possible when you have the technical knowledge to match. If Photoshop included XHTML I feel it would restrict potentially innovative ideas as designers would be visually concentrating on both stages instead of one at a time.

    Thanks for the article though!

  35. 111

    To the author: You don’t do programming right? Photoshop can be circumvented by developing on the go and showing the progress to the client.

    And if you really must use a graphics editor, hey use Gimp.

    Photoshop is a tool. It’s not a magical wand.

    But that’s just me speaking, with 40+ clients ranging from 2,000 – 7,000€ price ranges, mid- to large businesses.

    @SmashingMagazine: This is what you publish now? Wow, the quality of SM is free falling.


    • 112

      To Jim: You don’t do designing right?

    • 113

      Wow Jim,

      That’s pretty pathetic. As a C#/ASP.NET developer, I resent your comment. I have been developing a very long time, and even I know the need for design. I’m unsure what you mean by ‘developing on the go’ as any client I’ve ever had wants a thorough design before going to development.

      Also, anyone who has ever used Photoshop and Gimp, will tell you, gimp doesn’t even come close to fulfilling the needs a designer has to create a great looking product. I put it, maybe, a block above paint at best.

      A programmer slamming the design phase as unimportant, or irrelevant? Priceless.

      • 114

        Firstly, your languages of choice – C#/ASP.NET – say quite a bit about your mentality, but moving on.
        If what you say is so true, about Gimp being only a step above MS Paint, then why is it used widely within Hollywood? They seem to do fantastic jobs with it.
        You might be comparing the default setup with Photoshop’s default setup, and – if you are – then you’re right in a sense, Gimp does not match up.
        However, with some new textures and some nice plugins, Gimp starts to become a definite competitor.
        The problem with the majority of designers and web-developers is that their computer knowledge is limited at best, so they may not have the skills necessary to set up such a complicated application (sarcasm).

        • 115

          All hail uber elitist Jim! He knows all, and all languages he does not know are not worth knowing. Forget prototyping! Just program! And if you don’t like gimp, you know nothing about computers!

    • 116

      Thomas Giannattasio

      July 29, 2010 7:08 am


      I’m not entirely sure how to respond to that comment, but I’ll try my best. First off, I’ve actually been hand-coding sites for about 14 years now. Since then I’ve shifted my focus on design, but I still code sites from scratch all the time. I’d say I have a pretty good understanding of the process. What are your experiences with design? What kind of sites are you designing that allow you to circumvent Photoshop?

      Second, are those figures meant to add credibility to your remarks? Are they meant to impress? I may be speaking for myself here, but those figures are rather modest. If you’re developing sites for mid- to large-sized businesses, you may want to raise your rates unless the level of quality is extremely low.

      Thanks for your comments.

      • 117

        Nice. :)

        I was thinking the same thing when I read his “price” figures. The last project I had was a 3 month project for a corporate client with a price tag over $90k, and the client was so happy, we’ve gotten three additional contracts in total valued at over $250k.

        And, should I feel ashamed because we developed on the C# / ASP.NET platform? Nah. We got paid, the application is scalable, and, bonus…NO ORACLE. Woohoo!

  36. 118

    Gah….more proclaiming PS is the best tool? More like — it’s what most have and know, so they use it. Doesn’t make it “the best”. Agree with comments above, this looks like a post to defend your new book, that received rather poor reception.

    Another Fireworks user that gets her work done x10 faster than you.

  37. 119

    As a programmer (not a designer), I can give you one VERY important reason to stick with Photoshop for designers. Designers aren’t web application architects. They don’t have any concerns (generally) about bandwidth usage, scalability, or reusability. Generally, designers care about “pretty”… which is a good thing, because that’s what we hire them for.

    A programmer on the other hand will be (should be) able to whip up whatever the designer has created for them in PS as HTML in no time flat and do it right the first time.

    For a small-scale project, go ahead and let the designer do some html work, but in large scale, enterprise environments, keep them out of it.

    • 120

      Andrei Gonzales

      July 29, 2010 6:25 am

      Totally disagree.

      The best web designers understand the “code” (let’s use that term), and they understand the overhead involved.

      Web designers that don’t are just traditional graphic designers looking for another source of income. In that sense, they’re not web designers, just web decorators.

      Maybe your company should start raising its budget to find the right web designers, or retrain your current crop of web decorators so that they can understand a little bit more about what actually goes on “under the hood”. In the end, everyone benefits, right?

      • 121

        Thomas Giannattasio

        July 29, 2010 7:11 am

        I agree Andrei. Web designers need to understand the final product and how it’s achieved. Traditional graphic designers certainly need to understand the printing process or their work would suffer. Though web designers need not be experts, it’s really important that they have a solid understanding of HTML, CSS, JS, etc.

    • 122

      To a point I agree, and I say that having dealt with designers who have credited themselves with the “coder” tag only to create web “code” that simply doesn’t scale or is mashup of Dreamweaver generated HTML/CSS/JS and their own tweaks. I think designers MUST know how the design gets implemented or the design is just a guess at how the web will handle that design.

      To sum it up, coders need to be involved in the design and designers in the coding but the fine-grain work belongs to each respectively. As a result, Photoshop or better yet, Fireworks for the designers and an IDE for coders. Let’s collaborate but not cook in each others kitchens.

  38. 123

    “Until our paradigm is rocked by some killer new app, Photoshop will reign as the best tool for designing websites.”

    As a long time user and appreciator of Photoshop I have to disagree with the above quote. For one, PS is the only app I’ve ever seen that can bring my computer to its knees, begging for mercy, when all I want to do is “save for web”. And two, it’s support of vector graphics is a joke. But that’s okay, PS isn’t meant to handle vector images, it’s an app for handling rasterized photographs.

    Why or how PS became the staple in the web design community is beyond me. Maybe it comes from a lack of education or the transition from print to web. I think PS has become just another common household name, with a lot of people not understanding why or how to use it. Which then leads people to believe that just because they own a copy of PS they can design things too.

    Last, I don’t think it’s a smart argument to say “stick with photoshop” over markup. That’s like comparing apples with a top sirloin. They aren’t even in the same food group. If you want a real competition, then take PS vs. Fireworks. There’s a true “toe-to-toe” matchup. I like to think of Fireworks as the featherweight boxer, dancing like a butterfly and stinging like a bee, whereas PS is like Andre the giant or something, very heavy and sluggish.

    At the end of the day though we just have to use what works for us. Design shouldn’t be about choosing sides in “defense” of one particular app. Design should be about making the best visual decisions to help communicate the message of our clients.

    • 124

      First… photoshop has brought your computer to it’s knees? Wow… must have a pretty slow computer.

      Second…Photoshop is the staple in the design community for many reasons, but primarily, in my mind, due to its easy to use interface and feature set. I have yet to find a product that is as easy to pump out designs.

      Third… The author is making an argument against HTMLeans who believe the best way to do mock ups is within code, thus, the author is trying to prove this is not the case, and thus, must make a stand for another principal that is in opposition to the original idea.

      Ultimately, you definitely have to choose what’s right for you, but I definitely think that a designer will waste a massive amount of time writing html/etc if they do not make mock ups in a graphics program in general.

    • 125

      Actually…Photoshop and Fireworks are still apples to oranges. In the same food group (to use your analogy), but still not the same fruit.

      Photoshop is a staple because it’s been around longer and was an old medium staple. At the time, it was simply the best program out there for raster graphic (bitmap) editing and manipulation. As it’s evolved, new media enhancements and functionality have crept in, just as enhancements in handling vectors (though still limited) has crept in.

      Photoshop is for creating graphic design and manipulating raster graphics for old and new media, with some web functionality thrown it. Illustrator is for creating vectors and illustrations that can scale to any size, be it a matchbook cover or billboard (over simplification, I know). Fireworks, on the other hand, was designed SPECIFICALLY with web development in mind, hence the reason so many useful web dev features are inherent in the program, not to mention it’s ability to export directly to flash.

      One final note…Photoshop is a common platform. There are many developers just as proficient at slicing up (manually, of course) a PSD file to create semantic markup that exactly resembles the approved comp…down to the last pixel. Those same developers likely are NOT going to take the time to learn a completely new interface and workflow pattern when there are deadlines to meet and money to be made. It’s that simple.

      For those who have switched from Photoshop to Fireworks, I say kudos. It’s great that you made the step, and that you work for companies that are willing and/or able to allow that freedom. For many established firms, especially those who also do print collateral, video, brand identity, etc…there is a proper program for every job, just as every job has the best person with the expertise to do it.

  39. 126

    I would never consider mocking up in HTML…. EVER! Clients expect well designed interfaces, with great graphical elements that often require some extensive css work. Why would I put that amount of effort into a mock-up if I don’t even know if it will be sellable? There are different tools for different jobs. I actually cannot stand Fireworks, I feel it’s interface clunky, and workflow, not as great as photoshop. I would much rather put the time into photoshop, then slicing it up, for my interfaces, than trying to have a tool ‘try’ to generate an interface for me. xHTML+CSS+Photoshop, is the ultimate combo for web interface design.

  40. 127

    Everyone’s got their own process. I use Illustrator to create a wireframe layout and design. I only use Photoshop as a photo editing and manipulation tool. and import into Illustrator from there when it comes to websites.

    Designing using markup language should only be used in moderation.

    • 128

      I agree with you mtrang.

      Photoshop has it’s place, but I prefer Illustrator for mock-ups & design. But that’s just my opinion, and everyone has their own.

      Whatever makes you most productive is ultimately the best solution. There really isn’t a one-size-fits-all solution.

  41. 129

    I agree with @mtrang
    I also do not think that photoshop will ever be completely forgotten or any other photo editing software. I feel like the only designers that really will switch to markup would be web developers and designers… not so much those involved in print or those web designers who have little knowledge of markup language…

    I personally love that it’s not easier and will only get easier to code the things I design but that’s where I’ll leave it…

    • 130

      That’s ridiculous. Design is about the process. The same reason you sketch on paper is the same reason you work in Photoshop. It gives you a blank canvas to build your idea.

      No other program out there offers the same power as Photoshop. Saying that designers with a lack of HTML/CSS knowledge will only use Photoshop is a complete slap in the face to those that use Photoshop and have expert knowledge of front-end coding.

      • 131

        That’s really true….” Photoshop gives you a blank canvas to build your idea” and that is creative web design.

        I completely agree.

  42. 132

    I’ve always mocked up with HTML and Photoshop for image manipulation, for web design. Now photoshop with lightroom- “I’ve become an artistic photographer” Love it and will never leave it for design or photos!

  43. 133


    Photoshop is very clunky with layers. Any Fireworks user will tell you that.

  44. 134

    Seriously, Photoshop is not the best tool for web pages. Does it do multiple pages? NO! It’s only come to web design as an awkward evolution from it’s photo-based origins. It is an excellent program, but it’s nowhere near Fireworks.
    I have been using FW since day one for web design.

  45. 136

    I’ve used Photoshop for years (I started on good ol’ 5.0), so I’ll probably never use anything else. Even though I hand-code all my websites, I like to have the idea in place and create it from there. For me, coding is easier when I know what I want the end product to look like.

    If I’m developing for someone, I don’t care what program they use to design it in… as long as they don’t use InDesign.

  46. 137

    Those supporting graphics are very ironic.

  47. 138

    No offense, but this post pisses me off.

    I’m not against us being against complacency, because with it, we don’t progress the technology. But sometimes, I think people look to pick fights with every single aspect of web design, and not only pick the fight, but then blow it completely out of proportion.

    This post reminds me of my old Illustrator CS4 teacher who used a 10 year old Mac and (probably) never used a version of AI past 7 (because her machine wouldn’t handle it). She was against the progress of technology because it “forced” her to upgrade her decade old computer.

    At times I think people write these articles just to nitpick a subject to death. You want image manipulation, you use Photoshop; that’s the way I’ve done business FOREVER and even having given PS the once over (twice), I still see no reason to question it’s dominance as a photo editor or supplier of graphics to my web sites.

    Flash websites vs. standards and usability; fine, I can see how Flash isn’t the best solution there; but even there, it’s not meant to be a web design tool; people are just (over) utilizing it for what it does well, interactive animations.

    I don’t think PS was ever exalted for being a “Web Development Tool”. It works in pixels, and many resources a site uses depends on that. These tools are just pegs to fill the many differently shaped holes that a web site encompasses. Use the right tool for the job; no 1 tool will work for all instances.

  48. 139

    Adobe is now 90% bureaucracy, marketing and obfuscation, 5% “support” and 5% engineering. They are such an incredibly frustrating organization to deal with. Their software frightfully expensive. They are the new Microsoft (which is NOT a compliment). They have lousy support for hi-Ed and enterprise IT managers. And their software is frequently broken, breaks easily, crashes, fails to update, etc etc etc. I eagerly await new, cheaper and better software to move to for our schools!

  49. 140

    Yes, Photoshop is definitely usable for web design. In the same way as paper and pencil are. Functionally, Photoshop is closer to paper and pencil, than to a webbrowser.

    I’ve been building websites for over 15 years. In the early days, customers wanted to have their brochures transformed to webpages. Page-for-page, retaining the same layout, often the only added web-feature was a link to browse to the next and previous pages.

    Of course, you CAN build web sites this way. And they often actually looked very good. The whole point is however, that this method does not make use of the added possibilities of a website!

    Creating a webdesign in Photoshop is, for the end product, only marginally better than using paper brochures for the web design. Yes, Photoshop is very friendly to the designer and creating a nice design is much harder in for example markup. But Photoshop simply does not offer many of the features a website can use. There is no way to design a fluid layout in Photoshop.

    Designing websites in Photoshop is like eating soup with a gold fork…

    • 141

      Respectfully, I have to disagree. I’ve also been developing on the web for 15 years. Photoshop is a tool. Like a camera is a tool. It doesn’t matter how well (or not) it works, what features it has, and what upgrades are available if the person using it lacks the requisite knowledge and experience to use the tool effectively to achieve their end goals.

      There is no reason why a web developer cannot take a design that was INTENDED to be a fluid layout developed in Photoshop, and implement it as such in code. Any developer worth his salt should be able to create fluid layouts from any comp created in any application. Now, if the designer did not intend it to be a fluid layout, that is a limitation of the design…one which would occur regardless of the program used to create the comp, and one either the developer or the designer would need to correct.


  50. 142

    I have to say that separating out the design before the implementation definitely has it’s advantages when it comes to clients. Sometimes, it’s pretty hard to keep clients focused on the fact that they need to be reviewing the design even with a flat mock-up. Now if there’s actual functionality … we’d never get them to focus. It’s the same reasoning as putting in lorem ipsum in the design, so the client isn’t focusing on the content, but on the design.

    Just my two cents.


↑ Back to top