Template animasi UI untuk After Effects, diedit sebelum masuk ke comp
Template animasi UI untuk After Effects adalah layar aplikasi, widget, gelembung chat, dan grafik siap pakai yang dibuat dari layer After Effects, untuk promo produk dan video explainer. Workspace mouzeclick punya 81 template animasi dalam sembilan kategori, sebagian besar dengan tampilan gelap dan terang. Anda mengubah teks, ikon, warna, dan animasi masuk di Template studio, lalu menekan Build template. Workspace ini berjalan di Windows.
- 81 template animasi (Templates 2.0) dalam sembilan kategori: social, widgets, UI kit, chat, productivity, media, commerce, charts, dan 3D
- 80 dari 81 template punya pemilih tampilan, sebagian besar dengan versi gelap dan terang; 63 juga tetap menyimpan build 1.x aslinya, yang langsung jadi dengan Alt-click
- Live preview yang bisa dijeda dan di-scrub, dengan tab Content, Style, dan Motion; warna tema menjadi Color Controls
- Efek antarmuka SaaS di Motion lab, plus ekstensi mouzesaas dan mouzeicons, yang juga berjalan di Mac
- Bagian dari workspace mouzeclick untuk After Effects (khusus Windows), sudah termasuk dalam satu paket
Apa itu template animasi UI After Effects?
Ini adalah potongan antarmuka siap pakai, misalnya notifikasi, kartu harga, thread chat, atau grafik, yang dibuat dari shape layer dan text layer After Effects dan sudah punya animasi masuk. Anda taruh di comp, ganti teks dan warnanya, dan hasilnya terlihat seperti dianimasikan manual oleh desainer.
Editor memakainya di video peluncuran SaaS, preview app store, explainer, dan momen "notifikasi muncul" di video talking-head. Template yang bagus lolos empat syarat.
- Berupa layer asli, bukan klip hasil render, jadi bisa diperbesar sampai 4K dan menerima warna brand Anda.
- Teksnya bisa diketik ulang, bukan gambar teks.
- Warna tersedia sebagai kontrol, jadi ganti brand cukup semenit, bukan bikin ulang.
- Animasi masuknya singkat. Easing lima belas frame terasa rapi; empat puluh frame terasa seperti slideshow.
Template animasi UI apa saja yang ada di workspace mouzeclick?
81 template animasi dalam sembilan kategori. 80 di antaranya punya pemilih tampilan, sebagian besar dengan versi gelap dan terang, dan 63 juga tetap menyimpan build Classic 1.x aslinya. Berikut daftarnya per kategori.
| Kategori | Template | Contoh |
|---|---|---|
| Social | 17 | Profil kreator, postingan sosial, layar story, pesan langsung, komentar video pendek, thread panjang, bar subscribe |
| Widgets | 14 | Analitik, baterai, kalender mingguan, skor kredit, pengunggah file, dock melayang, tumpukan notifikasi, activity rings, cuaca |
| UI kit | 11 | Banner cookie, timer hitung mundur, hasil pencarian, badge live, form login, lower third, input kode, kartu polling dan rating |
| Chat | 10 | Pesan chat, empat varian chat messaging, chat tim, live chat, kotak prompt |
| Productivity | 8 | Inbox email, file desain, pull request, code editor, papan kanban, langkah progres, jendela terminal, checklist |
| Media | 7 | Pemutar audio, layar panggilan, dynamic island, pemutar streaming, pemutar musik, kontrol video, video call |
| Commerce | 6 | Kartu checkout, kartu kredit, kartu harga, listing properti, notifikasi pembayaran, struk perjalanan |
| Charts | 5 | Grafik batang, donut, dan garis, grafik pasar properti, ticker harga |
| 3D | 3 | Tumpukan kartu 3D, notifikasi ponsel 3D, antarmuka melayang |
Nama dan angka di setiap template hanyalah konten contoh. Ganti semuanya sebelum dikirim; klien pasti sadar kalau ada nama orang asing di kartu checkout mereka.
Bagaimana cara build template UI di After Effects dengan Template studio?
Buka, edit di preview, lalu build. Tidak ada yang masuk ke comp sampai Anda menekan Build template.
- Buka Window › Extensions › mouzeclick workspace lalu masuk ke Shape studio › Templates.
- Cari, atau filter per kategori. Yang terbaru ada di New in 2.0.
- Buka sebuah template. Live preview akan diputar, dan Anda bisa menjeda serta men-scrub-nya.
- Tab Content: ketik ulang teksnya, lalu pertahankan ikon template, ganti, atau pakai media yang Anda pilih di comp.
- Tab Style: atur warnanya. Warna tema menjadi Color Controls di After Effects, jadi masih bisa diubah di Effect Controls setelah build.
- Tab Motion: pilih salah satu dari delapan gaya animasi masuk (antara lain fade, scale, slide up, slide left, serta pop dan overshoot) dan atur posisinya.
- Tekan Build template.
Kalau buru-buru, build langsung dari grid dengan pengaturan default dan perbaiki di comp. 63 template yang masih punya build Classic 1.x langsung jadi dengan Alt-click.
Kebiasaan saya: atur Motion ke None untuk kartu utama, lalu keyframe sendiri dengan kurva dari preset easing, supaya geraknya sama dengan bagian edit lainnya. Pakai animasi masuk preset untuk kartu pendukung.
Bagaimana cara menganimasikan mock-up UI di After Effects tanpa template?
Buat tiap kartu dari shape layer dan text layer, precompose, lalu animasikan position, scale, dan opacity dengan keyframe ber-easing.
- Gambar kartu dengan Rectangle tool dan naikkan Roundness untuk sudutnya. Tambahkan drop shadow dari menu Effect.
- Tambahkan text layer dan ikon, lalu rapikan dengan panel Align.
- Pilih semua bagiannya dan gunakan Layer › Pre-compose supaya kartu bergerak sebagai satu kesatuan.
- Beri keyframe Position, Scale, dan Opacity pada precomp, beri easing, lalu atur kecepatannya di Graph Editor.
- Geser setiap kartu berikutnya beberapa frame untuk efek stagger.
- Kalau akan dipakai ulang, buka Window › Essential Graphics dan tampilkan teks serta warnanya.
Cara ini tepat untuk satu kartu utama yang harus sama persis dengan frame Figma desainer. Tapi lambat untuk video peluncuran dengan dua belas layar, di mana sebagian besar kartu cukup terlihat pas dan muncul tepat waktu.
Apa lagi yang membantu untuk video SaaS dan promo produk di After Effects?
Rig SaaS di Motion lab, tiga tool workspace lain, dan dua ekstensi menangani gerakan di sekitar kartu. Di workspace After Effects, Motion lab punya SaaS interface effects, antara lain UI stagger, Depth reveal (depth ke foto dan kembali), 3D cursor, Proximity hover, Halftone wave, dot reveal, UI carousel, Glass panel, code glyphs, dan gradient wipe. Pilih layer, pilih rig, tekan Create; beberapa rig tetap menyimpan pengaturannya secara live di null atau di Essential Graphics.
- Glass morph menaruh kartu kaca buram di belakang layer yang dipilih, dan bisa dihapus nanti.
- Layout builder menyusun layer yang dipilih ke salah satu dari 39 grid bernama sesuai jumlah layer, dengan grid otomatis mulai dari lima layer.
- Motion showcases mengubah 2 sampai 20 layer menjadi showcase kartu 3D yang berulang (Orbit ring, Helix stream, Depth stack) dalam 16:9, 4:3, 1:1, 4:5, atau 9:16, berdurasi 5 sampai 30 detik, siap masuk render queue.
Dua ekstensi menangani sisanya, dan keduanya berjalan di Windows dan Mac. mouzesaas adalah kit animasi SaaS dengan layar aplikasi yang melayang dan miring, frame browser, laptop, dan ponsel, kursor yang mengklik dengan efek riak, teks mengetik, counter, grafik batang, garis, dan donut, notifikasi, dan halaman yang di-scroll, dalam lima palet atau warna Anda sendiri. mouzeicons berisi 90 ikon UI orisinal berupa shape layer yang bisa draw on, pop, atau fade up, dalam gaya Outline, Filled, atau Duotone. Keduanya ada di halaman ekstensi. Judul di atas UI dibuat dengan preset animasi teks, dan momen "pelanggan di 40 negara" cocok dikerjakan dengan animasi peta.
Bisakah memasukkan layar aplikasi sendiri ke animasi UI?
Bisa, dengan tiga cara, tergantung apa yang dikirim desainer.
- Ikon atau gambar di dalam template. Di tab Content, pilih media yang Anda pilih di comp, bukan ikon template.
- Screenshot penuh. mouzesaas membuat layar aplikasi melayang dengan sudut membulat dan bayangan lembut, di dalam frame browser, laptop, atau ponsel.
- File berlayer. Ss to ae (beta), di Motion lab, mengambil screenshot UI atau file Photoshop atau Illustrator berlayer lalu menyusunnya ulang sebagai layer After Effects dengan animasi masuk: slide, dari tengah, pop dan overshoot, scale dan rotate, Z-depth fade, sudut, atau fade saja, sesuai urutan layer, atas ke bawah, kiri ke kanan, tengah ke luar, atau acak.
Minta file PSD atau Illustrator berlayer selain PNG datar, supaya Anda punya layer asli desainer sebagai cadangan kalau hasil rebuild perlu diperbaiki. Ss to ae masih berstatus beta, jadi periksa setiap layer hasil rebuild sebelum Anda menganimasikan di atasnya.
Pakai template ini atau beli paket UI?
Pakai template ini kalau Anda butuh potongan yang bisa diedit dengan cepat dari paket yang sudah Anda bayar; beli paket kalau Anda butuh satu gaya visual untuk puluhan layar. Kalau tujuannya jumlah aset sebanyak mungkin, baca perbandingan mouzeclick sebagai alternatif AEJuice. Workspace ini memberi Anda 81 template, sebagian besar dengan tampilan gelap dan terang, yang diedit di panel bersebelahan dengan tool teks, warna, dan easing.
Untuk brand yang Anda tangani tiap bulan, buat kartunya sekali, simpan comp-nya di Comp Saver dalam Library (per kategori, dengan preview GIF animasi), lalu impor ke proyek berikutnya. Video bulan depan pun dimulai dari kartu yang sudah sesuai brand.
Template ini sudah termasuk dalam workspace After Effects all-in-one seharga $25 per bulan, $249 per tahun, atau $499 seumur hidup, dengan trial 3 hari tanpa kartu. Lihat harga.
Apakah template UI bisa dipakai di Mac?
Tidak. Templates, SaaS interface effects, Layout builder, dan Motion showcases ada di workspace mouzeclick, yang merupakan bagian dari mouzeclick di Windows; aplikasi Mac tidak menyertakannya. mouzesaas dan mouzeicons adalah ekstensi, jadi berjalan di Windows dan Mac. Halaman Mac mencantumkan apa saja yang ada di aplikasi Mac.
Buat promo produk berikutnya dari template UI. Satu paket, semua sudah termasuk: $25 per bulan atau $249 per tahun.
Pertanyaan yang sering diajukan
Bagaimana cara menganimasikan mock-up layar ponsel di After Effects?
Masukkan rekaman layar atau screenshot ke dalam frame ponsel dan gerakkan frame-nya, bukan layarnya. mouzesaas punya frame ponsel, laptop, dan browser yang melayang dan miring dengan sudut membulat dan bayangan lembut, dan template-nya mencakup dynamic island, layar panggilan, dan notifikasi ponsel 3D. Kalau manual, precompose layarnya, beri mask sesuai radius sudut frame, lalu parent ke frame.
Bisakah mengubah warna template setelah di-build?
Bisa. Warna tema menjadi Color Controls di After Effects, jadi buka Effect Controls pada template yang sudah di-build dan ubah di sana. Untuk satu palet brand utuh, ambil warnanya dari Color desk dulu, baru build, supaya setiap kartu langsung sesuai brand.
Apa bedanya Templates 2.0 dan Classic 1.x?
Templates 2.0 membuka editor dengan live preview serta tab Content, Style, dan Motion, dan baru mem-build saat Anda menekan Build template. Classic 1.x adalah build asli dari 63 template, dengan teks yang bisa diedit; Alt-click pada salah satunya langsung membuatnya dengan pengaturan default.
Bisakah membuat versi vertikal dari animasi UI?
Bisa. Ekstensi mouzeresize membuat salinan comp dalam 9:16, 1:1, 4:5, 4:3, 16:9, 21:9, atau ukuran Anda sendiri, dan Comp resizer di Motion lab mengubah ukuran beberapa comp sekaligus dengan konten tetap di tempatnya. Motion showcases juga bisa langsung di-build ke 9:16 atau 4:5.
Bisakah memakai easing sendiri pada template?
Bisa. Atur animasi masuk ke None di tab Motion, build, lalu beri keyframe sendiri pada precomp dengan kurva dari Easing lab. Dengan begitu gerakan kartu selaras dengan bagian edit lainnya, bukan pop bawaan.
Versi After Effects mana yang didukung template ini?
File panel workspace mendukung After Effects CC 2018 atau yang lebih baru. Meski begitu, pasang trial 3 hari, yang tidak butuh kartu, dan build beberapa template di versi After Effects yang persis Anda pakai untuk mengirim hasil, sebelum menjanjikan pekerjaan klien dengan template ini.
Apakah template butuh koneksi internet?
Template di-build di dalam After Effects. mouzeclick sendiri butuh koneksi internet selama berjalan, jadi biarkan aplikasinya tetap online. Kalau Anda juga memakai Icons in Editors, fitur itu mencari set ikon online; 90 ikon mouzeicons sudah disertakan dalam ekstensinya.
Sumber
Diperiksa pada 2026-10-31. Harga dan fitur bisa berubah: setiap tautan mengarah ke halaman resmi pembuatnya.