D.zigns Design/Development

A not uncommon request my web team receives is to do some sort of simple image editing for a staff member. I also sometimes hear that someone is getting Photoshop installed so that they can edit images and add them to their intranet site themselves.

This is crazy when you consider how much Photoshop costs and the learning curve to use it properly.

In this new era of web-based applications I thought it would be worthwhile to see if there were any online image editing tools that would meet these requirements and maybe more.

The Candidates

I looked at the following online image editors:

• Snipshot
• Cellsea
• PXN8
• Phixr
• VicImager
• Picture2Life
• NetImager
• ImageAuthor
• nexImage
• LookWow

One service I didn’t include was Preloadr because it only works with Flickr and uses the nexImage technology anyway.

Features Compared

View the comparison of features table.

As well as showing which tool did what, I tried to indicate — where it was useful — which tools were especially full-featured when it came to certain activities, such as applying a wide range of effects or being able to save an image to multiple formats.

Thoughts and Takeaways

Overall, I was very impressed with what’s available when it comes to editing images online. By and large the tools were easy to use and had an impressive array of features.

The majority of the tools had solid basic image editing functionality — crop, resize, adjust color, brightness and so on. Some had unlimited levels of undo and redo, which was especially handy.

Some of the features available were up there with full-blown graphics tools. For example, Cellsea included the unsharp mask function for accurately adjusting sharpness.

Two of the image editors (NetImager and nexImage) allowed you to use layers to apply your changes and effects in a non-destructive way, which was a nice feature.

The tools were integrated to varying degress with online image storage services like Flickr and Photobucket. Some also enabled you to view all the images from a web page and then choose which one you wanted to edit, although apart from Cellsea, this was done via a bookmarklet.

The tools had varying capabilities when it came to uploading and saving images from/to different formats. However, between them all you could probably upload and save an image in most of the main file formats (e.g., JPG, GIF, PNG, BMP, TIFF, PDF, EPS).

My Choice

I was particularly impressed with Cellsea and will likely settle on it as the tool I recommend to others. It has a clean, responsive interface with an impressive set of features and can handle a wide range of file formats.

Have just started work on my new project at corporatewiz.com This site is a sister site to midtownofficesupplies.com, sharing the same product database. But this will have a completely new set of customers. This will also be an asp based e-commerce site, backend in Ms access. With lots of admin functions for both webmaster and the customers.

Also, redesign is on for dzignerweb.com, and looking for more scripts etc. to put on my site. There were close to 5 revisions, before I got something to my liking. Have not yet put it up on the server though. Have integrated some cool css tricks I learned recently.

I recently came across Khoi Vinh’s post about using a background image of a grid to help you lay out your page as you are building it [via Garrett Dimon].

Simply put, you apply the grid to the body of your page as a background image so that it displays behind your site. Thus you can use it to precisely line up your layout.

This seems like such a useful technique, especially when it comes to resolving cross-browser differences, that I’m surprised I haven’t seen it referenced before (maybe I just don’t move in the right circles).

As Khoi says himself:

…coming up with this little trick left me very pleased with myself, as it allowed me to produce easily the most precise layouts of my career.

I thought it might be useful expand upon this idea and create a generic grid template that one could use with any layout, and so I came up with the example below:

• Grid image
• Example of the grid image in use

I haven’t thoroughly tested it out yet in the form of applying it to real-world design projects, so if there are some improvements you’d like to see just let me know.

Or, you can add them yourself – I’ve included the Fireworks source file for you to customize as you see fit.

In a similar vein, you should also check out Greg Storey’s ruler image technique, which works well in conjunction with the grid image.