Smackdown: Picnik, FotoFlexer and Photoshop Express

Photoshop Express is now free online. FotoFlexer is another newcomer in the online photo editing space. Picnik has been in the online image editing world for a while. They all claim to be the “easiest” and the “best.”

Time to check them out, kick the tires, and see which one I think is the easiest and best.

Picnik

I’ve been using Picnik for a while. I use Flickr, and Picnik is integrated with Flickr. I sometimes upload photos to Flickr in a hurry, without any type of pre-upload primping in iPhoto or one of my locally installed image apps such as Photoshop and Fireworks. Once the photo is on Flickr, it’s easy to edit it in Picnik. Here’s a photo from Flickr, opened with a single click in Picnik, with the Picnik editing tools arrayed above it.

Using Picnik's editing tools

The tools include Auto-fix, Rotate, Crop, Resize, Exposure, Colors, Sharpen and Red-Eye. These tools are all available in the free version. The paid version includes other tools as well.

I don’t want to give the impression that Picnik only works with Flickr. You can also edit photos from your own computer, from a web site, from a Yahoo search, Web cam photos, MySpace, and more.

Is Picnik easy? Definitely. Is it good? It does any basics that I might want to do in iPhoto before I upload. It doesn’t do advanced Photoshop tricks like layers and masks, but I don’t need that in an online photo editor.

FotoFlexer

I’m brand new to FotoFlexer. It’s simple to get started. You can choose to work on a photo from an array of places (Flickr among them) as you see in this image.

FotoFlexer interface

As soon as I had a photo up to edit I realized that there were many more editing options, some very sophisticated, compared with those on Picnik.

There are multiple toolbars range from the Basic choices you see in the following image, plus tool bars for Effects (Blur Edges, Blueprint, Greyscale, Invert, etc.), Decorate (stickers, font choices, color fills, thought bubbles, etc) Animations (animated stickers, etc), Beautify (sharpen and smooth), Distort (bulge, pinch, etc), Layers (opacity, grouping, merging, etc.), and Geek (smart scissors, morph, etc.). I’m thinking, this is really nice.

The FotoFlexer menu bar

I tried a few of the tools in the menus. Easy to use. Then I decided to save. At this point I started to lose my enthusiasm. The only place to save was online, in a folder at their site. (Maybe this was because I was editing a photo from my computer.) Once the photo was saved online, I couldn’t find any way to export it to another site. That’s when I realized that the interface is using Flash–I tried to use a Ctrl-click (right click) to copy the photo to my computer and saw an “About Flash Player” message instead of the desired “Save this image” message.

To test my idea about the Save only at FotoFlexer problem being caused by my choice to edit a photo from my hard drive, I tried another one, this time from Flickr. I had to tell Firefox to allow popups from FotoFlexer, or I couldn’t log in to Flickr, which happens in a popup. That small hurdle crossed, I edited a Flickr photo and saved. Again, saved on their site, and no option I could find to export the photo to any other location.

I’m thinking, what good are all these cool tools if you can’t use the photo anywhere? There’s a question mark icon—ah, Help.

Nope, it isn’t Help, it’s for feedback. So I leave this message as feedback.

Why can’t the photos I edit on FotoFlexer be taken to another location? You need to provide some code or link of some sort so the photos can be used elsewhere. Answer fast, I’m reviewing the site on http://www.webteacher.ws soon.

We’ll see if they answer. Maybe the way to do what I want is on the site already, but I can’t find it.

Photoshop Express

Photoshop Express has Flash on the opening page. Well, okay, it’s a Adobe thing, right? Nevertheless, I’m on the alert because of the issues with Flash from FotoFlexer. This is a brand new online offering from Adobe, I’m trying it out today for the first time with a lot of other people.

