Habit Hustle: Proses kreatif di balik animasi UI – Beragampengetahuan

Senang berkenalan dengan Anda! Saya Michael dan saya seorang desainer visual yang tinggal di Stockholm. Saya besar di Midwest dan bekerja di bidang periklanan sebelum beralih ke proyek interaktif. Di waktu luang saya, saya mempraktikkan keterampilan baru saya dalam membuat prototipe menggunakan AfterEffects dan Blender.

Ini adalah salah satu animasi yang saya buat baru-baru ini ketika mencoba beberapa bahan permata di Blender.

tumpukan program saya

Saya biasanya menggunakan program dan plugin ini saat membuat animasi prototipe:

• pengaduk – Untuk gerakan 3D dan efek visual
• Gambar – untuk tata letak dan UI
• efek pasca – Digunakan untuk gerakan dan penjahitan dalam animasi 3D
  • pohon ek – Plugin yang nyaman untuk mengonversi file Figma ke AE
  • Pergerakan Gunung MoGraph 4 – Banyak sekali script yang berguna untuk mempercepat proses animasi
  • mengalir – Sebuah plug-in yang membuat pengeditan kurva pelonggaran menjadi lebih mudah

Konsep dan Eksplorasi

Ide awal saya adalah menggunakan permata sebagai efek visual utama. Karena saya tahu saya ingin menggunakan material permata, saya mulai membuat beberapa aset di Blender yang dapat saya gunakan saat bekerja dengan layout di Figma. Permata terasa seperti imbalan kecil atas pencapaian, dan saya menyukai konsep mendapatkan permata dengan menyelesaikan tugas-tugas dasar orang dewasa.

Kaca dan permata selalu merupakan pohon simpul shader yang kompleks yang saya tidak pernah ingat cara menyiapkannya, jadi saya menggunakan tutorial dari Blenderbitesize ini untuk membuat bahan dasar permata.

Jika Anda penasaran, inilah pengaturan shader terakhir. Kebanyakan tutorial kaca yang saya ikuti berakhir dengan keluaran yang sama, dimana pembiasannya terbagi menjadi merah, biru, dan hijau. BDSF kaca standar Blender berfungsi dengan baik, tetapi untuk mendapatkan penyimpangan kromatik yang terlihat pada permata dan prisma, diperlukan lapisan simpul tambahan untuk memecah cahaya.

Manfaat dari pengaturan khusus ini adalah Anda dapat mencari IOR dan kualitas dispersi permata sebenarnya dan menggunakan nilai nyata untuk mendapatkan lapisan realitas tambahan pada adegan tersebut.

proses animasi

Saya selalu menggunakan Blender dan AfterEffects, yang sangat sulit untuk disinkronkan. Jika Anda menggunakan Cinema4D, prosesnya mungkin sedikit lebih mudah karena ada beberapa integrasi dengan Cinema4D yang terpasang di AfterEffects, tetapi Blender gratis jadi selalu menjadi pilihan pertama saya.

Bergantung pada animasinya, alur kerja untuk setiap proyek mungkin sedikit berbeda. Secara khusus, animasi gulir seperti ini adalah yang paling sulit karena Anda mencoba menyinkronkan kurva easing antara kedua program. Segalanya menjadi lebih rumit jika UI memengaruhi 3D dengan membiaskan latar belakang atau membiarkan kursor berinteraksi dengan 3D (seperti dalam postingan Dribbble ini). Untuk artikel permata ini, saya tahu saya menginginkan gerakan gulir yang besar, yang akan memakan waktu, dan melewatkan pembiasan latar belakang untuk menyederhanakannya.

1. Ekspor tata letak dari Figma ke AfterEffects

Program Figma dan Adobe tidak bekerja sama dengan baik, tetapi AEUX adalah plugin praktis yang dapat sedikit menyederhanakan prosesnya. Kelemahannya adalah ini bisa sedikit bermasalah dan memerlukan banyak pembersihan di Figma sebelum mengekspor dan di AfterEffects sebelum diluncurkan. Meskipun tidak sempurna, ini menghemat banyak waktu.

Beberapa tips yang saya pelajari melalui trial and error:

