Come creare un effetto "zig zagged, jagged" con Photoshop?

Vorrei creare l'effetto di una linea a zig-zag nella parte inferiore (o superiore o qualsiasi bordo) di un rettangolo. Voglio anche usare questa immagine su una pagina web, quindi penso che dovrei farlo in modo tale da poterlo ripetere tramite CSS.

Non so se ho usato un termine corretto o no, quindi per favore correggimi. Questo effetto si chiama zig-zag? Come posso crearlo in Photoshop (non Illustrator)?

Molto probabilmente lo farei così:

1. Fare un quadrato.

Prendi un Rectangle tool con Shape layersabilitato.

Crea un quadrato tenendo premuto il Shiftpulsante per assicurarti che sia un quadrato perfetto.

(In questo caso le dimensioni non contano (ah .. quadrato. Nella fase 4. Ritaglialo, Ritaglialo davvero bene. )

2. Ruotando il quadrato di 45 gradi

Stati Uniti d'America Free transform ctrl+t

Ruota il quadrato di 45 gradi tenendo premuto il Shiftpulsante per consentire lo scatto a 45 gradi.

3. Crea un rettangolo e posiziona il quadrato.

Sempre con il Rectangle tool, fai un grande rettangolo in alto.

Dopodiché puoi posizionare il quadrato Move toolspostandolo verso l'alto o verso il basso e decidere la dimensione che sarà mostrandone meno o più.

4. Ritaglialo, ritaglialo davvero bene.

Prendi Crop tool e seleziona l'area di ritaglio.

Puoi ingrandire e selezionare il dente di sega e il riempimento aggiuntivo con Crop tool e ritagliare.

Ora, tecnicamente potresti semplicemente fare un quadrato davvero grande e ritagliarlo, ma il rettangolo aggiuntivo era per rendere più facile vedere come sarebbe stata la sua dimensione.

5. Risultato finale.

Ed è così che si ripeterà.

6. Note aggiuntive.

Se si vuole mettere Layer stylescome Bevel & embosso Inner shadowo qualcosa del genere, si potrebbe desiderare di unire ci sono due forme in un unico livello prima di farlo.

Puoi farlo selezionando entrambi i livelli mentre tieni premuto ctrle quindi usando i tasti ctrl+edi scelta rapida per unirli in un livello raster.

Usa lo strumento penna in Photoshop e crea una forma simile a un palo verticale. Salva il file come GIF / PNG / JPG. Le tue preferenze (il mio è PNG.) Regola il tuo file CSS per ripetere la tua immagine.

Potresti iniziare con un rettangolo su un nuovo livello, quindi utilizzare lo strumento Lazo poligonale per ritagliare un "triangolo" del tuo zig-zag. Quindi utilizza lo strumento selezione rettangolare per ritagliare quella sezione e ripeterla in Photoshop o direttamente sulla pagina Web.

Photoshop potrebbe non essere lo strumento migliore qui. Dai un'occhiata a SnagIt per uno strumento aggiuntivo economico che ha strumenti davvero eccezionali.