GrafX-Design.com
Home Tutorials Reviews Email Us
GrafX-Design.com
 tutorials | resources | inspiration 

Photoshop Tutorials -- Metal Plate and Screws

Creating a Steel Plate and Screws Effect with Photoshop


This tutorial will show you how to create a metal plate with screws in the four corners. As per usual, I hope you'll see more than just the obvious. There are some techniques presented here that can be applied to other images and effects. The pieces are all there you just have to see them.

As part of a recent design contract, I was asked to create some interface objects. I always love recreating real-world textures such as metal and wood and recreating real-world objects such as screws, nuts & and bolts, etc... and making them look as real as possible. Figure 13.1 is a much smaller version of the plate and screws that I created.

figure 13.1
figure 13.1



The following tutorial will demonstrate how to achieve all of the effects that went into the making of this image. This is a multi-step, multi-layer, project and may require some time to complete. I suggest you get comfortable.

The Plate:

Start by opening a new image (File, New). I created the original at 400x400 in RGB mode. I'll show a smaller version here to keep download times down (I couldn't get the original below about 29kB).

Tip: I almost always start a new image by creating a new layer. Layers are one of the strongest features of Photoshop and are really needed for anything but the simplest effects. It's much easier to recreate a layer than to change something you've touched-up and aren't happy with.


