PerfectVector
Oleh Irene Kim

SVG Shadow Box: Rancang Layer Kertas yang Terhubung

Rancang SVG shadow box berlayer dengan bingkai selaras, bentuk kertas terhubung, dan urutan tumpukan terperiksa. Lihat perubahan geometri akibat bulan terlepas.

10 menit baca
Di halaman ini

Untuk membuat SVG berlayer bagi shadow box, rancang setiap lapisan kedalaman sebagai panel terhubung: bingkai, gambar yang termasuk kedalaman tersebut, dan geometri penghubung yang cukup untuk menjaga kertas yang dimaksud tetap menyatu. Beri setiap panel dimensi luar yang sama, gabungkan bentuk bahan yang bertumpang tindih, lalu periksa bagian yang disembunyikan panel depan.

Panduan ini memakai pemandangan gunung tiga panel untuk menunjukkan desain SVG dan persiapan berkas. Kami memeriksa kontur tersimpan dan merendernya di browser. Kami tidak mengimpor berkas ini ke Cricut Design Space atau memotong kertas, sehingga kekuatan jembatan, pengaturan bahan, dan perakitan fisik masih perlu diuji.

Tentukan isi setiap panel kertas

Lapisan kedalaman adalah satu panel yang ditempatkan di depan atau belakang panel lain. Warnanya dapat membantu identifikasi di layar, tetapi tugas panel berasal dari posisi dan bentuknya. Memisahkan PNG berdasarkan warna tidak menentukan hubungan tersebut. Untuk vinil atau tumpukan warna datar, gunakan panduan SVG berlayer untuk Cricut yang terpisah.

Bahan positif berarti kertas yang ingin Anda pertahankan. Potongan kosong adalah bukaan yang dihilangkan. Jembatan adalah pita bahan positif yang menghubungkan detail dengan bagian lain panelnya. Pulau terlepas adalah bahan yang dipertahankan tanpa hubungan dengan panel tersebut.

Pada contoh di bawah, panel belakang memuat gunung dan bulan. Panel tengah membawa pohon dan tanah. Panel depan menambahkan tepian tanah rendah. Setiap panel memiliki bingkai luar, dan setiap detail yang dipertahankan terhubung dengannya.

Contoh desain SVG tersimpan
Render browser tiga panel SVG 200 mm yang terhubung, contoh pembanding bulan terlepas, dan tumpukan datarnya yang selaras
Ketiga panel masing-masing berisi satu area positif terhubung. Versi bulan terlepas berisi dua. Tumpukan datar menunjukkan bentuk yang menutupi bentuk lain; tidak menyimulasikan kekuatan kertas atau kedalaman fisik.

Buat tiga lapisan dengan batas luar bersama

Anda memerlukan editor vektor dengan pengurangan dan union bentuk, motif sederhana, serta ukuran bingkai yang dituju. Simpan master yang dapat diedit sebelum menggabungkan bentuk. Jika sudah memiliki desain vektor yang dapat digunakan, mulailah dari sana. Jika motif hanya berupa PNG atau JPG, pulihkan path-nya dahulu, lalu rancang hubungan kertas secara terpisah.

1. Buat satu bingkai dan duplikatkan

Ukur ruang yang tersedia untuk panel di dalam bingkai. Perhitungkan ruang yang akan ditempati alas belakang dan spacer yang direncanakan sebelum memilih ukuran proyek akhir.

Berkas kami memakai persegi luar 200 × 200 mm dengan pita bingkai 12 mm. Bukaan membentang dari x = 12 hingga 188 mm dan y = 12 hingga 188 mm. Ini dimensi contoh, bukan rekomendasi ukuran untuk semua bingkai.

Gambar persegi luar dan persegi kecil di tengah. Kurangkan persegi kecil untuk membuat bukaan, lalu duplikat bingkai itu bagi ketiga panel. Inkscape mendokumentasikan Difference sebagai pengurangan dan Union sebagai cara mempertahankan garis luar bersama dari path terpilih. Urutan tumpukan penting untuk Difference: bentuk yang dikurangkan berada di atas bentuk yang dipertahankan. Operasi Boolean Inkscape

Gunakan titik asal halaman dan persegi luar yang sama pada setiap lapisan. Jangan memangkas setiap ekspor mengikuti motifnya masing-masing. Semua berkas contoh mendeklarasikan width="200mm", height="200mm", dan viewBox="0 0 200 200"; geometri tersimpannya memiliki batas 200 mm yang sama. viewBox SVG menentukan persegi panjang koordinat yang dipetakan ke viewport-nya. Pastikan kembali dimensi fisik dalam aplikasi tujuan. Sistem koordinat SVG W3C

2. Hubungkan pemandangan belakang ke bingkainya

Tempatkan siluet gunung sehingga alasnya menumpang tindih dengan pita bingkai bawah. Tambahkan bulan di atasnya. Bulan yang berdiri sendiri di dalam bukaan merupakan bagian kertas terpisah yang dipertahankan, sehingga perlu hubungan yang disengaja jika panel belakang harus tetap satu bagian.

