วิธีการสร้างเอฟเฟกต์“ zig zagged, jagged” ด้วย Photoshop?

ฉันต้องการสร้างผลของเส้นซิกแซกที่ด้านล่าง (หรือด้านบนหรือขอบใด ๆ ) ของสี่เหลี่ยม ฉันต้องการใช้ภาพนี้ในหน้าเว็บด้วยดังนั้นฉันคิดว่าฉันควรทำเช่นนี้เพื่อให้ฉันสามารถทำซ้ำได้ผ่าน CSS

ฉันไม่รู้ว่าฉันใช้คำที่ถูกต้องหรือไม่ดังนั้นโปรดแก้ไขให้ถูกต้อง ผลกระทบนี้เรียกว่าซิกแซกหรือไม่ ฉันจะสร้างมันใน Photoshop ได้อย่างไร (ไม่ใช่ Illustrator)

ฉันมักจะทำเช่นนี้:

1. ทำตาราง

ใช้เวลาRectangle tool กับShape layersเปิดใช้งาน

สร้างสี่เหลี่ยมในขณะที่กดShiftปุ่มค้างไว้เพื่อให้แน่ใจว่าเป็นสี่เหลี่ยมที่สมบูรณ์แบบ

(ในกรณีนี้ขนาดไม่สำคัญ (hah .. ). ฉันจะทำให้ใหญ่กว่าขนาดฟันเลื่อยที่ฉันต้องการเพียงเล็กน้อย แต่คุณสามารถทำให้ขนาดที่แน่นอนได้ทันทีช่วยด้วยการครอบตัดถ้าคุณสามารถชิดขอบของ สี่เหลี่ยมในขั้นตอนที่4 ครอปมันคร็อปได้ดีจริง ๆ )

2. หมุนสแควร์ 45 องศา

สหรัฐอเมริกา Free transform ctrl+t

หมุนสี่เหลี่ยม 45 องศาในขณะที่กดShiftปุ่มค้างไว้เพื่อเปิดใช้งานการจัดชิดขอบที่ 45 องศา

3. ทำสี่เหลี่ยมผืนผ้าและจัดตำแหน่งสี่เหลี่ยม

ยังกับRectangle toolทำสี่เหลี่ยมผืนผ้าขนาดใหญ่ที่ด้านบน

หลังจากนั้นคุณสามารถจัดตำแหน่งสี่เหลี่ยมด้วยการMove toolเลื่อนขึ้นหรือลงและตัดสินใจขนาดของมันโดยการแสดงให้น้อยลง

4. ครอบตัดมันครอบตัดจริงดี

ใช้Crop tool และเลือกพื้นที่การปลูกพืช

คุณสามารถซูมเข้าไปในฟันเลื่อยที่เลือกและเติมเพิ่มเติมด้วยCrop tool และครอบตัด

ตอนนี้ทางเทคนิคคุณสามารถสร้างสี่เหลี่ยมจัตุรัสขนาดใหญ่และครอบตัดได้ แต่สี่เหลี่ยมเพิ่มเติมคือทำให้ง่ายต่อการดูว่าขนาดของมันจะเป็นอย่างไร

5. ผลลัพธ์ที่ได้

และนี่คือวิธีที่จะทำซ้ำ

6. หมายเหตุเพิ่มเติม

ถ้าคุณต้องการใส่Layer stylesแบบBevel & embossหรือInner shadowอะไรทำนองนั้นคุณอาจต้องการรวมสองรูปร่างเข้าด้วยกันเป็นหนึ่งเลเยอร์ก่อนทำเช่นนั้น

คุณสามารถทำได้โดยเลือกทั้งสองเลเยอร์ในขณะที่กดค้างไว้ctrlแล้วใช้ปุ่มลัดctrl+eเพื่อรวมเข้าไปในเลเยอร์แรสเตอร์หนึ่งชั้น

ใช้เครื่องมือปากกาใน Photoshop และสร้างรูปร่างคล้ายกับเสาเข็มแนวตั้ง บันทึกไฟล์เป็น GIF / PNG / JPG การตั้งค่าของคุณ (Mine คือ PNG) ปรับไฟล์ CSS ของคุณเพื่อทำซ้ำภาพของคุณ

คุณสามารถเริ่มต้นด้วยสี่เหลี่ยมผืนผ้าบนเลเยอร์ใหม่แล้วใช้เครื่องมือรูปหลายเหลี่ยมเพื่อตัด 'สามเหลี่ยม' หนึ่งรูปหนึ่งของซิกแซกออกมา จากนั้นใช้เครื่องมือปะรำสี่เหลี่ยมเพื่อตัดส่วนนั้นแล้วทำซ้ำใน Photoshop หรือบนหน้าเว็บโดยตรง

Photoshop อาจไม่ใช่เครื่องมือที่ดีที่สุดที่นี่ ตรวจสอบSnagItสำหรับเครื่องมือเพิ่มเติมราคาไม่แพงที่มีเครื่องมือสร้างขอบที่ยอดเยี่ยมจริงๆ