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)?
I would most likely do it like this:
1. Making a square.
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
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.
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.
Source : Link , Question Author : Saeed Neamati , Answer Author : Joonas