Dalam contoh kami, pusat bulan berada pada x = 145, y = 46 mm, dengan radius nominal 14 mm. Persegi panjang vertikal dari x = 143 hingga 147 mm menghubungkannya ke bingkai atas. Persegi panjang itu menumpang tindih dengan bulan dan bingkai sebelum union.

Lakukan Union pada bingkai, gunung, bulan, dan jembatan. Periksa garis luar hasilnya. Batas tumpang tindih antarobjek asli seharusnya hilang; jangan sampai tetap menjadi kontur potong internal tambahan.

Jembatan contoh memiliki lebar 4 mm. Angka itu menjelaskan berkas yang kami periksa. Angka tersebut tidak menetapkan lebar minimum untuk kertas, bentang, mesin, atau ukuran jadi Anda. Buat uji kecil memakai bahan dan geometri yang Anda rencanakan.

3. Hubungkan subjek tengah melalui alasnya

Jaga tajuk pohon, batang, dan tanah tetap terhubung. Dalam contoh ini, batang memiliki lebar 8 mm, dari x = 56 hingga 64 mm. Batang bertumpang tindih dengan tajuk dan tanah, dan tanah bertumpang tindih dengan pita bingkai bawah. Gabungkan bentuk-bentuk itu dengan Union menjadi panel tengah.

Mata, bintang, atau lubang huruf dapat mengubah area yang tetap tersambung. Tinjau detail tersebut sebagai bahan positif atau potongan kosong sebelum menyederhanakannya. Jika bukaan tiba-tiba terisi setelah ekspor, ikuti diagnosis lubang SVG dan fill-rule.

4. Jaga latar depan cukup rendah agar subjek terlihat

Tambahkan tepian tanah rendah ke bingkai ketiga dan gabungkan ke pita bawah. Selaraskan ketiga panel, dengan gunung di belakang pohon dan tepian tanah di depan.

Oklusi berarti satu bentuk menyembunyikan bentuk lain dari arah pandang. Dalam tumpukan datar kami, pohon menutupi sebagian gunung, dan tepian tanah menutupi alas pohon. Bulan tetap terlihat. Jika tepian tanah menyembunyikan tajuk pohon atau detail fokus lain, turunkan tepian atau pindahkan subjek sebelum mengekspor.

Tumpukan di layar membantu memeriksa hubungan bentuk yang terlihat. Ketebalan spacer, sudut pandang, pencahayaan, dan kedalaman yang tersedia dalam bingkai memerlukan maket fisik.

Periksa sambungan bahan pada SVG tersimpan

Satu elemen path dapat berisi beberapa bentuk yang tidak terhubung. Menghitung path bukan pengujian keterhubungan. Path gabungan memuat beberapa kontur dalam satu objek path; aturan fill-nya menentukan area tertutup mana yang terisi. Spesifikasi SVG mendefinisikan aturan ini, termasuk evenodd yang dipakai dalam berkas kami. Fill dan aturan fill SVG W3C

Kami membuat panel contoh dengan menggabungkan area positifnya, mengekspor kontur tertutup, dan merekonstruksi area berisi dari data SVG tersimpan. Cara ini memeriksa geometri hasil ekspor sebenarnya, bukan tumpukan bentuk berwarna yang saling menutupi.

Berkas tersimpanArea positif terhubungYang dibuktikan pemeriksaan
Belakang: gunung, bulan, jembatan1Bulan tersambung ke bingkai melalui jembatan
Tengah: pohon dan tanah1Tajuk, batang, tanah, dan bingkai membentuk satu area
Depan: tepian tanah rendah1Tepian tanah tersambung ke bingkai
Belakang tanpa jembatan2Bulan menjadi pulau positif terpisah

Keempat berkas berisi satu elemen path. Masing-masing panel terhubung memiliki dua kontur tertutup: batas luar dan batas bukaan. Versi bulan terlepas memiliki kontur ketiga untuk bulan tersendiri. Karena itulah nama layer, grup, atau jumlah path saja tidak dapat menunjukkan apakah lembar yang dimaksud tetap terhubung.

Untuk ekspor Anda sendiri:

  1. Buka kembali SVG tersimpan dan lihat setiap panel sendiri dengan fill polos.
  2. Telusuri rute kontinu melalui bahan yang dipertahankan dari setiap detail ke bingkai. Perbesar tempat bentuk hampir bertemu; kontak satu titik tidak memberikan pita kertas yang dapat diukur.
  3. Periksa kontur di sekitar objek yang digabung. Gabungkan garis pertemuan tumpang tindih yang akan membelah bahan yang ingin dipertahankan.
  4. Periksa bukaan sebagai geometri. Bentuk putih yang dicat di atas bentuk lain dapat terlihat seperti lubang tanpa menghilangkan kontur di bawahnya.
  5. Susun kembali pratinjau datar dari lapisan tersimpan memakai titik asal dan dimensi bersama.

Jika detail tetap terisolasi, tambahkan dan gabungkan jembatan, pindahkan detail ke bahan yang terhubung, jadikan potongan kosong, atau rencanakan sebagai bagian yang ditempel terpisah. Nyatakan pilihan itu dengan jelas dalam rencana perakitan.

Peran PerfectVector saat motif berupa gambar raster

