Repurposing Photoshop For The Web

Advertisement

Like any overzealous teenager aspiring to be a Web designer back in 1999, I found myself in an “Electronic Design” class, behind the wheel of one of those old-school aqua iMacs1. If you found yourself in a similar situation, chances are you were given Adobe Photoshop as your vehicle for designing the Web. For me, it was version 6.0.

No matter which version you had, undoubtedly you know someone who can “trump” you by having adopted an earlier version. We designers take much pride in this, in case you hadn’t noticed.

One of these is likely nostalgic to you.2
One of these likely makes you nostalgic. (Image: Design You Trust3)

It’s not a stretch to say that Photoshop was once regarded as the quintessential Web design tool, a sign that its fandom reached more than just photographers. Refrigerator magnets4, pillows5 and even tattoos6 have shown homage to the unmistakable UI. Let’s face it: Photoshop is the software we’re identified with, and its place in Web design history is substantial.

I was careful to choose the word “history” there because that’s what it’s seemingly becoming.

Falling Out Of Love

Yes, unlike anything else in the realm of Web design, we collectively have a love-hate relationship with Adobe’s flagship software. While we love it for the common aptitude and experience we share, we hate it for its shortcomings. The pain points of using Photoshop to design for the Web are well documented and support the staunch anti-Photoshopian’s cause to remove it from their process. In fact, complaining about Photoshop has become so commonplace that it’s not just a rite of passage, but rather the signature of a true Web designer.

As our needs changed, Photoshop couldn't quite keep up.7
As our needs changed, Photoshop couldn’t quite keep up. (Image: Derrick Diemont8)

The Software’s Pain Points

  • Crashes
    True story: about 95% of instances of Mac OS X’s beach ball9 (or, as I affectionately refer to it, the pinwheel of doom) occur while using Photoshop. OK, so I can’t back that up with actual data, but I venture to say this is a common experience, especially for those of us attempting to “Save for Web.” Familiar with that nauseous feeling you get when the program hangs and you haven’t saved in a long time? Yeah, that alone makes you rethink using Photoshop.
  • Text rendering
    I’ve always found rendering the most basic of fonts as anything like the browser ends up doing to be incredibly difficult for Photoshop. Helvetica ends up looking like a mess, and coming close usually takes much tinkering with a few settings. This wouldn’t be problematic, except that the goal of comping is to show an accurate representation of what a website will look like.
  • Lack of interactivity
    At the end of the day, designing static comps doesn’t adequately translate how elements are intended to behave through interaction. When presenting comps to the client, discussing these points is possible, but that’s less than ideal for complex interaction. I’ve found myself using terms like “If you can imagine…” far too often in an attempt to show something as simple as a hover state.
  • Expense
    While we hem and haw over whether to buy an icon set for $5, realize that Photoshop is far and away the most expensive piece of software in the common Web design toolset. A new purchase of it will run you $700 USD. Upgrades help, and Creative Cloud has been nothing short of genius, but the investment in Photoshop is still monstrous compared to that of wireframing tools, code editors and FTP clients.

The Process’ Pain Points

  • Expectations
    The environment of Photoshop provides complete design control, because every pixel we manipulate can be exported to our expectations. When we actually develop for the Web, browsers aren’t as predicable (I can think of one in particular that’s none to kind, but I digress). No manner of fixes or hacks will produce an exact match of our Photoshop comp.
  • Presentation
    When attempting to convey responsive Web design, presenting static comps of full pages is less than ideal. The options are few and difficult: create numerous sizes of a single page, or try to explain verbally how a design will shift. I find neither to be practical or completely accurate, because innumerable device sizes are in the wild.
  • Double the effort
    A Photoshop comp is a visual representation of what a website or app could be, but not a functional one. This becomes problematic in the scope of effort required, with a comp being produced and then reproduced through Web technology (HTML, CSS and JavaScript). Additionally, the detail of the production is quite considerable — static comps are typically pixel-perfect and fully fleshed out, and front-end development carries the same goal.
  • The big reveal
    Ever worked hard on a design, spent hours polishing that last drop shadow on a button, exported a JPEG and then gotten nervous five minutes before a meeting because you have no assurances on whether the client will even understand the comp, much less like it? That’s true with many presentations, but the Big Reveal exacerbates this feeling. When your design process doesn’t include sharing any work in progress when comping, naturally it will lead up to a huge moment when you finally tell them to open a file or click a link. Wouldn’t it be nice if the client was involved in style-related decisions earlier than this?

Photoshop Misunderstood

Is it really a battle between tools?
Is it really a battle between tools?

OK, I think we’ve thoroughly bashed Photoshop enough at this point, although it’s important to realize where your tools fall short so that you can adapt (if you haven’t already). While there are plenty of jimmy-rigged workarounds to the aforementioned pains, and the right combination of settings will potentially ease those pains, there should be an easier way.

The most significant response has been to design directly in the browser. CSS3 provides many of the style elements that we had in Photoshop (such as rounded corners, drop shadows and gradients), and preprocessors such as LESS and Sass are great ways to speed up our workflow. These have become so popular, in fact, that there’s been much clamoring about trashing Photoshop altogether and using HTML and CSS exclusively, from start to finish.

Let’s not go overboard, right?

An important distinction is made by some designers that’s worth noting: the browser is the delivery vehicle of our designs, while image editors serve the purpose of creative exploration. Just because we have the ability in code to replicate what an image editor can output doesn’t mean it’s always the best environment for it. Those of us who learned Web design through Photoshop (or Fireworks) find value in being able to transform design elements without the abstraction of a text editor and, for the most part, have gotten quite good at it.

“As such the browser lacks even the most rudimentary tools like the ability to draw lines or irregular objects through direct manipulation.”

Designing in the Browser Is Not the Answer10 written by Andy Budd.

The notion that image editors have no place in our workflows is also faulty in this regard: we’ve purposed them to have a particular and quite heavy focus in our workflow. We’ve used Photoshop as the canvas for our design, when it’s apparent that the browser is better suited because it’s ultimately where the design will live. However, Photoshop still has worth, and arguably much worth, in our processes, just not as the canvas. Confused? That’s OK. I’ll explain.

A workflow you may be familiar with is such: sketch, wireframe, produce the visual design in a graphics editor, develop said design in HTML and CSS. Skipping Photoshop assumes that we “design” in the HTML and CSS phase. The tricky part in doing that is determining what a suitable design deliverable is, which we’ll get to momentarily. Naturally, the question becomes, What do we do with Photoshop, now that we’re in the browser?

Photoshop as a High-Fidelity Sketch Pad

What if Photoshop were used as a hi-fidelity sketchpad?11
What if Photoshop were used as a high-fidelity sketch pad? (Image: Kyrie Eleison12)

I propose that an image editor is still handy when executing design via HTML and CSS, and it has everything to do with sketching. An essential part of the “old” way, where we produced the design comp in Photoshop, is that we were allowed to experiment in a “visual” environment. Photoshop allows you to directly manipulate the very foundations of design: line, shape, text and color.

While HTML and CSS are great for executing the design, experimentation is abstracted because code isn’t directly manipulating any design foundation. It’s a layer removed. This isn’t to say that good design can’t come from a code-only approach; rather that the experimentation of design finds a natural home in an image editor, which may be helpful to many of you who, like myself, prefer such an arena.

Consequently, I’m in favor of a yin and yang approach, leveraging Photoshop for what it’s good for (experimentation), and code for what it’s good for (implementation). For me, leaving one out of the party makes it difficult to be creative and practical when designing. Avoiding code and producing full-page comps in Photoshop, while great for some, gives me headaches when considering responsive Web design and having to reproduce entire pages again in HTML and CSS. However, skipping Photoshop altogether puts me face to face with the browser for design, which works for some elements (navigation bars, blocks of text), while other elements pose a creative stumbling block (“hero graphic” banners and their headlines, sidebar calls to action).

