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 melakukan 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 bagian 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 keinginan 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 tambahan tersebut sebagai 9-Patch Frame dan bukan bagian 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 seperti 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 bisa fill oleh object atau tulisan 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 bisa fill oleh object atau tulisan 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 tulisan nantinya.
-Sisa pixel 9PF yang transparan jangan diisi apapun, biarkan transparan, jangan sampai 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 seperti apa. Step ini relatif mudah jika 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 jika benar.
Buat .9.png
Untuk membuat file image .9.png langkah yang anda tempuh hampir sama dengan melakukan pengeditan.
1.Buatlah gambar PNG biasa dengan aplikasi olah gambar sebagai contohnya photoshop dengan background transparent, profile Working CMYK
2.Gambar sesuai kebutuhan / keinginan anda.
3.Merge visible semua layer jadi 1 layer saja.
4.Crop seukuran canvas, agar tidak ada yang tersisa di luar canvas, karena ini mengganggu dan menyebabkan error ketika anda convert menjadi .9.png
5.Convert profilenya dengan Working RGB.
6.Save dengan nama *.9.png
7.Lakukan seperti langkah no 7-13 pada tutorial edit .9.png di atas.
Beberapa yang perlu anda perhatikan dalam edit dan buat .9.png
Dalam melakukan pengeditan atau membuat .9.png yang perlu anda perhatikan adalah ketika anda selesai mengedit gambar, anda dapat membukanya di alat draw9patch untuk memverifikasi bahwa gambar tersebut dapat membentang dengan benar.
Berikut adalah bagian 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 selesai 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 jika anda zoom sehingga ukuran setiap pixel dapat lebih terlihat dengan jelas. Lakukan pengeditan secara cermat.
Jika anda menemukan kesulitan dalam melakukan pengeditan atau pembuatan .9.png anda dapat membuka beberapa artikel referensi yang dapat anda cari pada mesin pencari google baik berupa artikel maupun video streaming pada youtube, penjelasan tentang .9.png, menulis komentar pada blog tips droid atau artikel ini dan ini.
| Judul | Edit dan Buat Image .9.png |
| Deskripsi | Jika anda pernah modifikasi interface dari sebuah aplikasi atau theme, maka file image dengan ekstensi .9.png tidak asing lagi bagi anda.... |
| Author | Boz Rakun |
| Rating |
4.5/
5 Point
|
ijin copas ndan
BalasHapusOk :D
BalasHapusJangan lupa sumbernya ya gan :D