|
|
FEBRUARY 12, 2002 The Complete Guide to Creating Photoshop Filters
Appendix 3: Customizing Your Filter Interface  We've now been through numerous tutorials on how to make your own effects filters for Adobe Photoshop. Aside from creating the actual effects, we also walked through the process of turning the effects into self-contained plugins that you could use at a later date or even distribute to your colleagues and friends, if for no other reason than you want to show off your new-found knowledge of how to make your own filters. It's a great accomplishment, to be sure, but so far the filters you've created look ... well ... ugly. Not the effects themselves, but the interface of your actual plugins. We'll close this series with a remedy to this problem.
[an error occurred while processing this directive]
Unlike these previous tutorials, which were platform-independent, this one is Mac-specific. It uses software and techniques available only on the Macintosh. If you would like to try this on another platform, I'm sure there's a way, but I don't know it.
First, some preliminary notes. For this tutorial, we're going to be using a piece of software from Apple called ResEdit. If you don't currently have ResEdit, it's freely available on Apple's FTP site, as well as some of the download sites, such as http://www.download.com. Of course, you're also going to be using whatever design software you'd like to use to create the graphics for your interface. You will be able to use any size graphic you'd like, as long as it fits on your screen. All we're going to be doing is cutting and pasting these graphics into ResEdit.. 
For my example, I've come up with a colorful logo that says the name of my filter and provides copyright information. You'll see it in use at the end of this article. just keep in mind that whatever graphics you use will have to fit in with certain interface restrictions. For example, you have a preview window and several controllers to contend with, so you'd need graphics that won't get in the way of these. Finally, make backup copies of your filters before you start with this process. We are going to be modifying the files with some--at times--unpredictable results. All right. That's enough preliminary information. Let's get started. Let's get started Modifying your filter's interface is a fairly straightforward process. Locate the ResEdit application on your hard drive. Before you get started, you're going to want to increase ResEdit's memory partition. This is because we're going to be adding graphics to our files, and ResEdit needs more memory than the default allocation to handle this properly. To increase ResEdit's memory, do the following. 1. Click once on the application, and type Command-I. (Or just choose File > Get Info from the Finder menu.) 2. You'll see a window with a little pull-down menu labeled "General Information." Click on this, and choose "Memory" from the list. 3. In the field labeled "Preferred Size," enter the figure "10000" (without the quotes). 4. Close the info window. Now you're ready to get started. Double click on ResEdit, and then click on the jack in the box splash screen to make it go away. You will then be presented with a dialog box asking you which file you want to open. Select your filter from the list. 
When you open up your filter in ResEdit, you will be looking at a strange window with a bunch of weird, little icons. Don't worry. You don't have to know what they do. You just have to know which one to double click. In this case, you should double click the one labeled "DITL." 
This is the collection of all the resources in your Filter Factory filter. The one we're concerned with is "DITL." Now a new window pops up showing you a bunch of numbers listed in two columns, labeled "ID" and Size," respectively. Find the ID numbered 16004, and double click on it. (It should have a size of 532. This number will change by the time we're done.) 
Select the resource that governs the filter's appearance (16004). Modifying the old interface Now that you've opened that up, you're looking at your filter's interface, and things should be making sense to you about now. You see a gray box, which is your preview window. You see a bunch of sliders with some text labels, which are your controls. And you see an OK and Cancel button. This is the default look and feel for a Filter Factory filter. Obviously, we want to change this. 
The basic Filter Factory filter interface, as seen in ResEdit. The first change you'll want to make will be to stretch the interface. To accomplish this, just stretch the window by dragging on the little black square at the bottom right of the window. When you do this, the window will increase in size, but all of your interface elements will remain in place. You can move around these elements simply by clicking and dragging on them. (You can select all, move an individual item or drag a marquee around multiple items.) The second thing I did was to increase the size of my preview window. This is easy. The preview window is that gray box on the left of the window. This is the area that will give the user a preview of your filter's effect as he or she adjusts your sliders. Just select it and drag it by its bottom right corner, just as you would resize any window. Make it any size you want. From my perspective, the bigger the better. You need to keep something in mind, though. This preview window is a bit quirky. Just because you make it huge doesn't mean your preview is going to be huge. It all depends on the size and shape of the image you're using the filter on at the time. Now just position the preview window where you want it on your interface. Now that you've changed the size and position of your preview window, you probably also want to change to position of your sliders and text. Again, just select them and drag them where you want them to be. While we're on the topic, you've probably noticed one of the problems with Filter Factory, namely that the text next to your sliders gets cut off sometimes. When we created our filters in Filter Factory, we assigned names to each one of our controls. Longer names simply get cut off in the default Filter Factory interface. To rectify this situation, just grab one of your text boxes and stretch it out. 
You can also just double-click on the text box and enter a numeric value for the width of the text box. Use the number labeled "Right," as seen highlighted below, and enter in a larger value. This is actually the position of the right side of the text box, not its width, so the number will change if you reposition the text box later. 
Altering the size of your text boxes can be done either by simply stretching the text boxes or entering numeric values for more precision. Finishing up All right. So now you're happy with the position and size of your text and preview window. All that's left is to paste in your graphic. So go into your graphics program and copy it. Then paste it into ResEdit just by typing Command-V. Then position it wherever you want. You can paste in any number of graphics here, assuming ResEdit has been given enough memory to handle them. If not, you'll need to quit ResEdit and assign more memory to it, as described above. (You'll know if you haven't given it enough memory by the fact that your graphics are not being pasted in.) 
If your new graphics cover up your functional interface elements, just move them into a better position. You can arrange these elements over your graphics, but the results can be iffy. To do so, just cut the elements using Command-X, and then paste them back in. When you paste them back in, they automatically move to the top of the layer order. Sometimes this works, and sometimes it doesn't. You won't know until you try out your filter. (This is one of the "unpredictable" results I mentioned before.) Whatever you do, don't cut all of the elements at once. This seems to confuse ResEdit and causes it to reassign functionality to each element. (For example, your preview window might become the "OK" button, even though it still looks like the preview window. I learned this the hard way.) When you're all done laying out your interface, save your file and quit ResEdit. Now move your redesigned filter into the Photoshop "Plug-Ins" folder and test it out. (Of course, you'll need to quit and relaunch Photoshop to load your new filter.) Voila! You now have your very own customized filter. (If things didn't work out, you can either open the same file in ResEdit and make changes or start from scratch with a fresh duplicate of your filter.) This concludes our massive, epoch-spanning series on the Photoshop Filter Factory. If you would like to continue using the Filter Factory and need more information, feel free to contact me at the e-mail address below. Or visit us in the Adobe Photoshop User Forum at http://www.wwug.com/forums/adobe_photoshop/index.htm. Further Resources: I've tried to make this series as accessible as possible for you folks without any programming background. If you'd like to take the Filter Factory even further or just learn more about the guts of Photoshop, there is a highly technical instructional document that you can find at http://www.thepluginsite.com/knowhow/ffpg/ffpg.htm. I highly recommend it. For me, it's been a great source for experimentation, even if, at first, I didn't understand everything that the author was talking about. Part 1: Introduction to Basic Operations in Filter Factory Part 2: Convolving Pixels Part 3: Geometric Expressions Part 4: Conditional Statements Appendix 1: 3D Effects in the Filter Factory Appendix 2: More on 3D Effects Appendix 3: Customizing Your Filter Interface Complete: The Whole Thing on One Giant Page! Further Resources: I've tried to make this series as accessible as possible for you folks without any programming background. If you'd like to take the Filter Factory even further or just learn more about the guts of Photoshop, there is a highly technical instructional document that you can find at http://www.thepluginsite.com/knowhow/ffpg/ffpg.htm. I highly recommend it. For me, it's been a great source for experimentation, even if, at first, I didn't understand everything that the author was talking about. Dave Nagel is the producer of Creative Mac and Digital Media Designer; host of several World Wide User Groups, including Synthetik Studio Artist, Adobe Photoshop, Adobe InDesign, Adobe LiveMotion, Creative Mac and Digital Media Designer; and executive producer of the Digital Media Net family of publications. You can reach him at dnagel@digitalmedianet.com. Prev 1 2 3 4 5 6 7 8 9 Next Related sites: • Creative Mac • Digital Media Designer • Digital Producer • Presentation Master • The WWUG Related forums: [an error occurred while processing this directive] 
|