Cara Membuat Pesan Loading dengan Efek Animasi

Ditulis oleh: Maseteguh Blog Must Teguh Updated at : 7:39 AM
Leave a Comment
Membuat pesan loading halaman dengan efek animasi photoshop. Efek animasi ini nantinya akan muncul saat pengunjung membuka salah satu halaman di blog kita.

Message yang muncul bisa berupa kalimat, gambar, serta model animasi. Ini semacam isyarat agar pengunjung sedikit bersabar sebelum halaman blog terbuka sempurna.

Ide ini muncul saat main ke sebuah blog yang waktu itu kedatangan saya disambut dengan pesan loading yang cukup keren.

Setelah browsing sana-sini, akhirnya saya pun berhasil membuat sebuah efek animasi untuk pesan loading yang modelnya sepintas  mirip putaran peluru pada senj4t4 api revolver.

Tampilan nya bisa Anda lihat saat membuka setiap halaman pada blog ini.

Mau tahu cara bikin nya? Simak di bawah ini lengkap dengan tutor pemasangan nya pada blog.

Cara Membuat Pesan Loading dengan Efek Animasi


Cara Membuat Tampilan Loading Efek Animasi


Di sini saya memakai software Photoshop CS6. Buat yang beda versi tak perlu khawatir, Anda pun tetap bisa membuat sesuai dengan versi photoshop nya masing-masing. Mari kita mulai prosesnya.

1. Buka photoshop Anda, lalu tekan ctrl+N, atau pada menu file pilih new. Buat layer baru dengan nama “layer1”. Tentukan ukuran nya hingga layer berbentuk bentuk bujur sangkar dengan ukuran sedang. Disini saya pilih width 300px dan height 300px.

2. Buat tiga lingkaran dengan ellipse tool.

3. Beri warna yang berbeda untuk tiap lingkaran nya sesuai selera Anda.

pesan loading 1


4. Tekan lagi ctrl+N untuk membuat angka nya, beri nama “layer2”. Pilih ukuran yang lebih kecil, saya memakai ukuran 100 x 100px. Dengan horizontal type tool, buat angka 1, 2, dan 3 dengan ukuran besarnya angka 60 pt.

pesan loading 2


5. Pada layer1, klik ‘shape3’, lalu dari layer2 copy angka ke layer1 secara berurutan hingga tampilan angka menjadi bertumpuk pada 'shape3' (lihat gambar). Ingat, warna angka harus kontras dengan background di ‘shape3’. Pada contoh ini, saya pakai warna hitam dan putih.

pesan loading 3


6. Klik ‘shape1’, lalu buat lingkaran kecil sesuai arah putaran jarum jam. Sebagai latihan, disini saya buat 4 lingkaran kecil. Beri warna lingkaran kecil tersebut menjadi warna hijau dengan cara mengklik ‘layer thumbnail’ nya.

pesan loading 4


Dengan tambahan 4 lingkaran kecil, jumlah ‘shape’ kini bertambah menjadi 7 buah (shape 1 – 7).

Nah, sampai disini Anda sudah punya kerangka gambarnya. Selanjutnya tinggal kita buat efek animasi nya. Lingkaran kecil berwarna hijau nantinya ibarat lampu indikator saat proses loading halaman.

Jadi perlu sedikit kreatifitas Anda dalam membuat loncatan warna pada frame animasi agar kesan lampu indikator bisa tercipta. Lanjut.

7. Klik ‘window’ lalu pilih ‘animation’. Jumlah frame animasi nya saya buat 4 buah menyesuaikan jumlah lingkaran kecil di 'shape1'.

pesan loading 5


8. Agar lebih mudah, berikut saya beri contoh permainan loncatan warna pada frame animasi 1 – 4. (perhatikan ikon mata pada tiap shape).

frame animasi 1
frame animasi 1

frame animasi 2
frame animasi 2
frame animasi 3
frame animasi 3
frame animasi 4
frame animasi 4

9. Blok semua frame, dengan cara klik frame pertama lalu tekan tombol shift dan arahkan kursor ke frame empat. Atur waktu delay sesuai gambar. Tekan tombol play untuk melihat hasilnya.

pesan loading 6


10. Jika semua sudah oke, simpan file gambar animasi dengan format GIF. Caranya, pada menu file pilih “save for web and device”, klik save, beri nama file Anda dan di mana posisi file akan disimpan. Lalu save.

Bagaimana agan-agan, mudah bukan? Trus, cara pasang di blog nya bagaimana?


Cara Memasang Pesan Loading pada Blog


Pertama, upload file gambar yang tadi sudah Anda buat ke hosting server untuk mendapat URL gambar.

Caranya mudah. Edit salah satu artikel Anda, upload file gambar, lalu klik perbarui.

Buka artikel tersebut, arahkan kursor pada gambar yang tadi di upload, klik kanan pilih “salin URL gambar” lalu paste kan ke notepad. Jika URL sudah Anda dapat, hapus lagi gambar tersebut dari artikel Anda.

Langkah berikutnya, ikuti instruksi di bawah ini:

1. Dari dasbor blogger, buka menu template, klik edit html (biar lebih aman, backup dulu template Anda).

2. Copy paste kode css di bawah ini tepat di atas kode ini ]]></b:skin>.

#diload {background:url(https://4.bp.blogspot.com/-izhqML87hH8/VrsnVqWR_FI/AAAAAAAACYE/zaviGrMUaKg/s1600/loading.gif) no-repeat center;background-color:rgba(0,0,0,0.50);width:100%;height:100%;position:fixed;left:0;top:0;z-index:1000;}

Ganti tulisan berwarna merah dengan URL gambar Anda.

3. Letakkan kode di bawah ini tepat di bawah kode <body>.

<div id='diload'/>

4. Selanjutnya, copy paste kode script di bawah ini tepat di atas kode </body>.

<script type='text/javascript'>
//<![CDATA[
// Loader
$(window).bind("load",function(){$("#diload").fadeOut(1e3)});
//]]>
</script>

5. Pratinjau template.

6. Jika tidak muncul pesan error, klik save template.


Buka salah satu halaman pada blog Anda, dan lihat hasilnya.


Semoga bermanfaat. SAY NO TO COPY PASTE. Wassalam.

0 komentar:

Posting Komentar

Setiap komentar yang diterbitkan, saya pastikan blognya sudah tak kunjungi balik, dengan atau tanpa komentar yang saya sertakan.

Terima kasih atas kunjungannya. Wassalam