I guess a more suitable title might be ‘is Photoshop still an appropriate tool for designing typography on the web?’ But that lacks the dramatic appeal of the above.

Like many of you, I have always used Photoshop to create mock-up compositions of my designs. For as long as I can remember it has been the industry standard and the software of choice for most designers I have worked with. I have spent weeks designing pixel perfect layouts, grouping elements into hierarchical folders and labelling all of my layers to make the transition from beautiful mock up to code as smooth as possible.

I would be full of enthusiasm, energy and excitement explaining my designs to a developer, toggling layer states on and off to try and illustrate my vision through Photoshop but would always be slightly disappointed as my shiny, polished design was transformed to what I would see in the browser. Sure, it would look like my design… And I kind of recognised the typefaces but it lacked that sharpness that I remembered from my compositions. It wasn’t that the developers hadn’t coded it well, more that the typography I had created in Photoshop had not translated into code.


What you see isn’t always what you get

When choosing fonts there are few things more important than whether a font is easily legible or not. In Photoshop, that is not so much of a problem because everything looks great. It doesn’t matter what font you use, at what size or weight (within reason) as it will render perfectly on screen.

Unfortunately, this does not extend to the browser. Often when viewing my design in the browser, the relationships between elements and type were all wrong. The font sizes and line heights that I had attributed to styles in my photoshop composition would not look the same as they would in the browser. If I had designated a 20 pixel margin above the title in my designs, that distance may have changed as the line height of the header would have an effect on size of the margin, something that would not happen in Photoshop. I would then have to start the long and tedious process of the dreaded ‘design tweaks’.


Everyone hates design tweaks

Trust me it’s not just the developer that shirks at the idea of a designer sitting next to them asking them to ‘increase the body copy line height by two pixels’ then having the developer make the CSS change and commit …. Enter. ‘Actually, 1 pixel smaller’ … Enter. ‘Maybe it was better how it was’. This kind of tweaking of the CSS bit by bit to see the results in real time via the browser is time consuming and not conducive to creativity. The developers quickly get fed up spending the day repeatedly changing what they see as the smallest of details that will make no difference, and designers are not able to experiment by quickly and easily changing typefaces and styles for ones that will render better in the browser.


So what now?

For designers who have an understanding of CSS, you can use tools like Firebug to effectively make your own design tweaks in the browser, noting down all the CSS changes in one document that you can then pass on to a developer to implement. This is effectively the same as sitting with a developer and making CSS changes but far less tedious for the developer and will also allow the designer to experiment further with sizes and styles before making a decision. Although this is a good tool for inspecting and changing parts of the HTML and CSS, you will lose any changes you make as soon as the browser is refreshed, which can be very annoying if you have changed lots of elements and not noted down all your adjustments.

You can use the Firediff plug-in to save a record of all the changes that you make within Firebug, which is great as it saves you having to note every change down in a separate spreadsheet for later. The biggest issue with this method is when you begin to introduce web fonts into the equation as any chosen fonts must be installed to your type kit or they will not appear in the browser. This makes things far more difficult and less free to experiment easily with different fonts as you can’t just quickly trial fonts.


Designing in the browser

Services like Typecast make it much easier for designers to work with web fonts and I pretty much do all my typography for the web using it. It allows you to create typographical mock ups (just like you would in Photoshop) using its visual interface to assign fonts, styles, weights, colours, line height, margin, padding and more to your typography. The best thing about using Typecast is that it is all working within the browser so you are making decisions on type exactly as it will be rendered for the user. Does a certain font not look too hot at 19 pixels? Bump it up to 20 at a click of a button, back down to 19 before finally settling at 18 pixels in size, all done in seconds rather than hours sitting with a developer.

You can use any web fonts from their collections of 23,000 fonts, including Google fonts, Typekit and more in your compositions, which makes experimenting quick and easy (they have recently been purchased by Monotype who own Fonts.com and Myfonts so expect many more fonts on the way soon). Typecast in my opinion introduces a notion of playfulness back into typography as it encourages you to try font variations, which you may never have discovered if they were not so readily available and easily interchangeable as they are.

Another very useful feature of typecast is the ability to view and edit the CSS of your type. You can add background colours and images, hover states, or even transitions by simply editing the CSS panel. Once you are happy with your creation, you can easily export and save the CSS code, which can then be uploaded to your site or sent to a developer and because everything has been designed in the browser it will appear exactly as you intend it to.


You lost me at CSS

Photoshop isn’t the industry standard for nothing, and there will be some of you out there hyperventilating at the thought of dropping it to design in the browser, after all we are creatives not coders. Well, put down the paper bag as there is still a way you can create beautiful typography using web fonts in Photoshop. Extensis have created a plug-in which can be installed to Photoshop versions CS5 and higher that will give you access to all WebINK and Google Web Fonts to use for free, directly inside Photoshop.

