Untuk menyertakan garis luar tanpa mengubah dimensi PNG aset game, sisakan ruang untuk garis tersebut di dalam artboard berukuran tetap. Di Affinity pada Mac, muat seluruh karya seni yang diberi garis tepi ke dalam batas tersebut, lalu ekspor artboard bernama dengan ukuran piksel yang diperlukan.

Alur kerja ini ditujukan bagi seseorang yang menyiapkan aset game vektor kecil, seperti ikon geometris berukuran 32 × 32 px. Alur ini menggunakan kontrol Pusat Bantuan desktop Affinity saat ini. Affinity Designer 2 memiliki ruang kerja ekspor terpisah bernama Export Persona; dokumentasi Affinity saat ini menyebutnya Slice Studio. Alur kerja utama di bawah ini menggunakan dialog Ekspor desktop saat ini. Dokumentasi ekspor Affinity saat ini, Dokumentasi Export Persona Designer 2.

Apa yang dapat tetap sama saat Anda menambahkan garis luar?

Pisahkan tiga ukuran sebelum mengedit: dimensi bentuk, karya seni yang terlihat beserta garisnya, dan dimensi piksel gambar hasil ekspor. Panel Stroke Affinity menempatkan garis di tengah, di dalam, atau di luar tepi objek. Pilihan perataan tersebut menentukan ruang yang ditempati garis tepi. Panel Stroke.

Garis luar memerlukan ruang di luar bentuk asli. Jika bentuk sudah memenuhi batas keluaran, mempertahankan seluruh garis mengharuskan adanya perubahan di suatu tempat: perkecil atau ubah bentuk karya seni, gunakan ruang transparan yang tersedia, atau skalakan seluruh komposisi agar muat dalam ukuran keluaran yang diperlukan. Mempertahankan posisi tepi asli, seluruh garis luar, dan batas keluaran yang sama secara geometris mustahil jika garis melampaui batas tersebut.

Affinity menetapkan batas yang tegas untuk artboard: objek yang melewati artboard akan terpotong di tepinya. Karena itu, artboard dapat menjaga ukuran ekspor tetap, tetapi tidak dapat mempertahankan bagian garis yang berada di luar batas tersebut. Tentang artboard.

Dokumentasi ekspor resmi menjelaskan cara memilih area ekspor dan mengubah lebar serta tinggi keluaran. Dokumentasi itu tidak menjelaskan tombol untuk menyertakan garis luar yang melampaui batas sambil mempertahankan skala karya seni asli dan batas gambar tetap. Pendekatan yang didukung adalah menyesuaikan karya seni yang terlihat agar muat di dalam area ekspor yang dipilih. Dialog Ekspor, Pengaturan Ekspor.

Persyaratan Anda Pendekatan yang sesuai Hal yang berubah
Mempertahankan garis luar sungguhan dan dimensi PNG yang tepat Sisipkan bentuk ke dalam artboard tetap Ukuran bentuk atau ruang kosong yang tersedia
Mempertahankan batas bentuk yang ada sebagai batas luar yang terlihat Gunakan garis yang diratakan ke dalam, jika sesuai Penempatan garis tepi dan area isian yang terlihat
Mempertahankan proporsi seluruh komposisi dan memaksakan ukuran keluaran target Ubah ukuran gambar hasil ekspor Skala karya seni dalam piksel hasil ekspor
Mempertahankan seluruh karya seni pada skala aslinya tanpa ruang yang tersedia Perbesar area keluaran Dimensi ekspor; ini tidak memenuhi persyaratan ukuran tetap

Bagaimana cara menyesuaikan garis luar agar muat dalam ekspor 32 × 32 px?

Contoh berikut menggunakan persegi sumbu-selaras sebagai ilustrasi, dengan garis luar seragam selebar 2 px. Contoh ini sengaja tidak menggunakan efek, garis dengan lebar bervariasi, atau detail sudut yang menonjol agar perhitungan ruangnya jelas.

Untuk persegi ini, lebar yang terlihat adalah lebar bentuk ditambah satu lebar garis pada setiap sisi. Jadi, keluaran 32 px memungkinkan lebar bentuk 32 − 2 − 2 = 28 px. Perhitungan yang sama menghasilkan tinggi 28 px. Dengan menempatkan bentuk tersebut di tengah, tersedia ruang 2 px antara tepi dasarnya dan setiap tepi artboard; garis luar menempati ruang itu.

