by Matt Petrowsky
Tools of the Trade
What it takes to make a good interface
For some of us, doing graphic work comes naturally. For others, it is a learned skill -- I was one of those "others." While I did do a little cartooning when I was a wee lad, I can't say that I had an "automatic" knack for just knowing what to do when it came to interface design. I did, however, learn things as I went along the path to understanding.
Craft tools are important and they add to efficiency. There is a large combination of tools that I use in order to get many of the things done that apply to my interface and graphic work. You might have guessed that I use Photoshop, the industry standard, for much of my graphic bit editing. But would you guess that I use it very little when it comes to designing and creating a user interface, including icons and buttons?
Paint Programs (bit editors, as us Pixel Pushers call them)
My tool of choice is one that is no longer sold anymore. I use it because of the way that it handles color. It's a program called Brushstrokes, and was sold by Claris under the label of Claris Clear Choice. Brushstokes is not PowerPC compiled (I create my interfaces on the Macintosh) and, as I said, it is no longer sold.
But this doesn't help you, unless you know someone who could get you an older copy. There are others that I use as well. Little known is the powerhouse that Claris Works can be when it comes to use for interface design. I know that John Krische, of 1000 buttons fame, uses it almost exclusively. Outside of its obvious *limited* command key support (e.g you can't option drag in a paint document to create a clone/copy) there are a lot of features. There is one key little feature in the Claris Works paint area. This gem of information is the fact that anything selected with the lasso tool will treat the selected object as being masked. This means that the white space around the object will not show when pasted into a FileMaker layout. But there is a snafu to this wonderful feature. The white space will show up on the PC side. The transparent values of pixels in the Macintosh PICT format do not convert over to the PC. So if you are doing cross platform development then be sure to take a snapshot of your bitmaps with the correct colors surrounding them....which leads me to snapshots.
You almost definitely *must* have a screen capture utility. I will discuss those in the section titled Other Utilities.
One of the other graphics programs out there which has received high praise from many other FileMaker interface designers is ColorIt. This program has a lot of features, and while I cannot speak from first hand knowledge I understand it is quite good and a bargain at that. When you think that you have the option of spending more than $500 dollars for Photoshop or $99 for a capable paint program you weigh the options. Often times the capability that Photoshop offers is just way too much for doing interface elements. Better yet, paint programs like ColorIt support the Photoshop plug-ins that can apply different affects to the graphics you are working on. A good example of this is a very nice FileMaker web site by John-Mark Osborne. Visit the following URL if you would like to see what can be done with ColorIt and some Photoshop filters from Alien Skin.
http://www.best.com/~jmo/
Another good example is the experience I had while working at Claris in the interface department for a brief stint. I got to know a very nice woman whom I found out later was one of the primary designers for the Copland interface. She had transferred from Apple and had done many of the things that you have grown accustomed to. She designed the interface for Script Editor as well as the icons for it - and has pretty much designed all of the graphics for the whole Claris Organizer 2.0 interface. Well, to get to my point, she used an older program, I'm talking way older, called Studio 8 to do more than 95% of her interface design. Now you tell me, if the interface designers of the Copland interface work with programs that are years old, do you really need Photoshop? You probably have all the tools you need right now to create a more than stunning interface.
Well, for those of you who do have access to using Photoshop there are a number of things that you can do to make your work faster. Creating a new window under the window menu will allow you to zoom into one window to view your work at a high ratio while still viewing what the original will look like in the other window. There are also other techniques that are helpful to know. Things like using the selection tools like the box marquee and lasso. Holding the shift key will allow you to add to a selection and holding down the command key will subtract from a selection.
Other Needed Utilities
Now on to that screen capture utility. One of the most mandatory items for anyone that wants to do their own interface is a screen capture utility. I rely on this tool about 65% of the time when creating an interface in FileMaker. The reason for this is that you can use the fonts on your machine and when you are ready to make your solution ready for prime time public distribution you can make a duplicate of your solution and simply take a screen shot of all of the graphic areas that may not convert on another person's machine.
This means that if you have used some funky font for your buttons you will need to turn those buttons, which use the font from your computer, into a bitmapped version. You need to take a screen capture of them. The two favorites for taking screen captures on the Macintosh are Capture by Mainstay, a commercial product, and Flash-It by Nobu Toge. You may also hear about others like SnapZ and some lesser known shareware products. On the PC side there are only a few such products and unfortunately I don't know the names of them. I do know that on a PC you can take a screen capture of the front most window by using the combination of holding down the ALT key and using the F13 print screen button. In fact, this is how I get screen captures off of the PC into a FileMaker database which I take over to the Macintosh using PC Exchange, now a Mac standard. On a Macintosh you can always use the command-shift-3 combination for the standard screen shot to take a picture of whatever is on the monitor.
One of the biggest keys to working up your interface it to know what bit level your monitor is at. Most computers sold these days come with the capability of showing 16 bit or Thousands of colors. This is not the setting that you want to use. You need to use the 8 bit 256 color setting when working on your graphics. Which also means you need to convert your pictures in Photoshop into Indexed Color at a setting of 8 bit with a dithered setting and set for the System palette. If you are working in a paint program then you don't have to worry about those settings -- they are already defaulted to these values. The 8 bit setting is the best common denominator for todays interface. If you are developing something that will show up on powerbooks that may still be black and white, then of course you will need to accommodate for this.
Another good tool for learning what others have done and how pixels work together, is a zooming utility. These are applications like Zoom Lens and Magnifier. These utilities will allow you to show an area of your computer's screen at an increased percentage from 200% to 1600%. And yet another feature that is almost always included is that of a color analyzer. This means that the pixel that you pass over will, with the zoom utility, shows you what its color values are. These will be in RGB values that will be within a range of 0 to 65535. Sometimes these numbers will help you when trying to match them in Photoshop, but when using the system color picker you are only left with the percentage adjustments for the red, green and blue values and the hue and saturation settings.
A hidden feature found in Claris Draw will allow you to convert *all* white pixels found in a graphic to transparent. With the object selected in a Claris Draw document you will find the menu option Ungroup Picture under the Arrange menu. This key tip is very useful when you are first laying out your interface, reason being that you can make all of the white disappear from some text that you have taken a screen capture of. When you Ungroup the picture and the white pixels turn transparent you can take these graphics and paste them on top of any background color. Better yet, you can change the color of the background and your object on top, the text, will still match because you can see through the areas that would normally be white.
The other valuable tools that I use are those that I have custom created for myself. One is the GPXLIB file (available with the "Professional Subscription" of ISO) that holds many of the frequently used graphics for rapid interface development. In issue #15 I also showed you how to use the Macintosh Finder to store frequently used graphics; it will even retain your field formatting and button definitions.
One of the other handy tools that I use when developing for a certain sized screen is an application called Small Screen. This utility will actually draw the absolute dimensions of a certain monitor size screen directly on your monitor.
Summary
Like all trades you have to have your set of tools to make your work easier. When working with your interface there are many tools that are used in conjunction with each other. No one tool solves all of your interface development needs. Once you have your suite of tools then use other interfaces that appeal to you as your guide posts. Use what has proven to work and abstract by using new twists on old ideas. For example, the tab interface is one of the best methods for subdividing information across multiple screens.
Until we hit the world of 3D projections made by our monitors or some device thereof, we have a strong suite of methods and approaches to conveying information on the computer screen. Stick with what works and test what you "think" might work. Don't be afraid to innovate, but make sure it is comprehensible.
## END ##