It’s a balancing act. I don’t think you can say, “Design everything in the browser,” just like you can’t say, “Never get into the code.”

– Jason VanLue

For today’s Web design process, I view Photoshop as a high-fidelity sketchpad: expensive, I realize, but it does everything we need it to and we’ve used it for ages. It’s a tool that we’re quite proficient and efficient at. Whereas it used to be our literal canvas, Photoshop can now become our “palette,” as the browser becomes the canvas. We prototype designs in the browser, but turn to Photoshop every so often to ideate, and eventually implement those quick creations in code, concurrently.

Are you still using Photoshop as the canvas? Try using it as the palette.
Are you still using Photoshop as a canvas? Try using it as a palette.

“I still use Photoshop, but I use it differently. It’s no longer for prescribing exactly what a site should look like. Instead, it’s used for quick layout exploration and asset creation.”

Where to Start13 written by Trent Walton.

Getting Responsively Unstuck With Page Layers

A far too familiar situation is designing in the browser and getting stuck figuring out what to do in those strange in-between widths. Confining the content to a single column works for the narrowest width, and your hypothetical wider four-column design gets really squished at 500 pixels or so. I continually find myself in this mode of coding a bunch of potential solutions, none of which looks intentional. Same for you?

Here’s an idea: use Photoshop. I know that everything probably exists in the browser, instead of the full-page comps that we said were so problematic. Who would ever want to build a website only to have to make a version of the semi-finished product in Photoshop? Well, what I’m about to suggest will sound completely backwards. Hang tight!

Page Layers is a unique app that might find its way in to your workflow.14
Page Layers1615 is a unique app that could find its way into your workflow.

I’ve gotten used to a tool named Page Layers1615 to do the work for me. I’m sure you’ve heard of PSD-to-HTML tools, but this one is HTML-to-PSD! At first, I had no idea what I would ever use this for. Then it dawned on me that those moments when I’m stuck designing in the browser and would be better off using Photoshop to directly manipulate some things (i.e. without fiddling with CSS) is a perfect use of Page Layers.

Quite simply, you load the website that you’re working on in the app, at the width you’re having some difficulty with, drag the PSD icon to your desktop, and fire it up. The app gives you a PSD with all of the page elements on separate layers, making it easy to experiment with. I’m still getting my head around it, and it’s not without its flaws. Creator Ralf Ebert says that text and vector interpretation is tricky but hopefully on the way.

Deliverables

This might sound good in theory, but what do you show to a client for approval if you’re going to be using a combination of Photoshop “sketches” and the browser? Glad you asked.

Before we delve into methods of delivery, the important lesson in any of them is that the client should be involved in the design process much earlier than they would have been otherwise. To some extent, the Big Reveal can’t be avoided, because any time you present a visual design for the first time, a certain “unveiling” takes place. However, we can focus our clients on specific objectives if we involve them early enough, such as approving the layout in a wireframe or prototype, or approving styles in any of the formats discussed below.

Style Tiles

Style Tiles1917 are based on a concept pioneered by Samantha Warren, who likens them to “the paint chips and fabric swatches an interior designer gets approval on before designing a room.” Designed in Photoshop, they are a variety of visual “tiles,” each containing styles for headings, subheadings, link text, buttons, colors, patterns and backgrounds. In delivering Style Tiles, the focus is on approving style, independent of layout and form (for example, responsive Web design). The emphasis is on iterating to find a suitable style to become the “system” of a website, and not on a pixel-perfect layout that will need to be redone in HTML and CSS. In doing so, a significant amount of time is saved from having to edit multiple full-page comps.

Samantha Warren's Style Tiles are a great approach, leveraging Photoshop for style discussions.18
Samantha Warren’s Style Tiles1917 are a great approach, leveraging Photoshop for discussions about style.

For many, this approach keeps the ideation squarely in Photoshop, which is familiar and comfortable. If there’s a knock on this approach, it’s that Style Tiles do require a bit of vision on the part of the client. Granted, setting proper expectations will help to bridge the gap, although for some chains of approval, communicating how the tiles “represent” the final product can be difficult.

Style Prototypes

I hinted at this approach earlier, so here’s an attempt to spell it out plainly. Referring to our wireframes, we begin by identifying which elements and content are crucial to the visual language of the website. For example, the logo, main navigation bar, hero graphic and location-finding widget may all be uniquely styled elements, whereas the main blocks of text and the sidebar links wouldn’t be as integral to the visual impact of the page, per se.

They might look like full page comps, but Style Prototypes just leverage important brand and modular elements.20
They might look like full-page comps, but Style Prototypes just leverage important brand and modular elements. (Image: Dave Rupert21)

I believe this deliverable should be in the browser and should be responsive. In my experience with using Style Prototypes, I’ve tried not to get hung up on fixing small inaccuracies that occur at certain breakpoints or on cross-browser bugs, because the objective is to gain approval on a design direction. The conversations, both internally and with the client, are steered to assess style only.

The main benefit of this approach is that it generally transitions into the final build of the website remarkably well, yet providing entire pages wasn’t necessary. Photoshop is truly a sketch pad here, because the deliverable is an HTML and CSS document. That said, one disadvantage of this method is that if you don’t define how much you’ll be mocking up, it’s easy to get carried away and include elements that contribute little to the look of the website, using more time and resources than necessary.

Element Collages

Arising from his recent redesign project for Reading Is Fundamental, Dan Mall has offered an interesting approach in Element Collages2322. Those who feel most comfortable using Photoshop to work out these ideas can simply export a JPEG, while those who feel the browser enables them to better express the ideas can make a prototype.

This format represents how I begin to think about designing a site. I often have ideas for pieces of a site in bursts. A full comp often requires ideas to be fully realized. An element collage allows me to document a thought at any state of realization and move on to the next.

– Dan Mall, “Element Collages2322

What’s great about this approach is that it brings a comfortable amount of context to Style Tiles by executing those styles on particular elements. If working through ideas in the browser proves to be problematic this early in the process, then Element Collages done entirely in Photoshop are a great alternative to Style Prototypes. Any way you look at it, it’s another approach that circumvents having to make static full-page comps early on for approval.

The folks at Clearleft have employed Element Collages as a RWD deliverable.24
The folks at Clearleft have employed Element Collages25 as a deliverable of responsive Web design.

Whatever approach you use for design deliverables, the idea I’m proposing is to repurpose Photoshop’s role into something that helps you have a discussion of style far removed from specific discussions of page layout and content. Multi-device design dictates that we design systems, not specific page layouts. We can use Photoshop to create reusable assets and ideas simultaneously with browser deliverables such as prototypes. But remember, without setting proper expectations with the client, any new method will become confusing compared to any previous Web design experiences they’ve had.

Tools

If the idea is to move quickly between Photoshop and the browser, then Photoshop’s default settings and interface leave something to be desired. Thankfully, a wide range of tools, extensions, actions and apps exist that will help.

Slicy

Using “Save for Web” can be an arduous process, one that doesn’t always produce usable results. I recommend getting Slicy26, which exports your layers to files independently. If you’re using Photoshop to create assets for the browser, this is your tool.

WebInk Web Font Plugin

If nothing else, WebInk's Webfont Plugin will save you a few bucks not having to buy desktop fonts for comps.27
If nothing else, WebInk’s Webfont Plugin28 will save you the few bucks of buying desktop fonts for comps.

Remember when we were knocking Photoshop for its type rendering? What’s worse is that there’s no way to try out fonts from your Web font subscription in anything other than the browser. Thankfully, Extensis’ WebInk service has a plugin29 that gives you access to its library as you experiment in Photoshop.

Bjango iOS Actions

