In this tutorial we will learn how to create a cool background for your website!

This Is The End result

First we need to define two patterns:

Step 1

Open up a new canvas, width=37px, height=37px. Transparent background

Step 2

Set white to your foreground color

Step 3

Select the line tool with weight: 10px

Step 4

Draw a line from the top left corner, to the lower right corner.

Step 5

Duplicate this line 2 times.

Step 6

Select a line and hit Ctrl+T

x: 18px
y: 55px

Step 7

Select another line and hit Ctrl+T

x: 33px
y: -4px

Step 8

Deselect the shape and go to Edit -> Define Pattern, save it!.

Step 9

Open up a new canvas, width=3px, height=3px. Transparent background

Step 10

Select black as your foreground color. Select the Pencil Tool and make 3 'dots', like this:

Step 11

Go to Edit -> Define Pattern, save it!.

Step 12

Now the real job starts. Open a new canvas, width=300px, height=1000px (or higher)

Step 13

Select the Gradient Tool. Click the bar at the top and specify the following colours

Step 14

Add a new layer, fill it with a background colour (doesnt matter which colour), and set fill to 0%

Step 15

Double click the layer to open the layer properties window, and apply the white pattern



Important: I set the transparency to 6%

Step 16

Add another layer, fill it and set fill to 0%

Step 17

Double click the layer to open the layer properties window, and apply the black pattern



Important: I set the transparency to 10%

You should now have something like this

Step 18

In order to slice it correctly, merge all layers by clicking Shift+Ctrl+E

Step 19

Select the Rectangular Marquee tool, with fixed dimensions. Width=36px, height=1000px. Click on the topleft side of the screen and copy the selection. Open a new canvas with the same dimensions and Save for web!

OK you must be on tutorial drugs or sumthing. This is your 4th tutorial or something like that in about an hour. Well done! Awesome tutorial, once again thanks red!

lol I just asked him if he has worms, he reckons he's having a moment

Rick have these moments more often, awesome result in this I love it.

Thankyou

I have tried this tutorial 3 times, and am stuck.

I always end up with a blank canvas.

I am trying to duplicate this (just the background):



and I thought this tutorial was perfect.

Any ideas why my canvas is always blank at the end of this tutorial?

If anyone wants to help, I sure could use a background diagnol pattern with the colors in the above pic.

Thanks so much.

Trope.

attach the .psd and I'll take a look at it

I'd also make sure you are doing step 18. If you are selecting a layer that is empty or mostly empty then you won't get the whole image.

Thanks, here is the PSD.

I appreciate your assistance.

~Trope

you missed step 13

apply a gradient to the bottom layer and you're done