Home » Tutorials » Photoshop Tutorials » Diagonal Line Pattern

How to Create a Diagonal Line Pattern

Here I'm going to show you all how to make a diagonal line pattern.

  1. Open up photoshop and create a new document.
    Make the image size 4px by 4px. I titled mine Gray Line Pattern, but there's really no need to.Photoshop New Image Dialog
  2. You should now have something that looks like this:
    Blank 4 by 4 px image.
  3. Zoom in really close so you can see the individual pixels in large. I zoomed to about 3200%.
    Zoomed in blank canvas at 3200%
  4. Use the PENCIL Tool Pencil Tool Icon (Shortcut key: B; If the B shortcut key selects your BRUSH tool, then push SHIFT + B). Alternately, to select the pencil tool with the mouse, click and hold on the brush tool icon, until more icons fold out and select the pencil tool. Now, set the brush size to 1px
    Brush Size
  5. With the mouse, fill in the pixels to form a line diagonally across the image:
    Canvas with drawn pixels from top left corner to bottom right.
    Now you're done! You can save the image as PNG, GIF, or JPEG and use it on your web page as a background! —OR— Continue on and use it on another image by Defining a pattern.
  6. Click Edit → Define Pattern to create a photoshop pattern from the image we've created.
    Edit menu define pattern
    Then name the pattern, I named mine Gray line pattern:
    Name pattern
  7. Then make a new image, or open the image you want to apply the pattern to and create a new layer.
    For this example, I created a new image about 100px by 100px.
  8. Now FILL the image (or layer, if you chose to use an existing image). To FILL select Edit → Fill (Shortcut: SHIFT + F5) from the menu.
    Fill dialog
    You can see here I had another pattern I did in black previously. Usually people will use black or white for their line color,
    and then adjust the layer opacity for a scanline effect.
  9. Here's my plain white background sample, using the gray pattern:
    Finished sample image