PerfectVector dapat memulihkan path SVG yang dapat diedit dari desain PNG atau JPG yang sesuai. Alur SVG untuk Cricut mendukung pratinjau bentuk dan penyempurnaan warnanya sebelum menyiapkan berkas tujuan. Gunakan langkah itu untuk motif raster yang ingin dipakai kembali; konstruksi bingkai, jembatan, dan urutan kedalaman tetap menjadi pekerjaan desain terpisah.

Mulailah dengan siluet tegas atau ilustrasi datar sederhana. Periksa outline hasil pemulihan untuk fragmen liar dan bukaan hilang sebelum menempatkannya dalam panel. Panduan gambar garis ke SVG menjelaskan perbedaan antara hasil jiplakan ber-outline dan garis yang semula Anda gambar.

Foto mendetail memerlukan keputusan tentang objek yang berada pada tiap kedalaman dan bentuk yang menjadi kertas. Sederhanakan atau gambar ulang bentuk itu sebelum merencanakan panel. Pemisahan warna otomatis tidak memberikan rencana perakitan tersebut.

Periksa berkas tujuan, lalu uji bahan

Pemeriksaan desain SVG selesai ketika batas luar cocok, area yang dipertahankan terhubung, garis pertemuan tumpang tindih dihilangkan, dan tumpukan tersimpan menampilkan detail yang benar. Simpan daftar lapisan bernomor bersama master agar urutan perakitan jelas.

Sebelum membuat proyek akhir, periksa hal berikut dalam aplikasi pemotongan dan bingkai sebenarnya:

  • Dimensi panel hasil impor sesuai ukuran yang dituju.
  • Pratinjau mempertahankan bukaan dan tidak memiliki potongan internal yang tidak diinginkan.
  • Setiap panel memiliki operasi pemotongan serta penetapan bahan yang dimaksud.
  • Sampel kecil jembatan terpanjang bertahan saat dipotong, dilepas dari mat, dan ditangani.
  • Spacer pilihan Anda pas pada bahan yang dipertahankan dan tidak terlihat melalui bukaan.
  • Tumpukan rakitan muat di bingkai dengan alas belakang terpasang.

Jika impor mengubah bukaan atau outline, kembali ke geometri tersimpan dan perbaiki kontur tersebut secara spesifik. Jika jembatan robek atau melengkung, revisi lebar, panjang, sambungan, atau bahannya dan uji lagi. Render browser saja tidak dapat menjawab persoalan fisik tersebut. Panduan umum persiapan SVG Cricut membahas pemeriksaan berkas yang lebih luas.

Tanya jawab

Bisakah saya mengubah gambar menjadi SVG shadow box secara otomatis?

Vektorisasi dapat memulihkan bentuk dari gambar, tetapi Anda tetap perlu memilih lapisan kedalaman, sambungan bingkai, potongan kosong, dan urutan perakitan. Siluet sederhana adalah titik awal yang berguna. Foto rumit mungkin perlu disederhanakan atau digambar ulang secara manual.

Apakah setiap panel shadow box harus berupa satu path SVG?

Satu path dapat berisi pulau positif yang tidak terhubung. Periksa area yang dipertahankan dan kontur sebenarnya, bukan mengandalkan jumlah path. Dalam contoh kami, panel belakang terhubung maupun contoh pembanding bulan terlepas sama-sama berisi satu elemen path.

Seberapa lebar jembatan seharusnya?

Pilih dan uji sesuai bahan, bentang, ukuran akhir, dan alur pemotongan Anda. Jembatan bulan yang ditunjukkan selebar 4 mm, tetapi kami tidak memotong atau menguji kekuatannya. Itu dimensi contoh, bukan minimum universal.

Apakah lapisan shadow box sama dengan layer warna Cricut?

Lapisan shadow box adalah panel dalam susunan kedalaman. Layer warna memisahkan desain menurut warna atau bahan. Panel kedalaman dapat mencakup beberapa motif yang terhubung ke satu bingkai; memisahkan motif itu hanya menurut warna tidak merancang sambungannya.

Sumber

  1. Inkscape — Operasi Boolean — Mendokumentasikan Union, Difference, Combine, dan peran urutan tumpukan.
  2. W3C — Sistem Koordinat, Transformasi, dan Unit SVG — Mendefinisikan persegi panjang koordinat yang dipetakan melalui viewBox.
  3. W3C — Pewarnaan SVG — Mendefinisikan fill, subpath, dan aturan fill evenodd yang dipakai contoh.
  4. PerfectVector — SVG untuk Cricut — Menjelaskan pemulihan desain raster, peninjauan bentuk, dan pemeriksaan sebelum pemotongan.

Jika motif Anda bermula sebagai PNG atau JPG, siapkan path SVG-nya dengan PerfectVector, lalu periksa outline dan bukaannya. Buat sambungan bingkai serta lapisan kedalaman di editor, buka kembali panel tersimpan, dan uji sampel bahan kecil sebelum membuat shadow box akhir.

Lebih banyak dari blog

PerfectVector

Siapkan path SVG yang rapi untuk
pemotongan dan produksi

Tanpa kartu kredit