Create a 3x3 Grid 45-degree Scanline Pattern in Photoshop

1. In Photoshop, create a new image. From the drop-down menu, select File>New or click Ctrl+N with your keyboard. The New Image dialog box will open. Add the following information, as also shown in Example 3 below: Name: 3x3 45 degree pattern (or whatever descriptive name you wish to use)
   Width: 3 pixels
Height: 3 pixels
Resolution: 72 pixels/inch
Color Mode: RGB Color, 8 bit
Background Contents: Transparent
   
   Click on the image to view the full version.
   Example 3: New Image Dialog Box, Photoshop CS3
2. Since we're going to create a specific pixel by pixel 45-degree diagonal scanline pattern, zoom in the view to 1600%. With your image selected, using your keyboard, click Ctrl++ (Ctrl plus the + key), holding down the Ctrl and clicking the + key about 9 times to reach 1600%.
3. From the Tools palette, select the Pencil Tool. Set the brush size to 1px.
4. Also from the Tools palette, select Black for your foreground color.
5. Now we're ready to draw the pixel grid pattern with the Pencil Tool. Using the Pencil Tool, add the first black pixel to the top left of your image. Add the next pixel at the bottom middle of your image, and the third pixel to the right middle as shown in Example 4 below:
   Example 4: Draw Each Pixel to Create the 45-degree Scanline Grid Pattern, Photoshop CS3
6. Your 45-degree diagonal grid pattern should look like this, enlarged at 1600%:
   Example 5: Pixel Grid Pattern Enlarged to 1600%, Photoshop CS3
7. Go ahead and save your image now if you wish to save it. Saving it isn't required to create a Photoshop pattern (next), but you might wish to use this image in the future for something else.
8. Create a pattern based on this pixel grid image: from the drop-down menu, select Edit>Define Pattern. The Pattern Name dialog box will then open, as shown in Example 6 below:
   Click on the image to view the full version.
   Example 6: Pixel Grid Pattern, Photoshop CS3
   You can choose to change the name if you wish, then click OK.

top‘On this page’ menu

Apply Your New 45-degree Scanline Photoshop Pattern

1. In Photoshop, create a new image using the same settings as the 3x3 image above, except this time designating the height and width at 48 pixels. (You can use any number divisible by 3.)
2. Choose a color for your layer, and fill the layer with your chosen color. For this tutorial I'm using white. You can fill your layer a number of ways: From the drop-down menu, select Edit>Fill or press Shift+F5 to open the Fill dialog window. Alternatively, use the Paint Bucket tool to fill your layer.

   TIP:

   Use a basic color to fill your layer, such as white. Then, use Photoshop's Layer Style feature to easily change colors or experiment with color possibilities. From the drop-down menu, select Layer>Layer Style>Color Overlay.
   In addition, try adding a gradient or other effects via Photoshop's Layer Style window. If you intend to use your image as a repeating background pattern that includes a gradient, it would work well to create the image so that it will repeat horizontally using CSS, for example, by setting the gradient style to Linear, and the angle to 90° (click link to see the settings screenshot).
   Using Photoshop's layer styles makes it's incredibly easy to use this image as a template for various projects, changing colors, gradients, and other effects. For example, I used a white fill to create all the examples shown below, A Few Color Examples Using the 3x3 Grid and 4x4 Grid 45-degree Scanlines Patterns. For some of the examples, I also added a gradient effect.
   Try adding the scanlines pattern over photos and photo montages, too, perhaps using the Soft Light Blend Mode (click link to see the settings screenshot):
   
3. Next, from the drop-down menu, select Layer>Layer Style>Pattern Overlay. That will open the Pattern Overlay dialog window, as shown in Example 7 below.
4. To apply the 45-degree scanlines Photoshop pattern to your layer, select your scanlines pattern from the patterns. You'll find it at the end of the pattern thumbnails, as shown in Example 7 below:
   Click on the image to view the full version.
   Example 7: Pattern Overlay Dialog Window, Photoshop CS3
5. For this tutorial, use the settings shown in the example above, including: Blend Mode: Normal
Opacity: 40%
   Your image should then look something like this:
   
   Example 8: Background Image using 45-degree Scanlines Pattern, Photoshop CS3
6. It's a good time to save your image at this point. Save as .psd to retain your layers and layer styles.
7. To save for the Web to use as a background image, you can reduce your image canvas back to 3x3 since this is a repeating pattern. From the drop-down menu, select Image>Canvas Size. That will open the Canvas Size dialog window. In the Canvas Size dialog window, change the width and height of your image to 3 pixels, and click the top left corner Anchor box, as shown in Example 9 below.
   Click on the image to view the full version. Example 9: Canvas Size Dialog Window, Photoshop CS3
   Note that if you're saving your image from a 4x4 grid pattern described below, Create a 4x4 Grid 45-degree Scanline Pattern, that you should then reduce the canvas size to 4x4 accordingly to save as a Web page background image.

TIP:

Remember to save your Photoshop patterns and to back them up regularly so you never lose all those special patterns. To save your Photoshop Overlay patterns, from the Pattern Overlay window, click the small arrow to open the Pattern Overlay drop-down menu, then click Save Patterns, as shown here. Save with a new name if you wish.

Tip Example: Save Patterns, Photoshop CS3

Save your custom patterns separately as their own set. From the Pattern Overlay drop-down menu, click Preset Manager. In the Preset Manager window you'll see your currently open patterns. Press Shift on your keyboard while you select your custom patterns - you'll see a thick black border around all that you select. When you're done selecting your custom patterns, click the Save Set button, then name your custom patterns set and save. You can save just one pattern or a multitude of patterns this way.
You'll also find that Photoshop will load faster and respond faster when you use smaller preset files, whether for patterns, brushes, or other presets. Load only those you'll be using or that you tend to use all the time. This is less of an issue if your computer has lots of memory but it still helps to optimize Photoshop for maximum efficiency.