You are using a browser which is not compatible with CSS (for more information, see Tara's tutorial). Because of this, it is possible that our website may not appear correctly in your browser. We apologise for the inconvenience, and recommend you upgrade your browser to one which is compatible with CSS. For more information, please visit our Browser Upgrade page.


Creating scan lines in Photoshop by Ciaran

Last updated: 02/05/2012

This tutorial will describe the steps you will need to take to spice up your images in Photoshop using TV Scan Lines. This technique is extremely useful and easy to perform by people at all levels.

Step 1: Create your lines

  • Open a new image with dimensions of 1x2 pixels with a transparent background.
  • Zoom to 1600% and with the foreground color set to black take the pencil tool and paint the top half of the image.
  • Select the whole image using the selection tool or by clicking Select > All.
  • We will now define this image as a pattern by clicking Edit > Define Pattern. In the more recent versions of Photoshop you will be prompted to enter a name for your pattern, this can be whatever you want. This will come in handy if you ever plan on using the pattern again. If you are using an older version you will need to save the image and re-open and define it each time you want to use it.

Step 2: Applying your scan lines to an image

  • Open the image you want to apply the affect to and add a new layer to it by clicking Layer > New > Layer.
  • We will now fill this layer with our pattern by clicking Edit > Fill and select Pattern as the content. If you are using a more recent version select your pattern from the drop-down box underneath, otherwise it will be set as the default already and click OK. If you want you can now adjust the Opacity of the layer to suit your image.

And it's as simple as that!

Before After Used as a background
Before After Used as a background

© 4WebHelp and Ciaran Lalor

Latest comments on this tutorial
Shamima Sultana
Very nice tutorial
FireFly Ativan
mmm, Thank You. I'll Be Using This Always .
mohit chouhan
mohit thats for ever
Thank you SO MUCH.

I'm guessing if you wanted to make scanlines at different angles you'd just fill in the original pattern different?
Nice and simple, just what i wanted. Keep up the good work!
you are the best men. this tutorial is sooo clear and straight forward. more of it men.
Nicola Beacham
i think that this is a good tutorial and that i am going to try and follow the steps and it will help me with my GCSE.

thank you very much
I've been looking for a tutorial like this for awhile, thanks very much.
Mohit setia
very very innoative idea.
I will try to practice that in my new websites design  Smile

Mohit setia
Fluker: no you do not paint any part of the image white.  Paint half the image black and leave the other half as transparent
are you sure you filled the transparent bit with white?
Good one! Thanks a lot .
It didn't work for me Sad

When i select everything and click edit > define pattern it just saves a black square, it doesn't save the transparent half, so when i use the pattern on an image it just turn black.
Wow!!! This is such a very great and very generous site!!! I too, have been looking for this technique..
Thank you so much, i have been looking for the scan line tutorial..

nice one!
Thank you so much. big help
Nice and simple, just what i wanted. Keep up the good work!
Great Tutorial
Thank you so much, this tutorial is good, easy and understandable. Thanks for your help and time to make this.
Daniel, 4WebHelp Team Member
Nick: If you don't say in what way it "didn't work", I'm afraid there's no way we can help.
Sorry but it didnt work. Is there another way to do this. Sad
What a very informative tutorial. Thank you very much for that. Ive been looking for similar ones on the internet, and yours by far, is the  besr.

Add a new comment

This page is © Copyright 2002-2022, 4WebHelp. It may not be reproduced without 4WebHelp's prior permission.