Teknik Rahasia Membuat Loading Animasi Lv1 Dengan Adobe Photoshop
Pada upload perdana ini sobat akan belajar salah satu rahasia teknik animasi dengan photoshop yang saya sendiri pun menyukainya. Kita akan mulai dengan frame by frame, tapi sebelum itu saya akan perjelas bahwa animasi loading ini akan membantu sobat untuk teknik-teknik selanjutnya mulai dari membuat kotak hingga memvariasikannya. Animasi dimana sobat menggabungkan frame atau foto yang satu dengan yang lainnya dalam susunan tertentu yang bervariasi.
Awalnya saya bertanya-tanya bagaimana ya supaya saya bisa mendesain seperti itu? pikiran ini terus saja menghantui saya dan tentunya membuat keraguan pada diri saya. Jika bukan karena guru dan teman-teman saya mungkin tak bisa membantu sobat sekalian pada saat ini dan pada artikel yang satu ini.
Lets Begin
Langkah-Langkah Membuat Loading Animasi Lv1:
1. Tahap pertama, sobat harus membuat kanvas atau lembar kerja baru. Dengan cara klik “File” kemudian klik “New” atau dengan cara yang lebih simple yaitu dengan menekan tombol Ctrl + N.
2. Tahap kedua, sobat akan melakukan pengaturan kanvas. Beberapa hal yang harus sobat lakukan:
A. Memberikan nama Project sobat
B. Memilih “Custom” pada box “Preset”
C. Atur Width = 300 pixels, Height = 150 Pixels dan Resolution = 72 kemudian klik “OK”
B. Memilih “Custom” pada box “Preset”
C. Atur Width = 300 pixels, Height = 150 Pixels dan Resolution = 72 kemudian klik “OK”
3. Tahap ketiga, sobat harus membuat sebuah kotak dengan menggunakan tool yang bernama “Rectangle Tool” lalu buat kotanya dan sesuaikan dengan lebar dan panjang kanvas, seperti pada gambar ke-2.
4. Tahap keempat, disini sobat akan memberikan efek-efek untuk mempercantiknya di dalam Layer style. Dengan cara mengklik kanan pada layer snape 1 kemudian pilih “Blending Options”.
5. Tahap kelima, sobat harus melakukan pengaturan “Layer Gradient Overlay”. Dengan cara Memberikan “Opacity = 20%” dan centang kotak “Revense”.
6. Tahap keenam, lakukan pengaturan pada Layer “Stroke”. Dengan cara double klik di layer “Stroke” kemudian ganti “Size = 1”, Position = Inside”, Dan Pilih “color = biru tua” lalu klik “OK”.
7. Tahap ketujuh, ini adala hasil dari pengaturan yang sobat lakukan tadi dan tidak perlu harus mirip sekali cukup sama saja.
8. Tahap kedelapan, Sobat harus menduplikat snape 1 menjadi 2. dengan cara Mengklik kanan pada snape 1 kemudian pilih “Duplicate Layer”.
9. Tahap kesembilan, sobat klik “OK”
10. Tahap kesepuluh, Tekan tombol Ctrl + T kemuidan kecilkan kotak menjadi seperti dibawah ini lalu tekan enter atau klik tombl ini
.
11. Tahap kesebelas, membuat background “snape 1 copy” menjadi trasparant, dengan cara klik kanan pada snape 1 copy kemudian pilih “Rasterize Layer”.
12. Tahap keduabelas, Atur “Layer Gradient Overlay”. Dengan cara yang sama seperti pada tahap ke-4 kemudian
Blend Mode = Multiply, Opacity = 100%, ganti Gradientnya dengan warna biru tua, dan untuk “layer stroke” tidak usah diatur lagi.
13. Tahap ketigabelas, tambahkan “Layer Inner Shadow”. Dengan cara centang kotak “Inner Shadow” atau double klik kemudian atur Blend Modenya menjadi “Overlay” dan “Distance = 0” lau klik “OK”
14. Tahap keempatbelas, sobat pindahkan kotak kecil hingga melewati garis batas. Dengan cara tekan tombol Ctrl + T lalu geser kekanan hingga melewati garis pembatas dan tekan “Enter”.
----->
Selanjutnya tekan tombol Ctrl + Alt + Z lalu tekan lagi tombol Ctrl + Alt + Shift + T maka kotak kecil akan tergandakan ke arah kanan tekan terus hingga memenuhi kotak snape 1.
----->
15. Tahap kelimabelas, disini sobat bisa membuat kata tambahan seperti loading…,in progres… atau yang lainnya. Dengan cara klik Horizontal Type Tool kemudian klik pada kanvas dan ketik kata yang sobat ingin masukan.
----->
16. Tahap keenambelas, pada tahap ini kita akan mulai membuat animasinya dengan cara klik “Window” lalu pilih “Animation”.
17. Tahap ketujubelas, hilangkan beberpa centang mata pada layer ( kotak kecil ) dengan mengkliknya.
18. Tahap kedelapanbelas, ini adalah tampilan menu animasinya. Sekarang ganti “sec” menjadi “1.0 sec” dan “Forever”
19. Tahap Kesembilanbelas, Tambahkan satu persatu kotak kecil. Dengan menekan “Duplicates selected frames”
sambil mencentang satu kali tiap tekan, lakukan hal ini sampai semua kotak kecil tercentang semua.
20. Tahap keduapuluh, lakukan tahap ke-19 sampai menjadi seperti ini
21. Tahap keduapuluhsatu, sekarang sobat save menjadi sebuah file dengan format “.Gif”. Yaitu dengan cara klik “File” kemudian pilih “Save for Web & Devices” atau dengan menklik tombol Alt + Shift + Ctrl + S.
22. Tahap keduapuluhdua, silahkan atur “Colors = 64”, “No Dither” dan “Image Size” lalu klik “Save”.
23. Tahap keduapuluhtiga, sobat hanya perlu menentukan dimana ingin menyimpan hasil desainnya misalnya di direktory “My Pictures” lalu klik “OK”.
24. Tahap Previews Your Desained, Keren bukan.
21 tahap telah kita lakukan, sesunguhnya tidak ada yang tidak bisa kita lakukan dimasa modern ini jadi teruslahh berkarya meskipun harus melewati badai dan kehancuran karena kunci orang yang sukses adalah Focus, Gagal, dan Berhasil, seperti halnya Teknik Rahasia Membuat Loading Animasi Lv1 Dengan Adobe Photoshop jika sobat mengalami kegagalan sobat hanya perlu mencoba lagi, lagi dan lagi sambil memperbaiki kesalahan yang terjadi. Dan jika diantara 21 tahap yang saya paparkan diiatas masih membuat kebinggungan silahkan bertanya melalui “SosMed saya” dan “Kolom Komentar dibawah”.
Silahkan download file PSD dan Gif nya dengan mengklik link dibawah:
Download File .PSD | Download File .Gif
Teknik Rahasia Membuat Loading Animasi Lv1 Dengan Adobe Photoshop
4/
5
Oleh
Muhammad Romadhoni
