Cara Membuat Animasi Loading Bar Di Photoshop
Thursday, April 20, 2017
Assalamualaikum. pertemuan kali ini, IndoINT,website akan mengajarkan "Cara Membuat Animasi Loading Bar Di Photoshop". Kalau sudah mengetahui teknik ini, maka sobat akan bisa membuat animasi Gif keren lainnya. pasti pernahkan melihat loading pada website, bentuknya persegi panjang dan berjalan ketika sedang loading. nah animasi itulah yang akan kita buat hari ini. penasaran ? silahkan lanjutkan membacanya.
Setelah sebelumnya kita sudah belajar "cara membuat dp bbm bergerak di photoshop". dimana kalimat akan bergerak berjalan keatas secara terus menerus. sekarang beda lagi, namun proses masih sama yaitu menggunakan frame.
Cara Membuat Animasi Loading Bar Di Photoshop
Langkah 1
Buka Adobe Photoshop, kemudian buatlah lembar kerja baru. tekan Ctrl N atau Pergi ke File - New berikan ukuran 500 x 100 pixel. Ok.
Langkah 2
Aktifkan Rectangle Tool, kemudian buatlah kotak berukuran 100x100 px. pastikan warnanya hitam atau atur sesuai keinginan kalian. pindahkan tempatnya kebagian Pojok kanan.
Buatlah lagi kotak dengan ukuran yang sama, namun warnanya lebih muda. tempatkan dibagian samping kotak hitam sebelumnya.
Lakukan seperti diatas sampai mendapatkan 5 kotak. semua kotaknya memiliki perbedaan kontras warna, mulai dari paling gelap sampai abu-abu. berikut urutan layernya.
Langkah 3
Pergi ke menu Windows - Timeline. dibagian tengah editor, akan terdapat tanda panah kecil, klik dan pili Create Frame Animation. lalu klik sekali lagi jika sudah tampil.
Maka Editor untuk membuat animasi gif, akan terbuka seperti dibawah.
Langkah 4
Lanjutkan pergi kebagian pojok kanan atas, klik dan pilih "Make frames from layers".
Maka semua layer yang ada akan tersusun dibagian timeline, secara satu persatu. lihat gambar. mulai dari background sampai layer paling terakhir. karena background tidak terpakai, jadi klik dan hapus (pilih icon tong sampah).
Coba sobat tes tekan Play (spasi), dan lihat animasi loadingnya terputar. pasti sangat cepat kan dan tidak terulang.
Maka dari itu blog semua layer yang ada pada Timeline, kemudian klik tanda panah kecil disamping "sec.". pilih 0.1 seconds. maka setiap frame akan mendapatkan waktu tersebut sebelum melangkah ke frame selanjutnya. ganti juga "Once" menjadi "Forever" agar animasi gif bisa berulang terus. silahkan Play dan lihat hasilnya, jika masih terlalu cepat, tambah lagi.
Langkah 5
Kalau merasa pengaturan diatas sudah fix, waktunya untuk save kedalam format GIF. pergi ke menu File - Save for web, atau tekan Ctrl Alt Shift S. maka akan terbuka pengaturannya.
Dibagian atas sebelah kanan, pilih Format GIF.
Lalu dibagian bawah terdapat "Looping options", pastikan settingannya Forever. tes Play dulu sebelum menyimpan dan lihat sendiri, kalau memang tidak ada kesalahan tekan SAVE. selesai.
Seperti inilah hasil akhir yang didapatkan, sesuai tutorial diatas. walaupun sederhana, namun sudah begini caranya untuk membat loading dengan photoshop.
Bagaimana sobat ? agak melelahkan yah, hehe. intinya bisa faham dan tau proses pembuatannya. setelah mengetahui teknik tersebut, pasti bisa dikembangkan lagi.
Sekian dulu tutorial Cara Membuat Animasi Loading Bar Di Photoshop, semoga dapat bermanfaat dan menambah ilmu photoshop kalian semua. terima kasih, SAFRI ST mengucapkan Assalamualaikum.