Unequivocally “the mother lode of time-saving actions,” this list30 from Marc Edwards will make your life much, much easier. If it’s useful, it’s included: a panel of the most-used Photoshop tools, scaling a document by 200% or 50%, testing for color-blindness and much more. It’s free, so there’s really no reason not to have it.

CSS Hat or CSS3Ps

Until recently, Photoshop didn’t have a way to export CSS attributes for the elements you create (admittedly, Fireworks has, but I digress). If you don’t have the latest version, then CSS Hat31 and CSS3Ps32 are solid alternatives. If you do have CS6, the differences between the built-in feature and these plugins isn’t much, although the plugins might take longer to display results and are also more accurate at times.

LayerVault

Famously flat designed, LayerVault boosts production through collaboration.33
Famously flat designed, LayerVault3534 boosts production through collaboration.

When Photoshop becomes your sketch pad rather than your canvas, like pages, you can bet more PSDs will be lying around. LayerVault3534 is a great app for collaborating and sharing your ideas before they hit the browser.

WebZap

If you’re looking to experiment with layout in Photoshop, then the WebZap36 plugin makes comping incredibly speedy. You can choose from a number of predetermined layouts for elements such as headers, navigation and footers. If you work with Element Collages, WebZap is a great tool for getting down a quick baseline of each element so that you can get right into styling.

PixelDropr

It's like an ammo holder for Photoshop.37
PixelDropr38 is like an ammo holder for Photoshop.

Part of being fleet of hand between Photoshop and the browser is creating reusable assets. PixelDropr39 is a fantastic plugin that enables you to drag and drop assets (icons, buttons, photos, etc.) from a panel onto your document.

InVision

For some, static comps are still a viable design deliverable, but they need some basic interactivity. InVision is an app that turns your static comps into “Protocomps.” Even when the comp is just a few elements, using InVision40 is a quick and efficient way to make it interactive.

Repurposing Fireworks, Sketch, Pixelmator, Etc.

The principle of “refining your tools” certainly isn’t isolated to Photoshop. Any image editor, when used to fit your workflow (instead of vice versa), can be a wonderfully liberating and powerful tool. All Web design apps have their shortcomings, and Photoshop perhaps most famously so.

Yet the fault lies not in our software, but rather in how we integrate it into our workflows. I suppose even when the Ultimate Web Design App comes along, most of us will find something wrong with it. Why? Because we’ve learned to be resourceful and make our tools work for us, whichever tools they are. The right tool, used for the right purpose, at the right time, is more valuable than one that tries to be too many things41.

So, Is Photoshop Really Dead?

I could switch code editors, computers, wireframing tools, browser plugins, and more, but I’d be pretty sunk if I had to do a project without Photoshop.

– Dan Mall

I truly believe that, for some of us, Photoshop is an indispensable tool that still has a purpose in our Web design workflows. I tip my hat to those designers who can stay creative using only the browser, but I know I’m not one of them. Whatever tools you use, there are two takeaways I feel strongly about: don’t let anyone stop you from using them, and continue to refine them in ways that support how you work. It’s important that we share how we approach responsive design for those who, like myself, are still trying to figure it out.

Photoshop isn’t dead, but the way you used to use it might be.

More Photoshoppery

(al) (ea)

Footnotes

  1. 1 http://www.downloadatoz.com/resources/201006/pic/1277178816.jpg
  2. 2 http://designyoutrust.com/2012/09/adobe-photoshop-toolbars-evolution/
  3. 3 http://designyoutrust.com/2012/09/adobe-photoshop-toolbars-evolution/
  4. 4 http://www.geekstir.com/wp-content/uploads/2010/01/photoshopmagnets1.jpg
  5. 5 http://cn1.kaboodle.com/hi/img/c/0/0/67/2/AAAADPOtHekAAAAAAGcirA.jpg?v=1250204414000
  6. 6 http://blogs.adobe.com/jnack/files/2012/09/tat_megan.jpg
  7. 7 http://www.flickr.com/photos/bluemiataman/3546677745/
  8. 8 http://www.flickr.com/photos/bluemiataman/3546677745/
  9. 9 http://marbleofdoom.com/Doom.jpg
  10. 10 http://www.andybudd.com/archives/2012/03/designing_in_the_browser_is_not_the_answ
  11. 11 http://www.flickr.com/photos/justmethatsall/2397044667
  12. 12 http://www.flickr.com/photos/justmethatsall/2397044667
  13. 13 http://trentwalton.com/2013/02/07/where-to-start/
  14. 14 http://www.pagelayers.com/
  15. 15 http://pagelayers.com
  16. 16 http://pagelayers.com
  17. 17 http://styletil.es
  18. 18 http://styletil.es
  19. 19 http://styletil.es
  20. 20 http://daverupert.com/2013/04/responsive-deliverables/
  21. 21 http://daverupert.com/2013/04/responsive-deliverables/
  22. 22 http://danielmall.com/articles/rif-element-collages/
  23. 23 http://danielmall.com/articles/rif-element-collages/
  24. 24 http://clearleft.com/thinks/visualdesignexplorations/
  25. 25 http://clearleft.com/thinks/visualdesignexplorations/
  26. 26 http://macrabbit.com/slicy/
  27. 27 http://webfontplugin.com
  28. 28 http://webfontplugin.com
  29. 29 http://www.webink.com/webfontplugin
  30. 30 http://bjango.com/articles/actions/
  31. 31 http://csshat.com
  32. 32 http://css3ps.com
  33. 33 http://layervault.com
  34. 34 http://layervault.com
  35. 35 http://layervault.com
  36. 36 http://webzap.uiparade.com/
  37. 37 http://www.pixeldropr.com/
  38. 38 http://www.pixeldropr.com/
  39. 39 http://pixeldropr.com/
  40. 40 http://invisionapp.com
  41. 41 http://www.yankodesign.com/2010/01/20/all-in-one-loo-with-a-reason/
  42. 42 http://dmonzon.com/freebies/12-photoshop-tools-cs6/
  43. 43 http://photoshopsecrets.tumblr.com/
  44. 44 http://bjango.com/articles/layertags/
  45. 45 http://www.theverge.com/2013/2/13/3959868/photoshop-is-a-city-for-everyone-how-adobe-endlessly-rebuilds-its
  46. 46 http://www.blog.levinson.tv/photoshop/add-ons/

↑ Back to topShare on Twitter

Syracuse, NY native Dan Rose is a User Interface Designer at WSOL. An advocate of side projects, he's the creator of Photoshop Etiquette, a guide to discernible web design. His affinity for workflow and Photoshoppery are evident in his talks, articles, and screencasts. His ramblings can also be caught on Twitter, @dblizzy.

