The toolbox you have for creating websites affects the projects you work on and how you approach them. If it is hard to do something you will do it less often, which means you may take the easy way out. These are some of the tools I use that will help you optimize your web design workflow.
CodeKit – you want this, it makes your images smaller, automatically injects CSS changes to your page from Sublime Text so you can code live, and will compile SASS or LESS to CSS automatically if you ever start using either of those CSS languages. (Use SASS, it is better, and has more support in the professional community)
Chrome’s Developer tools are going to be your best friend. Built-in to Chrome, they let you test everything for problems, design in the browser, and will let you learn how to code better than any other tool. Simply right click on any part of a web page anywhere, select “Inspect Element” and it will show you where the element was created in the code, the css that styles it, and allow you to edit it.
STFP – this is a plugin for Sublime Text that allows you to upload via FTP from within Sublime, and sync local and remote version of your website. Saves having to use Cyberduck for most things.
Emmet – This is a shorthand system for creating large amounts of HTML quickly. Learn the basics first, but once you understand what you are doing, graduate quickly to this style of writing HTML. It allows you to plan the skeleton of your site rapidly, and fill in from the in side out. There is a plugin for Sublime Text.
Adobe Fireworks – A big one – this tool is perfectly set up for web design. It has object based layers, will show you the CSS that is needed to make the designs you create, and it allows you to make clickable mockups.
That should be enough to fill your weekend ;)