¿Cómo crear un efecto "zigzag, irregular" con Photoshop?

Me gustaría crear el efecto de una línea en zigzag en la parte inferior (o superior, o cualquier borde) de un rectángulo. También quiero usar esta imagen en una página web, por lo tanto, creo que debería hacerlo para poder repetirla a través de CSS.

No sé si he usado un término correcto o no, así que corrígeme. ¿Este efecto se llama zig-zag? ¿Cómo puedo crearlo en Photoshop (no en Illustrator)?

Lo más probable es que lo haga así:

1. Hacer un cuadrado.

Tome un Rectangle tool con Shape layershabilitado.

Haga un cuadrado mientras mantiene Shiftpresionado el botón para asegurarse de que sea un cuadrado perfecto.

(En este caso, el tamaño no importa (ja ...). Voy a hacer un poco más grande que el tamaño de diente de sierra que quiero, pero puedes hacer el tamaño exacto de inmediato. Ayuda con el recorte si puedes ajustar los bordes de la cuadrado. En la etapa 4. Recortarlo, recortarlo muy bien. )

2. Girando el cuadrado 45 grados

Estados Unidos Free transform ctrl+t

Gire el cuadrado 45 grados mientras mantiene Shiftpresionado el botón para permitir el ajuste a 45 grados.

3. Haz un rectángulo y coloca el cuadrado.

Aún con el Rectangle tool, haz un gran rectángulo en la parte superior.

Después de eso, puede colocar el cuadrado Move toolmoviéndolo hacia arriba o hacia abajo y decidir el tamaño que va a mostrar mostrando menos o más.

4. Recortarlo, recortarlo muy bien.

Tome Crop tool y seleccione el área de recorte.

Puede acercar y seleccionar el diente de sierra y el relleno adicional con Crop tool y recortar.

Ahora, técnicamente, podrías hacer un cuadrado realmente grande y recortarlo, pero el rectángulo adicional era para que fuera más fácil ver cómo se vería su tamaño.

5. Resultado final.

Y así es como se repetirá.

6. Notas adicionales.

Si desea poner Layer stylescomo Bevel & embosso Inner shadowalgo así, es posible que desee fusionar allí dos formas en una capa antes de hacerlo.

Puede hacerlo seleccionando ambas capas mientras mantiene presionada ctrly luego utilizando las teclas ctrl+ede acceso rápido para fusionarlas en una capa ráster.

Use la herramienta de lápiz en Photoshop y cree una forma similar a una estaca vertical. Guarde el archivo como GIF / PNG / JPG. Su preferencia. (La mía es PNG.) Ajuste su archivo CSS para repetir su imagen.

Puede comenzar con un rectángulo en una nueva capa y luego usar la herramienta de lazo poligonal para cortar un 'triángulo' de su zig-zag. Luego use la herramienta de marco rectangular para cortar esa sección y repetirla en Photoshop o directamente en la página web.

Photoshop puede no ser la mejor herramienta aquí. Eche un vistazo a SnagIt para obtener una herramienta adicional económica que tiene herramientas realmente excelentes para crear bordes.