1. Tetapkan area keluaran tetap

Di Vector Studio, pilih File > New. Atur Document units ke piksel, Page width dan Page height ke 32 px, lalu aktifkan Artboards. Aktifkan Transparent background jika aset memerlukan area sekitar yang transparan. Untuk contoh ini, gunakan 72 DPI, lalu klik Create Document. Kontrol dokumen ini dijelaskan dalam bantuan pembuatan dokumen baru Affinity. Membuat dokumen baru.

Jika Anda menambahkan artboard ekspor khusus ke dokumen yang sudah ada, Artboard Tool menyediakan kontrol W dan H untuk artboard baru, kemudian Insert Artboard. Masukkan dimensi piksel yang diperlukan secara eksplisit, alih-alih mengatur ukuran artboard berdasarkan karya seni yang dipilih. Artboard Tool.

2. Atur ukuran bentuk dasar dan tetapkan garisnya

Buat atau pilih persegi. Buka Window > General > Transform, lalu masukkan W: 28 px dan H: 28 px. Panel ini mendukung dimensi yang tepat dan titik jangkar untuk transformasi. Posisikan persegi di tengah, dengan tepi dasarnya berjarak 2 px dari tepi artboard. Panel Transform.

Buka Window > Vector > Stroke. Pilih garis solid, masukkan Width: 2 px, lalu pilih Align Stroke Outside. Untuk contoh sederhana ini, gunakan sambungan bulat. Affinity menjelaskan kontrol perataan, lebar, dan sambungan pada panel Stroke. Panel Stroke.

Saat mengubah ukuran karya seni yang sudah ada, periksa apakah garisnya ikut diskalakan. Scale with Object menentukan apakah lebar garis berubah bersama bentuk tertutup. Panel Transform juga memiliki Scale Override, yang dapat memaksa properti, termasuk lebar garis, untuk diskalakan. Setelah mengubah ukuran, pastikan kembali lebarnya tetap 2 px sesuai yang diinginkan, alih-alih menganggapnya tidak berubah. Kontrol penskalaan garis, Scale Override Transform.

3. Periksa seluruh batas visual

Persegi 28 px beserta garis luarnya kini menempati 32 px di setiap arah. Ini adalah perhitungan geometris untuk contoh yang disebutkan, bukan hasil ekspor yang diukur. Jika Anda menginginkan margin transparan di sekeliling garis tepi, sisakan ruang itu juga: margin 1 px di setiap sisi mengurangi ukuran persegi yang diizinkan menjadi 26 × 26 px.

Jangan menerapkan pengurangan yang sama begitu saja pada setiap aset. Sambungan miter Affinity dapat menonjol di sudut tajam, sementara ujung garis dipengaruhi oleh bentuk tutupnya. Siluet kompleks perlu diperiksa seluruh garis tepinya, terutama di sudut dan titik ujung. Perhitungan lebar sederhana ini merupakan titik awal untuk bentuk beraturan. Sambungan dan tutup garis.

Bagaimana cara mengekspor artboard tanpa mengubah dimensinya?

Pilih File > Export > Export, lalu pilih preset PNG. Atur Area ke artboard bernama. Affinity membedakan pilihan ini dari Selection Area, yang menyertakan lapisan yang bertumpang tindih, dan Selection Only, yang mengecualikan lapisan yang bertumpang tindih tetapi tidak dipilih. Memilih artboard bernama memperjelas area ekspor yang dimaksud. Dialog Ekspor.

Periksa lebar dan tinggi keluaran: keduanya harus 32 px untuk contoh ini. Affinity mengizinkan dimensi alternatif dan menyediakan Lock aspect ratio. Hindari mengubah ukuran keluaran untuk mengatasi karya seni yang masih melampaui artboard; sesuaikan garis tepinya agar muat di dalam batas terlebih dahulu. Pengaturan Ekspor.

