Creating gradient-faded patterns

Web2.0’s the big buzz-word these days, and it wouldn’t be complete without gradient-styled banners with faded patterns. Here’s one way to do it using Photoshop.

Description

It seems like everybody’s website these days has some subtle gradient header with a faded pattern over it. It’s a popular effect for a good reason. Gradients themselves add a degree of depth to an image, and patterns may increase visual appeal, if done properly. Combine the two, and you have a versatile effect. Now, FADE the pattern with the gradient, and you have a more interesting visual effect. We’re gonna show you one method to accomplish this.

Requirements

• Photoshop 6.0 or higher (although this could likely be done in any graphical editor that permits tiling of patterns creation of alpha-transparent gradients).
• Layers palette is enabled and visible. If yours isn’t, then activate it from the menu by selecting Windows then Layers.

Download the pattern and Photoshop files

Here’s the actual photoshop file used in this example so you can pick it apart to see what it’s made of.
Download the Example Photoshop file used in this tutorial.

This is just another example of the technique, in Photoshop format. This one puts another layer above using a gradient to create a shine effect over the other layers.
Download Another example of using the gradient-faded technique.

How to do it.

Start off by creating a new Photoshop file (PC: Ctrl+N, Mac: Cmd+N). Make it whatever size you like, although for purposes of this example I’ve created a file of 300×80 pixels. Below is a pic of the graphic, as well as the Layers Palette.

Fill the base-layer with a color of your choosing. This can even be done in the dialog box for creating a new file.

Now double-click the empty space next to the name Layer 1 in your layer palette to access the Layer-Styles dialog. You may also access it by right-clicking the layer and then selecting Blending Options. In the left-column of the dialog is a check-box for Gradient Overlay. Click this to activate it. The center section of the dialog should change to reflect Gradient Settings. In the Blend mode drop-down box, select Overlay. Beneath the drop-down box is a slider for Opacity. Reduce the opacity to anywhere between 10-90% to your tastes.

Create a new layer above Layer 1 (PC: Ctrl+Shift+N, Mac: Cmd+Shift+N), or by clicking the New Layer button at the bottom of your Layer Palette. If the new layer is not created above Layer 1, move it there by dragging it. In my demonstration file I named this layer Gradient Tool Filled.

Select your Gradient Tool from Photoshop’s toolbar. It shares the same icon-space as the Paint Bucket Tool, so if you don’t see your Gradient Tool, press SHIFT+G to switch your Paint Bucket tool over to the Gradient Tool.

In this example I’ve used a gradient that spans the vertical aspect of the image and fades from a solid blue color to complete transparency at the bottom.

Create a new Pattern hrough the Photoshop menu Layer -> New Fill Layer -> Pattern and select the pattern you wish to fade over your gradient background.

I picked a pattern created earlier that has black and white slanted lines that tile well. Also for this example, I blended the image slightly by setting its blending mode to Overlay and the layer’s opacity to 50%, as shown below.

Create a selection based on the Gradient Tool Filled layer contents (PC: Ctrl+Right-click the Gradient Tool Filled layer, Mac: Cmd+Right-click the Gradient Tool Filled layer). Although you see the selection in the image window dancing around just the upper-half of the image, in actuality the selection SHOULD be a gradient itself.

Then click on the Pattern Fill Layer in your Layers Palette to select it as the active layer. Press your BACKSPACE or DELETE key a number of times to selectively erase the Pattern Fill Layer according to the gradient selection you made earlier. In this example, 1-6 hits on the backspace key got the image suitable for my tastes.

Deactivate the visibility for the Gradient Tool Filled Layer by clicking the little black eye-ball icon to the left of the layer in the Layers Palette to get a better view of what your erasing has done.

Experiment! Here are a few suggestions I have for creating some alternate looks with this technique:

• Change the direction of your gradient from Down->Up, to Up->Down, or some other direction of your choosing.
• Try different blending modes for both the gradient Layer-style on the base color layer and the pattern itself.
• You can create multiple Pattern Layers and cross-fade between them. Check out the header for Skinyourscreen.com as an example of fading two textures/patterns.
• We used a gradient layer here to generate our selection, but technically speaking, you could use any kind of selection you want. Try some custom air-brushing and use it as a selection for erasing.