Advanced Search

45 degree Line Pattern with Photoshop

Photoshop Tutorial by Björgvin Guðmundsson


In this tutorial I'm going to show you how to make a 45° scan line pattern using Adobe Photoshop. These kind of patterns are often used as tiling background images and image-overlays similar to scan-lines.

Step 1.

Open up your copy of Photoshop and make a new document.

Make it 3x3 pixels, 72 dpi, RGB color and select the "Transparent" button. Then click "OK".

Step 2.

Select the line tool (U) and select "Fill pixels" in your line tool palette.

Step 3.

Zoom into your document. I suggest you zoom in at 1600%.
Now make the lines as shown on the image below.

Step 4.

Now select the Rectangular Marquee Tool (M) and select your document.

Step 5.

Go to the "Edit" menu and select "Define Pattern"
Now you will get a pop-up window like the one below.

Give your pattern a name and click "OK".

That’s it, now you have a pattern!

Step 6. Apply the pattern

To apply the pattern on your images you have to open your image in Photoshop, make a new layer and go to the "Edit" menu and select "Fill".

Choose the 45° grid pattern like on the image below and click "OK".

If you lower the opacity of the pattern layer down to 50% it should look like this.

If you want to use the pattern as a background for a webpage, just make a 3x3 pixel image.

Fill it with your selected background color, make a new layout and apply the pattern and play around with it’s color and opacity.

Finally, "save for web" and save it as a .gif image and set it as the body-background image in your html document.

I hope you learned something new, just remember to experiment with colors, thickness of the pattern and layer blending modes.

You can find more Photoshop tutorials at