Latest News

Cara Membuat Pesan Loading dengan Efek Animasi

Membuat pesan loading halaman dengan efek animasi photoshop. Efek animasi ini nantinya akan muncul dikala pengunjung membuka salah satu halaman di blog kita.

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

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

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

Tampilan nya mampu Anda lihat dikala 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 aku memakai software Photoshop CS6. Buat yang beda versi tak perlu khawatir, Anda pun tetap mampu 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 gres dengan nama “layer1”. Tentukan ukuran nya hingga layer berbentuk bentuk bujur kandang dengan ukuran sedang. Disini aku pilih width 300px dan height 300px.

2. Buat tiga bundar dengan ellipse tool.

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

pesan loading 1


4. Tekan lagi ctrl+N untuk membuat angka nya, beri nama “layer2”. Pilih ukuran yang lebih kecil, aku 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 teladan ini, aku pakai warna hitam dan putih.

pesan loading 3


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

pesan loading 4


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

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

Kaprikornus perlu sedikit kreatifitas Anda dalam membuat loncatan warna pada frame animasi biar kesan lampu indikator mampu tercipta. Lanjut.

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

pesan loading 5


8. Agar lebih mudah, berikut aku beri teladan 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 aba-aba 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 goresan pena 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.