Sunday, June 28, 2015

Membuat Animasi Loading dengan Inkscape dan Gimp

Animasi Loading digunakan dalam sebuah website untuk mempercantik tampilan atau waktu tunggu pada sebuah website. pada pembahasan kali ini akan dibahas bagaimana membuat animasi bergerak dalam bentuk Format gambar .GIF tetapi untuk kali ini kita fokus dalam pembuatan animasi loading. berikut ini beberapa contoh animasi loading yang bisa kalian cari di internet.

Aplikasi yang kita gunakan dalam pembuatan animasi tersebut adalah Software opensource Inkscape dan Gimp aplikasi ini tersedia di berbagai operating system. setalah kita memiliki aplikasi yang di butuhkan buka aplikasi Inkscape dan gambarlah gambar berikut :


dengan setiap bagian pada bar loading terpisah.jika sudah selesai kemudian copy paste dan buatlah gambar sebanyak gerakan yang diinginkan.


Setelah semua gambar yang digunakan siap exportlah gambar tersebut ke bentuk format .PNG. bisa menggunakan menu File-Export PNG Image atau Shift+Ctrl+E kemudian seleksilah masing-masing gambar yang akan diexport. sehingga kita memiliki banyak gambar .PNG


File gambar untuk animasi sudah siap, kemudian bukalah salah satu gambar tersebut bisa gambar mulai animasi atau akhir animasi dengan menggunakan aplikasi Gimp. 


kemudian masukkan juga gambar-gambar yang lain di setiap layer yang berbeda. kemudian aturlah layer sesuai gerakan urutan gambar. gambar yang pertama kali terlihat adalah layer 1 atau layer paling bawah.

Setelah semua layer siap exportlah hasil pekerjaan kitadengan File-Export as dan akan keluar dialog Export Image kemudian ganti nama dan extensinya menjadi .GIF dan pada pilihan All Export Image ubahlah menjadi GIF Image(*.gif) dan tekan tombol Export. Kemudian akan keluar dialog Export Image as GIF kemudian centang pada As Animation. untuk kecepatan animasi silahkan setting pada bagian delay semakin besar nilai akan semakin lambat. jika sudah klik export dan selesai. dibawah ini hasil yang sudah jadi. 


Semoga bermanfaat dan bisa dikembangkan ke yang lain. salam..

No comments:

Post a Comment