Home » , » Cara Membuat Animasi Gif Loading Dari Photoshop

Cara Membuat Animasi Gif Loading Dari Photoshop


Cara Membuat Animasi Gif Loading Dari Photoshop
Cara Membuat Animasi Gif Loading Dari Photoshop
Dengan meningkatnya popularitas aplikasi AJAX, kita telah melihat seseorang membuat animasi GIF serupa di seluruh web yang menggunakan AJAX dalam peroses pembuatan animasi. Dalam tutorial ini, Anda akan belajar cara membuat animasi gif seperti seseorang yg profesional.

Contoh ini dibuat dengan Adobe PhotoShop CS3, yang memiliki fitur animasi built-in, tidak seperti versi PhotoShop yg dikemas dengan ImageReady.

Kita mulai dengan kanvas kosong sekitar 200x100px. Kami akan membuat layer baru dan pilih alat Marquee, dan pada toolbar untuk tenda, mengatur Gaya untuk Ukuran Tetap, Lebar: 4px dan Tinggi: 20px:
Cara Membuat Animasi Gif Loading Dari Photoshop

Sekarang kita bisa klik pada kanvas dan memilih dimensi-dimensi yg akan kita dibuat:
Cara Membuat Animasi Gif Loading Dari Photoshop

Dalam layer baru kita akan mengecat bagian seleksi dengan warna hitam:
Cara Membuat Animasi Gif Loading Dari Photoshop

 Sekarang klik kanan layer dan Duplicate Layer. Pilih Move tool, tahan Shift dan tekan tombol panah bawah empat atau lima kali - pergeseran akan memindahkan lapisan secara bertahap. Kami sekarang harus memiliki dua lapisan seperti di bawah ini:
Cara Membuat Animasi Gif Loading Dari Photoshop


Dengan lapisan aktif atas, tekan Ctrl + E untuk menggabungkan bawah - menggabungkan dua lapisan garis bersama-sama. Sekarang klik kanan layer dan Gandakan. Goto Edit> Transform> Rotate, dan menahan tombol Shift, memutar lapisan digandakan seperti jam di bawah ini:
Cara Membuat Animasi Gif Loading Dari Photoshop

Menahan Shift akan berputar pada peningkatan. Pilih Move tool untuk membuat perubahan. Sekarang ulangi proses ini duplikat kemudian putar untuk mengisi semua celah seperti di bawah: mungkin lebih baik untuk membri tanda saat Anda menduplikasi, sehingga Anda dapat melacak yang mana2 yg telah anda beri perubahan.
Cara Membuat Animasi Gif Loading Dari Photoshop

Sekarang kita harus memiliki 12 lapisan terpisah untuk masing-masing jari jari. Selanjutnya, kita akan mewarnai mereka.
Dimulai dengan yang pertama, membuka gaya layer dan menambahkan overlay warna abu-abu terang. Anda mungkin ingin memperbesar untuk melihat lebih jelas.
Cara Membuat Animasi Gif Loading Dari Photoshop

Sekarang klik kanan layer kamu hanya menambahkan gaya dan pilih Copy Layer Style, kemudian lanjutkan untuk Paste Layer Style pada masing-masing lainnya, seperti di bawah:
Cara Membuat Animasi Gif Loading Dari Photoshop

Sekarang mari kita membuka Jendela Animasi dengan pergi ke Window> Animation. Anda akan melihat sesuatu seperti ini:
Cara Membuat Animasi Gif Loading Dari Photoshop

Ini adalah timeline animasi kita. Setiap frame yang ditunjukkan di sini akan bermain untuk sejumlah settingan detik. Kami ingin menciptakan frame yang berbeda dengan warna yang berbeda di jari jari, secara berurutan.
Jadi mari kita mulai dengan mengubah warna dari tiga jari pertama. sekarang kita mengubah warna dari tiga jari pertama seperti ini, memudar dari cahaya abu-abu ke gelap. Warna-warna yang kami gunakan adalah # Bababa untuk pertama, # 999999 untuk kedua, dan # 444444 untuk ketiga:
Cara Membuat Animasi Gif Loading Dari Photoshop

baik,sekarang kita memiliki frame pertama. Sekarang mari kita klik pada tombol Bingkai Baru, dan frame kita akan diduplikasi. Memastikan bingkai kedua telah dipilih, mari kita mengubah warna lagi kita dapat menyalin gaya lapisan jika kita ingin memindahkan warna sepanjang satu detik:
Cara Membuat Animasi Gif Loading Dari Photoshop

Setelah kita selesai, kita harus memiliki waktu yang terlihat seperti ini:
Cara Membuat Animasi Gif Loading Dari Photoshop

Kita dapat mengklik tombol play di bagian bawah jendela animation untuk melihat pratinjau. Jika animasi terlalu lambat, kita dapat mengubah durasi di sudut kanan bawah setiap frame. Ini menentukan durasi untuk setiap frame yang akan terlihat. Mari kita coba 0.1sec. Tahan Shift dan pilih semua frame di jendela, kemudian pilih 0,1 detik (atau memilih lain dan mencoba 0,05 - atau apa pun yang Anda inginkan) pada salah satu dari mereka. Hal ini akan mengubah semua dari mereka, karena mereka semua dipilih.
Cara Membuat Animasi Gif Loading Dari Photoshop

Untuk menyimpan, go to File> Save for Web & Devices. Pilih GIF dari menu dropdown - 128 menjadi kualitas terbaik. Dan Anda juga dapat melihat di sini juga, dengan menggunakan tombol kontrol dekat bagian bawah:
Cara Membuat Animasi Gif Loading Dari Photoshop

Akhirnya,ini lah animasi gif loading seperti di bawah ini:
Cara Membuat Animasi Gif Loading Dari Photoshop