Comment créer un effet «zig zagged, jagged» avec Photoshop?

Je voudrais créer l'effet d'une ligne en zigzag en bas (ou en haut, ou n'importe quel bord) d'un rectangle. Je veux également utiliser cette image sur une page Web, donc je pense que je devrais le faire de manière à pouvoir la répéter via CSS.

Je ne sais pas si j'ai utilisé un terme correct ou non, veuillez donc me corriger. Cet effet est-il appelé zig-zag? Comment puis-je le créer dans Photoshop (pas Illustrator)?

Je le ferais très probablement comme ceci:

1. Faire un carré.

Prenez un Rectangle tool avec Shape layersactivé.

Faites un carré tout en maintenant le Shiftbouton pour vous assurer que c'est un carré parfait.

(Dans ce cas, la taille n'a pas d'importance (hah ..). Je vais faire un peu plus grand que la taille en dents de scie que je veux mais, vous pouvez faire la taille exacte tout de suite. Aide au recadrage si vous pouvez vous accrocher aux bords de la à l'étape 4. Recadrez-le, recadrez-le vraiment bien. )

2. Rotation du carré à 45 degrés

Etats-Unis Free transform ctrl+t

Faites pivoter le carré de 45 degrés tout en maintenant le Shiftbouton enfoncé pour activer l'accrochage à 45 degrés.

3.Faites un rectangle et positionnez le carré.

Toujours avec le Rectangle tool, faites un grand rectangle en haut.

Après cela, vous pouvez positionner le carré avec Move toolen le déplaçant vers le haut ou vers le bas et décider de la taille qu'il va être en en montrant moins ou plus.

4. Recadrez-le, recadrez-le vraiment bien.

Prenez Crop tool et sélectionnez la zone de recadrage.

Vous pouvez zoomer et sélectionner la dent de scie et le remplissage supplémentaire avec Crop tool et rogner.

Maintenant, techniquement, vous pouvez simplement créer un très grand carré et le recadrer, mais le rectangle supplémentaire devait permettre de voir plus facilement à quoi ressemblerait sa taille.

5. Résultat final.

Et c'est comme ça que ça va se répéter.

6. Notes supplémentaires.

Si vous souhaitez mettre Layer stylescomme Bevel & embossou Inner shadowou quelque chose comme ça, vous pouvez fusionner deux formes en un seul calque avant de le faire.

Vous pouvez le faire en sélectionnant les deux calques tout en les maintenant ctrlenfoncés puis en utilisant des raccourcis clavier ctrl+epour les fusionner en un calque raster.

Utilisez l'outil Plume dans Photoshop et créez une forme similaire à un piquet vertical. Enregistrez le fichier au format GIF / PNG / JPG. Votre préférence (la mienne est PNG). Ajustez votre fichier CSS pour répéter votre image.

Vous pouvez commencer par un rectangle sur un nouveau calque, puis utiliser l'outil lasso polygonal pour découper un «triangle» de votre zig-zag. Utilisez ensuite l'outil de sélection rectangulaire pour découper cette section et répétez-la dans Photoshop ou directement sur la page Web.

Photoshop n'est peut-être pas le meilleur outil ici. Consultez SnagIt pour un outil supplémentaire peu coûteux qui possède de très bons outils de création de bords.