In every industry, there are a few tools that a professional cannot live without. In Web Design, those tools are FireFox, Coda, and Photoshop.
FireFox
Sure there are a lot of great browsers out there, like Safari and Chrome, but they cannot compete with FireFox’s add-on library. For Web Designer’s, you MUST check out ColorZilla, FireBug, FireFTP, Web Developer and the MeasureIt add-ons (thanks to Fábio ZC for the MeasureIt suggestion).
ColorZilla. ColorZilla provides a color picker that you can use to sample any color on your browser window. Additionally, you can customize the settings so that you can copy the HEX code of the color you’re sampling and paste it right into the Photoshop color picker. Before I used this tool, I was taking screenshots of my browser window and opening the image in Photoshop to sample the color. Major time saver.
Firebug. Firebug is an extremely powerful tool. It allows you to easily “inspect” items on a web page to see what CSS is applied to them, as well as isolating the HTML. This is just a fraction of what this plugin can do. Check it out!
FireFTP. FireFTP is an amazing FTP client, considering it’s free and built into FireFox. While it obviously cannot compete with other FTP programs that you can purchase, it’s perfect for the beginner web designer who doesn’t have a big budget for software.
Web Developer. Web developer, like Firebug, is an enormously powerful plugin. It allows you to do numerous things, such as disabling CSS, images and javascript. One thing that I use the most is the resize tool. Just specify dimensions and Web Developer will resize your browser window. Very cool!
MeasurIt. MeasureIt allows you to easily draw an outline around elements to see their pixel dimensions. Very useful for those times when you need to double-check heights and widths when you’re writing your CSS.
Coda
Among all the HTML/CSS editors I’ve used (for both Mac and PC), Coda is by far THE best. It truly is “one window web development”. It has a built-in FTP feature, and even has an easy-to-use resource library. I also like the fact that I can store common snippets of code so that I don’t have to keep retyping stuff over and over. Oh, and did I mention it’s only $99!
NOTE: this is a mac only program. Sorry PC’s.
Photoshop
What would the web be like without Photoshop?!? It’s scary to even think it. Photoshop is the only place you need to go when creating your next design for a website. In fact, Photoshop has become such a major design tool (in any design industry) that I don’t even know why they still have the word “photo” in the name. I mean, with all that this program can do, they should change the name to something that encompasses all it’s abilities, like “FreakingAwesomeShop”. I know. Doesn’t have the same ring to it.
Did I miss anything?