Optimize Your Web Design Workflow

35 Comments

Comments are ordered by helpfulness, as indicated by you. Help us pick out the gems and discourage asshattery by voting on notable comments.

Got something to add? You can leave a comment below.

  1. Peter Wright

    @VEERLE PIETERS – Indesign certainly is print oriented, but it’s certainly changed. For me, neither Illustrator or Indesign is a competent layout application. I mean, Can you even display the rulers in pixels in Illustrator yet? It’s horribly cumbersome as soon as you import images as well.

    Illustrator and Photoshop are, for me, asset creation tools these days, as is their main purpose.

    Master pages, live non-destructive image cropping and resizing, the typographic control – I can’t see a compelling reason for not using Indesign. How much of a hassle is it in Photoshop to change to corner radius on all of the different sized buttons you might have?

  2. AngleGrinder

    In regards to where you’re talking about enabling the grid, configuring your sub division, and Snapping to said grid:

    When I’m zoomed in, my beziers don’t snap to the grid when I’ve got one selected and nudging it with my keyboard arrows. When I zoom out to 100%, it nudges at 1 pixel at a time. Any way to get bezier nudging while zoomed in so it doesn’t land on a half pixel? I use shift+nudging to jump 10…but sometimes that’s too much.

  3. prisca

    Veerle,
    thanks for another great article :) Especially liked your points about the scratch file – the most useful way to work, I always find.
    (though I cannot find myself using the slicing any longer, never seems flexible enough for my workflow).

  4. Russell Bishop

    Some excellent tips here, straight after reading them I wondered why on earth I hadn’t been doing that already!

    Also glad that you raised the point about using Photoshop for the design, I’ve stuck by my guns about this too. You can’t be truly ‘creative’ when you’re in the confines of markup and stylesheets!

    Thanks for the read, veerle!

  5. Peter Wright

    What is your opinion of Indesign as a web solution? Since CS5 a lot of the changes they’ve made have enabled me to be more flexible, creative and productive for web projects. Photoshop’s lack of character and paragraph styles is baffling and infuriating when working on a large project.

    This solves your problem with linked files also. A combination of Photoshop, Illustrator and Indesign is perfect for my use. However much we hack it around to be so, Photoshop just simply is not a good layout tool.

  6. Alan Tyla

    Nice article, though I’m heavily based in the Fireworks group and everything stated there is how I’ve worked in Fireworks for years. Always had the view that Photoshop was and still is primarily a print/photographic tool, unlike Fwks which is specifically aimed at website design.

    With the latest CS5 version, the boundaries between Photoshop and Fwks have merged.

    My main plus for Fwks is file size. I can produce a layered document just as per photoshop yet the filesize in almost a 10th of a PSD, saving a lot of work with exporting for previews as I can just fire the original PNG across.

  7. Veerle Pieters

    @ANGLEGRINDER if you use the arrow keys you always jump at a certain fixed distance, and so the snapping has no influence on that. While if you drag it has, or at least it should :) Hope this info helps.

    @ADE, @NICOLAS CHEVALLIER, @NICOLAS CHEVALLIER, @PRISCA and @RUSSELL BISHOP thanks! :)

  8. Metin Saylan

    I’m sure if I switch to markup too quickly, I might end up with a rather boxy and less interesting design.

    Yea, nice catch there. I’ll surely start using those tips with my next design. Thanks.

  9. Tom Ronda

    Good article, good tips. Interestingly I’ve developed similar ways of increasing my efficiency (using smart objects for repetitive elements, repository file)

  10. Frances

    Fantastic!

    I’m mired in a whole bunch of Photoshop mockups right now — it’s great to be reminded of the ways I can save time while designing.

    Like your scratch file, I also sometimes use a “master file” which contains some of the main layout scenarios for a project. That way, I can grab a whole folder full of layout components to apply to a particular page or section of a site, in the event that I have to work on multiple PSDs at once.

  11. Veerle Pieters

    @PETER WRIGHT InDesign has features I wish Photoshop had like multi pages and the fact that you can link external images into your document, then of course the typographical advantages such as character and paragraph styles (which is also there in Illustrator), the way you can flow text etc. But in its current state I don’t see myself using it for web design. It’s really print oriented.

    @MAZILU TEODOR most tips I mentioned can be applied in other apps as well.

  12. Hans Verhaegen

    Great inside tips for Photoshop users from a great designer. I am (was) a Photoshop user too. And I agree that Fireworks is not that easy to start with. The master page, pages, states, layers part is really confusing in the beginning. But once you do try, and understand the basics and beyond, it is just amazing. Fireworks is really 100% made for web design. It just feels more natural and has, I have to admit, a much better workflow. I think it is a good thing for a designer to change her or his software once and in a while. Designing skills should not depend on the software.

  13. Kevin

    The scratchboard is just one of the things I’ve been using more and more lately. It’s funny how I never though to use one before but when it comes to designing apps it makes it very easy to have all your pervasive elements there.

    I’ve got a bit of a love/hate relationship with the layer comps. It’s such a power full tool that just seems to be partially implemented. I definitely have to pull back from using them and work more with additional PSDs.

  14. klickreflex

    I can so relate to this. I tried several times “leaving” Photoshop for Fireworks or other apps. Although being a big fan of 37signals a code-centered design process never worked out for me.
    Glad to know there are people who’ve made the same experience.

  15. DRoss

    One of the best posts so far this year. Because it deals with and explains very useful PS workflow techniques which are very helpful in creating detailed designs.

    I use most of the techniques Veerle mentions here and can tell you, if you’re a beginner or novice to incorporate and use these techniques now. Your designs will come out much more polished and you’ll save yourself time once you get the hang of it.

    Awesome writeup Veerle,
    DRoss

  16. Basil Mohammad

    Thanks alot for the article helped me get organized with my photoshop again :).

    I truly believe that for most of us designers, the biggest time waster is the process in which we work with the developers of the site, be that programers/coders or simply marketers.

    I would much rather have an article about methods and ways to deal with such birocracy.

    anyone knows a good article?

  17. Fws

    Nice tips for Ps-based web design. I prefer Fireworks for UI work though. I got real comfortable designing in Ai before switching to Fws and haven’t looked back since. Fws CS5 has some really impressive tools for drawing too…all the same workflows you would use in Ai. For interface design in Fws, using its multiple pages, property panel, slice management, and various creative commands make prototyping in Fws not only powerful but efficient. Oh, and Fws runs twice as fast as Ps…real handy if your designing on a slow machine or are running millions of apps at once like I do :-)

    Thanks for the article!

  18. Kevin Sweeney

    Excellent tips and tricks for making PS comps for the web. I find that I no longer make use of the slice tool. It was great for table-based designs, but nearly every image I export these days tends to have some type of transparency and/or need for sliding doors based design. Everything else is bound to go into an image sprite.

    How many people out there are still using this tool?

  19. Robin Parker

    Like Russell, I’m really pleased that you’ve made the point about designing in Photoshop rather than the browser. If we all designed purely in CSS3, I really think the web would start to become a very dull (and generic) place indeed!

  20. Tony Price

    Good to know that I already use a lot of these practices in my workflow. And I gotta say that I still use the slice tool, but only for email campaigns since those are still table-based for the most part.

    Thanks, Veerle!

  21. Henk

    I understand your opinion but personally I think that it is just a way of doing things.
    Some people will work better, using photoshop first (I like your designs by the way Veerle, I follow you also on your blog duoh) and others just start using css.
    I also think that if you use Photoshop first you will use to many images instead of using all the features of css.

    I’m curious what David DeSandro (wrote day 14 of the 24ways post of 2010) will think of your approach.

  22. Veerle Pieters

    Thanks everyone for the great comments. I was expecting some Fireworks feedback here and I’m glad people did. It looks like I need to read that article that @MARKUS is linking to, and maybe give Fireworks another try as well. I think it’s good to always keep your options open, and decide what works best for you.

    @PETER WRIGHT in Illustrator it’s possible to adjust the corner radius if you have it applied via an effect, and if you have saved this effect as a style. Then when you edit that style and update it via the styles palette, it will update all elements that have that style applied. But you are right, in Photoshop I believe it’s not that flexible. Also, you can change your rulers to pixels in Illustrator, I believe that option is there already since a couple of versions.

  23. Nick Silva

    I loved all these tips about PS; forget web design, this is the RIGHT way to use PS! The Adobe Evangelist Dr. Russell Brown has a series of podcasts about the power and flexibility of these tools and represent the real advantage that CS has right now.
    http://www.russellbrown.com
    http://tv.adobe.com/show/dr-browns-photoshop-laboratory/

    You could probably make a great case for InDesign to be used for website layout tool (especially by applying graphic styles for elements). I have often favored Illustrator, but it does such a piss-poor job of kicking out raster versions. From the sound of the comments, I guess I’m a candidate for learning Fw’s, too. Sometimes though, it feels like I’m killing an angel if I’m not designing in the browser….

    Great job Veerle, great food for thought.

  24. Harm

    In the past 2 years I have learned that Photoshop isn’t meant for webdesign. And layer comps suck bigtime when you need to change something afterwards.

    You definitely should give Fireworks a go. It uses pages. Has find and replace (not only for text, also for colors(!)).
    And then there’s symbols. You got to love it. Change a symbol and it’s changed everywhere. It will give you a month extra time every year. Hooray! I can’t emphasize it more – use Fireworks CS5! It runs smooth and the learning curve is not that steep. Command+K snaps your object to pixels for instance, no more fuzzy aliassing! It even has automated back-ups in case of crashes.

  25. Rajveer Singh Rathore

    I thought I was fast with Photoshop, until I read this article about using Custom Styles and Layer Comps that would make me efficient as well. Awesome!

    I tried using Fireworks sometimes earlier, but I am so much in love with Photoshop that I could never actually finish any single project using Fireworks.

    More I get to experience things practically and via some readings about PS vs. FW truths such as: http://www.reinegger.net/50_reasons_not_to_use_photoshop_for_webdesign.html more I force my heart to switch to Fireworks – sadly PS is still a winner till now!

  26. Márcio Guerra

    Awesome tips! I understand that this article isn’t «new», but I can still find some spare space to place some of the technics, specially since I’m not a webdesigner but a communication/graphic designer, focused on print. Some technics are used by me. Not aware of, but yes, I use them, but, if I finally move to webdesign, I can apply others to next projects.

    Just as a fun-fact… I had this article open for… lots of months, not to say over an year or more, in my opening tabs, (site had an older design) but just now was I able to read it… And it was worth not simply closing it or just leave it in bookmarks…

    Thank you, and cheers from Portugal!

    Márcio Guerra

Impress us

Be friendly / use Textile