How to create a "zig zagged, jagged" effect with Photoshop?

I'd like to create the effect of a zig-zagged line at the bottom (or top, or any edge) of a rectangle. I also want to use this image on a web page, thus I think I should do it such that I can repeat it via CSS.

I don't know if I've used a correct term or not, so please correct me. Is this effect called zig-zag? How can I create it in Photoshop (not Illustrator)?

Answer

I would most likely do it like this:

1. Making a square.

Take a Rectangle tool with Shape layers enabled.

Make a square while holding Shift button to make sure that its a perfect square.

( In this case size doesnt matter ( hah.. ). I'm gonna make a little bigger than the sawtooth size I want but, you could make exact size right away. Helps with the cropping if you can snap to the edges of the square. In stage 4. Crop it, Crop it real good. )

2. Turning the square 45 degrees

Usa Free transform ctrl+t

Rotate the square 45 degrees while holding Shift button to enable snapping at 45 degree.

3. Make a rectangle and position the square.

Still with the Rectangle tool, make a big rectangle at the top.

After that you can position the square with Move tool by moving it up or down and decide the size its going to be by showing less or more of it.

4. Crop it, Crop it real good.

Take Crop tool and select the cropping area.

You can zoom in an select the sawtooth and the additional filling with Crop tool and crop away.

Now, technically you could just make really big square and crop that but the additional rectangle was to make it easier to see what the size of it would look like.

5. End result.

And this is how it will repeat.

6. Additional notes.

If you want to put Layer styles like Bevel & emboss or Inner shadow or something like that, you might want to merge there two shapes into one layer before doing so.

You can do that by selecting both layers while holding ctrl and then using hotkeys ctrl+e to merge them into one raster layer.