This means that you can use any of WebINK or Google’s web fonts in your design compositions as you would any fonts that are installed on your system and they will display roughly the same as it should look in the browser. The plug-in will only give you access to WebINK and Google web fonts at the moment but on the plus side it will automatically update new fonts as they are added to WebINK and Google’s library of fonts.


Photoshop power up

Another valuable plug-in that helps ease the transition between Photoshop compositions and browser compatible CSS is the free, cloud based plug-in from css3ps.com. One of the main reasons that many designers work with Photoshop is the control you have over layers and shape elements. Being able to easily and quickly experiment with shadow, glow, colour, texture, rounded corners and more is almost second nature to most and something that even experienced designers struggle to replicate exactly in the browser. For those, this plug-in is perfect as it lets you create your compositions in the way that you know best but then let’s you easily convert your shape’s styles into browser compatible CSS3. This method is ideal for designing buttons, navigation or anything else that you may have styled a shape for.

Maybe there still is a role for Photoshop as a tool for designing web layouts but as far as designing typography for the web, applications like Firebug and Typecast have overtaken it. The time it takes to update static compositions just can’t compare with the speed and ease of which you can make changes in the browser. For those of you who just can’t even entertain the idea of designing in the browser, the plug-ins above should at least give Photoshop the boost it needs to stay relevant and help ease the transition.

Do you use Photoshop to design web sites? Is Photoshop going the way of Flash? Let us know in the comments.

