As a GUI developer it's not unusal to work a lot with photoshop. The design is later translated into CSS for the page. Wouldn't it be nice if we could create a customer-centered design directly into the browser? We'd win time and also make it easier to time-estimate the actual work.
There are occasions when customers want to redo parts of an already existing web-page. Sure, you can locate the original PSD file (if it exists) or take a screendump, paste it into photoshop and start your layerwork. But for small fixes I found a better way. I recommend 2 add-ons for the firefox browser that will make your life easier in these situations.
- Firebug - If you haven't already installed firebug for firefox do so, I see it as a mandatory plugin for any web-developer/designer.
- FireShot - A screendumping tool that has a lot of features.
Here's what you do:
Start directly with the CSS. In firebug's "inspect-mode" you start to work with the parts of the page you need to change. Edit CSS's on the fly until you're satisfied with your supercool design addition/change. Then righ-click on the page and chose "capture visible page and... e-mail". That's it! Now you're done with your design, you've sent it to your client and now you know how to implement it, which of course helps to time-estimate when the customer asks you to go-ahead with the implementation.
Otherwise the FireShot is a great tool on it's own merits. I, however, see it as a trusty companion alongside firebug in my search to optimize my work...