Last week we took a tour of the Filter Factory for Adobe Photoshop and learned how to create some basic effects with some pretty simple mathematical formulas. We also learned how to save these filters as Photoshop plugins for your repeated use or distribution to other Photoshop users. (If you didn't read last week's tutorial, you can view it here. You can also view all of our tutorials here.) Now, before we get into some more complex functions in Filter Factory, I thought it would be a good idea to teach you how to make your own custom interfaces for the filters you create. After all, the basic interface of a Filter Factory filter is a bit Spartan, and you're a designer, so....

Let's get started changing stuff. This is a fairly simple tutorial. It may seem a bit long, but that's just because I'm trying to cover every detail for those of you unfamiliar or uncomfortable with this kind of thing. But, when you step back and look at it, all we're really doing is playing with some windows and copying and pasting graphics. No numbers. No math. No programming.

Now, this tutorial only works for the Mac. I'm sure there's a way to do this in Windows, but I don't know it. You can probably also do this to Photoshop filters for Windows, as long as you can get a hold of a Mac and bring the filters you've created onto the Mac. I haven't tested that yet, though, and I advise you to make backups of your filters so you don't wreck anything permanently.

In fact, even if you're working on Mac filters, you're going to want to make backups. Do so before proceeding further because this method can have some unpredictable results, and you don't want to throw away all that effort.

For this tutorial, we're going to be using ResEdit 2.1.3, a free utility from Apple. If you don't already have it on your Mac, you can download it from any number of sites, including http://www.download.com. (Just do a search for "resedit," and our program will be the first one in the list.) We're also going to be using Photoshop to make the graphic elements for our interface. You can use any graphics program though.

So go ahead and create your graphics. For my filters, I'm using a very simple look, just a graphic with the name of my Web site and some big text showing the name of the filter. One important thing to keep in mind is that you need to create groups of graphics, rather than one big graphic. The reason for this is that we're going to be copying and pasting our graphics into ResEdit, and we don't want our interface graphics to cover up our sliders and other functional interface elements. ResEdit doesn't allow you to move elements backward and forward in layer order. There's a way around it, which I'll discuss, but it produces problems sometimes.

So, let's assume you have your graphics ready to go. If you're using Photoshop, select the area of your canvas with your marquee tool and copy it. (If your graphic uses multiple layers, use Shift-Command-C to copy all the layers at once.)

Find ResEdit on your hard drive. If you're using large graphics, it'll be a good idea to increase ResEdit's memory partition. To do so, just select ResEdit and type Command-I (for "Get Info"). In the little pull-down menu labeled "General Information," select "Memory." In the little box labeled "Preferred Size," enter in a larger number, say 5000 or 10000. Then close the information window.

Now open up ResEdit. Click on the little Jack in the box to make it go away, and select the filter you want to customize when the dialog box comes up.