Advertising
  1. 1

    Ever since Adobe added better pixel and web stuff to Illustrator a couple of versions ago, it’s been my primary tool for website sketches and mock ups. I only open Photoshop for photos (mind blowing, I know).

    13
    • 2

      Agreed… but in my case i prefer Fireworks instead… an awesome tool for webdesign

      33
      • 3

        But dat font rendering :-(. I’ve used FW all my life until last year when I switched to PS. I don’t really like it but it looks far more accurate when it comes to fonts (especially smaller ones). That and people develop far more plugins for PS for web dev because it’s more commonly used, although to be fair FW requires less because it does it out-of-the-box.

        2
        • 4

          Fireworks is soooo much better for web stuff than photoshop… I just wish Adobe would see that too and give FW more love.

          22
    • 5

      I’m glad to hear someone else uses illustrator. I have used it for years but have found now that it has come into its own. Responsive layout designs are so quick, SVG graphics will soon be the norm, and retina displays will be common place!

      1
    • 6

      Yet Illustrator is still pretty terrible for that compared to something like Sketch (Mac only). Illustrator’s tools are awkward to use and generally the software is a mess.

      -2
      • 7

        I could not disagree more. I know nothing of Sketch for Mac, but Illustrator tools really aren’t very difficult at all once you get a handle on how they function. I’ve come across too many people who condemn Illustrator when it’s just another program that cranks out design elements and to say it’s generally a mess shows just how much time you’ve spent using it. Illustrator is a great tool.

        2
        • 8

          Andrew Richardson

          April 24, 2013 6:37 pm

          The more I work with Illustrator the more I hate it (And most Adobe programs). It’s bloated and clunky, can I get a lot accomplished in it? Of course, I’ve spent 3/4 of a decade with the program but that doesn’t mean there aren’t really painful UI issues that I constantly fight to create what I do.

          Sketch solves a LOT of those issues where as Adobe has consistently stuck it’s head in the sand and ignored them.

          7
        • 9

          Kasakka thanks for adding your comment, I didn’t know about Sketch for Mac. I’ve downloaded it to give it a trial run. It’s a very nice bit of software. Already it looks like I’m going to start using Sketch from now on. Sketch combined with HTML5, CSS3 and JS, is all I need. Thanks again.

          1
    • 10

      Hear hear! Illustrator is my preferred application. I LOVE working in Illustrator. It provides slices, the opportunity to go direct to SVG, aligning strokes to inside or outside, and precise on-the-fly size control. I’ve never understood why anyone would design a site in Photoshop instead of Illustrator (as opposed, obviously, to the newer alternatives).

      1
    • 11

      The most advantage of Illustrator above Photoshop is that he can handle the thing that most websites are made of – text. Try to change your reading text from 14 to 16 pt in a layered Photoshop file. If you are using style sheets (!) in Illustrator it’s done in seconds.

      But I’m also waiting for a small software company that brings out an design tool specially made for webdesign (so I can put away may copy of Illustrator as I have done it with Dreamweaver to start using Coda).

      1
    • 12

      Ever since the web has become all responsive, every website started to look the same. For this reason, there is no reason to build a website in other applications except for Illustrator.

      -2
  2. 13

    You can get PS CS2 for free so money is not the issue anymore (http://www.adobe.com/downloads/cs2_downloads/)

    5
  3. 14

    Thanks for the links to all the tools!

    I too have found myself using PS less and less over the years. I’ve actually taken a liking to using Illustrator for mockups and wireframes, and doing most of the actual design stuff in-browser, often on-the-fly with Chrome’s inspect tool.

    5
  4. 15

    I’ve been having issues with the adobe suite for years. I started using photoshop back in the mid 90′s and its come a long way. But, it’s just not the right tool for web design.

    Lately I’ve been using sketch as my primary tool. It has many of the perks of Photoshop, Illustrator, and Indesign, while maintaining a focus on interface design. It also exports clean PDF/vector files with editable type.

    1
  5. 16

    Just use Fireworks. Photoshop is way too complicated for web work.

    28
    • 17

      I was thinking the same thing. Adobe could take Fireworks a step further and make it easier to make responsive designs.

      10
    • 18

      Michel Bozgounov

      April 22, 2013 7:08 pm

      Fully agree — in many cases, Fireworks is a much better (and easier to use) tool for web design tasks!

      In fact, we have published quite a few articles, dedicated to Adobe Fireworks. Check out our Smashing Fireworks section to learn more! :-)

      8
      • 19

        Fireworks is a great tool as well, no doubt. However, I think it suffers from many of the same afflictions that Photoshop does when it comes to today’s RWD workflows, as it pertains to deliverables. Image editors do in general. The message I’m attempting to relay here is that non-traditional use of Photoshop (or any image editor) can be a valuable part of a RWD workflow.

        9
  6. 20

    Repurposing PS for the web is essentially Fireworks. While I do understand that the purpose of this article is for the PS crowd, I think it might actually be better to use Photoshop for what it was designed for… photos and image composition. IMO, this is akin to using a butterknife for a steak. It’ll work, but you’ll have a much easier time with a steak knife (Fireworks). I’ve personally found using them in tandem (doing the images in PS, then exporting them into FW), achieve better results than FORCING Photoshop by “repurposing” it.

    15
  7. 21

    I think this is a comprehensive article! Totally loved it. I saw a talk where the speaker said he wasn’t a fan of designing in the browser exclusively. So I do use Photoshop for my own designs but this article has opened up a ton of resources and avenues for which you could use Photoshop.

    Very well written!

    0
  8. 22

    Also, what does the author think of Adobe Edge Reflow?

    1
    • 23

      Thanks! I think tools like Edge Reflow are going to be liberating from some of the problems we’ve had in the past. I wonder though if refining the tools we have, custom-fit in our current and improving workflows, might be just as (or potentially more) beneficial to a one-stop-shop kind of tool? It will be interesting to see how, and why, people use new tools like Reflow.

      1
  9. 24

    excellent article, would just comment that “the motherload of time-saving actions,” should technically be “the mother lode”…

    pedantically yours,

    3
  10. 25

    Ugly tool. How one can design things with unrealistic and distorted text render? Photoshop is good for creating assets like icons, textures, images but not for creating web design.
    Personally I use sketch app as primary design tool, and use photoshop only when it is needed.

    0
    • 26

      The fact you think Photoshop renders text bad is pretty awkward, considering it has the same rendering system as InDesign and Illustrator and … well, every Adobe tool other than Fireworks which is absolutely horrid for typography rendering.

      Do you actually believe that any tool, other than the browser, ever rendered text in the way that browsers do?

      0
  11. 27

    I barely use it and, in all honesty, even in the past I rarely used it.

    The idea of designing a website with a photo manipulation tool just seemed a bit odd. It’s fine for doing actual graphic/photo work but beyond that it’s not a big part of any workflow for me.

    For layouts nothing will beat a piece of paper and a pencil along with actual code. With the superb inspector tools in most browsers it’s even easier to do it this way.

    1
  12. 28

    Believe it or not, I get by with Expression Design and Fireworks…

    3
  13. 29

    Despite all of the cons, I still use Photoshop. At the end of the day, my only on-going beef is with font/text rendering. I’ve gone between Ps and TypeCast too much, in my attempts to perfect typography for projects. Ps needs a “web” font settings. Either that, or we need a way to make fonts look as good in browsers as they do in Ps (I wish).

    Apart from that, my workflow in Ps is just efficient. I know it too well and I use it for all of my non-web projects.

    5
  14. 30

    It all boils down to solving a problem. If Photoshop helps solve that problem then use it. If it doesn’t help solve the problem . . . don’t open it.

    14
    • 31

      Perfect sentiment. Wish I came up with that :)

      3
    • 32

      That is so true Dan!

      btw I’ve personally started using Sketch for some of my projects. One thing I really like about it is that is forces me to focus more on layout, grids, and typography (the important things) rather than pixel-pushing things way to early in the design process.

      0
  15. 33

    *cough* Fireworks! *cough*

    16
    • 34

      Except that Fireworks was only ever good for execution of a design for the web, not for actually designing for the web. If you’re trying to be creative, you shouldn’t be in Fireworks. I’ve never seen anything come out of that tool (which is either the fault of the tool, or insight into the users that use it) that’s quality.

      0
  16. 35

    Søren Birkemeyer

    April 22, 2013 5:21 pm

    I think you’re on the right track here. Photoshop can still be a powerful tool for interface design, especially, as you put it, as a “high-fidelity sketch pad”. It really comes down to which tool you know best and gets you results the quickest.

    I have enjoyed building medium- to high-fidelity sketches in Keynote (yes, Keynote) lately. It’s blazing fast and the line-guides are really snappy. There are even UI templates for it at http://keynotopia.com/ if that’s your thing (so far, I haven’t felt the need yet).

    1
    • 36

      You got it. It’s about using the right tool for the right purpose, and that usually comes down to the one you’re most proficient at, even if it’s Keynote ;)

      1
      • 37

        Keynote is incredibly underrated as a design tool. Templates, good for animation tests, vector-based. And cheap!

        0
  17. 38

    I dont really see your point here. We have no issues using Photoshop for our design mockups. We do two, one full size home page and one mobile homepage in landscape orientation.

    If the client doesn’t like something we revise it and try over. We rarely have to do a third revision.

    For us the mockup isn’t an exact representation of what we are going to build. We find it is much easier to get the basics fleshed out and then refine the design in browser with CSS.

    1
    • 39

      Thanks Pierre. I know of some folks that continue to use full-page Photoshop comps and it works great for them, which really is all that matters. Don’t change a thing if that’s the case.

      One of the things I found difficult in explaining to clients was how my comp(s) would look like at the widths in between 361-1023px (and bigger). A combination of style deliverables and interactive wireframes was the solution I found, with the wireframes taking care of so much layout (that you could interact with) that it became sort of redundant to do that all over in Photoshop (which can’t be resized/interacted with). Making Style Tiles/Prototypes and Element Collages, I could have them approve the style separate from the layout.

      0
  18. 40

    Oh, and the buying Photoshop thing is a red herring. Nobody buys Photoshop, or any adobe product for that matter.

    -23
  19. 42

    As far as iam concerned Photoshop is dead for web stuff, far to cumbersome.

    I find Fireworks much more intuitive and definitely better adapted web stuff. Image optimization, Wireframing, and interactive mock ups ( create different pages on same document, link them via hotspots and export) great way to showcase a mock up to Marketing audiences and such like.

    I use Photoshop for heavy image editing but that’s all, again Fireworks handle the rest much better and more easily.

    1
  20. 43

    Rick James! Chatas

    April 22, 2013 6:20 pm

    Isn’t it less about the “tool” and more about the “user”? In all of the reasons explained, it just seemed like lack of proficiency in the tool was the actual deterrent to using Photoshop; just like it would be to using C4D for 3D Modeling or Quartz Composer for interaction. Arguably, two “industry standard tools” “designers” should know more.

    It’s difficult seeing this article be anything past a valid, but history old long debate: use the right tools for the job. The range could be from Gimp to Photoshop, to Fireworks, dependent on skill set, technique, and availability.

    3
    • 44

      Rick James! In my opinion, repurposing Photoshop isn’t a matter of being more proficient with it, rather, using it for a different purpose. The traditional use for Photoshop was making full-page comps (which some still do, btw), which can be problematic in a RWD workflow. I’m suggesting non-traditional uses for it, and in doing so, refining how you use said tool. To your point, you most certainly could use any tool you see fit to design a website. I chose to use Photoshop.

      2
  21. 45

    I love the workflows you are proposing. I agree that is where we are headed until a tool that does this in a more integrated fashion comes along.

    BUT I think using Photoshop for prototyping is like using a Nasa Space Shuttle to go visit my mom who lives down the street. You mention lighter tools at the end of the article that I think make more sense—to me.

    0
  22. 46

    Yeah illustrator is definitely a lot easier to work with than PS. Sure you can blend images and textures better with ps but there aren’t too many other advantages that warrant using it first unless your design is heavy on images.

    0
  23. 47

    If you are using the newest version of Photoshop (or maybe it is just part of the Creative Cloud version, I am not sure), but there is an automatic save option now. I do not remember if it was turned on by default, but it is in the “File Handling” menu within preferences.

    When I was in school, we had signs all over our computer labs stating “Save, and Save Often!”… so I got used to saving all the time. Now, though, when I see that PS might be crashing, I don’t worry. I have mine auto saving every 5 minutes.

    2
    • 48

      Auto save is an awesome option. I think we were doing the whole file handling wrong all this while. Save shouldn’t be an option. Publish/trash should be. Whatever you do should be auto-saved and you can choose to delete the draft or publish it.

      Save was an option when hard disk space was a concern. I think we are way past that point now. We can safely choose to do away with save.

      0
    • 49

      “Save in background” doesn’t actually save automatically, and “Save recovery information” is just that: it’s meant for crash recovery, and it’s not quite the same thing as saving “for reals” (there can, under some circumstances, be a substantial divergence between the “live” version of the file and the recovery information). Save early and save often is still key; and “save in background” means that you can continue to work while the file is being written to disk (no waiting for the progress bar to go away).

      1
  24. 50

    I have the full Adobe CS. I actually use Pixelmator and Sketch 2. PS just doesn’t fit my workflow anymore and feels like a 500 lbs weight on my shoulders.

    It’s sad to admit. I loved Adobe and they seem to be more active around web technologies lately, but they stopped building creative tools for so long that it’s hard to re-align with the web.

    0
  25. 51

    What?! Wait! People still use PS to design websites? [tic]

    -3
  26. 52

    I agree with many point on both sides, however my only comment would be that as designers, we need to know our tools, their strengths and weaknesses and ultimately whether or not they can do the job. A tradesman doesn’t build a house with only his hammer. I think what ever works best is the best approach without being to precious about this method or that.

    If a Job calls for A, then use A. If it calls for B, then use B.

    Versatility, Flexibility, Adaptability.

    3
  27. 53

    ms paint all the way.

    7
  28. 54

    PS is still a great tool for early stages web design, with a great amount of useful plugins by the community. Personally I prefer working with Fireworks for its simplicity and its possibility for – as Andy Budd said “direct manipulation”.. you can just click and move.

    Illustrator on the other hand has become very very important. SVG is now people. I only use pixels for photos and complex artwork. For the rest: vector vector. This is where PS falls short.

    1
  29. 55

    I am a PS-Lover, but i use FW in last Time.. Fireworks is nice for Web-Design. But i hate in FW the colorpicker, no scrollwheel /cursor support on Properties (Effects, Size etc.), Sorting Layers are laggy and Short-Keys sucks. I think in PS can create better UI Design instead FW. Shadows, Special-Effects etc. can create faster in PS. FW is better for Flat-UI Layouts and Pixel-Perfect Webdesign and Prototyping.

    0
  30. 56

    “…In fact, complaining about Photoshop has become so commonplace that it’s not just a rite of passage, but rather the signature of a true Web designer.”

    I don’t get it. Except for the first few months in 2001, I’d never make a comp in Photoshop. I make picts and background for web pages in PS/AI and a text editor to sew them together.

    I’m a retoucher/compositor so PS is my main app. I’m not a dev. But why would a “true web designer” even try to set type or layout in PS?

    Anyway, thanks for the list of PS Tools… some interesting things there.

    1
  31. 57

    There’s an awesome solution: give a user the option to switch to ‘webmode’ in PS, where you get a FW-like environment. E.g. where you can define a square’s size instead of dragging it out to that size (WHY U NO SNAP TO RULER?), set corner radius for shapes, etc. But still have all the tools PS offers as well (and the ease with which you can use them).

    1
  32. 58

    I actually regret listening to all these Fireworks advocates and making an effort to move away from Photoshop and Illustrator. I chose to give it a good go, mainly because it has ‘styles’ and supports objects as well as having many of the vector and bitmap advantages of PS and Ai as well as having more web-centric capabilities like page-states (all of which are very useful indeed).

    So, Fireworks sounds great in theory but as a Photoshop user it quickly becomes highly frustrating.

    It’s the simple things such as using the ‘up / down’ arrows to scroll through things like ‘opacity’ dialogues and ‘layer effects’ lists. You cannot do this in Fireworks. It slows down my workflow massively.

    It also seems unstable and clunky. I’m heading back to Photoshop and Illustrator now. Until something really good comes along.

    1
  33. 59

    Michael Meininger

    April 24, 2013 4:48 pm

    I think it just comes down to a person’s education, training and experience.

    To me it seems that the more analytical developers choose FW while more creatives use PS. I am a child of the 90′s and find Photoshop’s as a more suitable catalyst to develop web designs, interfaces and the like- but I was trained to use Photoshop from college in the 90′s. The common designs(and a lot of branding) of the day show the restraint and simplicity of FW using analytical minds. I personally feel that PS offers more tools to design(but let it be known that my PS experience far out-weighs my FW knowledge- so i will be biased).

    With that said, I think the creatives should design in which ever tools they see fit and the developer should be able to develop the code from PS or FW. While the dual developer/designer can select what works for him/her self. Just please stop trying to force a person to do one or the other because it is what works for you personally. They both work and they both have their pros and cons.

    6
  34. 60

    I use Photoshop as my tool of the trade since 1998.

    If I had to choose anything else now I’d rather go back to pen and paper and illustrate my designs.

    Photoshop is THE 2D design tool.

    0
  35. 61

    I just wanted to point out that Photoshop is not that a great for exploring with web typography, especially compared to a tool like TypeCast.

    Might be interested in this article :
    http://www.adviso.ca/en/blog/2013/01/03/end-of-photoshop/

    0
  36. 63

    People who code websites but are not designers, may think Photoshop is archaic but I think of website creation as a “production” in much the same way as a film is produced and use different tools throughout the whole process, from sketchpad to photoshop to css. First you define the identity and narrative (character and plot), then you define the visual look and feel (graphic design). From there you create storyboards and define structure (prototypes, wireframes, flow charts). Once these are approved, then you start coding. If you start with code, it’s like starting with the film editor before the film is even produced — there is nothing really to work with.

    7
    • 64

      Andrew Richardson

      April 24, 2013 6:49 pm

      Metaphor seems a bit flawed, Photoshop is not necessary to create prototypes, wireframes and flow charts, nor is it necessary to create the visual look and feel. All that is necessary for that is your mind, some paper and media. So if you truly have nothing to work with without Photoshop then you aren’t providing much value to a client.

      2
      • 65

        Christian Varga

        May 1, 2013 1:45 pm

        Fantastic explanation. As a developer, if I ever needed to create a wireframe or mockup of any level, I’d find it much easier & quicker to take the idea from my mind and code it instead of building it in photoshop. Photoshop and Illustrator are just tools. But just because HTML + CSS are used for the end result, it doesn’t mean they can’t be tools either. Having said that, I always leave design to designers, so I never have a need to follow this process.

        0
        • 66

          If I ever needed to create a wireframe or mockup of any level, I’d find it much easier & quicker to use a wireframing tool. Like Axure.

          1
  37. 67

    There is a reason Photoshop has the word “photo” in it. It’s for doing raster based work on photos and illustration.

    The web is not raster based.

    Illustrator and other vector tools are far more appropriate for web design. The main reason people don’t use them is because of lack of familiarity, not because PS is any better.

    Until I can simply grab an object and drag it to where I want and resize it with a couple of keystrokes I will not use Photoshop for layout design.

    Heck I would rather use InDesign to layout a website than Photoshop.

    -1
    • 68

      Michael Meininger

      April 24, 2013 9:34 pm

      Imported smart objects can retain vector qualities

      1
    • 69

      I do use iD for web, with indesign you can exactly do that and drag things where you want it, and use smart guides, just like in illustrator!
      you can actually get work done!

      4
    • 70

      “The web is not raster based.”

      Yes, it is. None of the images used in a webpage are non-raster. The text is effectively a fixed size (the one you chose, give or take).

      The coloured boxes you put on the site may be “non-raster” but they are almost always fixed in dimensions.Even if you argue the other way on some of this, you can’t resize your illustrator window and have the coloured boxes resize with it, so it’s irrelevant.

      Websites are raster.

      1
  38. 71

    Andrew Richardson

    April 24, 2013 6:43 pm

    I use Photoshop as an image editor only. If I need to adjust some levels on a photograph I’m using or do some manipulation to make it fit in the space I’ll use it. That’s basically it. High fidelity sketches are rarely useful for the web because the web is so fluid and dependent on the viewers hardware that trying to nail down those details that early in the process is a waste of time.

    It’s best to get the basics out with sketches, figuring out the story you are telling and how you are going to deliver it, then start making it. Don’t spend hours pushing around pixels in Photoshop.

    1
  39. 72

    Illustrator is the only tool that makes sense for Web design for me. Web design is not raster-based – only images contained in the design are raster. Illustrator gives ample opportunity to work with page grids, vector graphics, border styles and gradients … and type that really looks like type. Its save-to-Web interface is virtually the same as PS which may be kludge but it works. When the sun is out I’m a production and pre-press editor for a newspaper and have used Photoshop every day since version 2.5 … early 90s I figure – going on 20 years. It is indispensable for what it was designed for – to generate and edit RASTER images. Design is inherently VECTOR. Lines, curves, drawings … these are components that should be developed in an illustrative environment. For me Illustrator fits the bill. Is it bloated? Yes of course, as are all modern programs that strive to be everything to everyone. So are InDesign and Photoshop for that matter. I’ve been using InDesign since v2 and, for newspaper layout, I find it too cumbersome for daily use. I still use Quark and swear by it and at it every day. Photoshop’s core raster engine is solid and I will continue to use it ad infinitum to develop and edit raster images. However, when it comes to Web design and final mockup prior to writing code, I use Illustrator.

    -1
  40. 73

    We find ourselves stuck in some sort of use-my-software-war, where (one of) the intention of the article is how to pitch your design to a client. Photoshop doesn’t do that well, especially for RWD, but neither does Illustrator or InDesign (Mattan, wut?). I guess Fireworks is the best option for pitching.
    Designwise, it all comes down to what software suits you best; if you want to use Photoshop, use Photoshop. If you want to use Fireworks, use Fireworks. Heck if you want to use MS Paint, use that one!

    2
  41. 74

    I worked at 2 web agencies, and both use InDesign as main web tool.
    it makes sense, because it has a print and a web function, it’s interactive, web layouts can have different heights (unlike photoshop).
    why make it complicated if it can be so easy? it works flawlessly if you import illustrator vectors back and forth.
    our external programmers have no problem with getting the pdf, and the logos and icons seperately.
    I simply drag the files I need to export into 1 AI file, and make different cuts and export them all.
    how you manage and adjust text is flawless! (unlike photoshop, there it is a pain in the A)

    Adobe gives clear instructions, but designers seem to ignore it.
    photoshop is for photo editing (just like you stated in your article) and digital painting.
    illustrator is for vectors and illustration.
    indesign is for print and web layouting, whether it’s a raw or final concept.
    before rejecting/refusing to use indesign like a stubborn little kid, you should really use it intensively for 1 month or 2, and watch some basic tutorials.
    it’s basically a mix of Ps and Ai, and Fireworks. it’s the third major program, and it’s here to stay, try to deal with it, instead of keep using the wrong program for web and complaining about photoshop.
    wake up, you’re holding it wrong.

    you’re welcome

    4
  42. 75

    Mattan, thanks for that InDesign hint.

    I can only recommend to give it a try. Especially when it comes to more complex corporate sites where you are doing lots more than designing a fancy homepage with leather textures. For me, it is especially helpful when desiginig software user interfaces – I oftenly have more than 20 templates in that case.

    Why InDesign? Because its formatting principles work like HTML/CSS. Think about these points:

    - Colour swatches are global variables. Client: “I would like to have a fresher blue here. Could you apply it to all 15 templates to see if it works everywhere?”
    - Think about using Paragraph Styles like CSS classes. h1, h2, p, etc. You: “Oh dear, mabye that is too much leading in all body text. I’d like to quick check that over all templates.”
    - Place an INDD in an INDD, for example for the navigation element. You: “Let’s just quickly change that one icon in the navbar on all templates …” Alt+Doubleclick > Changes > Command+W > Done.
    - Use a square element with text. Hit Command+B. Define margin and padding with actual pixel values. Reuse this element just by Alt+Dragging.
    - Use Master Pages. Use layers with different browser headers on top. Helps a lot when exporting for mock-ups.
    - Use the superior rulers and grid options.
    - Export? Open an exported PDF at 72 ppi in Photoshop. That’s it. Okay, font rendering could be better.
    - Use the rounded corner tool. Use Object Styles. Change your rounded corners for all templates with just one click.
    - Planning something more nifty pixel magic? Just place a transparent PSD.
    - Planning a larger multi-template project with many nested INDDs and small elements? InDesign will run much faster and much more stable than photoshop.
    - Documentation is not necessary if your developer knows some very basics in InDesign. They can read all pixel and RGB values just by clicking on an element, looking at the options bar or at the paragraph/object styles. Measuring distances? There’s a tool for that. Mind that every element has xy values and height and width – all with accurate pixel values.
    - Creating assets? Mark your elements, copy, paste in a new PS document.

    I could go on endlessly. Sure, people who are not familiar with InDesign will have a hard time to be as fast as in Photoshop. However, that shouldn’t be the final argument when chosing the best tool.

    Unfortunately, I only have one developer in my network who is willing to dive into InDesign. Together with him, I created the fastest process ever. We did four projects like this. 2 simple websites, 1 large corporate website, 1 web-app user interface (ongoing). We love it both. Also helps a lot to explain the thoughts/pains/issues both sides have (Talking about paragraph styles HTML Tags helps a lot, especially with lesser experienced designers).

    Would love to hear your thoughts.

    4
    • 76

      thank you so much, finally someone who “gets” it.
      totally agree with you… what I actually do when I need to export files, most of the time that’s just icons or logos. I just copy and paste them into 1 Ai file, make different cuts and export them for web, works flawlessly!

      what I also enjoy a lot, is that it works very good with Ai overall, you can import vectors, and it doesn’t turn into a smartobject, it’s still editable and scalable in indesign.

      more designers need to have that EUREKA moment, and realize that InDesign is actually usable and a lot better for web than photoshop.

      I myself designed 3 corporate websites, 1 got developed, 2 on hold.
      would’ve been a pain with photoshop.

      0
      • 77

        Good to hear from you guys. I would love to establish this practice. Right now, when talking to developers about InDesign they fear “Oh dear, one of these print designers now trying to do interaction design.” The opposite is the case.

        0
        • 78

          because they have no clue about design in the first place!
          you have to explain it to them, like stubborn little kids who only use a shovel for everything!

          -4
  43. 79

    Ive been working in the web “industry” for approx 15 years now, and from the beginning I have always used PS to develop the designs and comps for the client. Of course there are arguments for and against, and tools out there that can offer benefits over and above PS, however I dont see how it is possible to design in browser, not from a creativity point of view, but from a pure speed aspect.

    dont get me wrong, I code everything, and I can type quick – but there is no way I could code a layout or a design in anywhere near the time I could arrange a layout in PS.

    I suppose I am a champion of the PS method, purely because of the 100% rendering of pixels as you see within a browser (apart from maybe the odd “fuzz” with fonts), whereas illustrator will not render pixel perfect images all of the time.

    I know the idea is to give customers a mockup of “how your site will look”, but why do it within a vector environment, when pixels, by their nature are raster. 1 pixel in photoshop = 1 pixel on screen, zooming into that pixel you can see its boundaries – something you dont see in illustrator.

    until I can be given a full, mind blowing demonstration by someone that changes my mind – i’ll stick with PS as my design, comp and layout tool – anyone up for the challenge?

    love the different take on the subject, and the various proposed methods so, so certainly not slamming the topic :)

    2
  44. 81

    Fireworks, Illustrator, InDesign, Photoshop, none of these programs solve the largest problem a web designer faces. The lack of interactivity in the final product. The only way around this is program it directly into CSS, which is in no way a real option and will slow down the whole process.

    When the website is very rich in terms of user interaction, there’s still the option to create rough examples in Flash or After Effects (or similar programs), most effects will be done within minutes and will give you a result even the client will understand.

    From my experience, Illustrator and InDesign are not a real treat for Photoshop for now. To be honest, I’m still waiting to see a web design created in InDesign or Illustrator that I’d say looks good/professional. The only real alternative is Fireworks, which is a great product and it’s just up to you what you prefer.

    Photoshop still misses things like global swatches and at some point a better management of multi-paged layouts and 9x-scale, other than that, there’s an easy solution for almost every task you can think of and the reason alot of people don’t see the actual power of the tool is that they simply don’t know it.

    2
    • 82

      “The only way around this is program it directly into CSS, which is in no way a real option and will slow down the whole process.”

      Try a wireframing tool such as Axure – you don’t have to code anything if you don’t want to, but if required it can fast-track buttons, selects, forms (and associated variables, allowing you to demonstrate logins etc.) and many other things.

      Programming directly into CSS is the slowest option. I’d go as far as saying it’s not a legitimate option at all.

      0
  45. 83

    While i still receive a lot of designs via photoshop i really enjoy working from illustrator. Firework is also ace.

    @TeeMann the simple click prototyping you can do with fireworks is pretty powerful, I’m sure you’ve already seen this article but incase http://fireworks.smashingmagazine.com/2013/01/11/ios-prototyping-adobe-fireworks-tap-part1/

    1
  46. 84

    Hi,

    I put in a lot of effort the last year to set a more efficient workflow for our webprojects.
    We move to html and css a lot sooner then we did before. Our ‘designers’ use the tools they’re feel comfortable about (indesign, photoshop), our developers can start sooner (some designer are even learning html/css). Result… we need a lot less time (and money) to deliver the project. Here’s what we do.

    - first we use indesign to design the ‘style tiles’ (using this plugin to define hexadecimal colors http://in-tools.com/downloads/indesign/scripts/CreateHexSwatch.zip)
    Creating a 12 column grid with indesign’s columns and gutters. Download the google webfonts you want to use and use them in indesign too. Importing assets (vector and bitmap artwork) keeps them at original size. Later on you can export them for web using their native application by using ‘edit original’ in indesign contextual menu. By keeping them at their original size, it’s easier to use them for your responsive layouts too. Using character/paragraph-styles makes it even easier to edit later.

    - We create a working prototype of the pagetypes that are going to end up as templates in our cms (using zurb’s fantastic foundation framework). Sometimes we even put in the styles from our indesign style tile (if it’s been approved by our client).If not, we just use the foundation styles. This work can allready been done while style tile is being reviewed and edited. By creating this prototype, we can see working layout on desktops AND mobile devices and react to design or layout problems a lot sooner (and solve them…)

    - When styling is approved, we apply the styles to our working prototype. Prototype is put on a developmentserer for our client to review. The biggest advantage here is that it IS actually his website. It’s really “what you see is what you get”. Desktop, tablet, smartphone behaviour…browserbehaviour. Everything can be review and altered.

    - When prototype is approved, we take this static html to make templates out of them for our cms of choice (in our case it’s the Silverstripe cms (www.silverstripe.org))

    We find that there is a lot less discussion about ‘in my presentation(often a photoshop comp) it looked different), a lot less frustration for our front and backend developers because client has approved a ‘real life example’ and not some photoshop page mockup.

    So… stop creating full page photoshop mockups (which take up a lot of time creating and altering), but make a style guide (as you did before for print artwork), At the same time (or after styleguide approvel), create a working prototype and make the client experience his webiste instead of presenting a full page mockup. You can’t use photoshop to present a responsive website just because it is fixed size. (and why create something that you have to create all over again in html/css afterwards)

    I don’t say this is the only way to go, but it helped us a lot. We need less time to deliver a website, we need less production time (so we make a bigger profit, or we can do more projects with the same amount of human resources) AND clients LOVE the prototypes…. They are much more involved in the process and they are really satisfied when the project is finished, because it’s much more wisywig.

    guy

    0
  47. 85

    This is slightly off topic, so please accept my apologies!

    I am trying to create a mockup to show what my website will look like optimized for the iphone/ipad/desktop. Does anyone know a good tutorial for how I can create this in photoshop?

    0
  48. 86

    I use a combination of photoshop and illustrator and have done so for years now.

    I primarily use it because it has become second nature for me to do so. I think as others have mentioned, you can use what you are comfortable with or what is needed to get the job done.

    I recently had a team member do email mock ups using InDesign and then spent a half hour explaining to the Project Manager, why the mock up didn’t look like the code… Couple issues here. The one the PM got stuck on was the type not rendering the same way.

    I like the article for bringing the comments and other tools up in the comment thread. I have used other tools like Fireworks, Skitch, Keynote…

    Personally, I like working in photoshop. Right or wrong, just my preference.

    One thing I have had a lot of success with recently… I have been doing my full page layout in photoshop, then just showing a wireframe of the mobile version of the site… Mapping sections of the full page desktop to the wireframe for mobile. People get it and after showing them some examples of existing sites and how they handle image sizing for mobile, they get it.

    Cheers and thanks for all the different tools everyone has brought up!
    Ryan

    3
  49. 87

    The bottom line is… its all marketing strategy and PROFITS… if abobe came up with the best design software… there will be nothing else to make. That is one reason why i feel lot of the design softwares, or programes have problems purposely put in so that you will have to pay for the next upgrade so on and so forth…

    There are softwares which are user friendly. Not too much of complications… but it dosnt get the spot light because of the bigger competitor who have been eating the market for ages…

    -1
  50. 88

    Complaining about the transition from design stage to web launch is like complaining that the blueprint to the house doesn’t look like the finished structure. They are two completely different mediums and should be treated as such. That being said, you have to be realistic if you are utilizing a raster program to design for a fluid showcase. It’s about like designing a blueprint for an architectural design of a home that would never be possible in the physical world, then kicking dirt because your “idea” didn’t flesh out as it did in your 2D design of it. If it isn’t possible in the fluid Web world, don’t design it to be in a static, one-dimensional graphics program and expect it to seamlessly transition with no hiccups. Just like the Web is inherently fluid, your design and layout approach should be the same. PS should be the board that you throw ideas at and see what sticks. Expecting that every little detail will transition is futile. Using PS to design a mock up is fast, easily manipulated and changed, and can render a result to the end client in a very realistic and aesthetic manner. I have had numerous clients look at the design in PS and want to start clicking. If that doesn’t convey design success, I don’t know what does. I guess what it all boils down to is, if you are more efficient one way or the other, use what works for you. If you are left handed (me being right) and we go golfing, I wouldn’t argue that you need to use my clubs because they are the best for me.

    1
  51. 89

    Great article…well written and very “thought out”. Coming from a not so long past I see the creation as tools tools and more tools. It seems everyday something new hits the web and now it’s the tool to use. I like PS and programs like it for certain things. I think in the near future there will be less done in PS and more tools to help in the browser or editor…Great read though. Thanks

    0
  52. 90

    I use flash to layout :)

    0
  53. 91

    Philip Hastings

    July 9, 2013 6:01 pm

    All I know is that dude is from the ‘Cuse – hello from B’lo.

    0
  54. 92

    “True story: about 95% of instances of Mac OS X’s beach ball”

    PC, Win 7:
    Photoshop has not crashed *once* since I got this machine with Win 7 on it and installed CS4.

    0
  55. 93

    “I’ve always found rendering the most basic of fonts as anything like the browser ends up doing to be incredibly difficult for Photoshop”

    It’s pretty irrelevant actually, as it will look slightly different across every web browser when you build it anyway. Especially if you insist on using Helvetica, which only exists on MACs — everyone else will get Arial.

    “Lack of interactivity”

    That’s what wireframing tools are for (such as Axure). Design is irrelevant to wireframing; it should be about function, not fonts and colours.

    “Expense”

    It’s a rip-off, and their whole update system is designed to make them as much money as possible — especially now they have moved to “cloud” licensing. I need to save files as CS5 from CS6, then open them in CS5 to save down to CS4..? P-lease… That’s just a sneaky, money-making scheme if ever I saw one.

    However *back in reality*, at £15k-£50k+ for a finished website, Photoshop is a tiny, tiny percentage of the amount of money made from using it as a tool to do a job. If you just want to mess about or you only make websites that earn you £150 then no, Photoshop is not at a good price.

    0
  56. 94

    I thought it was called “photoshop” because it’s supposed to be a photo retouching tool. I use “indesign” to make my “designs” (crazy, I know).
    Please, Adobe, do not make Photoshop yet another tool for webdesign. Photography is an important art. Thank you.

    0
  57. 95

    Hope: Photoshop for a Responsive Web Site

    I have completed extensive research on the web about how Photoshop (and/or visual design) is being depreciated for today’s creation of web sites—responsive/fluid. The following indicates hope for designers. What do you think? Do I view this correctly to not discount Photoshop?

    1) Currently you can go from Adobe Photoshop then bring the Photoshop content to Adobe Edge Reflow for responsive design. Also, Adobe has plans for “deep integration” between the two.

    See More Here
    http://html.adobe.com/edge/reflow

    Also, a good tutorial from Photoshop to a Responsive site in Edge Reflow.
    http://www.youtube.com/watch?v=hde9qB6vMf4

    2) PSD Lens Concept” Adobe is planning/experimenting with “PSD Lens” in Edge Reflow (and Edge Code), which will let you link to specific items in a PSD file and then get CSS code inside your code editor.

    See more here for PSD Lens (Watch Video):
    http://blogs.adobe.com/edgecode/2013/06/07/from-design-to-code/

    0
  58. 96

    lindsay branscombe

    August 6, 2013 8:18 pm

    I don’t understand how, in a conversation about replacing Photoshop, that Adobe Illustrator didn’t come up. It is the ONLY design program I use to layout and mock up websites before going to the browser. It allows for less focus on pixel perfection (since we aren’t doing that anyway with responsive design) and it also allows for easier manipulation of things like drawing lines or irregular objects. I find Photoshop to feel like an octagon peg in a round hole. Sure, it fits, but there’s some gaps and it doesn’t FEEL right.

    Just surprised it wasn’t mentioned and outlined in this article.

    0
  59. 97

    Great article – very helpful and timely analysis of where we are as designers as tools and methods are evolving so quickly. I’ve spent so long with Photoshop that I like hearing these ideas for how to incorporate it in a sensible web workflow.

    0
  60. 98

    If you are looking for HTML developers with impeccable coding skills, we can help.
    We help great designers and busy web developers by turning their Photoshop designs into perfect HTML.
    Please check out PSDtoXHTML.co.uk to learn more about our services.

    1
  61. 99

    In defense of Illustrator most people don’t fully know how to use it. Illustrator CS6 is the best vector based drawing program. Photoshop is best for pixels but it can vector also, just not as good as illustrator. For web what you design is supposed to be based of the tools your client (person using the actual site) has available. The font from your computer won’t work on a computer that doesn’t have it basically. There are 10 fonts that all computers generally have that web designers use aside from webfonts and packaging your font with the actual site. Long story short web programming is complicated. If you want to build a website with navigation through one folder a web slices export is a good way to go.

    0
  62. 100

    Good Article and great list of resources. Would like to also see a review Adobe Muse, Webbsy.com, SiteGrinder.com & MACAW on release.

    0

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top