Periksa pratinjau ekspor sebelum menyimpan. Di Mac, ⌘1 menampilkan pratinjau pada 100%; ⌘2 menampilkannya pada 200%. Periksa keempat tepi untuk memastikan tidak ada bagian garis yang terpotong dan pastikan margin transparan yang diinginkan tersedia. Kemudian pilih Ask for Location, klik Export, beri nama file, pilih lokasinya, lalu klik Save. Dialog Ekspor dan pintasan pratinjau Mac.

Sebagai pemeriksaan praktis terakhir, buka PNG yang disimpan dan periksa dimensi piksel serta keseluruhan siluetnya. Lebar dan tinggi yang tepat saja tidak membuktikan bahwa garisnya muat: gambar yang terpotong tetap dapat berukuran tepat 32 × 32 px.

Dapatkah slice mempertahankan hasil berukuran tetap yang sama?

Ya, asalkan Anda menetapkan area ekspor dengan cermat. Affinity menjelaskan dua perilaku slice yang berbeda: slice yang dibuat dari item panel Export Layers secara otomatis mengikuti batas item tersebut dan mengekspor konten lapisannya; slice yang digambar secara manual menyertakan konten semua lapisan yang terlihat di dalam areanya. Mengekspor menggunakan Slice Studio.

Untuk wilayah ekspor tetap, pilih Slice Tool di Slice Studio dan seret untuk membuat area di sekeliling karya seni yang telah disiapkan. Gunakan panel pendukung Transform untuk mengatur ukuran dan posisi slice secara tepat. Pilih PNG pada opsi ekspor slice, lalu ekspor slice yang diperlukan. Pastikan seluruh garis tepi berada di dalam persegi panjang slice, sama seperti saat menggunakan artboard. Mengekspor slice.

Periksa resolusi ekspor yang ditampilkan, alih-alih menganggap 1x selalu berarti dimensi piksel dokumen. Affinity menjelaskan hubungan antara skala slice dan DPI dokumen: contoh berukuran 64 × 64 px diekspor dengan ukuran 64 × 64 px pada 1x dengan 72 DPI, tetapi menjadi 32 × 32 px pada 1x dengan 144 DPI. Ini merupakan persoalan pengaturan ukuran yang terpisah dari penempatan garis. Dimensi slice dan DPI.

Apa yang perlu diubah jika hasilnya masih bermasalah?

Gunakan gejalanya untuk memilih perubahan berikutnya:

  • Dimensi PNG sudah benar, tetapi garis tepinya terpotong: pindahkan atau perkecil karya seni sampai seluruh garisnya muat di dalam artboard atau slice.
  • Dimensi PNG berubah saat karya seni diubah: periksa apakah Anda mengekspor pilihan atau slice objek yang ukurannya mengikuti objek secara otomatis. Gunakan artboard bernama atau slice manual berukuran tepat untuk menetapkan batas tetap.
  • Ketebalan garis berubah setelah ukuran diubah: periksa Scale with Object dan Scale Override pada Transform, lalu atur ulang lebar garis yang diinginkan.
  • Garis tepi muat, tetapi aset tampak lebih kecil: periksa apakah lebar dan tinggi ekspor digunakan untuk menskalakan komposisi yang lebih besar agar muat dalam ukuran target.
  • Hanya sudut tajam yang terpotong: periksa gaya sambungan dan perpanjangan miter sebelum mengubah ukuran seluruh komposisi.

Pemeriksaan ini mengikuti perbedaan yang dijelaskan dalam dokumentasi antara pemotongan artboard, batas slice, penskalaan garis, dan pengubahan ukuran ekspor. Masing-masing menangani penyebab yang berbeda; mengubah perataan garis saja tidak akan menyelesaikan setiap masalah ukuran ekspor. Batas artboard, Perilaku slice, Kontrol garis, Dimensi ekspor.

Untuk alur kerja aset game yang dapat diulang, tetapkan batas piksel yang diperlukan terlebih dahulu, lalu sisihkan ruang untuk garis tepi di dalamnya. Pertahankan perataan ke luar jika tampilannya penting, sesuaikan karya seni dasar agar tersedia ruang, lalu ekspor wilayah tetap tersebut. Dengan demikian, dimensi file yang diminta tetap terjaga dan seluruh garis memiliki ruang untuk ditampilkan.

Sumber