Scanlines: Expert Circuit

Most scanline tutorials just show you the most basic of scanlines and leave you hanging, showing none of the potential scanlines have if you take the time to explore them. Not this one. I've showed you the basic, so let's go advanced. Let's get started.

First we're going to experiment with colors. Open up your original document again, then make a new layer. Fill it with 50% Gray, then use Halftones at the default settings to produce some funky red-blue-green circle shapes:

From here, you have two choices, depending on what you need the image for. Let's make it look retro first:

To do that, I set it to Hue and 48% opacity. The higher the opacity, then older it looks, but the colors start to become an eyesore, so don't over-do it. Now let's try using another red-green-blue technique. Make a new document, 6x1 pixels. Grab the pencil tool and color the left two pixels Red #FF0000, the middle two Green #00FF00, and the right two Blue #0000FF so that it looks like this:

Now define it as a pattern and go back to the original image. Make a new layer and fill it with your new pattern, then mess with the various settings to get your desired effect:

I used Soft Light and 60% opacity, but this effect, like the previous one, looks best on images with a good balance of red, green, and blue, rather than this one, which is more blue-heavy. Now let's make a surprisingly smooth transition into the next technique. Take the previous two coloring scanlines and combine them (on separate layers) and mess with their settings:

That makes for a more interesting effect. Let's work a little more on combining different scanline techniques. Try combining the two dot scanlines I showed you in Scanlines: The Basics:

See that? That's a pretty cool pattern we just made. Trying to make that from scratch would've been exhausting, but by combining scanlines, it only takes a few clicks of your mouse. There's not much more I can show you about simply combining scanlines, since it's mostly just experimenting to see what works, but here's another example:

That was done by combining the 1px and 2px horizontals from The Basics. The possibilities are endless, so keep at it. Now let's try some more drastic filter effects. These can be useful if you're planning on using the image as a TV in a future project, which we'll be doing in a moment actually.

Anyways, let's continue. There are a few ways to achieve this effect that I know of, so let's go over them all so you can decide which is best. Make some normal 1px horizontal scanlines, then apply a diffuse glow on them at these settings:

Good. You'll get something that looks really, really horrible, but don't worry about that. Duplicate the layer, then set the duplicate to Multiply and lower it's opacity, maybe to around 60%. Then set the original to Screen and somewhere around 20% opacity:

This allows each layer to control a certain area of influence. The duplicate layer will affect the lighter areas and the original layer will affect the darker areas. Now let's try it another way. Put the layers you just made into a group and hide it for now. Then make another layer of horizontals and this time use sprayed strokes at these settings:

Do the same deal as last time, with the duplicating and everything. You'll get something like this:

I know that doing this a third time is going to be mind-numbing, so I'll try and make it quick; I promise. Group your new layers and hide them, then make a horizontal scanline layer and apply some grain with these settings:

I found those grain settings at Photosector, who also have a good (though nowhere near as informative or in-depth) scanline tutorial. Anyways, when you apply the multiply and screen effect again, you'll get something like this:

All right, done with that effect. Let's really quickly try out one more thing from the Photosector tutorial that I thought was especially clever of them. To sum up their three paragraphs on it, do this:

1. New layer.
2. Select all.
3. Border at 1px.
4. Invert selection.
5. Smooth at 15px.
6. Invert selection.
7. Fill with black.
8. Gaussion blur at 15px.
9. Lower the opacity to around 50%.

They called it a "vignette," which is the black border around the edges of some TVs, and looks like this:

Last thing is animation. This is fun. I won't exhaust this since is really straightforward and this tutorial is pretty hefty already, so let's do two examples. For the first one, make an new image 4px taller than your other one and use your basic 2px scanlines again and do whatever effects you want to them. Put that layer on your original image and place it so the 4 extra pixels are coming out of the top.

Now pull the image into ImageReady and create a new frame by pressing this button: Now grab the Move tool and press down once, make a new frame, press down again, etc until you have 4 frames. Now press play and you'll get this:

Awesome. Now let's try using that new kind of scanline I showed you. Use whichever technique you wish, but re-do it around 5 times (don't just copy the layers) and put each in groups. Then hop to ImageReady and hide all but one. Then create a new frame and hide the one you just used and unhide another. Keep doing that until you've used all of your groups, then press play:

I went the extra mile to show you a practical way of using this tutorial. I found an image of an old TV, cut out the screen, stuck my image under it, and combined the animation I just told you to do with the halftone scanlines to give it an old TV sort of look. Scanlines are really useful, so to anyone actually still reading this, good luck using them- they rock!

Holy crap, we're finally done!