I click the “Join Now” button to get started. There’s a long wait looking at a blank page. The status bar says something is downloading from Macromedia. Eventually, the status bar says “Done” but the screen is still a blank, empty charcoal gray. I back up, click the “Test Drive” button instead with the same results. Finally, I try “Browse Galleries” and still get a blank gray screen. Then I notice in the title bar that I’ve gone to a Flash Player Installation page, not an editing page. I look at View Source and see all sorts of scripts checking for Flash.

This is getting ridiculous. I close Firefox, thinking maybe some new version of Flash was just installed and I need to reopen the browser. Okay, try again. Same lovely charcoal nothing. All right, I can’t just give up, I’m writing a damn review here!

I launch Safari. Guess what? It works. Is Safari hot or what? I enter all my registration info, including a personal URL name at photoshop.com, which sounds like another “you can only publish here” sort of deal. Next, I wait for mail from Adobe to confirm my email.

I’m finally in. Here’s the opening screen.

Photoshop Express Opening Screen

I start by uploading a photo. It goes straight to my hard drive. No chance of any other options. I can choose to upload it to an album (I don’t have any yet) or my default library. Once the photo is in my library, I merely double click it to edit.

Here’s the editing interface. The menu is on the left, and includes Basics (crop, red-eye, rotate, etc.), Tuning (sharpen, fill, balance, etc.), and Effects (pop color, tint, sketch, distort, etc.).

The Photoshop express editing interface

I change a few things, including pop color–wanted to know what it did–and click Save. It saves in my library (no other option is offered) and replaces the original with the edited image. Back in the library, I click a pulldown menu and see a number of options.

Photoshop Express photo options

I pick “embed” and am told that the embed code has been copied. I paste it right here:

w00t! I can edit AND use the edited photo where I want. After all that agony getting started in Firefox, I’m happy with Photoshop Express at last.

I click a “My Gallery” button and find that this is why they asked for the somename.photoshop.com when I registered. I can create an album in my library and share it at this public URL. Good feature that incorporates both editing and sharing in one spot.

Some conclusions

Picnik I already liked for ease of use and convenience. Comparing it with FotoFlexer and Photoshop Express hasn’t done anything to change my opinion on that. It may not be fair to say that it has fewer bugs, since FotoFlexer and Photoshop Express are relatively new and haven’t had time to work things out yet, but I’m going to say it anyway.

FotoFlexer has very impressive editing tools, but unless I hear from them about my feedback and find a way to make use of the edited images on my own blogs and sites, I don’t have much use for their services. If this is fixed, there are some super nice effects available among their editing tools.

Photoshop Express should work in Firefox. That it doesn’t is not acceptable. That Adobe launched today without making sure it worked in Firefox is unbelievable. Just because I love Adobe and am an AdobeQuerque community expert, I’m going to assume that this will be fixed. If it is, Photoshop Express will be a valuable online editing tool and photosharing site for many people.

Technorati Tags: , , ,

Product Review: Accordion Panel Magic

Summary: excellent and easy

Jul 5, 2007 by

Web Teacher

Accordion Panel Magic

★★★★★ Project Seven (PVII) creates menu systems, slide show systems, CSS page designs and systems like tab panels and the product called Accordion Panel Magic (APM). These products are designed to work as Dreamweaver extensions and suites that are installed into Dreamweaver using the Extensions Manager.

If you own Dreamweaver CS3, there are some spry widgets, one of which is an accordion panel. I’ll talk about how the PVII Accordion Panel Magic product compares with the spry widgets in CS3 as well.

For people using older versions of Dreamweaver, the PVII product suite works with Dreamweaver versions MX through CS3 on both Windows and OS X. Accordion Panel Magic works in major modern browsers including IE6, IE7, Safari, Firefox, and Opera; and also supports older browsers such as IE5.x Windows and IE5 Mac.

I created an out-of-the-box implementation of PVII’s APM. I didn’t change anything in the default choices or the style sheet. (APM has five built in style sheets to choose from. I simply accepted the first one.) View the APM test page. You can see that the accordion panels adjust automatically to the height of the content they contain.