• Bingkai semua elemen yang tidak terpakai menjadi satu – Menggunakan lapisan sesedikit mungkin di AfterEffects membuat animasi lebih mudah dibuat.
• Teks selalu berantakan – Ini bukanlah solusi yang baik untuk masalah ini. Spasi baris hampir selalu kacau, dan font biasanya ditempatkan sekitar 5-10 piksel lebih tinggi dari yang Anda inginkan. Selain penyesuaian manual, jika Anda tidak menganimasikan layer teks dengan menambahkan sedikit tanda bintang, Anda juga dapat membiarkan AEUX melakukan rasterisasi pada layer teks.
• di depan nama lapisan. Warna latar belakang pada halaman tidak tertimpa secara otomatis
• – Buat bentuk baru di AfterEffects sebagai latar belakang, atau persegi panjang di Figma sebagai latar belakang. Bentuk vektor agak tidak dapat diprediksi
• – Cara terbaik untuk menghindari bentuk vektor yang aneh adalah dengan membuat sketsa pilihan rata (Cmd + E) di Figma sebelum mengekspor. Anda tidak ingin melakukan ini dengan bentuk tertentu (biasanya lingkaran dan persegi panjang) karena AfterEffects memiliki banyak fitur berguna untuk bentuk dasar, namun bentuk kompleks perlu diratakan. Beri nama layer Anda di Figma

– Saya biasanya melakukan ini…kecuali saya merasa malas. Itu selalu menghemat waktu saya nanti di AfterEffects jadi saya tidak perlu mencari lapisan. Ini juga merupakan kesempatan bagus untuk membersihkan file Anda.

2. Buat animasi di AfterEffects

Melakukan ini terlebih dahulu penting untuk mempersingkat waktu. Waktu render untuk Siklus di Blender cukup lama, bahkan lebih lama lagi jika menggunakan Glass shader, jadi ada baiknya untuk terlebih dahulu mengetahui berapa lama keseluruhan animasi berlangsung. Jika Anda setidaknya bisa menghilangkan ide utama di AfterEffects, Anda akan terhindar dari masalah nanti.

• Menggunakan beberapa plugin hebat juga dapat membantu. Inilah dua pilihan teratas saya: Pergerakan Gunung MoGraph 4
  • – Ada banyak fitur berguna di sini untuk tugas-tugas AE yang sepele, dan masih banyak lagi yang harus saya gunakan tetapi selalu saya lupakan. Penyesuaian titik jangkar
  • – Mengubah posisi titik jangkar pada bentuk dengan cepat jeda teks
  • – Pecahkan teks menjadi beberapa lapisan bentuk seperti huruf, kata, atau garis sempoyongan

• – Beri jarak pada layer di timeline untuk menciptakan efek terhuyung-huyung (seperti yang saya lakukan pada judul “Habit Hustle”) mengalir
  • – Saya menggunakan plugin ini untuk menganimasikan nilai easing, bukan editor grafik. Hal ini membuat kurva lebih mudah untuk divisualisasikan dan diedit daripada hanya menggunakan editor grafis untuk memeriksa kurva. Salin/tempel nilai pelonggaran
  • – Yang terbaik dari semuanya, Anda dapat memilih dua remaja mana pun di timeline dan menyalin nilai kemudahan ke bingkai utama lainnya. Ini sangat membantu dalam menjaga semua barang Anda tetap terhubung. Ubah nilai easing menjadi kode

– Angka-angka di bawah editor grafik (misalnya 0,48, 0,05, 0,20, 1,00) juga bagus untuk diberikan kepada pengembang dan juga dapat digunakan di sebagian besar kerangka animasi.

3. Ekspor animasi kasar dari AfterEffects ke Blender saya taruh Video yang diekspor dari AfterEffect Sebagai tekstur pada bidang di Blender

Miliki rasio yang sama dengan komposisi AfterEffects saya dan kemudian gunakan itu sebagai referensi pengaturan waktu dalam animasi. Pastikan untuk mengklik Auto Refresh pada node tekstur gambar sehingga diperbarui pada setiap frame dan memasukkan jumlah frame yang benar yang harus diputar ulang oleh Blender dari animasi. Selain itu, penting untuk tetap berada di Cycles dan menonton videonya.

