04 Desember 2008

Tips Bikin Gambar Skin HD Loader (Bagian 1)

Pada tips kali ini kita akan mencoba membikin gambar untuk keperluan skin Hd Loader, dan sebagaimana kita ketahui bersama bahwa HdLoader itu terbagi atas 2 settingan yaitu :
  • Settingan HDLoader yang bisa digunakan untuk Instal, Rename, Hapus permainan,
  • Settingan HDLoader yang terkunci Tool Barnya.

Maka dari itu, supaya skin yang kita bikin sesuai dengan keperluan dan tentunya sesuai dengan jenis settingan yang kita bikin, maka tentunya gambar yang kita bikin harus kita sesuaikan supaya enak dilihat, dan terkesan tidak asal bikin.

Untuk lebih jelasnya kita mulai saja membahasnya.

Kita akan memulai dengan membikin gambar untuk HDLoader yang tidak terkunci toolbarnya.

Mau Coba? Download File Latihan

Buka software editing gambar, pada contoh ini saya gunakan Photoshop.

Setelah itu buka file gambar yang ingin kita bikin menjadi skin HDLoader, dalam contoh ini akan seperti gambar dibawah ini,


Setelah itu klik 2x dilayer Background dan kita berinama Latar, seperti contoh gambar dibawah ini,


Setelah itu klik OK, maka yang tadinya Background berubah menjadi layer dengan nama Latar, seperti contoh gambar dibawah ini,


Sekarang kita sesuaikan ukuran gambar yang dibutuhkan untuk skin HDLoader yaitu 512 X 448 Pixel, caranya adalah, klik Image, terus klik Canvas Size atau tekan CTRL + ALT + C, dan atur ukurannya seperti gambar dibawah ini,


Setelah itu klik OK, dan akan seperti gambar dibawah ini,


Pada gambar diatas terlihat kalau ukuran gambar sudah disesuaikan dengan ukuran 512 X 448 Pixel, karena ukuran gambar yang diedit lebih besar dari ukuran yang sudah kita atur, maka sebagian gambarnya tidak keliatan, untuk itu jika dirasa perlu maka kita harus merubah sekaligus mengatur posisi sesuai yang kita inginkan, caranya,

Untuk melihat ukuran sebenernya dari gambar yang kita edit, perkecil tampilan gambar dengan terlebih dahulu menekan CTRL + T baru kemudian perkecil tampilan gambar dengan menekan CTRL + -, dan setelah tampilan disesuaikan, kira" akan seperti contoh gambar dibawah ini,


Setelah itu tinggal kita perkecil ukuran gambarnya dengan terlebih dahulu menahan SHIFT kemudian klik disudut garis gambar dan tahan, kemudian gerakkan mouse kedalam gambar sampai ukuran yang dikehendaki, dan setelah sudah didapat ukurannya kira" seperti contoh gambar dibawah ini,


Tekan Enter, maka ukuran gambar akan berubah sesuai yang diinginkan, untuk memperbaiki posisi gambar, klik dan tahan ditengah gambar kemudian gerakkan mouse dan atur posisi gambarnya.
Kemudian kita akan membuat kotak untuk daftar nama gamennya, caranya sebagai berikut,
Perbesar dulu tampilan gambar dengan menekan CTRL + =, sampai ukuran Pixelnya keliatan dengan jelas, seperti contoh gambar dibawah ini,


Tarik beberapa garis bantu pada ukuran pixel gambar seperti contoh gambar dibawah ini,


Untuk menempatkan garis bantunya, klik kiri mouse dan tahan di wilayah seperti penggaris, kemudian gerakkan mouse keukuran seperti gambar diatas, Setelah semuanya udah selesai diletakkan, kemudian perkecil lagi tampilan gambarnya dengan menekan CTRL + - kira" seukuran tampilan gambar diatas, tujuannya agar semua wilayah gambar keliatan dilayar monitor PC, dan setelah itu kita mulai bikin kotaknya dengan cara

Aktifkan Rounded Rectangle Tool dengan mengklik ditoolbar, seperti contoh gambar dibawah ini