In Dreamweaver, the APM tools are in the Insert or Modify menu. When you create an accordion panel for the first time, you find it in the Insert menu. After that, you make any changes using the Modify menu. A similar dialog window opens in either case, letting you choose the number of panels you want, the style sheet you want, and the headings you want. When you close out the dialog box, the accordion panels are completely expanded in the Dreamweaver Design View, which makes it very easy to add or edit content.

The dialog window that inserts and modifies APM will be familiar to anyone who has used other PVII products. Even newbie PVII extension users will have an easy time making decisions, adding panels, and choosing modifications because the interface is clear and understandable. Once you have a basic set of accordion panels on the page, the CSS is easily customized using the normal Dreamweaver CSS interface.

You can add a new set of panels as easily as you added the first one. Look again at the test page and make note of the fact that the second set of panels have very little content and APM adjusts automatically to this fact.

I did a few tests in Firefox. With no customization on my part, the JavaScript that PVII uses to operate the panels runs to 412 lines of code, including comments. The style sheet is a minimally commented 90 lines. The HTML and CSS both validate as error free. It passed the Cynthia Says Web Content Accessibility tests for both Section 508 and WAI with no errors or warnings. With CSS disabled, the contents displayed completely. However, if JavaScript is disabled the only content that can be accessed is the content in the panel that is automatically expanded when the window opens. (This fact is true of the Dreamweaver widgets, also. Therefore it becomes a decision as to whether to use accordion panels at all, rather than a decision about which particular brand of accordion panel to choose. If you know your target audience operates without JavaScript, then the choice is pretty obvious.)

**Correction:** In my original tests, I disabled JavaScript, but didn’t reload the page with JavaScript disabled. So the information about the APM page and the spry widget page not displaying fully expanded is completely wrong! Now that I’ve realized that the page must be reloaded after disabling JavaScript, I see that both systems open with the page fully expanded and all the content is accessible. I apologize for my incorrect information due to an overlooked page refresh.

If you’re using an older version of Dreamweaver, the APM suite is an excellent product and well worth the $60 price. But what if you’re using CS3? Should you consider buying it even with the spry accordion widget built into Dreamweaver already?

I did some out-of-the-box work with the Dreamweaver spry accordion panel, too. See the results. The first thing you probably noticed is that the panels are a set pixel height. So the panel with longer content gets a scroll bar. The panels with less content (as in the second set) are at a set size, too, even if the content is only one line long. Dreamweaver does comment the CSS to instruct you to add your own desired height, but the rule affects the entire widget, not the individual content panes. The default height is 200px. I like the way APM’s height adjusts automatically to the amount of content much better.

The spry widgets are on the insert bar. Just click the icon and the panel is inserted on the page. The Property inspector then is used to add or remove headings. If you want to see the content of a panel, you must first select the widget in the document window, then choose the heading in the Property inspector for the content you want. Otherwise the content is hidden in Design View. Even after the content is visible in Design View, it was hard to edit, because Dreamweaver seems to think that all the content of a panel should be selected at one time. I finally discovered that if I clicked inside the content panel three or four times, Dreamweaver would deselect the entire panel contents and let me insert my cursor where I wanted it in the text. I resorted to adding and editing content in Code View. This was not a big deal to me, since I work in Code View all the time, but some people may consider it a drawback.

In my online tests with Firefox. The JavaScript to run the Dreamweaver version is 525 lines of code (about 40 lines are helpful comments). The CSS takes 109 heavily commented lines. The comments in the CSS tell you things like “set a height.” The HTML validator returned one error, the CSS validator found two. With CSS disabled, the contents displayed completely. With JavaScript disabled, they did not. (Note: see correction above.) The spry widgets passed the 508 web content accessibility test, but did not completely meet the criteria for the WAI tests. There were two priority 3 warnings and one priority 3 error.

Even if you own CS3, the Project VII product does a nicer job. It automatically adjusts height to fit the contents of the panel. And it’s easier to work with in Dreamweaver. I recommend it.

Technorati Tags: , , ,