Photoshop - Scan Lines
This ever-popular effect can be used as an overlay to give a "TV" effect on top of an image. |
| 1. Begin by opening a new file 2px wide x 4 px high, transparent background. When it appears, zoom in to get a clear view. |
2. Make sure Black is the Foreground Color and select the Pencil Tool (it should be set to 1 px by default (check in the options bar), and carefully "paint" in the top half of the image: |
 |
| 3. Now go to EDIT...Define Pattern. You will get a dialog box asking you to name this new pattern, it's up to you if you bother with this step. |
4. Open a suitable image, create a new layer on top of this image and go to EDIT...Fill. The dialog box to the right will appear. Make sure you select "Pattern" and click on the pattern you've created (it will be the last pattern if this is the one you've created most recently).

|
 |
| Variations: For vertical or diagonal scan lines, create an initial pattern as at the right: |

Vertical: 4 x 2px |

Diagonal: 4 x 4px |

Diagonal: 4 x 4px
|
Add a Layer Mask to the "scan line" layer, click on the second window in the layer as shown and drag with Black in the direction shown with the Gradient Tool .

|
 |
Below is an image of a pistol where we isolated the "grip" by using the Pen Tool, created a new layer and filled the shape with scan lines. A touch of Bevel & Emboss, a slight lowering of the layers opacity and experimenting with various layer Blend modes can work wonders. |
 |
 |
| The color of the lines can be easily altered after applying them over an image by Ctrl + clicking the scan lines layer to get the marching ants going, changing the Foreground color and pressing Alt + backspace. Here, we've also applied a little "twirl" - FILTER...Distort...Twirl and a touch of Bevel and Emboss. |
 |
| Text can be placed and then selected with the Magic Wand Tool and with Shift held down to add subsequent characters. When marching ants surround each item of text, create a new layer above the text layer and fill with scanlines. Here a 2 x 4px, red/transparent pattern was used. |
 |
| Here, an imaginative use of blurs etc. in ImageReady creates this rollover navigation button. |
 |
| Finally, a 2 x 4px image can be filled with two different colors. When it is set as the background image for a Web page it will "tile" or repeat seamlessly. |
 |