Description:

Today i will show you how to create a nice pattern.

Open a new document in Photoshop
This document should be 40×40 pixels and with a transparent background.

Now create a new layer ( Press CTRL+SHIFT+ALT+N )
Select Paint Bucket Tool and fill this layer with black ( this layer we will delete at the end of the tutorial )

Now zoom your document to 1600 %

Create another layer ( press CTRL+SHIFT+ALT+N )

Select Pencil tool. Change the brush size to 1 pixel and make a diagonal line with a white color.
The next image is zoomed by 1600 %

Now create another layer and make another diagonal line like on the next image:
NOTE: It is very important to create this new layer because we will change the opacity for a nice effect.

Now i will continue this steps .

Please do not forget to create a new layer before you make a new diagonal line. then do not forget to change the opacity.

In the next image you will see how i will make the lines and you will see for each dot what is the opacity.

Then with the same technique make the following diagonal lines:

Now delete the Black background.

Go to Edit > define pattern…

Choose a name for your pattern and press ok.

I will show you now what you can make with this pattern.

First you can create nice navigation buttons:

Open a new document.
Fill it with what color you want.

With your Rectangle Tool draw something like this:

Then add this Layer Style:

For Inner Glow settings use the color #003399

Set the Gradient color for the left #66CCFF and for the right #0066CC

This will be your result:

Now we will apply the pattern we have created.

Then Hold the CTRL key down and with your left mouse click on the layer thumbnail like in the following image:

You will notice that you will have a selection around your navigation bar:

Create a new layer ( press CTRL+SHIFT+ALT+N )

Now go to Select > Modify > Contract , and choose contract by 4 pixels
You can use your own value here.

Now Select the Paint Bucket Tool and set choose your pattern:

Then click one time inside yor selection.
Click CTRL+D to deselect.
This is the result:

Now press on Add Layer Mask

Select Gradient Tool
Press D and after that draw a line exactly like in the following image ( instead of the red arrow )

I hope you find this tutorial useful.