Rusted Metal Tutorial

In response to a member request for information on how I created the metal dials below, I have created a tutorial that describes the steps I took to create the dial and the rust that was applied to it. I recreated the dial for the purpose of this tutorial so the final images won't look exactly the same as those pictured directly below, but the technique did not change and can be applied to other similar types of projects.

http://board.flashkit.com/board/http://board.flashkit.com/board/
http://board.flashkit.com/board/http://board.flashkit.com/board/
http://board.flashkit.com/board/http://board.flashkit.com/board/
http://board.flashkit.com/board/http://board.flashkit.com/board/

Rust Tutorial

Creating The Rust
__________________________________________

The rust in this example will be put on some metal dials, but the technique could be applied to pretty much anything. I started out by setting up my foreground and background colors to what will become the two extremes of our basic rust spectrum. I used the two colors shown below.

http://home.comcast.net/~mudabir/fla...t_Colors01.png

The image we will be working with is 100x100, but to get more detail out of the next step I created a new document that was 400x400 and then used the Render>Clouds filter with the above colors to get a random color dispersal to use as a base for the rust texture. I did it this way because you get a greater amount of variation from the clouds filter on larger images. Since the results of this filter are completely random, after you run it once just keep hitting Ctrl+F to run it again until you get a variation that you like. This is the result I got after pasting it into my working file and scaling it down to 25%.

http://home.comcast.net/~mudabir/fla...t_Clouds01.jpg

Things will likely be adjusted more later, but I wanted a little more contrast to start out with so I adjusted the Levels to bring out more of the shadows and highlights.

http://home.comcast.net/~mudabir/fla...ouds_adj01.jpg

When you are deciding what kind of clouds look good in the earlier step, take into account the object on which the rust will be applied. Think about how the rusting might have occurred, the type of metal it is, and the overall level of deterioration that you want to show. You're going to think about all of this again when we go to pick out the actual parts of this texture that you are going to use.
_______________________________________________

Creating The Metal Dial

First though, let's throw down a quick metal dial on which we can place this rust. It's going to start out as a vector shape with a Layer Style applied to it, so I used the Ellipse Shape Tool and held down the Shift key to drag out a perfect circle. You want to have the options set to render to shape layers. To be certain it was centered, I switched to the Move Tool, hit Ctrl+A to select everything, then used the alignment tools on the Move Tool option bar to align the circle to the center of the document.

We want to start out by making a shiny new dial to which we will later apply the texture. In this case we are going to say that the dial is made from hardened spun steel. The amount of carbon in this is going to make it fairly prone to rusting and it's an old dial, so we are going to put a decent amount of rust on it to indicate a hard life full of many greasy-fingered rotations and spattered fluids.

There are probably a thousand different ways to shade a metal circle, but these particular dials were going to be rotating, so to use a basic comparison...instead of a linear gradient I chose to use a CD-type or radial gradient that I thought would look a little more realistic lighting-wise when it was spinning around.

There are a couple of different ways to get basically the same effect. The first is to start out with a linear gradient that includes some shadows and highlights then either rasterize the layer or copy and paste the dial into a new layer. Next, Ctrl-click the layer thumb to load a selection of your circle, then run the Distort>Spherize filter on it a bunch of times with it set to pinch in (-100%) instead of bloat out until it comes to a point in the center. It would also be a good idea to lock the layer transparency before doing your pinching to make sure you don't lose any opacity on the edges.

The second way is to simply use a Radial Gradient Layer Style. I also used a Bevel Layer Style using white for both the highlight and the shadow. You'll probably have to play around with the light source to get it to look right. I then loaded the selection of my dial, and hit Ctrl+Shift+C and Ctrl+V to copy and paste a merged version of this into another layer to rasterize the layer effects. Below is what the dial looks like with just the layer style applied.

http://home.comcast.net/~mudabir/fla...al_Style01.png

Then I Ctrl-clicked the layer thumb, went to Select>Modify>Contract and reduced the size of the selection to exclude the bevel. Next I ran the Radial Blur filter on it with it set to 'spin', using 40 as the amount and the quality was set to 'high'. The result of this isn't going to be terribly noticable, but it adds subtle interest to the surface of the dial. If you personally can't see anything happening then skip that step altogether.

The fact that this dial will be rotating affected how I did the shading for the bevel on the outer rim as well. If you were to use the default Bevel Layer Style for example, the default setting for the global lighting would place a highlight on the upper left edge and a shadow on the lower right. If this were a real dial with the light source as it is in the default global lighting setup, then the shadow would always be on the bottom of the dial as it rotated around. So if we use that same lighting for a static image that will be rotated, then the shadow on the bottom would spin around in a manner that would indicate the light source was spinning around an axis up above it. That's not so good.

So to combat this, I used the same kind of CD-type shading as I did with the face of the dial, with a theoretical light source that was directly above the dial. I started out with a light grey that fell somewhere in between the greys that I was using for my highlights and shadows on the dial. Then I used the Dodge and Burn Tools set to affect the midtones to either lighten or darken the sides of the beveled edge. Set the Exposure to just 10-12% and use a soft-edged brush so you can make slow, subtle changes.

Optionally you can add a highlight around the edge of the bevel where it meets the interior of the dial. The way I did it was to create a vector circle the size of the dial face then reduced the Fill Opacity to 0. Next I gave it a white 1-pixel Stroke layer style and reduced the opacity of that so that it was noticable, but not overpowering.

