skinyourscreen.com

DominantNegative Smooth Metal

As requested: instructions on how to use layerstyles, selection tools, fills, and erasures to recreate the metallic effects used to make the DominantNegative suite of themes.

Difficulty: Moderate

DominantNegative Smooth Metal

A great look for interfaces…

.: by mrbiotech :.

Prerequisites:

*Photoshop 6.0. *Brushed Metal texture (find one at DeviantArt). *Layers Palette open. *Knowledge of how to select colors.

Note: To render our final effect, you will need a brushed metaltexture to add some extra character. There literally hundreds of tutorials on how to do this on-line. For this tutorial, you can use one of those tutorials, or simply download a texture from DeviantArt. Some of the stock Photoshop patterns actually work quite well for this.

We’ll also rely heavily upon layers and layerstyles; If you’re not familiar in the use of these tools, I recommend you investigate Photoshop’s documentation.

1. To use a pre-made brushed metal texture to give your metal some extra “grit.” If you don’t have a texture like this, you can easily find one online looking for “brushed metal texture.” Open the file in Photoshop. Then press CTRL+A to select the entire image. Then navigate through the menus to EDIT->CREATE PATTERN, and name the pattern “Brushed Metal.”

2. In Photoshop, create a new image (CTRL+N) and set its dimensions to 300px wide by 200px tall with a transparent background. Name it whatever you want.

3. Select the Circular Marquee Selection tool from the toolbar . (If it’s not immediately there, you can click-and-hold the existing Marquee Selection button until a slide-out menu gives you the option.) Set the selection parameters (at the top of the Photoshop window) as follows: and make an oval selection within the new image you made in Step 1.

4. In the Colors Palette, select a medium gray color (I used a 50% grey, R=129, B=129, G=129, or #818181 in hexadecimal). Now select the Fill Tool (Paint Bucket) and click inside the oval selection to fill it with the grey color.

This will be our base texture layer, minus any shine effects.

5. Apply the following layer-styles to “LAYER 1” in the Layer’spalette by double clicking on “LAYER 1.” Select the different layer-style types by clicking the words in the left-most column of the Layerstyle Dialog (“Drop-Shadow”, “Bevel”, etc.).

Many use the innerglow (and Outer Glow) layer styles simply to make things a little brighter. It’s also really handy for darkening edges for further definition, like what we’re doing here. Some personal advice: Don’t take a layer-style at face value: The defaults (“Inner Glow”) are often what they sound like, but they’re MUCH MORE VERSATILE if you take the time to tweak ‘em, especially when used in combination.

The gradient employed here doesn’t look like much now, but once we add some shines and darken the overall image, this gradient will give a subtle underlit effect on the edges of the metallic shape.

Yup, this is the texture you retrieved and made into a pattern earlier in the tutorial.

As a final measure, RIGHT-CLICK Layer 1 and rename it “Base.”

Your image should now resemble something like this:

That’s one layer complete. Before we get to adding the shine effects, we’re going to add some more shadowing…

6. Duplicate the Base layer by RIGHT-CLICKing it and selecting DUPLICATE LAYER. Name the duplicated layer “Soft Shadow.” RIGHT-CLICK the new Soft Shadow layer and select CLEAR LAYER STYLE to remove the duplicated layerstyles (we’ll be applying more). Then apply the following layerstyles:

By decreasing the fill opacity to 14% while keeping the layer opacity at 100%, we’ve essentially removed the grey color (highly transparent now) while permitting the layer styles to show.

As in previous tutorials, we’re applying a uniform light direction Angle with a very high light Altitude to give a bevel effect with some additional depth and believability. Although we’ve used this technique for shines before (we’ll do that on the next page), we’ll be applying this to create a darkened area instead.

This contouring only applies to the bevel effect, and makes it appear as though the bevel were wrapped over a raised object, like a bubble or sphere.

Progress check: Your image should now resemble this:

7. It’s time to generate our shine effects! We’ll use a double-layered approach, with two transparent layers with separate shines, one slightly broader than the other.

For the first, Duplicate the Soft Shadow as before (right-click, Duplicate Layer) and name it “Soft Shine 1” and again remove the existing layerstyles (right-click, Clear Layer Style). Now apply the following layerstyles to turn this layer into a transparent shine:

Hopefully, you’ve got an interesting shine on your metal, like so:

8. To enhance the existing shine with this layer, we’re going to apply a satin effect that will darken and dimensionalize our graphic. Duplicate the Soft Shine 1 layer and name the new layer “Soft Shine 2”. Again, clear the existing layer style so we can craft a new one. Now apply the following layerstyles:

By now your graphic should look similar to this:

9. To make an indentation in our metallic surface, we’ll need to create another layer on top of the existing layers (CTRL+SHIFT+N). Call the new layer “Dent.” In this new layer, make an oval selection approximately 100px wide by 60px tall near the middle of your previous shapes like so:

Now “Feather” the selection by pressing CTRL+ALT+D (or alternatively from the menus: SELECTION->FEATHER) and feather by 2.5 pixels. This takes the selection you made above and “smears” the edges, making them a little fuzzy. Then select your fill tool with any color of your choice (make sure “anti-aliased” is checked in the tool’s attributes at the top of the Photoshop window) and click in the new selection to fill it in. Press CTRL+D to remove any selections so you can better see what it did.

Notice how the edges of the shape look like they’ve been airbrushed? To make it look more like a dent, we’ll reduce the layer’s opacity as follows:

and add the following gradient layerstyle:

Using the Overlay Blend Mode for the gradient and increasing its scale to 150% (the maximum) gives it a subtler, more realistic look. If you prefer a heavier handed approach, you can set the Blend Mode to Normal or Hard Light.

10. Just two more layers to go to complete the effect! One will be a simple shine just above the dent, and another within the dent. Create two new layers (CTRL+SHIFT+N) and name one “Top Shine” and the other “Inner Shine.” Select the Inner Shine layer by clicking on it once, and then CTRL+LEFT-CLICK the “Dent” layer. This will create a selection the exact size of the contents of the Dent layer. In the menus, select SELECT->MODIFY->CONTRACT and contract the selection by 4 pixels. Then (with the Inner Shine layer selected) use your fill tool to fill the selection with pure white.

Now select your erase tool

Then erase the top of the white area to leave an eye-shaped portion as follows:(Note: this doesn’t have to be precise, and sometimes leaving a wavy edge can be desirable).

For the Inner Shine layerstyles, reduce the layer opacity to 0% and apply a black->gradient with the Blend Mode set to Screen. Also set the Gradient Scale to 130%.

11. Now select the TOP SHINE layer by clicking on it in the Layer’s Palette. CTRL+LEFT-CLICK the Base layer to create a selection based upon its contents. CTRL+ALT+LEFT-CLICK the Dent layer to deselect an area in your previous selection corresponding to the Dent layer contents. Contract the selection by 4 pixels (SELECT->MODIFY->CONTRACT->4) and feather by 1 pixel (SELECT->FEATHER->1). With the TOP SHINE layer selected, fill the selection with pure white using the fill tool. Press CTRL+D to deselect, then use your erase tool to remove the bottom part of your “O” selection: