Editor 9 Patch - Alat WYSIWYG daring untuk membuat gambar 9 patch
Editor 9 Patch adalah alat WYSIWYG daring yang mirip dengan yang ada di Android Studio. Alat ini memungkinkan Anda membuat gambar bitmap yang secara otomatis mengubah ukuran untuk menyesuaikan konten tampilan dan ukuran layar. Anda dapat menskalakan bagian gambar yang dipilih secara horizontal atau vertikal berdasarkan indikator yang digambar di dalam gambar.
Cara menggunakan
Ikuti langkah-langkah ini untuk membuat grafik NinePatch menggunakan Editor 9 Patch. Anda akan membutuhkan gambar yang ingin Anda jadikan gambar NinePatch.
- Klik tombol Pilih gambar atau seret gambar yang ingin Anda jadikan gambar NinePatch ke editor.
Di ruang kerja yang terbuka, panel tengah adalah area menggambar Anda, di mana Anda dapat mengedit garis untuk patch yang dapat diregangkan dan area konten. Panel kanan adalah area pratinjau, di mana Anda dapat melihat pratinjau grafik Anda saat diregangkan.
- Ubah nama gambar untuk gambar NinePatch Anda. Gambar Anda akan disimpan dengan ekstensi file .9.png.
- Klik di dalam perimeter 1 piksel untuk menggambar garis yang menentukan patch yang dapat diregangkan dan (opsional) area konten.
- Setelah selesai, klik tombol Simpan gambar untuk menyimpan perubahan Anda.
Gambar 1. Editor 9 Patch menampilkan gambar NinePatch.
Untuk memastikan bahwa grafik NinePatch Anda menskalakan dengan benar, verifikasi bahwa setiap area yang dapat diregangkan minimal berukuran 2x2 piksel. Jika tidak, area tersebut mungkin hilang saat diperkecil. Untuk menghindari interpolasi selama penskalaan yang dapat menyebabkan warna di batas berubah, berikan 1 piksel ruang aman tambahan dalam grafik sebelum dan sesudah area yang dapat diregangkan.
Catatan: File PNG normal (*.png) dimuat dengan batas 1 piksel kosong ditambahkan di sekitar gambar. Anda dapat menggambar patch yang dapat diregangkan dan area konten di dalam batas. File NinePatch yang sebelumnya disimpan (*.9.png) dimuat apa adanya, tanpa area menggambar ditambahkan karena sudah ada.
Kontrol opsional
- Zoom: Sesuaikan tingkat zoom grafik di area menggambar.
- Skala patch: Sesuaikan skala gambar di area pratinjau.
- Tampilkan kunci: Visualisasikan area yang tidak dapat digambar dari grafik saat mouse di atasnya.
- Tampilkan patch: Pratinjau patch merah muda yang dapat diregangkan di area menggambar. Merah muda menunjukkan patch yang dapat diregangkan, seperti yang ditunjukkan pada gambar 2.
- Tampilkan konten: Sorot area konten di gambar pratinjau. Ungu menunjukkan area di mana konten diizinkan, seperti yang ditunjukkan pada gambar 2.
- Tampilkan patch buruk: Menambahkan batas merah di sekitar area patch yang mungkin menghasilkan artefak dalam grafik saat diregangkan, seperti yang ditunjukkan pada gambar 2. Jika Anda menghilangkan semua patch buruk, Anda akan mempertahankan koherensi visual gambar yang diregangkan Anda.
Gambar 2. Gambar NinePatch di editor menampilkan konten, patch, dan patch buruk.