Kemudian klik kiri mouse dan tahan di pertemuan garis bantu horisontal dan vertikal (lingkaran merah kanan atas), kemudian gerakkan mouse kepertemuan garis bantu satunya (lingkaran merah kiri bawah) sampai membuat suatu kotak dan lepaskan klik mouse, dan kira" akan seperti contoh gambar dibawah ini,


Setelah itu kita rubah warna kotaknya menjadi,
Rubah dengan warna putih jika warna belakangnya agag gelap
Rubah dengan warna hitam jika warna belakangnya agag terang.
Pada contoh ini warna belakangnya terlihat agag gelap, maka kotaknya akan kita rubah menjadi warna putih, caranya dengan mengklik kiri 2X seperti gambar diatas (tanda panah merah), dan akan seperti gambar dibawah ini,


Klik diarea seperti gambar diatas atau isi RGBnya dengan nilai 255, seperti contoh gambar dibawah ini,


Setelah itu klik OK, dan akan seperti gambar dibawah ini,


Sekarang agar tampilan kotaknya lebih variatif, kita tambahkan layer style dengan cara klik Add Layer Style seperti contoh gambar diatas dan klik Behel and Emboss, dan atur settingan seperti gambar dibawah ini,


Di Technique terdiri dari 3 model yang bisa dipilih, tergantung dari selerah temen", dan dalam contoh ini saya pilih Chisel Hard, setelah itu klik OK dan akan seperti gambar dibawah ini,


Setelah itu kita bikin agag transparan lagi, caranya ruba tingkat transparan di Fill sesuai dengan keinginan temen", dalam contoh ini saya pilih tingkat 60%, dan akan seperti contoh gambar dibawah ini,


Sekarang kita bikin lagi 2 kotak disebelah kanan lagi, caranya sama dengan sebelumnya dengan terlebih dahulu menarik garis bantu pada ukuran pixel seperti gambar dibawah ini,


Selanjutnya aktifkan lagi Rounded Rectangle Tool dengan mengklik ditoolbar kemudian bikin kotak lagi di pertemuan garis bantu horisontal dan vertikal seperti contoh gambar dibawah ini,


Kemudian klik kiri mouse dan tahan di pertemuan garis horisontal dan vertikal (digambar diatas pada lingkaran merah kiri atas) kemudian tarik ke pertemuan satunya (lingkaran merah kanan bawah) sampai membuat sebuah kotak seperti contoh gambar dibawah ini,


Setelah itu bikin lagi kotak dibawahnya, caranya sama dengan diatas, dan setelah ditarik dan membuat suatu kotak, akan seperti gambar dibawah ini,


Sampai disini sudah bisa kita save menjadi suatu gambar skin HDLoader, tapi alangka baiknya jika kita tambahkan lagi variasi dibagian atas gambar supaya keliatan lebih menarik lagi, bisa dengan menambahkan tulisan atau dengan gambar" yang lain, pada contoh ini saya akan mengkobinasikan dengan gambar skin HDLoader yang asli, gambar ini dapat diperoleh dengan mengextract gambarnya dari hdlpatch_gui, dan gambar yang saya maksud seperti dibawah ini,


Caranya, tekan CTRL + O kemudian browse ke gambar seperti diatas, kemudian Open dan akan seperti gambar dibawah ini,


Kemudian seperti gambar diatas seleksi semua gambarnya dengan menekan CTRL + A, setelah itu semua gambar akan diseleksi dengan garis putus" mengelilingi pinggir gambar, setelah itu copy gambarnya dengan menekan CTRL + C, setelah itu tutup kembali gambar yang baru dibuka dengan mengklik tanda X diujung kiri atas gambar dalam contoh ini adalah gambar hdl_main.bmp, setelah itu tekan CTRL + V, dan akan seperti gambar dibawah ini,


Digambar diatas terlihat kalau gambarnya sudah masuk (Layer 1) dan berada dibagian paling atas semua gambar, sekarang kita bikinkan Mask untuk gambar ini dengan mengklik Mask seperti gambar diatas, dan akan seperti gambar dibawah ini,


Setelah itu aktifkan Gradient Tool dengan mengkliknya di toolbar seperti gambar diatas, kemudian klik kiri dan tahan mouse di tengah gambar, kemudian gerakkan mouse keatas digaris bantu horisontal paling atas, caranya kira" seperti gambar dibawah ini,


