Creating grass in Photoshop

A very beautiful resource for web designers is drawing grass, although it is usually hard. I've come up with this great tutorial on how to create grass, of any size, color, or anything.

This is the result you can get:
Grassy field:

Grass in a website header (This is actually a design I've done to add to this blog)

(Click to enlarge)

Step 1

In this tutorial we will be creating the first image, a grassy field.
So open up a new document (A medium size will do, I'll be using a 500x500) and fill it with a nice blueish gradient:

Step 2

Download this set of brushes, which contain 5 different styles of grass, which will create the illusion of variety.
(To install this set copy the .abr file and go to C:\Program files\Adobe\Photoshop x\Presets\Brushes\ The x is your installed version of Photoshop )

Step 3

Select some tones of green, try to chose a light one and a dark one to start (And ones that look sort of natural) and with the fourth brush from the grass set (The one that looks darkest in the preview) create a sort of base with the darker color.
You'll end up with something like this:

Now that you've got the base, switch to a more spaced brush, and with a bit lighter colors cover the base. I used for this the third brush.
It now looks like this:

After this you'll have light green grass, but in the places closest to the bottom it is supposed to look bigger and darker, to look ok, so with the same brush (Or another one if you prefer) and darker colors paint in the bottom and corners specially, creating a more realistic feel.
It will look like this:

And finally switch to a brush a bit more condensed and with medium greens fill in the blue spots, retouching and finishing up some details. This is just for a great result, and after all this tweaking it will look like this:

Final steps

You can now add some text over the grass, as if it was standing on it. To do this simply type in the text and put it between two layers of grass. If you didn't separate the grass into layers just create a layer above the text and draw some more grass covering a bit the bottom of it. Then duplicate the text, distort it to cover the bottom and change the color of it to black, then use the gaussian blur and you'll have a shadow (Which should go also under the grass that covers the text)
It will look like the grassy field I showed at the beginning:

Here is another example of it:

Other uses are the ones I also showed at the beginning, for headers and footers in websites.

Enjoy,
Alex