We live in a world of aging technology. We build our machines from metal, plastic, and glass - all of which eventually show signs of age. To create believable mechanical interfaces we need to be able to simulate this aged appearance, ages ranging from a few years to many centuries.

As metal ages, it slowly loses its lustrous sheen, and first discolors (sometimes referred to as developing a patina), and then with further exposure to the elements it corrodes. Glass and plastic surfaces collect scratches and dirt, and sometimes crack or shatter. Paint applied to all surfaces eventually peels.  All of these signs of age can be duplicated on an interface image. Such effects can add a lot of interesting detail to a graphic, making it both more appealing and more believable.

Consider the two interface designs below (click the images to pull up a full size version.) The first is pristine, and though it has an interesting shape and some depth to it, it's not really very compelling. It actually looks more plastic than metallic. The second version, however, has details that draw the eye, that makes the effect much more believable. Our minds can picture the feel of the corroded surfaces, the rusted iron and ancient brass. Creating these effects is what this tutorial is about.
 
 

Free JavaScripts providedby The JavaScript Source

Free JavaScripts providedby The JavaScript Source

 

Some Preliminary Comments

Because of the way PSP 7 is designed, certain settings can have a big effect on how the program operates. To avoid frustration, make sure that the little box marked "Lock" (located just below the Styles palette) is checked. This will keep the same settings on your styles palette as you change tools, which is how I always work.

Discoloring Metal

The easiest way to discolor an interface is by using textures. There are some very useful ones that come with PSP, and many others that can be picked up from free sites on the web.  Start by merging all of the layers of your interface case so that you can get a selection of the right shape. be sure that you DO NOT merge you interface shape into the background layer. Go to the Layers menu or the Layer Palette and choose the layer with your shape. Now click on the icon for the Selection tool and set the Selection Type to Rectangle, the Feather to 0, and make sure that Antialias is checked. Draw a rectangle completely around your interface case and then click once on the shape. The marquee (marching ants) should now conform to your shape. Save this shape to the Alpha Channel (Selections > Save to Alpha Channel.) Be sure to give the selection a name that you'll remember later, especially if you frequently save selections. When you're done, deselect by using CTRL D.

Create a new layer above your interface image (Layers > New Raster Layer.) Just accept all of the default settings in the Layer Properties dialogue. Now recall the selection that you saved to the Alpha Channel (Selections > Load from Alpha Channel.) Choose your Flood Fill Tool, and on the Tool Options Palette, set the Blend Mode to Normal, the Match Mode to None, and the Opacity to 100. On the Styles palette, left click on the Foreground swatch and hold to bring up the flyout menu. Choose the Pattern icon (the one made up of nine dots.) Now double click on the foreground swatch to pull up the Pattern dialogue box. By clicking the arrow next to the preview image, you can choose any of the preinstalled patterns, or choose to use any open image as a pattern. There are several very useful preinstalled patterns. Below, I have used the Pattern called "Land", with a size of 100 % and an angle of 0.

 

By adjusting the layer properties (Layer > Properties), you can get some very interesting effects. Setting the Blend mode to Darken, and the Opacity to 54 % gave the mottled appearance shown in the next image.

 

The image below was created using the Leather pattern, again with the Opacity  set to 54% and the Blend Mode set to Darken. Experiment with the various blend modes and opacity settings to get an effect that works for your image. The "Multiply" blend mode often works well, especially at lower Opacity settings.

 

Adding Rust and Corrosion
 

There are several tutorials out there that will show you how to add spots of rust to an image by hand. such as this one at Pinoy7.) I feel that if you want rust, you should start with a good rust texture. The one shown below is from the late, great Texture Town website, and is used with the permission of the author of that site. To save it to your hard drive, simply right click and choose "Save As" from the popup menu.

There are actually many websites out there with free textures. In particular, look for sites that cater to 3D programs. For best effect, choose textures that are good sized. Nothing looks less believable than a tiled texture that repeats itself several times across your interface. You'll notice that the texture shown isn't even designed to tile. However, it's big enough that, in most cases, it won't need to.

 

There are a couple of ways to use these textures. One way is to use them as a fill for a shape and then apply a bevel to the shape.  Start by creating your desired shape on a transparent layer. Now select the shape as described earlier in this tutorial. Make sure that you have opened the Rust texture that you want to use.
 
 

Usually you can Flood Fill your shape with your texture. Just choose your Flood Fill tool, and on the Tool Options Palette, set the Blend Mode to Normal, the Match Mode to None, and the Opacity to 100. On the Styles palette, left click on the Foreground swatch and hold to bring up the flyout menu. Choose the Pattern icon (the one made up of nine dots.)  Now double click on the foreground swatch to pull up the Pattern dialogue box. By clicking the arrow next to the preview image, you can access all of the presinstalled patterns, and any open image. The open images always appear at the beginning of the list, so you will probably have to scroll up to find them. Simply click on the image corresponding to your Rust texture and you can use it as a fill.

If your chosen rust texture doesn't tile, using the Flood Fill tool can sometimes create problems - you can end up with abrupt, non-blended edges on your graphic. A way around this is to first copy your texture to the Windows Clipboard (create a selection, and then choose Edit > Copy), and then go to your selected interface shape and simply paste into the selection (Edit > Paste > Into Selection.) Since this approach expands or contracts the texture to fit the size of your graphic, it is best to make and copy a selection on your texture that approximately matches the length and width of the shape you are trying to fill.
 

After filling with your texture, apply the bevel of your choice (Effects > 3D effects > Inner bevel.) Many of the presets that come with the inner bevel effect give results that are either too light (such as the "Metallic" preset) or too dark (such as the "Pillow" preset.) The best results are achieved when the lightness of the texture isn't changed too much while adding the bevel. To control this, simply adjust the "Shininess" setting after you load the desired preset.