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.

enter image description here

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)?

  • 1
    Better to make it in Illustrator using the "Zig Zag" effect and paste as smart object.
    – Salman
    Commented Oct 5, 2013 at 6:33

4 Answers 4


I would most likely do it like this:

1. Making a square.

Take a Rectangle tool Rectangle tool with Shape layers enabled.

Rectangle tool options

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. )

img 1

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.

img 2

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 toolMove tool by moving it up or down and decide the size its going to be by showing less or more of it.

img 3

4. Crop it, Crop it real good.

Take Crop tool Crop tool and select the cropping area.

You can zoom in an select the sawtooth and the additional filling with Crop tool 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.

img 4

5. End result.

img 5

And this is how it will repeat.

img 6

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.

  • I wish I could vote you up 10 times. Thanks @Lollero. Commented Sep 26, 2011 at 7:22

Use the pen tool in Photoshop and create a shape similar to a vertical stake. Save file as GIF/PNG/JPG. Your preference.(Mine is PNG.) Adjust your CSS file to repeat your image.

  • @ACMExp, do I really have right to become even more puzzled with your answer? vertical stake and zigzag effect? How can it work? Commented Sep 25, 2011 at 18:57
  • A vertical stake looks similar to this. oneinhundred.com/upfiles/upimg3/…
    – DrAwkward
    Commented Sep 25, 2011 at 19:00
  • So, I guess it's not vertical. Vertical means perpendicular to earth. Am I wrong? Commented Sep 26, 2011 at 4:53

You could start with a rectangle on a new layer, and then use the polygonal lasso tool to cut out one 'triangle' of your zig-zag. Then use the rectangular marquee tool to cut out that section and either repeat it in Photoshop or directly on the web page.

  • results would be inconsistent
    – user8795
    Commented Jan 20, 2013 at 21:08

Photoshop may not be the best tool here. Check out SnagIt for an inexpensive additional tool that has really great edge-making tools.

  • 3
    Cant say that you couldnt do this in Snagit editor. But still, may the god's of photoshop strike you down... or at least poke you a little. To say that photoshop might not be best program for doing web graphics.. thats just weird... Weird.. and as far as inexpensive goes pixlr.com/editor
    – Joonas
    Commented Sep 26, 2011 at 22:44
  • Pixlr also doesn't have one-click borders. This matters when you make a lot of bordered screenshots the way I do. But hey, if you want to just do a bunch of extra steps, go for it... Commented Sep 27, 2011 at 14:23
  • For screenshots snagit is awesome no doubt about that.. But this isnt about screenshots.
    – Joonas
    Commented Sep 27, 2011 at 14:56
  • 3
    You should definitely write about how that can be achieved. People out there are looking for different options. I'll give you a plus if its good.
    – Joonas
    Commented Sep 27, 2011 at 15:19
  • 1
    Well, I meant in your answer, and more detailed. I dont think it does but, do you know if it has option to have transparent bg in the edge tools?
    – Joonas
    Commented Sep 27, 2011 at 16:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.