Altia PhotoProto Brings Interface Design To Photoshop Users

Altia has released a new product, PhotoProto, which allows Photoshop users to create Flash-like interfaces. It has limitations, but if you need the capabilities PhotoProto offers then you’ll find it a valuable tool in your Photoshop arsenal.

I built an iPod. That’s right—you heard me. An iPod. Not a real one, but a virtual one I can keep on my desktop to play music, videos and look at photos. This was the project I chose for myself to test Altia PhotoProto, a set of Photoshop scripts that allow users to build interfaces in Photoshop using layers and layer comps, then export them for usage and playback. PhotoProto allows for interactive buttons, sliders, knobs and wheels and supports media including images, music files, video (both live and not) and 3-D graphics, and can manipulate these in remarkable ways. The iPod interface actually conforms very much with what PhotoProto can do (wheel and button interface with a multi-screen window of menus) and PhotoProto’s ability to handle such interfaces is solid.

HOW TO USE PHOTOPROTO

PhotoProto builds the logic for its interfaces by processing the names given to layers and layer comps. For instance, to create a rollover button:

1. Build the button graphic in its up, down and over state, each on its own layer.
2. Put these in a layer set, stacked in this order, taking care to stack them with the over state on top, then down, then up.
3. Name the layer set “BUTTON buttonname down quit”.

The layer set’s name is what gives the button its functionality. “BUTTON” tells PhotoProto what this layer set constitutes and how it should behave. “buttonname” is the name of the button, and can be whatever you want. “down” is the trigger and “quit” is the response; in PhotoProto’s language, “quit” will quit the interface. PhotoProto has many more actions that manipulate audio (playsound1, selectsong, volume, volumedown), video (hidemovie, replayvideo, stopvideo), live video from a webcam (freezevideo, livevideo) and 3-D graphics (eyedown, loadxfile, rotatexminus, startroll). Instead of multimedia actions, PhotoProto will also accept layer comp names in order to switch from screen to screen. In the example above, if you use “screen2″ instead of “quit”, the button will trigger the interface to go to “screen2″, given that you have a layer comp ready with that name.

My previous experience with an application like PhotoProto was MediaLab’s SiteGrinder, a Photoshop plug-in which I reviewed almost a year ago. That product created webpages from Photoshop layers and layer comps, but I found it lacking in some respects because it was a bear to use—Photoshop’s interface just didn’t seem very user-friendly when it was made to serve SiteGrinder and its too-complex layer-building and layer-naming rules. I got a lot of feedback on that review from ardent SiteGrinder users who tore into me for being a non-believer. I am looking at SiteGrinder’s second incarnation now and will review it soon, but in the meantime I’ve been playing with PhotoProto. For both SiteGrinder and PhotoProto, creating the end product is a matter of creating a layer or layer set for each button, image or other element, naming it according to the software’s rules and then outputting the finished work. Like SiteGrinder, PhotoProto uses Photoshop’s Layer Comps feature to allow multiple screens (in the same way SiteGrinder created multiple pages with layer comps).

I found PhotoProto to be better than SiteGrinder in terms of ease of use. Part of it was the documentation included with the product, which includes a training DVD full of good tutorials as well as clear documentation. MediaLab did not have this with SiteGrinder, though they have since improved their website a great deal and improved their documentation as well. I also found it to be somewhat easier to work with layers in PhotoProto than I did with SiteGrinder, though I believe it’s because PhotoProto handles easy to moderately complex interfaces while SiteGrinder handles webpages full of text, navigation, images and other elements. By its nature, a webpage will have a lot more stuff in it. However, it’s not really a picnic to use PhotoProto for complex interfaces; my iPod experiment had almost 100 layer sets, with most of these sets having three layers. Every one of them must be labeled and stacked properly, or it will break the interface. During both the building and testing phases, I was pining for the ease of use I get with Flash and ActionScript. I can’t believe I’m saying that, but it’s true. However, I must temper this by stating that PhotoProto allows you to combine all the tools of Photoshop with some basic but indispensable interface functions; Flash, despite its programming power, still is behind the curve when it comes to creating bitmap effects.

