Hi, I want to know that how could I achieve the zigzag effect for my web design at header and footer div, this effect is popular nowadays specially when building HTML5 websites. I can convert this in HTML and can repeat this via CSS, but only I want to know is that how could I design this in photoshop to mock it up first for HTML conversation. See the attached image as what I want to create.
Many thanks.
You only need to make an image as wide as a single “bump” (or “zag”). There are lots of ways of doing that, but an easy way to create the effect you see in that screen shot is to create a rectangle (say black) and put a white circle over the top of it, with only the bottom half of the circle covering the top of the rectangle. Then cut off the top of the circle. There are fancier ways to do it, but that would work. Save that image (which has a little round bit cut out of it at the top) and then repeat that image horizontally across the screen. That’s basically what they do on the Build Mobile site. 