Create a new layer by clicking on the Create New Layer icon at the bottom of the Layers palette (it's the rectangle with one corner folded up).

Double-click on the layer in the Layers palette and name it "Plate".

NOTE: You can change to the default colors by pressing the "d" key. This, and other shortcut keys are shown to you when you hold the mouse cursor over the various icons and options in Photoshop.


Set the default black/white foreground/background colors by clicking on the Default Foreground and Background Colors icon.

Fill the Plate layer with white by pressing CTRL-Backspace.

Choose Filter, Noise, Add Noise. Set the Amount to 690, the Distribution to Gaussian and make sure there's a checkmark in the Monochromatic option. Click OK and you should have something like figure 13.2.

figure 13.2
figure 13.2



Choose Filter, Blur, Motion Blur. Set the Angle to -36, or so, and the Distance to about 20. Click OK. This will give you a brushed metal look like figure 13.3.

figure 13.3
figure 13.3



The Bevel:

Click the Channels tab to change to the Channels palette. If you don't see the Channels tab, choose Window, Show Channels.

Create a new channel by clicking on the Create New Channel icon (it's the small rectangle icon with the folded corner at the bottom of the Channels palette.

You'll notice that the new channel (called #4, by the way) is completely black and that the default colors have switched to Black for the foreground/White for the background. This is because this channel can act as a mask. I'll be using it as a bump map to give some depth, and a beveled edge, to the metal plate.

Fill the channel with white by pressing CTRL-Backspace.

Choose Select, All and click on the foreground color to bring up the Color dialog box. Choose a light gray color (about a fifth of the way down the left side of the color picker) and click ok.

Choose Edit, Stroke. Use a Width of 10 and set the Location to Inside.

Repeat this process using a bit darker gray and decreasing the stroke Width by two. The last time the gray should be quite dark, if not actually black, and the Width should be 2. You should end up with something like figure 13.4 as the channel.

figure 13.4
figure 13.4



Of course, with a larger image such as the 400x400 original I created you'd start out with the Width of the stroke at about 16 and work your way down to 2.

Change back to the Layers palette by selecting the Layers tab or by choosing Window, Show Layers, and click on the Plate layer to make it active.

Choose Filter, Render, Lighting Effects. Enter the following in the Lighting Effects dialog box:

  • Style: Default
  • Light Type: Spotlight
  • Intensity: 35
  • Focus: 69
  • Gloss: 0
  • Material: 69
  • Exposure: 0
  • Ambience: 8
  • Texture Channel: #4
  • White is High: Checked
  • Height: 50
Set the light so that it comes in from the upper-left and gives you a good bevel without too much contrast overall in the image (see figure 13.5).

figure 13.5
figure 13.5



You should now have a beveled metal plate that resembles the image you see in figure 13.6.

figure 13.6
figure 13.6



The Indents:

I'm going to add some indents around the areas where the screws will go. This is common on metal plates that hold screws. They should end up resembling the indent you see around the screw in figure 13.7.

figure 13.7
figure 13.7



Select the Marquee tool and, in the Marquee Options palette, set the Shape to Elliptical and the Style to constrained. This will enable you to select a circular area.

Create a new layer and name it Indents (remember that you can name a layer by double clicking on it).

Draw a circular selection in the upper-left corner of the image and fill it with the current background color (it doesn't matter what this color is because you'll be filling the shape with a linear gradient later).

CTRL-click on the Indent layer in the Layers palette to select the circular shape you just created and choose Edit, Copy... Edit, Paste. Press the CTRL-SHIFT-Right arrow to move the copy to the upper-right corner of the image. The CTRL-SHIFT combination moves the selection 10 pixels at a time. You can fine tune the placement of the selection with CTRL-Arrow (up, down, left or right) which moves the selection one pixel at a time.

Turn off all of the layers except the Indent layer and the new layer created by the pasting operation (it should be the only layer above the Indent Layer. Make the Indent layer the active layer and click on the small black triangle to bring up the layer options. Choose Merge visible. This will collapse the two layers into one.

CTRL-click the Indent layer to select both of the circular shapes. Choose Edit, Copy and Edit, Paste. Use the CTRL-SHIFT-Down Arrow keys to move the copy to the bottom of the image. You should turn the Plate layer back on to help you place the bottom circles properly.

You should now have an image like figure 13.8.

figure 13.8
figure 13.8



Turn off all layers except the Indent layer and the new layer above it. merge the visible layers again. You should now have the Background layer, the Plate layer, and the Indent layer.

Select the Marquee tool and in the Marquee Options set the Shape to Rectangle and the Style to Normal. This isn't absolutely necessary but I find it easier to complete the next steps with these options.

Set the foreground/background colors to their defaults (black/white).

Click the Preserve Transparency box for the Indent layer (there should be a checkmark in it).

In the Indent layer select one of the circular shapes.

Select the Gradient tool and, in the Gradient Tool Options palette, Set the Gradient to: Foreground to Background and the Style to Linear. Place the cursor near the upper-left of the circular shape you selected and click-drag it towards the bottom-right of the circle. Repeat this process until you've filled all of the four shapes with the black-to-white gradient. You have to do each in turn because if you chose all four the gradient would fill all of the shapes differently going from a dark upper-left circle to a light lower-right circle.

Choose Select, None. Turn on the Plate layer. The indents look pretty good but they don't match up with the overall lighting and they don't allow the metal texture to show through (see figure 13.9).

figure 13.9
figure 13.9



To give the effect a more realistic appearance set the Layer mode to Hard Light and drag the Opacity setting down to about 80 or so (see figure 13.10).

figure 13.10
figure 13.10



This looks much better. You can see the metal texture and the lighting looks more realistic.

The Screws:

CTRL-click the Indent layer to select all four shapes.

Make the Plate layer the active layer.

Choose Select, Modify, Contract and enter a value of about 4 (the exact amount will depend on how big your image and the indents are).

Choose Edit, Copy. Make the Indent layer active and choose Edit, Paste.

Click the Preserve Transparency option for the new layer. Double-click the layer in the Layers palette and name the layer Screws.

Choose Filter, Blur, Gaussian Blur and use a setting of about 1.5 (you'll need a higher setting if you're creating a larger image). You should have something like figure 13.11.

figure 13.11
figure 13.11



The Screw's Shadows:

Set the foreground color to a dark gray.

CTRL-click the Screws layer to select all four of the smaller circle shapes.

Create a new layer by clicking on the Create New Layer icon. Click-and-drag this layer below the Screws layer. Double-click the layer and name it Screws Shadows.

Press ALT-Backspace to fill the shapes with dark gray. Choose Select, None and press CTRL-down arrow twice and then CTRL-right arrow twice to move the shadow into place (see figure 13.12).

figure 13.12
figure 13.12



The Screw's Shapes:

This next bit is kind of optional. I say that because these next steps will give the screws a rounded shape. You can, if you'd like, skip ahead to the "Screw's Slots" steps.

Make the Screws layer the active layer and CTRL-click the layer to select all four of the screws.

Create a new layer by clicking on the Create New Layer Icon.

Press CTRL-Backspace to fill the shapes with the background color. Again, it doesn't matter what this color is because you'll fill each shape with a gradient.

Set the default foreground/background colors and then swap them by clicking on the small, curved, two-headed arrows at the upper right of the foreground/background color swatch.

Select the Marquee tool and use it to select one of the circular shapes. You might find this a little easier if you turn off the other layers first.

Select the Gradient tool. In the Gradient Tool Options set the Type to Radial (the Gradient should still be Foreground to Background).

Place the mouse cursor near the upper-left of the circular shape and click-and-drag it towards the bottom right of the shape. Repeat this for the remaining three circular shapes.

Set the blend mode of this layer to Soft Light. This will give the screws a rounded shape (see figure 13.13).

figure 13.13
figure 13.13



The Screw's Slots:

Zoom-in on one of the screws, it doesn't matter which one.

Create a new layer above the Screws Shapes layer.

Select the Marquee tool and set the Shape to Rectangular and the Style to Normal.

Draw a small rectangular shape inside the screw (see figure 13.14).

figure 13.14
figure 13.14



Press CTRL-Backspace to fill the shape with the current background color.

Set the default foreground/background colors.

Select the Gradient tool. In the Gradient Tool Options set the Gradient to Foreground to Background and set the Type to Linear.

Click-and-drag the mouse from the top to the bottom of the rectangular selection.

Choose Layer, Transform, Numeric and set the Angle to -45.

Choose Edit, Copy and Edit Paste to create another copy of the slot. Move the second slot into place over one of the other screws. Make only the slot layers visible and merge them (we did this above a couple of times so back up if you need to review the steps).

With the two slots in place, copy them and paste them into place over the last two screws.

You should now have an image that resembles figure 13.15.

figure 13.15
figure 13.15



Whew! That's it! You may find that you want to adjust the brightness of some of the components. This can be done by making the layer (with the component you need to adjust) active, and selecting the component with the Marquee tool. You can then adjust just that particular element. For example, I made the top left screw a little darker and its slot a little lighter in the original version of this graphic.


That's it.... Be sure to check out some of our other Photoshop tutorials.

Two of our newest Photoshop tutorials are:


NEW! Photoshop Quick Tip Videos

Photoshop Quick Tip VideosEveryone loves a quickie, especially if the quickies are free Quick Tip Videos for Photoshop. Our "Quickies" are short, web-based videos (approx. 2 minutes, or less) that highlight some neat trick or time-saving tip for Adobe Photoshop. Go ahead and check them out... you know you want to :)



High Quality video-based tutorials

...with over 300 different titles, all taught by professionals. Learn any application in a fraction of the time right from your own desktop. This unique method offers accelerated learning and a high retention rate. Here are a couple of topics that you might find interesting. View free demos of the courses using one of the links listed below.
Photoshop CS2 Tutorials Photoshop Special FX
Photoshop for the Web Photoshop for Photographers
Photoshop CS Tutorials Photoshop Image Artistry
Photoshop Image Restoration Photoshop 7 Tutorials


Previous Photoshop Tutorial Photoshop Tutorials Next Photoshop Tutorial
[Previous Tutorial]     [Photoshop Tutorials]     [Next Tutorial]



We'd like to hear from you... If there are any Photoshop techniques you'd like to see covered, send us an e-mail.

 

Current Favorites

Here's of list of our most popular graphics tutorials:

Adobe Photoshop Tutorials

Quick Mask Have you ever wanted to do a little cutting and pasting and make it look as if your head was on someone else's body? Read more....

Corel (JASC)
Paint Shop Pro Tutorials

Transparent GIFs This technique demonstrates how to create transparent GIFs in Paint Shop Pro Read more....


Xara Xtreme Pro Tutorials

Illustrating a Guitar - Part 1 It may seem to be quite an undertaking to create a realistic illustration of something like an electric guitar, but I wanted to challenge the ease-of-use of this software. Read more....


Corel DRAW! Tutorials

Creating Complex Shapes Drawing circles, squares, triangles , etc. is easy with a vector program. How do you combine these shapes to create something more complex, though? Follow this tutorial and you'll see how easy it can be to create just about any shape you need. Read more....

Software Deals

Download and try out the free demos and then save 10%, 20% and more when you decide to buy!

GrafX-Design.com
has partnered with some of the best graphics software companies in the World to offer you terrific savings on your favorite programs.

AlienSkin


Photoshop Plugins
AlienSkin Software - They will never wear suits! We've been using AlienSkin's Photoshop Plug-ins for over a decade and they are still our favorites.

AutoFX


Photoshop Plugins

Xara 3D


Create amazing, high-quality 3D graphics easily!

Read our review of Xara 3D 6 or click the graphic below to download a free trial version.


GrafX-Design.com



Comments/Questions   ||   Copyright © 1996-2009 GrafX-Design.com -- All rights reserved   ||   Privacy