CREATING AND DEPLOYING OUTPUT

The hard part of PhotoProto is building and debugging, same as in Flash or any other application like this. The easy part is creating and deploying the output. Once you’re done building the interface, look in the File –> Scripts menu and you’ll find four PhotoProto scripts:

• Build Prototype
• Open Prototype Folder
• Package Prototype
• Run Prototype

I never use the second script; when buildling prototypes I can specify where I want it to go, so it’s easy to navigate there on your own. The one you’ll go to again and again is Build Prototype, which processes the Photoshop file and creates all the PNG and XML files needed to run the prototype. I used it so much that I assigned a keyboard shortcut to it in Photoshop, but unfortunately Photoshop seems to have a glitch when running scripts via a keyboard command and wants to open the script in ExtendScript Toolkit, Photoshop’s script editor. The processing procedure is pretty slick, with a clean Export Options dialog box that you only need to set up once. After that PhotoProto kicks into high gear, saving PNG files for all the interface elements and building XML files to give the interface its functionality. While this is taking place you can’t use Photoshop, which is a bother but understandable. I’d also recommend against doing any intensive stuff with your computer while PhotoProto is building a prototype. One should also be warned that processing time becomes much longer if your prototype is fairly complex. The iPod I constructed had so many buttons and features that, by the time every feature was in place, PhotoProto could not output it even with a half-hour of processing time. I’m not sure if that is a deficiency of PhotoProto or me being too demanding, but the software performed well during the project’s early and intermediate stages. Again, if you need a complex interface, PhotoProto may not be up to the task.

Another feature that I wish PhotoProto had was a debugging feature. It does well in warning you of invisible layers during the Build Prototype procedure, but after canceling the procedure and checking the layers I couldn’t find anything wrong with them. But PhotoProto still flagged the errors. I wish the application could do more to help me understand what is wrong and where.

When you have the prototype in hand, use the Package Prototype command to bundle it up for distribution. PhotoProto’s prototypes are powered by the operating systems’ own image-rendering engines so you don’t require anything like Flash Player or other plug-in. You can also create prototypes for Windows, Mac OS X Tiger (PowerPC) or Mac OS X Tiger (Intel), so you are fully covered. One note: if you are working on a Mac, you will need X11 installed which is not necessarily installed with the operating system. The X11 installer can be found on any OS X installation disk.

FINAL THOUGHTS AND BUYING ADVICE

PhotoProto cannot replace Flash or other comprehensive interface design applications; however, it doesn’t try to be everything, which I think is what SiteGrinder’s mistake was. If you need complex actions and logic for your interfaces, PhotoProto will either not meet your demands or will do it but with unnecessary headache. I learned that Altia wisely designed PhotoProto to be a quick-and-dirty interface designer that can transition simple designs into complex ones with their other products, such as Altia Design and Altia DeepScreen, which can output C/Java and deliver a polished end product. This is the way to go—Photoshop is designed to be an image editor, not an interface builder or webpage editor.

If your interface needs are in line with what PhotoProto offers (and it does offer a lot) then PhotoProto is a good way to create a slick interface with lots of Photoshop style and quality. That’s something I wish Flash had more of—that program is getting there with its bitmap filters, but Flash is still dependent on vector tools. PhotoProto, on the other hand, offers 100% of Photoshop’s tools, most of your basic interface buttons and knobs, supports fundamental multimedia and ties it all together without requiring a plug-in or player. Working with PhotoProto takes some getting used to and it’s not a perfect method, but you’ll be surprised by what it can do.

Altia PhotoProto
$495
Requires Photoshop CS or CS2, Windows 2000/XP or Mac OS X 10.4 with X11
www.altia.com
719-598-4392
sales@altia.com