Setelah melepas klik Mouse, maka akan seperti gambar dibawah ini,


Selanjutnya kita atur lagi Opocitynya agar gambar diblakannya bisa keliatan, dan pada contoh ini tingkat Opocitynya saya kasih 20%, dan akan seperti contoh gambar dibawah ini,


Selanjutnya tempatkan Layer 1 ini dibawah ketiga gambar kotak dengan menekan CTRL + [ sebanyak 3 kali dan akan seperti contoh gambar dibawah ini,


Pada gambar diatas terlihat kalau Layer 1 masih menutupi gambar karakternya diblakan dan terlihat tenggelam, Supaya lebih bagus keliatan, kita harus lebih menonjolkan gambar karakternya dari pada gambar backgroundnya, banyak terik dalam mengolah gambar jenis ini, pada contoh ini saya coba yang saya anggap lebih gampang, caranya adalah,
Seperti gambar diatas, layer yang aktif masih Layer 1, Perbesar tampilan gambar dengan menekan CTRL + = dan atur posisi gambar pas diposisi karakternya, kira" seperti contoh gambar dibawah ini,


Setelah itu klik Mask Layer 1 seperti contoh gambar diatas, kemudian pastikan warna dari Foregroundnya adalah hitam, kemudian aktifkan tool Brush dengan Opocity 100%, Hardness 0%, seperti contoh gambar dibawah ini,


Setelah itu oleskan brush tool di gambar yang ingin ditonjolkan dengan teliti.

Untuk membesarkan ukuran brush tekan ],

