Como criar um efeito “zig zagged, jagged” com o Photoshop?

Gostaria de criar o efeito de uma linha em zigue-zague na parte inferior (ou superior ou em qualquer aresta) de um retângulo. Também quero usar esta imagem em uma página da Web, portanto, acho que devo fazê-lo para poder repeti-la via CSS.

Não sei se usei um termo correto ou não, então, por favor, me corrija. Esse efeito é chamado de zig-zag? Como posso criá-lo no Photoshop (não no Illustrator)?

Eu provavelmente faria assim:

1. Fazendo um quadrado.

Tome um Rectangle tool com Shape layersativado.

Faça um quadrado enquanto mantém Shiftpressionado o botão para garantir que seja um quadrado perfeito.

(Nesse caso, o tamanho não importa (hah ..). Vou fazer um pouco maior do que o tamanho de dente de serra que eu quero, mas você pode fazer o tamanho exato imediatamente. Ajuda no corte, se você puder encaixar nas bordas quadrado. No estágio 4. Corte-o, corte-o muito bem. )

2. Girando o quadrado 45 graus

EUA Free transform ctrl+t

Gire o quadrado 45 graus enquanto mantém Shiftpressionado o botão para ativar o encaixe em 45 graus.

3. Faça um retângulo e posicione o quadrado.

Ainda com o Rectangle tool, faça um grande retângulo na parte superior.

Depois disso, você pode posicionar o quadrado Move toolmovendo-o para cima ou para baixo e decidir o tamanho, mostrando menos ou mais.

4. Cortar, Cortar muito bem.

Tire Crop tool e selecione a área de corte.

Você pode ampliar e selecionar o dente de serra e o preenchimento adicional com Crop tool e cortar.

Agora, tecnicamente, você poderia simplesmente fazer quadrados grandes e cortar isso, mas o retângulo adicional era para facilitar a visualização de como seria o tamanho dele.

5. Resultado final.

E é assim que se repetirá.

6. Notas adicionais.

Se você quiser colocar Layer stylescomo Bevel & embossou Inner shadowou algo parecido, você pode querer fundir lá duas formas em uma camada antes de fazer isso.

Você pode fazer isso selecionando as duas camadas enquanto mantém pressionado ctrle usando as teclas ctrl+ede atalho para mesclá-las em uma camada raster.

Use a ferramenta caneta no Photoshop e crie uma forma semelhante a uma estaca vertical. Salve o arquivo como GIF / PNG / JPG. Sua preferência. (O meu é PNG.) Ajuste seu arquivo CSS para repetir sua imagem.

Você pode começar com um retângulo em uma nova camada e usar a ferramenta laço poligonal para cortar um 'triângulo' do seu zig-zag. Em seguida, use a ferramenta de letreiro retangular para recortar essa seção e repita-a no Photoshop ou diretamente na página da web.

O Photoshop pode não ser a melhor ferramenta aqui. Confira o SnagIt para obter uma ferramenta adicional barata que possui ótimas ferramentas de criação de bordas.