Step 1.
Open a new or existing document to work with. The size I'm using here is 600x150, a standard banner/sig size.
Step 2.
The final product looks best on a dark background, but not necessarily black. So choose a nice dark grey color. Here I've used: #1F1F1F as my background color.
Step 3.
Get out the polygon lasso tool:
Now as I said in the preface to this tutorial that basically what we're going to do is layer several different pieces on top of one another to create an overall complex look. So lets start with the bottom most layer of metal pieces.
Create a new layer.
Using the Polygon lasso tool (
) create a selection similar to the one shown here:
And fill this selection with white (#FFFFFF)
Step 4.
Once again, using the polygon lasso tool go through and delete a few areas by making a selection and tapping 'delete' on your keyboard. Continue to do so until you broken up the piece a little:
Next double click this layer, and apply the following blending options:
Outer Glow:
Inner Glow:
Gradient Overlay:
Stroke:
Result:
Step 5.
Now to resize the piece a little press Ctrl + T on the keyboard, the following box will appear around your image:
Place your pointer over the box or 'node' in the top left corner, hold down the Shift key on your keyboard, and drag inward towards the center of the piece. This will make the piece smaller, and holding the Shift key ensures that the proportions stay correct:
When done, press enter on the keyboard to finalize the transformation/resizement.
Step 6.
Now press 'V' on your keyboard to get out the move tool, and position this piece into the bottom left corner of the canvas.
Step 7.
Press Ctrl + J on the keyboard to duplicate this layer. Go to "edit->transform->flip horizontally" and move the duplicate piece into the bottom right corner so you have something like this:
Step 8.
Now for the second layer of metal pieces. Create a new layer, get out the
polygon lasso tool again, and make another selection slightly smaller than the first, as shown:
Fill this selection with white (#FFFFFF).
And using the same techniques as in step #4 use the polygon lasso tool to remove some of the sections of this shape to give it a more tech feel.
Double click this layer, and apply the following blending options:
Outer Glow:
Inner Glow:
Gradient Overlay:
Stroke:
Result:
Step 9.
Now once again just as we did in step #5, press Ctrl + T and slightly resize the piece.
Move this piece down into the left corner, overlapping the piece beneath it as I've done here. Move it around a bit until you get a good spot for it that contrasts the piece bellow it.
You'll notice that I decided to flip it vertically because I liked the way it looked upside-down better. Just remember to try different positions to get the right feel.
Once you're happy, press Ctrl + J on your keyboard, go to "edit->transform->flip horizontally" and place the duplicate/copy onto the right side of the image, in approximately the same place:
Step 10.
Now we'll create one more layer using the same techniques, as above and these three lower levels of our image will serve as generic pieces. I said it was easy, I never said it was quick. I've used the same techniques that I've used above to create another layer, here is an image sequence depicting the steps:
The following blending options were applied:
Outer Glow:
Inner Glow:
Gradient Overlay:
Stroke:
Result:
Step 11.
Press Ctrl + T on the keyboard to resize the image just as we've done earlier, and position it into your image
Step 12.
Now that we've gotten our generic panels out of the way, it's time to create the realistic metal pieces that will appear on top of everything else. Using the polygon lasso tool, and the other selection tools, make a unique selection smaller than the ones in the previous steps similar to this:
Now set your foreground color to: #979796 and your background color to: #C7C7C7 get out the gradient tool (
) and fill this selection with a gradient from top to bottom, as shown here:
Double click this layer, and apply the following blending options:
Outer Glow:
Stroke:
Result:
Step 13.
Okay, now I'm going to tell you to get out the dodge tool (don't run...) You've got to learn how to use the dodge tool someday, why not today? It's really not that bad, it just takes a few minutes to get used to, I promise.
Get out the
dodge tool, and set it up like this:
Now move the dodge tool around the image, so that the brush circle is half on your metal piece, and half off as shown in this image. Continue to tap the mouse and hold it for 1 or 2 seconds, then release while making smooth sweeps on the north faces of the piece as depicted by the blue in the following image:
Here's the image without the blue markings:
Step 14.
Next get out the (
) burn tool and apply these settings:
Now we'll do the same thing that we did with the dodge tool, however we'll do it on the south facing surfaces of our metal piece, and also contrast some of the highlights we made with the dodge tool as well. The usage technique is virtually the same however, smooth sweeping motions, and continuous tapping on the left mouse button.
Here's the image w/out the blue markings:
Step 15.
Now that we've gotten that out of the way, we'll start to position this piece, just like we did with the others:
Once happy, press Ctrl + J on the keyboard to duplicate the layer, go to Edit->transform->Flip horizontally and position it as close as you can in the same place on the other side of the image:
The only thing left to do is continue to duplicate this piece and rotate and resize it repeatedly and position it on top of, and under other elements. After refining, and continuing to work on it, here's what I have come up with:
This technique works great for intricate layouts, sig/banner borders or frames for splash pages such as above.







More Photoshop: