SVG ชาโดว์บ็อกซ์: ออกแบบชั้นกระดาษที่เชื่อมกัน

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

คู่มือนี้ใช้ฉากภูเขาสามแผ่นเพื่อสาธิตการออกแบบ SVG และเตรียมไฟล์ เราตรวจเส้นขอบที่บันทึกและเรนเดอร์ในเบราว์เซอร์ ไม่ได้นำเข้า Cricut Design Space หรือตัดกระดาษ ดังนั้นความแข็งแรงสะพาน ค่าตั้งวัสดุ และการประกอบจริงยังต้องทดสอบ

ตัดสินใจว่าแต่ละแผ่นกระดาษมีอะไร

ชั้นความลึก คือแผ่นที่อยู่หน้าหรือหลังอีกแผ่น สีช่วยแยกบนจอได้ แต่หน้าที่มาจากตำแหน่งและรูปทรง การแยก PNG ตามสีไม่ได้กำหนดความสัมพันธ์นี้ สำหรับไวนิลหรือการซ้อนสีแบบแบน ใช้คู่มือ SVG หลายเลเยอร์สำหรับ Cricut แยกต่างหาก

เนื้อวัสดุที่เก็บ คือกระดาษที่ตั้งใจเหลือไว้ ช่องตัดออก คือช่องที่เอาออก สะพาน คือแถบเนื้อวัสดุที่เชื่อมรายละเอียดกับส่วนอื่นของแผ่น เกาะลอย คือวัสดุที่เก็บไว้แต่ไม่เชื่อมกับแผ่นนั้น

ในตัวอย่างด้านล่าง แผ่นหลังมีภูเขาและดวงจันทร์ แผ่นกลางมีต้นไม้และพื้น แผ่นหน้าเพิ่มเนินเตี้ย ทุกแผ่นมีกรอบนอก และรายละเอียดที่เก็บทุกชิ้นเชื่อมกับกรอบ

ตัวอย่างแบบ SVG ที่บันทึก

สร้างสามชั้นด้วยขอบนอกเดียวกัน

ต้องมีโปรแกรมเวกเตอร์ที่ลบและรวมรูปทรงได้ ลวดลายเรียบง่าย และขนาดกรอบที่ต้องการ เก็บไฟล์หลักที่แก้ได้ก่อนรวมรูป หากมีเวกเตอร์ที่ใช้ได้ ให้เริ่มจากนั้น หากลวดลายมีเพียง PNG หรือ JPG ให้กู้พาธก่อน แล้วออกแบบจุดเชื่อมกระดาษแยก

1. สร้างกรอบหนึ่งอันแล้วทำสำเนา

วัดพื้นที่สำหรับแผ่นภายในกรอบ คำนึงถึงที่ว่างซึ่งแผ่นหลังและตัวคั่นที่วางแผนจะใช้ก่อนเลือกขนาดงานสุดท้าย

ไฟล์ของเราใช้สี่เหลี่ยมนอก 200 × 200 mm พร้อม แถบกรอบ 12 mm ช่องเปิดอยู่ระหว่าง x = 12 ถึง 188 mm และ y = 12 ถึง 188 mm นี่เป็นขนาดตัวอย่าง ไม่ใช่ขนาดพอดีที่แนะนำสำหรับทุกกรอบ

วาดสี่เหลี่ยมนอกและสี่เหลี่ยมเล็กที่กึ่งกลาง ลบรูปเล็กเพื่อสร้างช่อง แล้วทำสำเนากรอบสำหรับสามแผ่น Inkscape อธิบาย Difference ว่าเป็นการลบ และ Union ว่าเก็บเส้นขอบร่วมของพาธที่เลือก ลำดับซ้อนสำคัญใน Difference รูปที่ลบอยู่เหนือรูปที่เก็บ คำสั่งบูลีนของ Inkscape

ใช้จุดกำเนิดหน้าและสี่เหลี่ยมนอกเดียวกันทุกชั้น อย่าครอปแต่ละไฟล์ตามลวดลายของตัวเอง ไฟล์ตัวอย่างทั้งหมดระบุ width="200mm", height="200mm" และ viewBox="0 0 200 200" รูปทรงที่บันทึกมีขอบเขต 200 mm เท่ากัน viewBox ของ SVG กำหนดสี่เหลี่ยมพิกัดที่แมปไปยัง viewport ยืนยันขนาดจริงในแอปปลายทางอีกครั้ง ระบบพิกัด SVG ของ W3C

2. เชื่อมฉากหลังกับกรอบ

วางรูปเงาภูเขาให้ฐานทับแถบกรอบล่าง เพิ่มดวงจันทร์ด้านบน ดวงจันทร์ที่อยู่เดี่ยวในช่องเป็นกระดาษอีกชิ้นที่เก็บ จึงต้องมีจุดเชื่อมอย่างตั้งใจหากอยากให้แผ่นหลังเป็นชิ้นเดียว

