WebDeveloper.com �: Where Web Developers and Designers Learn How to Build Web Sites, Program in Java and JavaScript, and More!   
Web Developer Resource Directory WebDev Jobs
Animated GIFs
CSS Properties
HTML 4.01 Tags
Site Management
WD Forums

    Web Video
    Expression Web



    Forum, Blog, Wiki & CMS

 Site Management
    Domain Names
    Search Engines
    Website Reviews

 Web Development
  Business Issues

    Business Matters

    The Coffee Lounge
    Computer Issues

Making TV Scanlines in Photoshop 6

by Nathan Segal

TV Scanlines can be used for a variety of different effects, though the most common is for stylistic enhancement. Here, you will learn how to create this effect in a few simple steps.

One of the important things in creating this kind of effect is in knowing the size of the original image. This is important for the next step, which is creating an image you will use to make a TV scanline pattern. In this case, you can work with the Photoshop Zebra, supplied in the Samples folder and sized to 200 pixels wide.


Next, you need to create a thick line that you will use for the TV Scanline pattern. Set the width to 200 and the Height to 4 and fill the entire selection with Black.

Now, select View: Show Rulers and Zoom into the image a few times (CTRL-+) and select either the upper or lower half of this line and fill the selection with White. This will be used to create the TV Scanline patter. Go to Select: All, then to Edit: Define Pattern, and in the Pattern dialog box, click on OK.

Now, click on the image of the Zebra and access the Channels palette. If it is not active, choose Window: Show Channels. Create a new channel by clicking on the New Channel icon or by accessing the triangle at the top right of the palette and choosing New Channel.

Next, go the menu bar and choose Edit: Fill and in the Fill dialog box, choose Pattern under the Contents heading, making sure to choose the pattern you created from the Custom Pattern list.

Note: If you want a thinner scanline, create an image 2 pixels high, etc.

Now, go activate the RGB channel, then go to the Select menu and choose Load Selection and click on OK.

From there, go to the menu bar and click on Image: Adjust: Levels. At the top of the Levels dialog box, there is the heading: Input Levels and three fields. In the field with the 1.00 reading, change that to .6 and click on OK.

Deselect the image to see the effect.

Note: Experiment with changing the reading from .2 to .9 for a different intensity.

HTML5 Development Center

Recent Articles