Sebelum kita mulai melanjutkan tutorial edit atau membuat file image .9.png , sebaiknya kita persiapkan terlebih dahulu beberapa peralatan yang anda perlukan.
Peralatan yang anda perlukan:
1.Aplikasi olah gambar sebagai contohnya paint , adobe photoshop , gimp atau lainnya. Jika anda masih belum mempunyai aplikasi tersebut pada artikel ini saya sertakan link untuk download
Adobe photoshop cs 6 (thx to bagas)
Password:www.bagas31.com
Gimp
Paint
2.Draw 9-patch , aplikasi ini akan anda temukan pada SDK Starter Package anda (android sdk/tools). Draw 9-patch memudahkan anda untuk membuat .9.png dengan menggunakan WYSIWYG editor.
Draw 9-patch
3.xUltimate Draw9Patch Compiler , aplikasi ini akan memudahkan anda untuk melaksanakan compile terhadap file image .9.png yang telah anda edit.
xUltimate d9pc
Catatan: Pastikan anda telah install java untuk menggunakan draw 9-patch
Langkah yang ditempuh
Pada artikel ini akan saya bagi menjadi dua bab yaitu edit .9.png dan membuat file .9.png
Edit .9.png
1.Buka gambar 9-Patch PNG (*.9.png) dengan software olah gambar yang anda miliki , sebagai contohnya photoshop , convert profilenya menjadi Working CMYK (Image>Mode>Pilih CMYK).
2.Edit gambar 9-Patch PNG (*.9.png) sesuai harapan anda di photoshop.
3.Merge visible semua layer menjadi satu layer saja.
5.Convert profilenya menjadi Working RGB (Image>Mode>Pilih RGB)
6.Save dengan nama asli , atau nama berbeda namun file tersebut diberi nama sesuai ekstensi yaitu .9.png sebagai contoh: rakun.9.png
7.Buka lagi file tersebut dengan photoshop , resize canvas size menjadi :
- Width = width asal / awal + 2 pixel misal width asal / awalnya 50 , menjadi 52
- Height = Height asal / awal + 2 pixel misal height asal / awalnya 50 , menjadi 52
- Image Position = pilih center
Anggap saja tiap pixel pelengkap tersebut sebagai 9-Patch Frame dan bukan bab dari gambar. Dan 9-Patch Frame tadi harus transparent.
8.Pada 9-Patch Frame (9PF) tersebut buatlah garis hitam (#00000) tanpa antialias , transparensi , effect , atau apapun dengan keterangan ibarat di bawah ini :
-Pojok harus transparent , tidak boleh ditambahkan apapun.
-Bagian sebelah kiri mengatur semua pixel di sebelah kanan garis kecuali 9PF sebagai pixel yang akan anda stretch secara vertikal (renggang ke atas bawah) , pixel2 yang tidak di sebelah kanan garis tidak akan stretch. Garis atau titiknya boleh lebih dari 1 dan tidak bersambungan (terdapat jeda sebelum titik / garis selanjutnya)
-Bagian atas mengatur semua pixel di bawah garis kecuali 9PF sebagai pixel yang akan stretch secara horizontal (renggang ke kanan kiri) , pixel yang tidak dibawah garis tidak akan stretch. Garis atau titiknya boleh lebih dari 1 dan tidak bersambungan (ada jeda sebelum titik / garis selanjutnya)
-Bagian sebelah kanan mengatur semua pixel di sebelah kiri garisnya kecuali 9PF sebagai parent yang mampu fill oleh object atau goresan pena atau keduanya. Garis atau titiknya tidak boleh lebih dari 1 bersambungan (tidak boleh ada jeda antara titik 1 dengan titik lain)
-Bagian bawah mengatur semua pixel di atas garisnya kecuali 9PF sebagai parent yang mampu fill oleh object atau goresan pena atau keduanya. Garis atau titiknya tidak boleh lebih dari 1 bersambungan (tidak boleh ada jeda antara titik 1 dengan titik lain)
-Perpotongan dari pixel yang di sebelah kanan 9PF kiri dengan yang dibawah 9PF atas akan stretch horizontal dan vertikal (ke atas bawah kiri kanan)
-Perpotongan dari pixel yang di sebelah kiri 9PF kanan dengan yang di atas 9PF bawah akan fill oleh object atau goresan pena nantinya.
-Sisa pixel 9PF yang transparan jangan diisi apapun , biarkan transparan , jangan hingga terkena warna meski cuma opacity 1%.
Jika anda ingin cara yang lebih mudah lakukan saja dengan Draw9Patch di */android-sdk/tools/ , dikarenakan ada preview sehingga akan nampak hasil yang anda edit menjadi ibarat apa. Step ini relatif mudah jikalau anda telah punya Android SDK.
12.Jika tidak terdapat error (xUltimate-d9pc.exe close/exit secara otomatis) berarti anda sukses membuat file 9-Patch PNG.
13.Hasilnya dapat anda lihat pada foleder */done/example1/drawable-mdpi/ di dalam folder xUltimate Draw9Patch Compiler. Garis / titik hitam yang anda buat tadi pasti sudah hilang jikalau benar.
Buat .9.png
Untuk membuat file image .9.png langkah yang anda tempuh hampir sama dengan melaksanakan pengeditan.
1.Buatlah gambar PNG biasa dengan aplikasi olah gambar sebagai contohnya photoshop dengan background transparent , profile Working CMYK
2.Gambar sesuai kebutuhan / harapan anda.
3.Merge visible semua layer jadi 1 layer saja.
4.Crop seukuran canvas , biar tidak ada yang tersisa di luar canvas , alasannya ini mengganggu dan mengakibatkan error saat anda convert menjadi .9.png
5.Convert profilenya dengan Working RGB.
6.Save dengan nama *.9.png
7.Lakukan ibarat langkah no 7-13 pada tutorial edit .9.png di atas.
Beberapa yang perlu anda perhatikan dalam edit dan buat .9.png
Dalam melaksanakan pengeditan atau membuat .9.png yang perlu anda perhatikan yaitu saat anda final mengedit gambar , anda dapat membukanya di alat draw9patch untuk memverifikasi bahwa gambar tersebut dapat membentang dengan benar.
Berikut yaitu bab paling penting dari edit 9.png. Anda perlu mendefinisikan 2 bagian:
* Bagian regangan (sisi kiri dan sisi atas)
* Bagian konten (sisi kanan dan sisi bawah)
Ketika anda final peregangan gambar anda , anda dapat membukanya di alat compiler 9.png untuk mengkompilasi dengan benar. Anda melihat perbatasan 1pixel diciptakan untuk 9.png stretcheable
Untuk mempermudah dalam edit maupun membuat , ada baiknya jikalau anda zoom sehingga ukuran setiap pixel dapat lebih terlihat dengan jelas. Lakukan pengeditan secara cermat.
Jika anda menemukan kesulitan dalam melaksanakan pengeditan atau pembuatan .9.png anda dapat membuka beberapa artikel acuan yang dapat anda cari pada mesin pencari google baik berupa artikel maupun video streaming pada youtube , penjelasan perihal .9.png , menulis komentar pada blog tips droid atau artikel ini dan ini.