ตัวอย่างของเราวางศูนย์กลางดวงจันทร์ที่ x = 145, y = 46 mm พร้อมรัศมีที่ระบุ 14 mm สี่เหลี่ยมแนวตั้งจาก x = 143 ถึง 147 mm เชื่อมไปกรอบบน สี่เหลี่ยมทับทั้งดวงจันทร์และกรอบก่อนรวม

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

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

3. เชื่อมวัตถุชั้นกลางผ่านฐาน

ให้พุ่ม ลำต้น และพื้นเชื่อมกัน ตัวอย่างนี้ลำต้น กว้าง 8 mm จาก x = 56 ถึง 64 mm โดยทับพุ่มกับพื้น และพื้นทับแถบกรอบล่าง รวมรูปเหล่านี้เป็นแผ่นกลาง

ดวงตา ดาว หรือช่องในตัวอักษรอาจเปลี่ยนว่าพื้นที่ใดติดกัน ตรวจรายละเอียดว่าเป็นวัสดุที่เก็บหรือช่องตัดก่อนทำให้ง่ายขึ้น หากช่องถูกเติมโดยไม่คาดหลังส่งออก ใช้คู่มือวิเคราะห์ช่อง SVG และ fill-rule

4. ให้ด้านหน้าเตี้ยพอที่จะเห็นวัตถุหลัก

เพิ่มเนินเตี้ยในกรอบที่สามและรวมกับแถบล่าง จัดสามแผ่นตรงกัน โดยภูเขาหลังต้นไม้และเนินอยู่หน้า

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

ภาพซ้อนบนจอช่วยตรวจความสัมพันธ์รูปที่เห็น ความหนาตัวคั่น มุมมอง แสง และความลึกที่มีในกรอบต้องใช้แบบจำลองจริง

ตรวจจุดเชื่อมวัสดุใน SVG ที่บันทึก

องค์ประกอบพาธเดียวอาจมีหลายรูปที่ไม่เชื่อมกัน นับพาธไม่ได้ทดสอบการเชื่อมต่อ พาธประกอบมีหลายเส้นขอบในอ็อบเจ็กต์พาธเดียว กฎเติมกำหนดว่าพื้นที่ปิดใดถูกเติม ข้อกำหนด SVG นิยามกฎเหล่านี้ รวมถึง evenodd ที่ใช้ในไฟล์เรา การเติมและกฎเติม SVG ของ W3C

เราสร้างแผ่นตัวอย่างด้วยการรวมพื้นที่เนื้อวัสดุ ส่งออกเส้นขอบปิด แล้วสร้างพื้นที่เติมกลับจากข้อมูล SVG ที่บันทึก จึงตรวจรูปทรงส่งออกจริงแทนกองรูปสีที่ทับกัน

ทั้งสี่ไฟล์มีองค์ประกอบพาธเดียว แผ่นที่เชื่อมแต่ละแผ่นมีเส้นขอบปิดสองเส้น คือขอบนอกและขอบช่อง เวอร์ชันดวงจันทร์ลอยมีเส้นที่สามสำหรับดวงจันทร์แยก นี่คือเหตุผลที่ชื่อเลเยอร์ กลุ่ม หรือจำนวนพาธอย่างเดียวบอกไม่ได้ว่าแผ่นที่ต้องการยังเชื่อมกันหรือไม่

สำหรับไฟล์ส่งออกของคุณ:

1. เปิด SVG ที่บันทึกแล้วดูแต่ละแผ่นเดี่ยวด้วยสีเติมธรรมดา
2. ไล่เส้นทางต่อเนื่องผ่านวัสดุที่เก็บจากทุกรายละเอียดไปกรอบ ซูมจุดที่รูปเกือบแตะกัน การแตะเป็นจุดไม่ได้ให้แถบกระดาษที่วัดได้
3. ตรวจเส้นขอบรอบวัตถุที่เชื่อม รวมแนวทับซ้อนที่จะตัดแบ่งวัสดุที่ตั้งใจเก็บ
4. ตรวจช่องในฐานะรูปทรง รูปสีขาวที่ระบายทับอีกรูปอาจดูเหมือนรูโดยไม่ลบเส้นขอบด้านล่าง
5. ประกอบภาพตัวอย่างแบนจากเลเยอร์ที่บันทึกด้วยจุดกำเนิดและขนาดร่วม

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

PerfectVector ช่วยตรงไหนเมื่อลวดลายเป็นภาพราสเตอร์

PerfectVector กู้พาธ SVG ที่แก้ได้จาก PNG หรือ JPG ที่เหมาะสม กระบวนการ SVG สำหรับ Cricut ช่วยดูรูปทรงและปรับสีก่อนเตรียมไฟล์ปลายทาง ใช้ขั้นนี้กับลวดลายราสเตอร์ที่อยากนำกลับมาใช้ ส่วนการสร้างกรอบ สะพาน และลำดับความลึกยังเป็นงานออกแบบแยก

