25 Open Source Web Design Programs And Tools You Should Already Know About

Open-source programs and tools have really come a long way. Almost any program out there has an open-source equivalent. Using any combination of the tools below, it is possible to create, author and publish a website entirely for free (legally).

Text Editors

Aptana Aptana is the free equivalent of Adobe Dreamweaver. Very powerful and very stable.
Notepad++ Notepad++ is a lightweight text editor that has code coloring and code folding.
Notepad2 Another very lightweight text editor that can be used as a replacement to Windows Notepad.
Cream Not for the feint of heart, this is a modern configuration of Vim. Very powerful but with a learning curve.
Firebug Firebug is a powerful plugin for Firefox that allows you to edit CSS/HTML/Javascript live while you browse the page.

WYSIWYG Editors

WYM editor A web-based XHTML editor that outputs W3C compliant XHTML 1.0 STRICT code.
Amaya Amaya is a WYSIWYG HTML/CSS editor from the people at W3C. Of course this means its output is 100% valid.
Selida Another WYSIWYG editor that is entirely free.
Nvu Nvu is another open-source Dreamweaver clone. It features HTML/CSS editing and a WYSIWYG side.

FTP Clients

FileZilla A very popular FTP client. You can also download the server edition for free.
CoreFTP A simple two-pane style FTP.
FireFTP Use FTP without ever leaving the comfort of your Firefox!

Image Editors / Creators

Gimp / Gimpshop The open source equivalent of Photoshop. This image editor is very powerful and completely free. Gimpshop [ available here ] is a modified version of Gimp to help people familiar with Adobe products move over to Gimp.
Inkscape A very powerful image creator that outputs SVG (scalable vector graphics) files.
Paint.NET Another image editor/creator that has some nice features. Basically this is a version of Paint with a bit of Photoshop style tools added to it.
Project Dogwaffle This is a free painting and animation prgram by Dan Ritchie. You can achieve nice digital paint results with this.
Picasa2 Google-owned Picasa is an image organizer. You can edit your photos, tag your images and even upload them to Google’s server for free. This is perfect for organzing images for galleries.

Color Pickers

ColorMatch Remix This online tool allows you to pick a color and have several colors generated to match it. You can export your palette as a Photoshop or Illustrator file.
ColorPicker This color picker allows you to pick colors from photos and other images. It can ouput colors in either RGB mode or hex, which is useful for us CSS designers.

Coding Help

AllChars Ever had trouble remember that “&” should be “&” in HTML? AllChars will help you encode ANY character you want.
CSS Creator Use this online tool to generate the framework for your CSS based layout.
Firdamatic Another online CSS layout generator that can be used for either 2-column or 3-column layouts.

Helpful Firefox Extensions

Web Developer Toolbar for Firefox This plugin is a must have for any CSS designer. It allows you to view the CSS for a page, turn off styling and browse through the DIVs to see how a page is assembled.
IE Tab Check your website in Internet Explorer by opening it in a Firefox tab. Never open Internet Explorer again!
HTML Validator Adds a small section to the status bar displaying whether or not a website has valid markup. It even shows how many errors are in the site.