For one last little bit of realism I decided to add some concentric circular lines that are another result of the spinning process. This was very easy, but it adds a noticable amount of extra detail. All I did was to create a circular selection the size of the interior of the dial then filled it with a light grey color. Next I used the Noise filter to throw some quick fairly sharp monochromatic noise in there. You want a decent amount of brightness variation between the pixels. Then I used the Radial Blur filter at 100% to basically spin all the little black, white and grey pixels into a bunch of circular lines. I then hit Ctrl+L and used the Levels dialogue to increase the contrast between the lines and reduced the layer opacity until they were just barely visible. The image below shows what I started with prior to applying the rust.

http://home.comcast.net/~mudabir/fla...al_Clean01.png

You'll notice that I have also added an Outer Glow layer style using a dark version of one of the colors I picked up from the background and the blend mode set to Multiply. I have found that with pretty much any kind of metal, whether it realistically would be there or not, in most cases it looks better to give it a bit of a glow like the one above. This serves to give the object a little more 'weight' and provides a good contrast that sets off the metal very nicely. With something like this it also helps to push the 'grunge' factor. Of course it's not going to be the perfect treatment for every application, but I'll certainly do it more often than not.

That should give you a nice dial with a beveled edge to work with. There are plenty of other things you could put rust on, and a number of different ways to do what I have done with the dial, so don't feel constrained by the exact steps as presented. Now that we've got our metal object, it's time to get rusty!

_______________________________________________

Rust continued...

I duplicated the adjusted cloud layer and placed it over the dial then applied the Smart Sharpen filter to bring out more of the details. Next I took the Magic Wand and with the Shift key held down, started selecting some of the lightest parts of the rust texture. Notice that 'Anti-alias' and 'Contiguous' is unchecked. This will allow you to select the individual pixels that the sharpening from the last step made more prominent.

http://home.comcast.net/~mudabir/fla...election01.png

In the screenshot above it's kind of hard to tell exactly what's going on, but I made the dial in layers above the initial rust texture that I did, and what you are seeing in the screenshot is the duplicated texture placed over the dial with the opacity reduced so I could see how much of the rust that I was selecting was actually on the dial. With my selection made, I put the opacity back at 100% then turned the selection into a Layer Mask so only the selected pixels were visible. When I was done I had what is pictured below.

http://home.comcast.net/~mudabir/fla...t_Masked01.png

What you have now...a rust layer with a nice crisp layer mask...is what you will be using several times later on, so duplicate this layer and hide this one before you do anything else.

The next step is going to be to click on the thumb of the layer mask and then use the Gaussian Blur filter on it so as to smooth out those rough pixels. You won't actually be doing anything to the pixels themselves, just smoothing out the mask that reveals them. How much you do this will be a judgement call on your part, just play around with the slider on the blur dialogue until you see something you like. What you see below is the result after applying the blur filter with a radius of 4 pixels. We'll put a little more rust on there, but this gives us a nice underlying rust base where you can see it beginning to work on the surface of the metal.

http://home.comcast.net/~mudabir/fla..._Masked01a.png

The rust layer with the original layer mask is duplicated again, but this time it only gets a Gaussian Blur of 0.3 so there is only a slight softening of the pixels. With the layer mask active, I also used a brush with black paint to remove some of the rust in selective areas. Using a brush in this manner on a layer mask is just like using an eraser. Using any method to darken the pixels will result in that portion of the layer mask becoming more opaque, thus revealing less of the contents of the layer being masked.

http://home.comcast.net/~mudabir/fla..._Masked01b.png

You could leave it at what is pictured above, but at this point I'm going to make the rust a little more prominent. In the image on the far left below I have duplicated the layer that I was just last working on and then used the Burn Tool to darken selective areas on the largest portions of the rusted areas. I then used the Brush Tool on the layer mask to mask off everything but those dark spots. The center dial is a result of placing the original rust texture in a layer above the rest and creating a layer mask that isolated the dial. Next the opacity was reduced to 40%.

http://home.comcast.net/~mudabir/fla..._Options01.png

The last one on the right is a merged copy of the center image on which I used the Levels dialogue to darken and adjust. I also reduced the saturation just a bit. Highlights represent the reflection of light off of a smooth surface. The smoother the surface, the brighter and sharper the highlight. With the level of decay on the surface of the metal dial on the right, it wouldn't be showing the highlights that are present in the other dials. So to make it even more realistic I took the Burn Tool with it set to affect highlights and toned down the brightest parts of the center portion of the dial.

So there is a technique that can be used to deteriorate any kind of metal that you might come across in your digital travels or you can make your own metal from scratch. Go forth and rustify! :D

Way cool Rush !!

... two tutorials in as many days?
Hun, you have too much free time. I envy you.
And damn good job on both I might add.

Lol...thanks Nats, the levels tut has been done for some time though, it just took me a while to get around to posting it. :D

Wow, that was cool, Rush. I was already doing something similar to your rust effect ('cept when I did it for a design I was making mold), but using the sphere to pinch the gradient to make the dial/CD is a lot easier and better-looking than how I used to do it.

Thanks for taking the time to post something as useful as this. :D

No problem. Glad you found something useful in there. :)

Hey Rush...

Gotta tell ya brother.... I never really used levels a whole lot until readin your tute.

And in a recentphoto manip I used it to match things.... and I tell you what, it made life MUCH easier. So I personally thank you for that one too.