Featured image/thumbnail, uses dead image via Shutterstock.

  • Alex Sinnott

    I can’t express how much I can relate to this. There’s a huge niche for a program to fill the space of web-development for Photoshop, but as I see huge APIs and Backend CMS’s take center stage, web development is going to become as easy as graphic design is today.

    • jaystrab

      Graphic design is not “easy.” You have to know how to design in the first place. There are tons of terribly designed sites that are calling themselves “design blogs.” Just because someone is a web developer does not mean they can design websites.

      • http://twitter.com/thedawe Stephen Dawe

        ^^^ Exactly. Knowing a design program doesn’t make you a designer any more than knowing how to turn a wrench makes you a mechanic. But I do like a quote I once heard which said, “Great design is simple and that’s what makes it so hard.”

  • http://www.nathanhornby.com/ Nathan Hornby

    “Is Photoshop dead?”


    • psdcovers

      Yeah, solid “nope” from me as well.

    • http://www.designjunction.com.au/ Nikita – Design Junction

      Do you currently use it for web design layouts?

  • Marlou

    If you understand the flaws of web designing in photoshop -> Try Fireworks. Seriously. <3

    • http://twitter.com/rtwmedia Robert Whyte

      Couldn’t agree more. Fireworks is thee way to go.

      • jackthe7th

        Really? Maybe to do a framework or some really basic stuff, but no way for a final design comp. Also it doesn’t come in a retina version yet and that counts me out. Sharp text? Not on a retina display…

    • http://www.facebook.com/gustavocruzeiro Gustavo Cruzeiro

      Couldn’t agree more. I actually usually design in the browser and use Fireworks to make the images. Some might say it takes more time or that I’m crazy, but that’s how I roll and it’s been working so far.

    • http://twitter.com/cmozzati Christelle Mozzati

      Fireworks might be perfect for webdesigning. I say “might” because I’ve never tried it. Not enough time in my workflow to try a software to do the exact same thing I do with Photoshop.
      Photoshop is also the best-known software in the global workflow : I design, the front-end developer develops and we both know Photoshop enough to make something good and efficient, meeting the deadlines.

      It might not be the best software for webdesign (that’s for sure) but it’s for now the best in the design process because you don’t have to re-learn everything, neither everyone in the workflow.

      That said, I really do think that some software will replace Photoshop some day, just like Indesign replaced Xpress, mainly because Photoshop never even tried to be a UI software.

  • http://www.fadamakis.com/ Fotis Adamakis

    Photoshop will always be useful but not in the strict and restrictive way we use it today.

  • http://twitter.com/Brunus_V Brunus_V

    As web/app designer and integrator I can say that : I’m designing inside the browser, but I continue to receive PSD designs by other designers. Not all designers are integrators…May be in few years web designers will all be able to design directly with the browser and text tools. Then Photoshop will be used only for few things like photos. Yes because Photoshop it’s not even the best vector software out there and something like Inkscape will become the only tool we will need to produce quality scalable icons and vector graphics (SVG). But right now there is also other GUI to design…for mobile apps. And there, I think there is still a chance that Photoshop will be THE tool for almost few couples of years. Of course, this Adobe best-seller will for sure still rules the photographic fashion market.

  • http://twitter.com/zporterdesign Zachary Porter

    I’m not so sure graphic design is “easy”. It takes a natural talent and years of critique and practice to churn out anything on a professional level of quality. Also, it changes drastically with each project and there aren’t boundaries and standards like there are in web development.

    For myself, photoshop isn’t dead, nor will it be in the near future. Even if we stop using it for comps, there are many manipulations and tools of value to many industries. It’s not going anywhere. Since I mark-up all of my designs, I have complete control of every visual detail on my pages as well as the interactions. Every web designer could benefit from building their designs every once in a while.

  • Pedro Canelas

    Photoshop wasn’t created to design websites, I don’t know who is the crazy that invented it and why it became so popular. Photoshop was made to editing and retouch image. Fireworks was made to create layouts and prototypes. See the toolbar and you will see clearly what the applications was designed for.

    • http://www.designjunction.com.au/ Nikita – Design Junction

      Photoshop is great for well Photos! Fireworks is built from ground up to be a web design tool so it excels at what it is meant to do.

  • Johnson Lu

    I usually “sketch” my web designs in Photoshop. They are my first drafts, so to speak. I think Photoshop as a finished prototype tool and especially typography tool will start to phase out. Everyone knows you aren’t really meant to do typography in Photoshop.

    But it has its uses. I really find it hard to design straight in the browser because you are building one piece at a time, while in Photoshop you can work on the entire design much more easily.

    Unless there are more complete and intuitive web tools for designing in the browser I will continue to use Photoshop to “design” my websites. But yeah everyone knows Photoshop isn’t that great for typography.

  • jaystrab

    Neither Photoshop nor Fireworks are great for designing websites. They each have their strengths and weaknesses. It would be awesome if someone made a design program that mimicked everything that CSS can do and then export it all, but I don’t think that will ever happen. However, Photoshop will always continue to be used to design websites. Probably for the next 10 years. It is too deeply entrenched in both design and development community. It will not die any time soon. It’s like the Windows OS.

  • http://www.facebook.com/casey.govero Casey Govero

    I’ve always found it to be a lot easier to do web mockups and take them directly to the web with illustrator. With Illustrator it’s easier to grab single elements, buttons, etc. With photoshop I always find myself recropping elements, whereas with illustrator I can copy an element into a new doc, save for web, and its sized exactly to the size of the element without recropping, or slicing. I never understood creating website designs in photoshop.

  • charliebrwn1209

    I recently started using Sketch by Bohemian Coding for my graphics and layout designs and the experience has been incredible. It essentially condenses the Pen tool experience in Photoshop for great compatibility for the web. You can export svg graphics and event the css code for the various elements on your design.

    It’s also a lot cheaper than Photoshop, only $50 for lifetime use and updates.

  • http://twitter.com/levelstudiomx Alberto Haaz Mtz

    I don’t think so.. making irregular shapes, creating textures and designs that doesn’t look equally the same as every mainstream site is better with photoshop, and sadly the reality that clients like to see complete mockups instead of style tiles

  • http://twitter.com/kevinhorek kevinhorek

    Loving the hatred of Photoshop for web design recently, it does not matter what you use, it is what you make in the end that really matters!

  • http://twitter.com/margery_s Margery Stegman

    We’ve always used Illustrator to do our mockups because we hate the way Photoshop deals with type and vectors. Then we export the file to Photoshop for our developer. It’s not an ideal workflow.

    Thanks for the suggestions of other applications. I’m going to try them.

  • Mike King

    Photoshop produces a static visual design. It’s not until you put that design in the browser that it becomes a “web design”, therefore the pursuit of “pixel perfection” in a medium that is not the intended environment is futile.

    Designing in a static, graphics editing software has been the means for translating traditional skills from one medium to another for sometime now, but its the medium itself that should influence design practices. Designing in the browser is the way of the future IMO.

  • http://www.develop-a-website.com/ Jake

    It’s a no for me too, photoshop is not dead and will never be in my eyes. Great read though – thanks for the post

  • http://www.designjunction.com.au/ Design Junction

    Photoshop is not dead, it is just not the ideal tool for web design. Love the Firediff plugin, so useful!

  • Gen

    I do a lot of layout in Keynote. It doesn’t have a lot of the tweaking tools of photoshop and that actually makes it a lot easier to get to the meat of the design. In under ten minutes I have something that looks like the basics of a website and I can show it to a client for feedback. It may not be as polished as Photoshop, but it gets me to a point where I can start coding a LOT faster.

    • jaystrab

      You are not a web designer, then. You are just a developer.

  • http://www.facebook.com/profile.php?id=696299560 Enrico Boi

    Next time, try Fireworks.
    Photoshop is unfit for web design.

  • Guest

    Fireworks doesn’t offer a retina version yet which counts me out. Everything looks so fuzzy it’s unbearable.

    Sketch is not a program that can be used for professional design. It just doesn’t have the necessary features yet. No pixel snapping for guides, no select tool, the grid system is ugly, and it can’t even do a fifth of what Photoshop can do. That makes it unfit for pixel perfect designs.

    Illustrator is way too time consuming, and doesn’t render textures or gradients properly until after files are exported.

    For those of you who say Photoshop doesn’t work well for text, you obviously haven’t converted over to creating canvases that are twice the number of pixels as your final design yet. First thing I do after creating a canvas at the width of my site i.e. 1170px for responsive design is go to Image Size > 200%. Then I proceed to work at 50% zoom. Bam, text problems gone. You also need to do this anyway if you want to create two image sets: one for retina, one for regular. Or maybe you aren’t doing this yet?

    Another thing, if you are a web designer that doesn’t know how to program, what exactly are you doing with your life? Is it really that hard for you to learn how to do both design and programming? Nobody that works for me is “just a designer”, they can all do both. Maybe if you did both you would understand that Photoshop is the only real way to go right now because there is nothing else that can offer the tools necessary to create pixel perfect designs from start to finish. And if your programmer isn’t factoring in line height and text rendering changes into your final product to make things the right height and width, then you need a new programmer, sorry. That stuff doesn’t fly at my company, and didn’t fly at any of the other companies I used to work for!

  • http://twitter.com/VinitBeley Vinit Béléy

    Well, honestly Photoshop is NOT a web design software.
    I have been using it for graphic design and it has never failed to satisfy me in terms of the quality. In case of web design, I’d suggest you keep a check on your exporting settings and the kind of support your browser has for all the material used for making that Photoshop design. Photoshop purely uses resources of the native machine but the case is not same for a web browser. Technical glitches can be solved by taking care of technicalities.

  • http://www.missiontoread.com/ Rie Conley

    I’m far from a professional graphic designer, but seriously how can you not at least know the basics of HTML and CSS if you are going to be a designer.

    Not only so you make these incredibly small tweaks you are mentioning, but also as you are designing understand the limitations and advantages of designing something one way another when it comes to implementing it.

  • http://twitter.com/adi_the_boss Adi |the boss|

    Ps is my teacher. It is there in my heart.

  • http://www.facebook.com/AlexMichaelBrown Alex Brown

    you can always right click on your type layer and selec “copy CSS”… just a thought :)

    • http://twitter.com/bccreative Bruce Colthart

      …but only in cloud version of Photoshop?

  • juliencuenin

    I was actually asking myself a similar question : why not just designing directly in the web browser ? Firebug is a really nice tool indeed!

    Of course it means that you need to know both webdesign and web programming but aren’t these two jobs on the way to merge?

    I believe that nowadays we are using less and less images thanks to css3 possibilities, and that is great right? I mean, performances are better and design still look the same as you can make some shadows and gradient for example. And you can just make some light images when you really need to using your favorite image editor.

    By doing so, the process of making a website could be faster and you can even show him a beta version of the product to your customer that always wants to clic on your designs.

  • http://twitter.com/nickmandica Nick Măndică

    not dead at all… I used it everyday for web related tasks

  • http://www.clippingpathindia.com/ Bijutoha

    mock-up compositions !!!! could you tell me please what is it … ?

  • http://twitter.com/kgainez Kendra Gaines

    great article. was going to do something very similar…is photoshop dead for creating sites? probably.

  • infografreaks.com

    We all can imagine that new ways of designing thru web or other systems, but Photoshop will be always our favourite :)

  • Sharif

    The quality and content is great, I learned a
    lot.thanks for sharing.

  • http://www.facebook.com/andydlin Andy Lin

    I’m a web designer and a web developer and I definitely agree with this article. It’s only been a year since I started designing and coding but I remember the first couple months of frustration when trying to work with Photoshop and HTML & CSS. It just takes time and it’s definitely a satisfying feeling when I get my website to be exactly how I want it to be :]

  • jaystrab

    In the end, it won’t matter because facebook will be the internet and the only website. *cough*

  • Rojan Gharibpour

    The fact is that, you all the major web browser have some kind of web elements inspector. Webkit, Firefox, Opera and even IE, now have their own web development tools and that’s the correct way of viewing real-time adjustments to CSS before deciding the final CSS needed for the layout. This way you can even make sure of the correct font size and placements cross-browser.
    Since the CSS3 effects came out to browsers, believe me or not, I have not even opened the photoshop to select a color from the palette because of the amazing Webkit web development tools that include even the color palette for each individual color value.
    I don’t think that photoshop is dead but the usage for web development is really decreased.