Bagi Para orpekers android pasti sudah tidak asing lagi dengan 9.png , apalagi yang sering edit2 gambar yg formatnya 9.png & sering gagal nah maka dari itu saya akan berbagi tutorial yg mudah untuk difahami & dimengerti Lengkap Membuat Chat Bubble BBM for Android, sebenarnya 9.png bukan hanya chat bubble di bbm, masih banyak lagi, bisa difahami sendiri,
Langsung siapkan bahan-bahannya terlebih dahulu:
Tutorials :
1. Drag ke dalam PhotoShop ke-5 Bubble tsb yang akan di buat bubble Baru Olahan anda. (bagian Drawable-xhdpi)
14. Lakukan proses yang sama terhadap icon bubble lainnya yah..paham meureun om...
Langsung siapkan bahan-bahannya terlebih dahulu:
- Apk Tool
- Download ini dulu : android-SDK : Pengolah icon 9.png using Draw9Patch tools (Download)
- Download Pengolah Color Font untuk mengedit file color.xml (ada pada folder value) (Download)
- NotePad+
- Bubble Olahan Masih Standart (Download)
Tutorials :
1. Drag ke dalam PhotoShop ke-5 Bubble tsb yang akan di buat bubble Baru Olahan anda. (bagian Drawable-xhdpi)
- chat_bubble_incoming.9.png
- chat_bubble_outgoing.9.png
- chat_bubble_outgoing_bottom.9
- chat_bubble_outgoing_middle.9
- chat_bubble_outgoing_top.9
2. Pilih dulu icon chat_bubble_Outgoing.9,png (Disini ukurannya cukup besar), lalu tekan tombol CTRL + ALT + i untuk melihat ukurannya.
3. Point dua untuk membuat New File yang ukurannya sama sisi, dilihat dari segi Widht nya
4. Buka file baru (CTRL + N) dan isi
5. Tekan tombol U untuk membuat Rounded Rectangle Tool (U), berikan radius : 10 px dan pilih bagian Style nya (di klik) paling pojok bawah
6. Posisikan cursor U (tanda +) di ujung kiri atas,
kemudian tekan
tombol Shift + tari mouse klik kiri
ke arah kanan bawah hingga rounded berbentuk sama sisi
7. Pilih menu Layer------Rasterize---Shape agar icon Rounded bergabung dengan rounded putih (lihat dikanan bawah pada bagian Layers)
8. Klik tanda fx di kanan
bawah bagian Layers, lalu pilih Gradient Overlay
9. Klik warna abu-abu di bagian Gradient (dibawah Opacity), pilih di bagian Preset baris kedua dari kiri ( Foreground to Transparent), tentukan warna pilihan anda lalu OK.
10. Untuk memberikan garis pinggir, centang bagian Stroke (paling bawah box Layer style) turunkan posisi Structure Size nya ke angka 1 atau terserah Anda. Dan pilih warna yg cocok bagi anda.
11. Jika punya Image Anime, drag ke dalam hasil olahan Rounded tadi dan perkecil (tekan tombol Shift + cursor posisikan di sudut rounded dan tarik ke dalam) (disini ane pake Spiderman sebagai contoh.), jika image kebesaran, perkecil sesuai harapan anda.
NB : untuk memperkecil atau memperbesar sama sisi, tekan tombol Shift + Alt + Tarik kursor
12. Drag kedua object tsb ( Spiderman + Rounded warna biru gradient, disini meng klik di kanan bawah sambil menekan tombol shift/diblocking) ke dalam icon Bubble sampel tadi (chat_bubble_outgoing.9.png), sama kan bentuknya untuk tahap awal membuat bubble.., semakin terbiasa akan semakin paham nantinya.
NB : Proses Drag object jangan lupa tekan tombol Shift + Mouse klik kiri ke gambar sampelnya. Perkecil kedua object tsb (ingat tombol Shift), jika sudah diperkecil lalu tekan ENTER untuk fix proses pengecilan atau pembesaran object. Untuk posisi gunakan tanda panah geser kiri, kanan, atas dan bawah ajha. Dan ingat di klik yah gambar yang mau di ubah bentuknya di kanan bawah tuh di bagian Layers yang ada tulisan Normal.
13. Untuk menghilangkan object sampel ( Conan Edogawa ), scroll ke bawah dan buang icon mata nya di bagian object Conan Edogawa
14. Lakukan proses yang sama terhadap icon bubble lainnya yah..paham meureun om...
15. Untuk proses menyimpanan, tekan tombol Shift + CTRL + S, save ke bentuk png dan replace dimana icon bubble itu asli nya berada (disini kita bermain di folder drawable-xhdpi).
16. Buang tulisan copy nya untuk melakukan penimpahan pada icon aslinya, jika tidak dihapus kata copy nya secara otomatis akan dabel.
17. Selanjutnya tinggal bermain di aplikasi 9Patch Tools ( donlot sepaketan dalam Android SDK )atau gunakan better9patch tools. Googling ajha yah...
18. Tahap selanjutnya proses olah 9draw patch tools, yaitu pemberian arsiran pada tiap sisi icon 9.png
19. Download ini dulu : android-SDK (Download)
20. Buka windows exploring dan cari :
android-sdk_r18-windows\android-sdk-windows\tools file (file Draw9patch.bat)
21. Perbesar tampilan Draw9Patch.bat nya, lakukan proses Drag icon yang akan di olah ke draw9patch
22. Centang bagian Show Patches dan Show Content, perkecil Zoom 100% sesuai sudut pandang mata anda.
23. CATATAN : Sisi kiri dan atas upayakan tidak mengena object image Spiderman dan cukup berikan satu titik saja pada sisinya. Sisi kanan dah bawah bebas mengena object Spiderman.. tapi alangkah bagusnya tidak mengena agar kalimat yang akan masuk ke dalam bagian icon 9.png tidak mengenai object Spiderman, sampel
Lihat gambar hasilnya di sebelah kanan. Itu menandakan bagian kalimat yang akan masuk dalam wilayah 9drawpatch tools, jika sisi bawah kita tarik arsiran hitamnya mengena object Spiderman hasilnya akan seperti ini
Lihat hasilnya pada gambar sebelah kanan, secara jelas kalimat akan menimpa object Spiderman
24. Save Ass atau tekan tombol CTRL + S
25. Lakukan pada icon yang tadi anda olah...
26. Success bermain di Draw9patch Tools, selanjutnya ke bagian apktool. Silahkan bermain sendiri.
Kalau semua sudah dirasa selesai silahkan decompile menggunakan Apk Tool kemudian sigin