Create a Sleek Looking Diagonal Website Pattern

dangtruong

Author lv1 (3900/5000)

6,062 views

No comments

(4 votes, average: 3.50 out of 5)

This tutorial will teach you how to create a very nice looking thick diagonal website background. It is very clean layout and can also be used for images, wallpapers, etc.
1. Begin by creating a new document at 40×40 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!Copyright @ Nifty 2007