an All Creative World site
Ivan's picture

Scan line effect in Photoshop

Scan lines — see example above — is a quick effect that will make your most boring images look trendy and cool. It is a pixel perfect effect, so it is mainly recommended for screen use.

Basically, what you do is create a mesh of horizontal lines on a layer above your image that hides every second row of pixels. Here is the step by step tutorial and some extra ideas.

Step 1

First of all you need to create a new really small document. Make it just 2x2 pixels. Zoom in on it really close so each pixel becomes really huge.

Step 2

Create a new layer in your tiny document and trash the background layer. Select the Pencil tool and paint the top two pixels black. Leave the bottom two pixels transparent. Select the whole document, all 4 pixels.

Step 3

Choose the Edit / Define Pattern... menu point. Name the new pattern you just created something like: Horizontal scan lines.

Step 4

Go to your image that you want to apply the effect to. Create a new layer. Choose the Edit / Fill menu point. From the Contents Use drop down menu choose Pattern. Open the Custom Pattern drop down and select your newly created pattern. Should be the last one in the row.

Step 5

Apply the effect and see the scan lines appear over your image. That's it.

You can play with other pattens besides horizontal scan lines. For this you need to create new tiny documents with various patterns and define new patterns from them.

Above are a vertical and an angled example.

Plus one which is a combination of the two creating a cool carbon fiber look. This is achieved by applying a horizontal scan line and an angled one on top of each other in two separate layers.

Find the ready made 3 pattern files and the example Photoshop file you used in this tutorial attached for your convenience.

scan_lines.zip542.11 KB

Commenting on this Blog entry is closed.

arvana's picture
111 pencils

Very cool ideas, thanks! I've used the horizontal scan lines; never thought of diagonal ones.

ludvik's picture
29 pencils

I have used this effect before, but not with the pattern. I actually created the small file on its own and then applied it to an image with the Filter>Texture Pattern.

And then, with the same concept I applied the idea to CSS, so the images are never altered, but you see the effect via the layering power of CSS.

Check it at:

and check this same style with a more interactive approach at:


The pursuit of life is happiness.

Ivan's picture

Nice examples of use!

alien_fx_fiend's picture
2 pencils

Alright I love this tut it works out just great but I'm using this for a website and I have to save as web,so the only prob is when I crop the images it does so but the pattern fills the whole window not only the image is there a way to only fill the image with the pattern,I'm using this for text effect please help cause I only want the effect on the text not the whole screen,also I have set a transparency on a diff color so that it doesn't affect the image.

alien_fx_fiend's picture
2 pencils

btw this is the effect I'm trying to re-create I lost it during a hard disk crash and apparently the image seems to have a scanline effect to it though I'm not sure. thats the link to the image could someone please help me re-create it?

Creativebits is a blog about Creativity, Graphic Design, Adobe, Apple and other related subjects.

Do you need a great new logo?

Pick a pre-made design from a collection of 50,000+ logos that will be customized to your business name for free.