Adding scan lines to an image: Chapter 1

This is a tutorial to show how to create a scan line effect on images in PhotoShop. It's a common and useful way to add some spunk to background elements of a web page. This tutorial was created using PhotoShop CS2, however, older versions going back as far as PhotoShop 6 should be able to do everything in this tutorial.

 

Creating the Pattern

The first step would be to create a repeatable pattern. In PhotoShop you can define any image as a pattern and automatically have it repeat on a layer. So what we'll need to do is create a scan line pattern. To create a horizontal scan line, start by creating a new image with the following settings:

• Width: 1 pixel

• Height: 4 pixels

• Resolution: 72 pixels

• white background

Zoom in on the document using the Magnifying Glass tool ( :ps-zoom: ). Then, using the pencil tool ( :ps-pencil: ), make the bottom two pixels black. Use the keyboard shortcut Ctrl-A to select everything in the document, then go up to the menu and choose Edit > Define Pattern.... A dialog box will appear asking you to name it. Name your pattern and click OK.

Close this document. There is no need to save it.

 

Applying the Pattern

Now open up your image that you want to apply the scan line effect to. In this document, create a new layer that is above the rest of the layers in the document. You can create a new layer by going to the menu and selecting Layer > New > Layer... , name your layer and click OK.

Select the Paint Bucket/Fill tool ( :ps-bucket: ) and select white as your foreground color. Select your new layer and fill your new layer completely with white. Change the Layer mode of this layer to Multiply.

With your white layer still selected, go to the menu and select Layer > Layer Style > Pattern Overlay... . A dialog box will appear with a set of options for adding a pattern to your white layer. Click on the little arrow next to the Pattern box and a collection of patterns will be shown. The scan line pattern you created earlier should be shown at the bottom. Click on your pattern to select it.

Now click on Blending Options at the top of the menu on the left of the Layer Style dialog box. Under General Blending, change the Opacity to something between 5 and 15 %, whatever you think looks good.

And now you have scan lines on your image!

Before:

After:

 

Applying to other images

If you want to add the scan line effect to other images, there is no need to repeat the Creating the Pattern step. Just jump strait to the directions for Applying the Pattern.

 

What if you want a diagonal scan line pattern?

Creating a diagonal repeating scan line is easy too. Here's how to do it. Create a new document with the following constraints:

• Width: 6 pixels

• Height: 6 pixels

• Resolution: 72 pixels

• white background

Zoom in to the document and use the pencil tool to draw a pattern like the one shown below. Remember to change your foreground color to black.

Select the whole contents of the document by pressing Ctrl-A and define it as a pattern just as you did in the earlier steps. The rest of the process is the same.

Please let me know what you think of this tutorial. :)