Stylish Webpage

In this tutorial you will learn how to create a Stylish Webpage. I will use a few patterns in this tutorial, so let's begin with the first pattern.

First Pattern:

1. Begin with a new file, 5x5 and with a transparent background. Then choose the Zoom Tool and zoom into 1600%. Now take the Pencil Tool and set the Master Diameter to 1 px and make sure you have black as your foreground color. Then start to paint the document like the image below.

2. Now go to Edit>Define Pattern and name it Diagonal Scanlines.

Second Pattern:

Now repeat step 1, but paint the document like the image below.

Then go to Edit>Define Pattern and name your pattern anything you want.

Now we have the patterns we need, so let's start with the design of the "Stylish Webpage"

1. Begin with a new file, 700x500, and with #F3F3F3 as your background color. Then create a new layer, now take the Rectangular Marquee Tool and make a shape similar to the one below, fill the shape with #D4D1B7. (Click for larger view)

Click to enlarge

2. Now right click on layer 1, choose Blending Options and apply these settings.

And now should you have something like this. (Click for larger view)

Click to enlarge

3. Create a new layer, and then take the Rectangular Marquee Tool and make a shape similar to the one below, fill the shape with #7B0000. (Click for larger view)

Click to enlarge

4. Now right click on layer 2, choose Blending Options and apply these settings.

5. Now hold down Ctrl and click on layer 2 to get a selection, then create a new layer, and fill the layer with #FFFFFF, and then go to Edit>Free Transform, then draw the bottom part half way up, and change the Opacity on this layer to 20%. (Click for larger view)

Click to enlarge

6. Create a new layer, and once again take the Rectangular Marquee Tool and make a shape similar to the one below. (Click for larger view)

Click to enlarge

7. Then take the Gradient Tool, and create this gradient.

8. Now draw the gradient from top to bottom. Then right click on layer 4, choose Blending Options and apply these settings.

9. Repeat step 5, but click on layer 4. Then add some text to your header and navbar.

And that's it you're done! This is what I came up with. (Click for larger view)

Click to enlarge

And here is another example on what you can create with a little imagination. (Click for larger view)

Click to enlarge