Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

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

share|improve this question
    
Better to make it in Illustrator using the "Zig Zag" effect and paste as smart object. –  SalmanPK Oct 5 '13 at 6:33
add comment

4 Answers 4

up vote 13 down vote accepted

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.

share|improve this answer
    
I wish I could vote you up 10 times. Thanks @Lollero. –  Saeed Neamati Sep 26 '11 at 7:22
    
GREAT answer!   –  Kyle Sevenoaks Sep 26 '11 at 9:08
add comment

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.

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

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.

share|improve this answer
    
results would be inconsistent –  Muhammad Umer Jan 20 '13 at 21:08
add comment

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

share|improve this answer
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 Sep 26 '11 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... –  Alex Feinman Sep 27 '11 at 14:23
    
For screenshots snagit is awesome no doubt about that.. But this isnt about screenshots. –  Joonas Sep 27 '11 at 14:56
2  
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 Sep 27 '11 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 Sep 27 '11 at 16:52
show 2 more comments

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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