CAUTION BARS
Here's a great game interface element-the Caution Bar. Normally, you'd see these around doors or on step-up platforms on a ship or vehicle, but nothing says you can't put these on your favorite hi-tech gritty slimy interface. Read on...

First, create some kind of background to put your bar on.

You could do a dirty pitted metal background (like in Tutorial #2), or a silvery new ship background, etc.

Here, I just made some beveled bars and stacked 'em, then gave them some discoloration using the paint brush in Color Mode.

Next, create a New Layer.

Then, choose a bright yellow and a darker orangish-yellow as foreground and background colors.

Then make a selection on your New Layer and choose Filter Menu/Render/Clouds to fill it with a nice cloudy pattern, as seen at left.

 

Create another New Layer and choose it.

Get your Rectangular Marquee tool, and create a rectangle selection. Fill this with black.

Deselect the bar, then duplicate it down the image, as shown at left. (A quick way to duplicate this would be to OPTION-SHIFT-DRAG (PC: ALT-SHIFT-DRAG) the bar down the image).

In the Edit Menu, choose Transform, then Perspective. Grab the side node, and with OPTION (PC: ALT) held down, tilt the bars as shown here.

Next, while still on the layer with the black bars, COMMAND-CLICK (PC: CONTROL-CLICK) the yellow bar to get a selection.

Invert the selection (Select Menu/Invert) and hit Delete to erase the parts of the bar outside the yellow bar.

Choose the Eraser Tool, and using varying opacities of the paint brush, spot-erase parts of the black bars.

One of the Spatter brushes works great for this, like this one:

Next, choose the Sponge Tool...

...and set it for Desaturate in the Options Bar.

Here, I'd use a large soft brush and just hit around the yellow bar to tone down the color's intensity.

See how it fades the color in areas?

Think "splotchy" anytime you want to dirty something up or fade color.

Say it with me- "splotchy". I like that word.

Merge your black stripes and yellow bar (you can link them, then choose Merge Linked from the Layer Palette Options Triangle).

After you merge them, choose Layer Menu/Layer Style/Bevel and Emboss and give that bar some thickness!

You could be done at this point and have a nice looking bar to play with (?) but I'm a fan of grime, dirt, filth. You know...

 

Here I've added some paint chipping, some stains and some screws with oil streaks coming out from under them. Neat huh?

I also reshaped the bar just for the fun of it.

I'll cover the paint chipping, stains and screws in another tutorial.

 

Here's a sample image to show how I used our Caution Bar (well one I made earlier anyway).

Breathe.

[COMMENTS? NEED HELP? JOIN OUR PHOTOSHOP FORUM]

[VIEW] Other Tutorials