WebsiteTips.com - Web Design Tutorials, Tips, Top Resources

Creating Pixel Sharp Diagonal 45-degree Scanlines Patterns with Photoshop

by Shirley E. Kaiser, M.A., SKDesigns

Published September 2007. Copyright © 2007-2008 Shirley E. Kaiser, M.A., SKDesigns and WebsiteTips.com. All rights reserved.

3x3 grid 45-degree scanlines sample Example 1: 45-degree scanlines sample using 3x3 grid pattern 4x4 grid 45-degree scanlines sample Example 2: 45-degree scanlines sample using 4x4 grid pattern

Graphics with 45-degree scanlines, diagonal scanlines, including repeating background textures, are quite popular right now, and the look can add eye-catching textures and visual interest to your Web pages. The tutorial below shows you an easy way to create two different pixel sharp 45-degree scanline patterns for use as Photoshop patterns. As shown in Example 1 and Example 2 to the right, the 3x3 grid diagonal scanline pattern is slightly narrower, smaller than the 4x4 grid diagonal pattern. Each can look great depending on the texture you're after for a particular project need.

Once you know how to create these two diagonal scanline patterns, you can use this skill to create a multitude of pixel sharp patterns for Photoshop, create background patterns, or something else. You're only limited by your imagination!

Photoshop version, skill level: Although this tutorial is written for Adobe Photoshop CS3, you can use any version of Photoshop that allows you to create your own patterns. Paint Shop Pro users can also follow along just fine, too. It's also written so that newer users can do this, too, while experienced users can skip past the basics you already know.

Available in PDF format for downloading:
photoshop-scanlines-patterns-tutorial.pdf

Get Acrobat Reader

Adobe Photoshop CS3 Books
Recommended by WebsiteTips.com

  •  Adobe Photoshop CS4 Classroom in a Book. Adobe 11-2008 
  •  Adobe Photoshop CS3 for Photographers. by Martin Evening. Focal Press (May 28, 2007) 
  •  Photoshop CS3: Up To Speed. By Ben Willmore. Peachpit (5-18-2007) 
  • Photoshop CS3 for Nature Photographers. by Ellen Anon, Tim Grey. Sybex (5-14-2007).

See more Photoshop Books and Software Recommendations.

Read short reviews and find more book recommendations on Web site-related topics in our Recommended Books, Software section!

In association with
In association with Amazon.com

Create a 3x3 Grid 45-degree Scanline Pattern

The 3x3 Grid 45-degree scanline pattern is a slightly smaller, narrower diagonal scanline pattern compared to the 4x4 Grid 45-degree Scanline Pattern below. See A Few Color Examples Using the 3x3 Grid and 4x4 Grid 45-degree Scanlines Patterns below for side-by-side comparisons.

  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.New Image dialog box, Photoshop CS3
    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:

    Add pixels in three steps, enlarged to 1600 percent, Photoshop CS3 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%:

    Grid pattern for 45-degree scanlines, enlarged to 1600 percent, Photoshop CS3 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.new dialog box, Photoshop CS3
    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

Now that you've created the new 45-degree diagonal scanline Photoshop pattern, you'll be able to apply it to your images whenever you wish. For this tutorial, we'll create a Web page background image.

  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:

    sample: 45-degree scanlines plus gradient for horizontally repeating background 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):

    music-violin-montage
  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.Pattern Overlay Dialog Box, Photoshop CS3
    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:

    Background image using 45-degree Scanlines pattern, Photoshop CS3Example 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.Canvas Size Dialog Box, Photoshop CS3 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.

That's it! Save your image for the Web.

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.

Save Pattern Overlay Files Window, Photoshop CS3 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.

top‘On this page’ menu

Create a 4x4 Grid 45-degree Scanline Pattern

As shown in Example 2 at the top of the page, the following is a slightly larger 45-degree diagonal scanlines pattern that you might also wish to create and keep handy. See A Few Color Examples Using the 3x3 Grid and 4x4 Grid 45-degree Scanlines Patterns below for side-by-side comparisons.

The approach is nearly the same as the 3x3 Grid 45-degree Scanline Pattern above. The pattern this time uses a 4x4px grid for the slightly different diagonal scanline pattern.

  1. In Photoshop, create a new image, this time with a height and width of 4px:

    Name: 4x4-45-degree-pattern (or whatever descriptive name you wish to use)
    Width: 4 pixels
    Height: 4 pixels
    Resolution: 72 pixels/inch
    Color Mode: RGB Color, 8 bit
    Background Contents: Transparent

  2. Since we're going to create a specific pixel by pixel 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 add the four black individual pixels. Using the Pencil Tool, add the first black pixel near the top left of your image as shown in Example 8 below. Add the next pixel near the left middle of your image. Since the third and fourth pixels use the same pattern as these two, you can duplicate the layer and drag the duplicate layer into place near the bottom right as shown below, or you can proceed to draw the third and fourth pixels - either way works!

    Add pixels - step-by-step screenshot, enlarged to 1,600 percent, Photoshop CS3
    Example 8: Draw Each Pixel to Create the 4x4 45-degree Scanline Grid Pattern, Photoshop CS3

  6. Your 4x4 grid pattern should look like this, enlarged at 1600%:

    Grid pattern for 45-degree scanlines, enlarged to 1600 percent, Photoshop CS3 Example 9: Pixel Grid Pattern Enlarged to 1600%, Photoshop CS3

  7. Go ahead and save your image now if you wish to save it.

From here on, the directions are the same as the 3x3 Grid 45-degree Scanline Pattern beginning with Step 8: Create a pattern....

When you finish, your image should then look something like this:

Background image using 4x4 45-degree Scanlines pattern, Photoshop CS3Example 10: Background Image using 4x4 grid 45-degree Scanlines Pattern, Photoshop CS3

top‘On this page’ menu

A Few Color Examples Using the 3x3 Grid and 4x4 Grid 45-degree Scanlines Patterns

3x3 grid:
pastel colors - 3x3 grid 45-degree scanlines samplerich colors - 45-degree-scanlines-sample

4x4 grid:
pastel colors - 4x4 grid 45-degree scanlines samplerich colors - 4x4 45-degree-scanlines-sample

A Variety of Repeatable Pixel Sharp Patterns Using 5x5 and 10x10 Grid Patterns

Just a few other possibilities for repeatable Photoshop patterns besides 45-degree diagonal scanlines:

5x5 grid:
patterns and samples using 5x5 grid

10x10 grid:
patterns and samples using 10x10 grid

The possibilities are endless!

Special Thanks

September 19, 2007: Very special thanks and note of sincere appreciation to all the Wise-Women Discussion List subscribers who provided such thoughtful, helpful feedback as I finalized this tutorial. Their constructive criticism and fabulous suggestions went a long way to improving this tutorial.

top‘On this page’ menuNavigation belowSearch/Sidebar

Articles, Tutorials, Tips:

Most Popular Books

In association with  In Association with Amazon.com 

Our Other Sites

SKDesigns

Effective, accessible, standards-based Web site design since 1996

SKDesigns - skdesigns.com

Brainstorms & Raves

Weblog on Web design, CSS, standards, music, more. By Shirley Kaiser, SKDesigns.

Brainstorms & Raves


Within Articles, Tutorials, Tips:

Within Web Site Resources:
SkipShow or Hide Detailed Navigation