cara membuat gambar loading (load bar) buatan kita sendiri. Pada tutorial ini saya menggunakan adobe photoshop cs3. Langkah-langkah yang harus dilakukan adalah:
Hasil Load.GIF
- Buat file baru dengan lebar 500px, tinggi 30px dan resolusi 300px.
- Selanjutnya dengan menggunakan rectangle tool buatlah 2 buah persegi sperti ini.
- Setelah terbentuk dua buah kotak seperti gambar diatas, kemudian blok kedua layer tersebut yang terdapat pada tab layer yang berada di kanan bawah. Setelah itu tekan Ctrl+T untuk mentransform kedua bentuk kotak tersebut. Klik kanan pada gambar lalu pilih Skew.
- Kemudian arahkan kursor ke pinggir atas gambar, lalu diklik sambil tarik kursor kekanan sehingga membentuk gambar seperti berikut.
- Jika sudah terbentuk gambar seperti diatas, langkah selanjutnya adalah merge layer terlebih dahulu. Kedua layer yang sudah diblok tersebut dengan menekan Ctrl+E maka layer akan digabung menjadi satu.
- Untuk menggandakan layer anda bisa menggunakan tombol Alt+arah atau klik kanan pada layer pilih duplicate layer. Tujuannya adalah untuk mempercepat pembuatan kotak seperti pada langkah keempat. Atur kotak-kotak menjadi seperti gambar berikut.
- Setelah semua layer diatur menjadi seperti gambar diatas. Lakukan merge lagi terhadap layer yang telah digandakan tadi. Tujuannya agar mempermudah kita dalam menggerakkan/memindahkan objek gambar nantinya.
- Lakukan penggandaan pada layer yang sudah di merge pada langkah ketujuh. Cukup satu saja layer yang digandakan. Disini saya bertujuan untuk membuat objek gambar menjadi lebih panjang. Perhatikan gambar berikut.
- Merge lagi kedua layer tersebut. Setelah anda mendapatkan objek gambar yang lebih panjang. Sobat bisa menambahkan teks pada gambar seperti tulisan "Loading . . ."
- Pada langkah ini kita akan mulai menambahkan animasi pada objek. Dari menu Windows pilih "Animation". Maka akan muncul toolbar baru yang akan berisi frame-frame animasi.
- Disana akan terlihat 1 layer frame, langkah selanjutnya adalah menduplikat frame 1 tersebut. dengan cara mengklik tombol "Duplicate Selected Frame".
- Setelah itu akan ada frame baru (frame 2), Naah ... sobat pilih dulu frame 1, kemudian menggunakan move tool pindahkan objek gambar menjadi lebih kekiri. Lalu pilih frame 2, menggunakan move tool pindahkan objek yang sama menjadi lebih kekanan. Untuk melihat perubahan yang terjadi sobat bisa melihatnya dengan mengklik frame 1 kemudian frame 2 secara berulang. Pada objek gambar akan terlihat seperti pergerakan.
- Belum selesai sampai disitu, untuk membuatnya terlihat bergerak kita berikan tween effect pada frame layer. Caranya blok telebih dahulu kedua frame, lalu klik tombol Tween yang berada disebelah kiri tombol duplicate layer. Ketikkan 30 pada input text Frames to add.
- Klik OK, maka akan terlihat frame-frame baru yang terbentuk. Untuk mencobanya sobat bisa langsung menekan tombol Spasi pada keyboard maka objek gambar mulai dirender menjadi sebuah animasi bergerak. Jika belum sesuai dengan yang sobat inginkan, ulangi dari langkah 12 dengan menekan Ctrl+Alt+Z untuk meng-Undo pekerjaan kita sebelumnya.
- Langkah terakhir adalah menyimpan gambar untuk digunakan. Pilih menu File -> Pilih Save for Web and Device. Beri nama file kemudian simpan (default extension .GIF). Untuk melihat hasil yang sudah sobat simpan, sobat bisa menggunakan web browser untuk menampilkan gambar. Klik kanan pada file -> Open with Browser.
Sekian dulu tutorial tentang Cara membuat animasi Load Bar semoga dapat membantu sobat-sobat sekalian. Jika sobat kurang mengerti bisa kirimkan komentar. Lebih dan kurang saya mohon maaf. :)
