Adobe Photoshop Tutorials, Tips and Tricks

Creating Lined Backgrounds

Backgrounds with straight horizontal or vertical lines create a distinctive look, and like any form of textured background, provide relief from whatever is in the foreground. Lined backgrounds can be used to enhance artwork and are also useful on web sites. They can also be used to create video monitor or TV scan line effects. Luckily for us, they are quite easy to make in Photoshop. Here's what our finished background will look like:

scan line effect

Keywords:	lined backgrounds, textured backgrounds, video scan line effect
Features Used:	pencil tool, patterns, gradient tool, layer fill, vivid light blending mode

1

Our first step will be to create a tiny little image which will serve as our fill pattern. This pattern will be used later to fill and entire layer. There are lots of possible variations here, so I'm just going to make a simple pattern that will generate horizontal lines.

So create a new document in Photoshop that's 1 pixel wide by 6 pixels high with a transparent background. Use the Navigator palette to zoom in all the way to 1600% so you can see the pixels clearly. Now set the foreground color to 50% gray. The easiest way to do this is to hit "d" to set the default foreground/background colors to black and white, then click the foreground color to bring up the color picker, click the "B" control in the HSB section and set it's value to 50% (H and S should be zero).

Now fill the layer with gray by hitting option-delete (or alt-delete on Windows). Your image should look like this now:

lined backgounds

2

Now set the foreground to 35% gray and select the Pencil Tool . Use the pencil to color the top two pixels with this darker gray to get this:

scan line effect

3

Select Edit->Define Pattern and give it the name "Scan Lines". Photoshop will now remember this pattern internally and you can close and discard this document without saving it.

4

Create a new document. I made mine 800 pixels wide by 600 pixels and started it with a transparent background. I then selected two shades of red for the foreground and background, colors #9b2c1a and #c83720, and swiped a subtle gradient just to make it a bit more interesting looking. If your goal is to create a video monitor scan line effect like in The Matrix, then you can use a single shade of green instead.

5

Now we'll add the pattern we created earlier on top of this background. Select Edit->Fill and choose Pattern from the menu. Find the pattern created above in the Custom Pattern menu and set the Blending mode to Vivid light and the Opacity to 50%.

The vivid light blending mode causes pixels in the pattern that are 50% gray to be treated as if they were transparent, while pixels darker than 50% gray cause the color in the layer to be darkened. The Fill dialog causes the pattern to be repeated (i.e., tiled) across the entire layer. Since the pattern has alternating light and dark areas horizontally, the end result is horizontal lines being superimposed on the color already in the layer due to the blending mode. Here's our final result:

lined background

It's just as easy to make vertical lines by creating a pattern that's 1 pixel high by several pixels long. By changing the length of the pattern, you can control how thick the lines are and how far apart they're spaced. You can create checker board patterns this way as well. And if you want a more pronounced effect, just increase the Opacity setting in the Fill dialog.

Thanks for visiting with the Photoshop Dragon.