Online photo tools shoot out.

I was gonna post this on my personal blog, but then got to thinking, “self” I said.

“Yes, me, what’s up?”

“This should be on the EUI blog, since it’s more about UX and features, you can post something pithy and random on your blog, maybe the latest A-Team movie rumor”

“You know, you’re right!”

That was pretty much the exchange, so here it is. With the launch of Aviary, and Pixlr, recently, and Photoshop Express a while back, I was wondering why we need three online Photoshops.

I set out to test a few simple tasks. Simple because I’m not a designer and not very good with Photoshop in general, so the adv stuff I’ve never known how to use.

The test items were: Using a photo from my computer, Using the eraser, doing any kind of effects on the image, adding text, and just general getting around the UI.

For ease of reading and not typing the product name each time,

1 = Aviary

2 = Pixly

3 = Photoshop Express

Using a photo from my desktop

1. No trouble at all. The new dialog offers, blank or upload.

2. No functionality for uploading from computer. I could edit the image from URL. I’m guessing it still uploaded the image though, kinda lame, since my mom would have no way to get an image up on a site.

3. Not only upload, but a full media library type experience, so you can upload several and then work with more than one image. You can also pull in from online photo sharing sites, like Flickr, picasa, etc.

Winner: Photoshop Express.

Eraser Tool

1. pretty self explanatory, lots of shapes.

2. easy to find, lots of shapes.

3. Strangely, I couldn’t find it. If there’s an eraser in Photoshop Express, it’s well hidden

Winner: Pixlr and Aviary for the tie.

Effects

1. lots of filters and photo tweaking tools. The types of things I don’t understand or know how to use. Nothing “built in” like Red eye or pixelize.

2. Includes some cool built ins. Probably the most useful ones that some one editing photos would want. posterize, pixelate, water swirl, etc. Very handy and easy to apply.

3. Comes with a few basic operations; red eye, blue, pop color (the best one IMO)

Winner: Pixlr

Text

Who doesn’t put text in a photo when editing it? The test photo I used was of the Obama rally in Denver this past weekend, 100,000 people attended. I was one of them. I wanted to add “This is me”

1. Two font choices, but what’s cool is you can rotate, resize text, and then edit in place. Editing in place uses the text in it’s transformed state, which is cool.

2. Lots of fonts to choose from, including some asian scripts. No resize or rotation control. More intuitive look and feel. Like photoshop desktop, with font properties in a top menu bar.

3. No text controls at all, unless they were hiding with the eraser tool.

Winner: Aviary

Overall UI and UX

Controls in Aviary for photo manipulation

Controls in Aviary for photo manipulation

1. Very open office, X11 feeling. Controls are floating buttons over the image so that’s a bit weird. You can’t move them or anything.

Pixlr's panel of tools

Pixlr's pane of tools

2. Very clean UI, even if it is a Vista theme :) The top menu bar matches, very polished.

pixlr panes

pixlr panes

Photoshop Express controls

Photoshop Express controls

3. Since controls are a minimum, they’re just in a single bar along the side. I guess it’s a side bar, it doesn’t overlap the image or anything, it’s essentially part of the chrome of the app. When you’re tweaking something like pop color or saturation, another bar appears along the top of the image area.

Photoshop express levels preview

Photoshop express levels preview

The live preview of these types of changes is pretty nice.

Winner overall UI: Pixlr

So from a standpoint of usability, and features, I’d have to say, Pixlr is the winner. The only real problem is not being able to upload a photo directly from the desktop.

5 Responses to “Online photo tools shoot out.”

  1. Avi Muchnick Says:

    Thanks for the review! I just want to clarify three points on Aviary:

    On importing, you can also import from Aviary’s internal library, Picasa Flickr and Facebook.

    On the controls, you *can* move the floating property panels by dragging the controls from the top.

    We have a separate application for filter effects that communicates with Phoenix. It’s called Peacock and can so some really amazing things like generate real textures, create pencil sketches, oil paintings, legos and more. It actually allows users to build the filters itself so there are trillions of possibilities. Cheers!

    Separately, kudos to Pixlr, which has a fantastic UI.

  2. John Wilker Says:

    @Avi,

    Ah, awesome on the importing, I didn’t see that. I can’t seem to drag anything anywhere. Are we talking about Phoenix? I couldn’t seem to drag any of the controls or the history/layers panels.

    I didn’t even see Peacock, very cool. Will play with that! Thanks for the feedback!!

  3. John Dowdell Says:

    “I was wondering why we need three online Photoshops.”

    I think that’s the wrong question. Photoshop is Photoshop. We should be asking “If people will be using a web browser to work with images, then what functionality, what interface will they need?”

    (I see many coders trying to reproduce desktop Photoshop’s UI conventions in Flash. A worthy endeavor; studly. But I’m not sure such mirroring is what the audience is actually seeking.)

    Thanks for the write-up… I’ll pass it internally at Adobe too.

    tx, jd/adobe

  4. John Wilker Says:

    @JD that’s a great point! For me, I’m not sure. I don’t see my mom firing up a browser to manip. photos. I’m gonna try it out for my purposes as a test, I’ve got some 360|Flex image stuff to work on, I’ll try it on line and see.

    I do agree that using PS as the UX starting point probly isn’t the way to go, since that’s more “power user” than what web users are likely to do, IMO.

  5. Bolaji Oyejide Says:

    Awesome post - I’ll check all 3 out.

    I’ve also used PicNik.com on occassion. Very easy to use.

    I wonder which of these tools can edit .psd files… or work with layers?

Leave a Reply