Thanks for the insightful post Veerle, you’ve taught me more than a few tricks today that should help my workflow. Thanks again!

@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?

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.

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.

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!

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.

great work, i will be using some of your suggestions, thank you

Learn firework and you’ve already optimized your work flow :)

I admire your work, some screenshots showing how you are conscientious and a perfectionist. I hope to someday hire you for a project:)

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).

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!

Useful suggestions Veerle, I have just set Ps according to them.

@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! :)

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.

fantastic post! Thank you

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

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.

Interesting article with nice tips, although I wish it weren’t about Photoshop but about design in general. Not every designer uses Photoshop, you know?

@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.

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.

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.

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.

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

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?

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?

there is nothing you can do in Photoshop that isn’t also possible in Fireworks … except for editing Photos properly which is of course what Photoshop is made for.

That leads to what Fireworks was made for and that is to design websites properly :)

why don’t you give it another try: 50 reasons NOT to use Photoshop for Web Design

:)

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!

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!

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.

Nice tips, a few here that are new to me thanks!

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.

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!

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