Project Management

Free or inexpensive online web design tools

Ryan Boudreaux shares eight web design and image editing tools that are freely available or very inexpensive -- for newbies as well as frugal-minded design pros.

For the budding newbie web designer who is not entirely sure if this is the correct career path, or for experienced web professionals who might be looking to economize their software budget, there are a multitude of shareware, downloadable freeware, or inexpensive online tools available. Inspired by an email inquiry from one of our TR Web Master readers, I have culled together this list of available resources that have little or no associated costs other than the required components to run Windows, Mac, and in some instances, Linux operating systems, an Internet connection, and an attitude for learning new tools.

The tools are divided into sections by web development and design tools, image editing tools, file transfer tools, and web hosting providers -- and in no particular order.

In this part of the series, I'll present several web authoring and design tools and image editing tools; part 2 of the series will highlight several file transfer protocol tools and some of the free or low cost web hosting providers. This is not so much a review of each tool, but more of an overview of selected applications available within each category. There are far more tools and applications out there than will be presented in this two-part series. If you have experience with tools and online applications that fit within one of these categories and meet the guidelines for free or low-cost, please share them with us in the comments section at the end.

(See the gallery version of this post.)

Web authoring and design tools

These web authoring tools are all free and available for download from their respective organizations.

HTML-Kit

HTML_Kit can be downloaded to the PC and installed at no cost; there are many plug-ins that can be added as well. It is provided by Chami.

Komodo Edit

Considered by some to be the best free XML editor available today, Komodo Edit includes a lot of features for HTML and CSS development and coding design. It also features many extensions, and add-ons for languages and special characters, and while it might not be the best HTML editor, it is considered to be at the top of the pack for the price. It can be run on Windows, Mac, and Linux and can be downloaded from ActiveState, the self proclaimed Dynamic Language Experts.

First Page

First Page is a completely free program, which comes bundled with over 450+ JavaScripts, syntax Highlights for Perl, CSS, HTML, CF, ASP, and SSI, and allows you to store your own code snippets in the myCode Library. It is available from Evrsoft.

KompoZer

KompoZer is another WYSIWYG web page editor that combines web authoring with web file management, designed for ease of use, and ideal for non-technical users who do not have all the knowledge of HTML or coding. It is provided by KompoZer, offering versions for Windows, Mac, and Linux.

Image editing tools

Along with creating and authoring web documents, a good web developer also needs to learn how to manage and manipulate images. Several free online tools are available for editing photos.

Picnik

Picnik is a photo editor acquired by Google in March of 2010, and the online tool is available for free. A premium upgrade is available for $24.95 on an annual renewal basis.

Photoscape

http://b2b.cbsimg.net/gallery/6229142-600-442.jpg

An easy to use photo editing software that enables you to fix and enhance photos, Photoscape is provided by MOOII TECH and offers such features as batch processing, page layouts, combining/ joining images, and modules to create frame-based animation from multiple photographs. The screenshot shows the feature to make one photo by merging multiple photos at the page frame.

GIMP

GIMP is the GNU Image Manipulation Program and has been compared to the free version of Photoshop due to its steep learning curve and similar functionality. Available for use on Linux, Windows, and Mac operating systems, it is frequently updated with new features and fixes, customizable and extensible with the addition of plug-ins and scripts. The program is available at Gimp.org.

Aviary

Aviary Phoenix Image Editor runs within the browser and offers similar functionality and editing features as the expensive desktop imaging software. Developed by Aviary, the image editing tool is part of their free suite of online tools including screen capture, vector editor, effects editor, music creator, audio editor, image markup, and color editor tools. The screenshot of the tool in use is taken from the video tutorial on "Unzipping a kitty," Several tutorials are also available for the Phoenix Image Editor.

Remember to check in next week when I continue this series with free or low-cost tools for file transfer protocols and web site hosting providers.

Are there any free or low-cost online tools that you use that were not mentioned in this piece? Share any tips or tricks you have for utilizing them in your web development projects.

About