Ini hanya memberi saya gambaran tentang cara kerja animasi. Biasanya, animasi yang saya ekspor jauh lebih kasar dari ini. Yang perlu saya ketahui adalah kapan harus menggulir dan kapan saya harus melakukan gerakan besar di Blender.

4. Membuat animasi di Blender

Alur kerja animasi di Blender adalah sesuatu yang masih saya coba tingkatkan. Bagian terbaik tentang Blender adalah hampir setiap properti dapat dianimasikan – mulai dari nilai shader hingga posisi elemen. Yang terburuk, sulit untuk mendapatkan gambaran umum animasi tingkat tinggi dan melihat semua bagian bekerja bersama.

Untuk memutar atau menjeda animasi, cukup tekan bilah spasi. Sering-seringlah berhemat!

Blender sering crash, dan selalu tidak terduga. Sering macet saat saya melihat pratinjau animasi atau menyimpan konten fisika dalam cache.

5. Render tes dari Blender ke AfterEffects Sebelum melakukan render akhir saya akan menggunakan mesin rendering meja kerja

Uji animasi di AfterEffects di Blender untuk menyinkronkan waktu lebih lanjut. Mencocokkan kurva pelonggaran bisa jadi membosankan, tetapi ini membantu ketika mencoba membuat gerakan gulir besar di After Effects. Saya biasanya melakukan langkah 3 dan 4 beberapa kali untuk menyesuaikan kedua animasi agar tepat.

Bagian tersulitnya adalah waktu rendering animasi kaca. Saya menghindari melakukan distorsi teks apa pun di balik permata ini karena Anda dapat melakukan lebih banyak kecurangan di AE tanpa harus membuat semuanya sempurna.

Saya juga melakukan sedikit kecurangan di sini dan membagi animasi permata menjadi dua bagian: bagian pengguliran pertama adalah permata yang diperbesar menjadi carousel, interaksi klik adalah permata yang diperbesar, dan sisanya keluar.

6. Ulangi animasinya dan lengkapi detailnya

Setelah tes render komposisi, saya mulai mengerjakan bagian akhir animasi. Di sinilah saya mulai menambahkan semua detail akhir karena semua bagian sekarang sudah menyatu dan lebih mudah untuk disesuaikan. Biasanya saya akan mencoba Bangun bagian animasi yang dilingkarkan sebelum merender render akhir

Bersikap dari Blender untuk menghemat waktu. Sekitar setengah jalan, saya menyadari bahwa saya perlu mengubah beberapa waktu atau panjang animasi Blender untuk membuat loop menjadi mulus. Salah satu trik yang saya temukan untuk membuat animasi perulangan lebih mudah dan akurat adalahBangun loop dalam kombinasi induk

tambahkan penghapusan halaman di sini, lalu duplikat lapisan animasi halaman dan mulai ulang pada titik yang sama di mana animasi dimulai.

Untuk pengembangan prototipe dan proyek klien, loop tidak diperlukan, tetapi untuk media sosial dan studi kasus, hal ini terlihat bagus. ✨

7. Render animasi terakhir di Blender menggunakan Cycles

Saya berdoa semoga final rendernya berhasil, saya memulai final render di Blender yang bisa memakan waktu berjam-jam, apalagi dengan bahan kaca. Jika saya beruntung, render pertama akan cukup dekat sehingga saya dapat menggunakan beberapa trik AfterEffects untuk membersihkannya, jika saya tidak seberuntung itu, saya perlu merendernya lagi.

hasil akhir

Maka semuanya selesai! Terkadang mungkin perlu melakukan rendering beberapa kali atau mengulangi beberapa langkah.

Prototipe ini selalu menyenangkan karena saya jarang menganimasikan hal-hal indah seperti itu di proyek klien, dan ini merupakan kesempatan untuk melatih keterampilan baru. Terkadang hal ini terbayar ketika klien menyukai animasi tertentu dan saya dapat menggunakan kembali ide yang sama di masa mendatang. Saran terbaik yang saya temukan untuk postingan proyek sampingan ini adalah bersenang-senang dengannya dan membuatnya tetap menyenangkan. Mempelajari keterampilan baru merupakan investasi waktu yang signifikan, dan saya selalu berusaha untuk tetap berpegang pada hal-hal yang menurut saya menarik dan membuang hal-hal yang menurut saya membosankan.
Terima kasih telah menggulir!