In this quick Photoshop tutorial, we’ll learn how to create a simple but realistic metallic effect in Photoshop. In less than 6 steps we can create a nice effect and you can use it as background for your web projects. You can mix the technique for different metallic effect patterns. For different document sizes, you may have to change the filter input values. Scroll down to learn this Photoshop effect.

Learn How to Create a Metallic Effect in Photoshop

Tutorial Details and Resources

Difficulty: Beginner
Apps: Adobe Photoshop (CS3 or later)
Estimated Completion Time: 5-10′ Minutes
Resources: –

Step 1 > Create a Document

First run Photoshop and create a new document. For this tutorial my document resolution is at 800 x 480 pixels.

metallic effect in photoshop 1

Step 2 > Gradient Background

Pick the Gradient Tool (G) in your toolbox and create a 5 point gradient similar to (image 2a). Use the following colors: #a4a2a3 for the dark color and #d2d2d2 for the highlights. Next, fill horizontally the background (image 2b).

2a) Gradient Colors

metallic effect in photoshop 2a

2b) Fill the Background

metallic effect in photoshop 2b

Step 3 > Metallic Texture

Create a new layer (Shift+Ctrl+N) and fill it with #d2d2d2 color by using the Paint Bucket Tool (G) (image 3a). Next, go to Filter > Noise > Add Noise and increase the amount to 400%, set Distribution to Uniform & check the Monochromatic option (image 3b).

Finally, go to Filter > Blur > Motion Blur and set the Angle to 0 & Distance to 40 pixels (image 3c). Press OK to confirm the filter.

3a) Fill the Background & Add Noise

metallic effect in photoshop 3a

3b) Noise Settings.

metallic effect in photoshop 3b

3c) Motion Blur Settings

metallic effect in photoshop 3c

Step 4 > Refine the Texture

With the texture layer active go to Layer > Layer Mask > Reveal All to add a layer mask (image 4a). Change the Foreground color to black (#000000) and pick a large soft brush by using the Brush Tool (B) in your toolbox. Lower the brush opacity to 65-70% and draw over the mask in left and right corners (image 4b).

Next, set the Layer Blending Mode to Overlay and Opacity to 60% (image 4c).

4a) Add Layer Mask

metallic effect in photoshop 4

4b) Draw around the left & right corners with 70% visible soft brush

metallic effect in photoshop 4a

4c) Result

metallic effect in photoshop 4b

Step 5> Add Noise

Create another layer and fill it again with #d2d2d2 color by using the Paint Bucket Tool (B). Go to Filter > Noise > Add Noise to add noise with 10% Amount, Gaussian Distribution & Monochromatic effect (image 5a). Next, change the layer blending mode to Linear Burn and opacity to 10%.

5a) Add Noise

metallic effect in photoshop 5

Step 6> Curves

To make the image more intense and appealing go to Layer > New Adjustment Layer > Curves. Move the shadow pointer right side and highlights pointer left side, similar to (image 6a). If the Curves tab is not visible or you can’t find it simply double-click the Curves layer icon.

6a) Curves Settings

metallic effect in photoshop 6

Final Work

Simple, fast and cool metallic effect. Change the background gradient direction for different effect.

metallic effect in photoshop

Design Bundles

Exclusive design deals and bundles for creative professionals

Start Downloading


We provide free and premium web resources for everyone. Download our graphic design elements, icons, backgrounds, vectors and everything else. Stay tuned for more freebies, Photoshop tutorials, and inspirational articles.

Never Miss Freebies & Deals

We promise not to spam you, just the good stuff!