เริ่มจากรูปเงาชัดหรือภาพสีเรียบง่าย ตรวจรูปขอบที่กู้ว่ามีเศษหลงหรือช่องหายก่อนวางในแผ่น คู่มือลายเส้นเป็น SVG อธิบายความต่างระหว่างการลากรูปขอบกับเส้นที่วาดแต่แรก

ภาพถ่ายละเอียดต้องตัดสินใจว่าวัตถุใดอยู่ความลึกใด และรูปใดกลายเป็นกระดาษ ลดรายละเอียดหรือวาดรูปเหล่านั้นใหม่ก่อนวางแผนแผ่น การแยกสีอัตโนมัติไม่ได้ให้แผนประกอบนั้น

ตรวจไฟล์ปลายทางแล้วทดสอบวัสดุ

การตรวจแบบ SVG เสร็จเมื่อขอบนอกตรงกัน พื้นที่ที่ตั้งใจเก็บเชื่อมกัน แนวทับซ้อนถูกเอาออก และภาพซ้อนที่บันทึกเผยรายละเอียดถูกต้อง เก็บรายการเลเยอร์มีลำดับเลขกับไฟล์หลักเพื่อให้ลำดับประกอบชัดเจน

ก่อนทำงานสำเร็จ ให้ตรวจในแอปตัดจริงและกรอบ:

• ขนาดแผ่นนำเข้าตรงตามที่ต้องการ
• ภาพตัวอย่างยังมีช่องและไม่มีรอยตัดภายในที่ไม่ต้องการ
• ทุกแผ่นมีคำสั่งตัดและวัสดุที่ต้องการ
• ตัวอย่างเล็กของสะพานยาวที่สุดอยู่รอดหลังตัด ลอกออกจากแผ่นรอง และจับใช้งาน
• ตัวคั่นที่เลือกพอดีบนวัสดุที่เก็บและไม่โผล่ผ่านช่อง
• ชุดซ้อนที่ประกอบแล้วพอดีกรอบเมื่อใส่แผ่นหลัง

หากนำเข้าแล้วช่องหรือขอบเปลี่ยน ให้กลับรูปทรงที่บันทึกและแก้เส้นขอบนั้น หากสะพานขาดหรืองอ ให้ปรับความกว้าง ความยาว จุดยึด หรือวัสดุแล้วทดสอบใหม่ เรนเดอร์ในเบราว์เซอร์อย่างเดียวตัดสินเรื่องจริงเหล่านี้ไม่ได้ คู่มือเตรียม SVG สำหรับ Cricut ทั่วไป อธิบายการตรวจไฟล์โดยรวม

คำถามที่พบบ่อย

แปลงภาพเป็น SVG ชาโดว์บ็อกซ์อัตโนมัติได้หรือไม่?

การแปลงเวกเตอร์กู้รูปจากภาพได้ แต่ยังต้องเลือกชั้นความลึก จุดเชื่อมกรอบ ช่องตัด และลำดับประกอบ รูปเงาง่ายเป็นจุดเริ่มต้นที่ดี ภาพซับซ้อนอาจต้องลดรายละเอียดหรือวาดใหม่ด้วยมือ

แต่ละแผ่นชาโดว์บ็อกซ์ต้องเป็นพาธ SVG เดียวหรือไม่?

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

สะพานควรกว้างเท่าไร?

เลือกและทดสอบตามวัสดุ ช่วงพาด ขนาดสำเร็จ และกระบวนการตัด สะพานดวงจันทร์ตัวอย่างกว้าง 4 mm แต่เราไม่ได้ตัดหรือทดสอบความแข็งแรง เป็นขนาดตัวอย่าง ไม่ใช่ขั้นต่ำสากล

ชั้นชาโดว์บ็อกซ์เหมือนเลเยอร์สี Cricut หรือไม่?

ชั้นชาโดว์บ็อกซ์เป็นแผ่นในลำดับความลึก ส่วนเลเยอร์สีแยกภาพตามสีหรือวัสดุ แผ่นความลึกอาจมีหลายลวดลายเชื่อมกับกรอบเดียว การแยกลวดลายตามสีอย่างเดียวไม่ได้ออกแบบจุดเชื่อม

แหล่งข้อมูล

1. Inkscape — คำสั่งบูลีน — อธิบาย Union, Difference, Combine และบทบาทของลำดับซ้อน
2. W3C — ระบบพิกัด การแปลง และหน่วย SVG — นิยามสี่เหลี่ยมพิกัดที่แมปผ่าน viewBox
3. W3C — การระบาย SVG — นิยามสีเติม พาธย่อย และกฎ evenodd ที่ใช้ในตัวอย่าง
4. PerfectVector — SVG สำหรับ Cricut — อธิบายการกู้ภาพราสเตอร์ ตรวจรูปทรง และตรวจสอบก่อนตัด

---

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