Untuk mengecilkan ukuran brush tekan [,

Oleskan dengan hati" dan teliti agar hasil yang didapat bisa maksimal, dan setelah selesai, kira" akan seperti gambar dibawah ini,


Coba tekan CTRL + 0 (nol), Nah Gimana ?, udah terlihat karakter engga tenggelam lagi khan,
Sampai disini kalau mau ditambain lagi variasi, bisa dengan menambahkan tulisan Daftar Game diatas gambr kotak yang besar, atau Tulisan Rental atau Toko Temen".

Setelah semuanya udah selesai, tinggal kita Save dengan menekan CTRL + SHIFT + S atau klik File trus klik Save as, dan Save dengan nama main dengan format bmp seperti gambar dibawah ini,


Setelah itu klik Save, dan atur settingan Bmpnya seperti gambar dibawah ini,


Klik OK, dan untuk gambar main udah selesai, sekarang untuk gambar splashnya, saya rasa temen" sudah tau semua, karena disini tidak memerlukan tampilan khusus untuk gambar splashnya (pembuka) yang penting ukuran gambar untuk splashnya adalah sama dengan ukuran gambar main yaitu 512 X 448 Pixel dengan format gambar bmp 24 bit.
Dan untuk model skin seperti diatas, maka kita harus mengedit file TXT untuk Colornya supaya tampilan gambarnya bisa lebih menarik dan pas untuk gambar skinnya, file colors.txt untuk model skin seperti diatas download dibawah ini
Dan dibawah ini akan saya coba jelaskan bagian" mana saja yang diedit jika menginginkan warna tulisan yang lain dan sesuai dengan model skin seperti yang diatas.
Buka file colors.txt dengan notepad, kemudian bagian yang kita edit sebagai berikut :
Sebelum kita mulai edit warnanya terlebih dahulu kita harus tau dulu bagian mana aja yang akan kita ganti,
Format penulisan kode warna dari tiap bagian adalah 8 karakter, dan seperti pada contoh gambar dibawah untuk penulisan kode warna untuk Text adalah 00000080, dimana 000000 adalah kode warna RGBnya, sementara 80 adalah tingkat transparan warnanya, dan nilainya dari 00 - 80, semakin tinggi nilainya, semakin kontras warnanya.
Jika ingin merubah warna dari nama" gamenya, maka edit bagian Game list seperti gambar dibawah ini,


Seperti gambar diatas, yang kita edit adalah
  • Scrollbar adalah warna bagian scroll yang ada dibagian pinggir dari game list sebagai penunjuk jika nama" game discroll.
  • No games installed adalah warna tulisan pesan yang akan tampil jika didalam harddisk tidak ada game yang terinstal,
  • Text adalah warna tulisan nama gamenya,
  • Selected text adalah warna nama game yang terpilih,
  • Sementara untuk bagian" yang lain, tidak ditampilkan, jadi set transparant kode warnanya dengan 00
Trik untuk melihat dan mendapatkan kode warna tampilan tulisan nantinya diskin yang kita buat, sebagai berikut
Masih di photoshop, Ketik nama" game sembarang dibagian daftar game, umpamanya seperti gambar dibawah ini


Untuk mulai menulis, klik huruf T ditoolbar seperti contoh gambar diatas, kemudian ketik sembarang nama game, seperti gambar diatas (didalam lingkaran merah),

Nah gimana ? udah ada priview warna nama gamenya diskinnya khan, sekarang untuk merubah warna dari nama gamenya sekaligus mendapatkan kode warnanya adalah, Klik Warna tulisan seperti gambar diatas, maka akan seperti gambar dibawah ini,


Pada gambar diatas, terlihat untuk kode warna Merah adalah FF0000, Umpamanya kita ingin merubah dengan warna yang lain, maka klik diarea Select text color warna yang kita inginkan, umpamanya warna hitam, maka akan seperti gambar dibawah ini,


Kemudian Kode" warna ini kita masukkan di file colors.txt, umpamanya

Warna Textnya adalah hitam, kodenya 000000

Warna Selected Textnya adalah merah, kodenya adalah FF0000

Maka setelah kode warnanya dimasukkan di colors.txt akan seperti gambar dibawah ini


Sementara untuk warna scrollbar dan No games instaler, saya rasa temen" udah bisa sendiri, Iya khan ?.

Setelah tidak ada lagi yang ingin dirubah, jangan lupa untuk mensavenya dengan menekan CTRL + S

Sekarang kita edit lagi bagian Toolbar dari file colors.txt ini

Bagian ini adalah bagian yang menampilkan Play, Instal, Rename, Remove dan status game, jadi letak bagian ini diskin pada ke 2 kotak bagian kanan, dan yang diedit dibagian ini adalah seperti gambar dibawah ini,


Pada gambar diatas, warna yang diedit pada :
  • Play adalah warna dari tulisan menu Play,
  • Install adalah warna dari tulisan menu Instal,
  • Remove adalah warna dari tulisan menu Remove,
  • Rename adalah warna dari tulisan mennu Rename,
  • Selected text adalah warna dari tulisan menu yang dipilih,
  • Game size adalah warna tulisan Game size,
  • x GB adalah warna tulisan dari ukuran game dalam giga bite,
  • HDD size adalah warna tulisan HDD size,
  • y GB adalah warna tulisan kapasitas Harddisk yang terinstal di PS2 dalam giga bite,
  • HDD free adalah warna tulisan HDD free'
  • z GB adalah warna tulisan dari sisa kapasitas harddisk yang terpakei dalam giga bite.
  • Sementara bagian yang lain tidak ditampilkan, jadi set untuk transparant tulisannya dengan 00.
Untuk mendapatkan priview dari tampilan dibagian ini, sama dengan trik diatas, cuma sekarang tulisannya kita ketik dibagian kotak sebelah kanan.
Sementara untuk merubah warna dan mendapatkan kode warnanya sampai memasukkan kodenya di colors.txt, sama dengan trik diatas, tinggal sesuaikan dengan bagian yang kita edit.

Kedua bagian inilah yang langsung muncul pada saat masuk HDLoader, sementara untuk bagian" yang lain, saya rasa temen" udah mengerti semuanya cara ngeditnya, dan engga perlu saya uraikan lagi.

Setelah file colors.txtnya udah kita edit, maka sekarang tinggal kita bikin skin HD Loadernya dengan menggunkan HDLPatch guy,

Dan jangan lupa di Tab Customization setelah memasukkan patch untuk gambar main dan splashnya, masukkan juga patch colors.txtnya yang sudah kita edit, seperti gambar dibawah ini, 


Dan pada bagian Tab Other Patches, seperti gambar dibawah ini,


Dan untuk setting yang lain dan cara menggunakan HDL Patch Guy ini, silahkan klik disini.
Selesai.

0 komentar:

Satrio Bahar © 2008 Template by SkinCorner
Gunakan Mozilla Firefox untuk Optimalkan Tampilan Blog Ini