Create a Sleek Looking Diagonal Website Pattern

1. Begin by creating a new document at 40x40 pixels. Make it transparent.

2. Go to edit>preferences>guides, grids & slices. Use these settings:

3. Here is what you should see when zoomed in.

4. Next set your colors to #bababa and #767676 and use the pencil brush tool (B) with any small size, we are just sketching in a rough outline of the diagonal pattern.

5. Reduce the size down to 1 pixel and clean up the diagonal lines, like shown. You can switch between foreground/background colors by hitting 'X' to quickly edit pixel by pixel your pattern to make it look like mine.

6. Next go to edit>define pattern and give it any descriptive name. You can choose to save this or not (to edit later).

7. Now create a new document, any size, and take out your paint bucket tool (G). On your top navigation bar where it lists the settings for each tool, choose 'pattern' (instead of foreground) for the fill type an then select the pattern you just made. Click your document to fill it with the pattern!

8. Now you can add website elements on top of your background/pattern layer and create a new nice looking layout.

I hope you enjoyed this tutorial!