Ryan has performed in a broad range of technology support roles for electric-generation utilities, including nuclear power plants, and for the telecommunications industry. He has worked in web development for the restaurant industry and the Federal g...

20 comments
jeyjoo
jeyjoo

Nice. I would add a HTML and CSS bvalidator to check site coding (such as W3 http://validator.w3.org/). Also there are some great free image galleries where you can find backgrounds, textures and free stock images. Jeyjoo Sheffield web design

mehra10al
mehra10al

I use different template for free web design, i also use tools from calgary web design

martin.english
martin.english

Eversoft and Kompozer haven't been updated for, quite literally, years. The HTML-Kit documentation says I need IE9 if I want to preview HTML5. Any chance of your next review involving someone actually doing something with the tools ?

adimauro
adimauro

I used Komodo Edit all through grad school, I recommend it. It's basically just a great text editor with a few IDE features thrown in. No, not the best for HTML, but I was using it to create bioinformatics perl scripts, and it worked great for that. While some of the free tools may be nice for HTML, last year I found the editor I can't live without. JetBrains WebStorm. No, it's not free. $69 retail, on sale for $34 right now. I got it for $29 at another sale. So, if you can get it at the right time, it definitely qualifies in the 'inexpensive' category. It comes with Zen Coding built in, and it's just a great HTML/CSS/Javascript editor.

kandries
kandries

@bbrososky: If you admit "While most of them aren't online ...", why mention online in the title ? That's my point. The title is misleading.

rsantuci
rsantuci

I am surprised in this day in age the websites are even considered. When you have wonderful open-source CMS packages such as DotNetNuke available. You can set it up for a client and then leave the content to them. How easy is that?

kandries
kandries

I do not see any online tool in the article. The fact that a tool is available online, doesn't make it an online tool !

hectorj102
hectorj102

I recently used this software for a fairly large personal project and found it very useful and easy to use. They also have a number of other tools including the Coffee Cup Free DHTML Menu Builder. All available at http://www.coffeecup.com/freestuff/

pablo.handler
pablo.handler

Irfan View is a classic in the image editor area: it's free, it's nice,... Personally, I am happy using it as a way to input images, thru cameras and scanner.

Jaqui
Jaqui

Konpozer, the css added version of Composer component of the mozilla Suite browser Seamonkey. [ was Mozilla Suite, and is a duplication of the Netscape Communicator idea ] add bluefish, quanta(plus*), SCREEM and a whole mess more free / open source html editors. *quanta plus is commercially licensed version of Quanta, with a few more features enabled. only real issue is it's KDE / QT based.

Spitfire_Sysop
Spitfire_Sysop

Don't forget about standards compliance! Amaya is a WYSIWYG editor from the W3C so it helps you push out standards compliant code the first time. It's free and it's been around since 1996. It's got context highlighting for HTML, CSS, XHTML, MathML, and SVG. Distributions are available for Linux, Windows and now MacOS X PowerPC and Intel. http://www.w3.org/Amaya/

SkyWlf77
SkyWlf77

I'm a bit surprised that there was no mention of Paint.NET in the image editing arena. It is 100% free and is a very capable program. Its learning curve is nowhere near as long as GIMP and it is very effective within what it does. Some adjustments are missing from it that can be found in GIMP, but I find that those are features I rarely use anyway. You can find it here: http://www.paint.net/

Ryan Boudreaux
Ryan Boudreaux

Sure sounds like a great idea for future pieces. Thanks!

Spitfire_Sysop
Spitfire_Sysop

You just worked yourself out of a job. This is the antithesis of web design. I like the idea of a site that your client can upload pictures and text, like a blog, but this is not why you were asked for help. If they could do it themselves I'm sure they would.

bbrososky
bbrososky

While most of them aren't online, it seems you missed two that are: "Aviary Phoenix Image Editor runs within the browser" and "Picnik is a photo editor... and the online tool is available for free."

hectorj102
hectorj102

Sorry all! I missed the 'online' part. Still a great tool though.

RockerGeek!
RockerGeek!

I was surprised, too! I love paint.net. My avatar was edited using it! XD