Advertisement
  1. Web Design
  2. Keynote
Webdesign

Cara Mendemonstrasikan Prototipe iOS di Keynote

by
Difficulty:IntermediateLength:LongLanguages:

Indonesian (Bahasa Indonesia) translation by Suci Rohini (you can also view the original English article)

What You'll Be Creating

Memodelkan aplikasi yang sedang naik dapat menjadi tugas yang sangat sulit jika Anda tidak terbiasa dengan perangkat lunak dan teknik animasi profesional. Untungnya, Keynote memberikan toolkit animasi yang sangat efektif yang tidak terlalu sulit untuk digunakan. Dalam tutorial ini saya akan menunjukkan cara menggunakan Keynote untuk prototipe animasi UI iOS; kita akan membuat demo aplikasi berbasis peta.

Catatan: Keynote versi 6.6.2 digunakan dalam pembuatan tutorial ini.

Persiapan

Men-download Sumber

Pertama, Anda ingin menemukan mockup iPhone untuk memamerkan demo aplikasi Anda. Kebanyakan mockup iPhone berkualitas adalah objek bentuk dalam format PSD, sehingga dapat ditingkatkan ke ukuran mana pun yang diperlukan. File PSD mentah tidak kompatibel dengan Keynote, namun, beberapa perubahan pada PSD iPhone akan diperlukan agar demo berfungsi dengan baik.

Tergantung pada PSD, Anda mungkin perlu merasterisasi dan menghapus lapisan yang diperlukan sehingga hanya "bingkai" iPhone yang tersisa. Hapus gambar latar belakang sehingga menjadi transparan. Simpan sebagai file PNG.

The iPhone mockup should look like this when its demo-ready
Mockup iPhone akan terlihat seperti ini ketika sudah siap demo.

Selain iPhone, satu-satunya sumber daya lain yang perlu Anda teruskan adalah peta, set ikon, dan gambar lain yang Anda gunakan dalam mockup aplikasi Anda. Elemen UI lainnya akan dibuat ulang di Keynote untuk memastikan animasi berfungsi dengan baik.

Mengkonfigurasi Keynote

Buka Keynote. Di bagian atas jendela Choose a Theme, klik Wide. Ini akan membuat rangkai salindia dengan rasio aspek layar lebar, memberi kami produk jadi yang dengan senang hati kami unggah ke Youtube dalam HD. Kemudian, pilih template Putih.

Select the White theme
Pilih tema Putih.

Di panel Format di sisi kanan layar, klik Ubah Master dan pilih Kosong.

Pilih tata letak Kosong dari drop-down Change Master.

Membuat Base Slide

Sekarang, mulailah membuat slide dasar. Masukkan gambar iPhone dengan menyeret file PNG ke Keynote Anda atau dengan mengklik Insert > Choose… dan temukan file di jendela Finder yang muncul. Pusatkan iPhone di slide.

Selanjutnya, masukkan gambar peta pada slide. Klik kanan pada gambar dan pilih Kirim untuk kembali. Ini akan menciptakan ilusi gambar di dalam layar iPhone.

Klik kanan pada peta dan pilih Kirim ke Kembali untuk menciptakan ilusi gambar di dalam layar.

Anda juga akan ingin menambahkan elemen UI apa pun yang akan muncul kosong di aplikasi Anda. Untuk tujuan saya, saya menambahkan bilah pencarian dengan permintaan pencarian dan roda pemuatan, yang saya buat menggunakan bentuk dan alat teks Keynote.

Slide dasar yang selesai.

Menempatkannya Semua Bersama

Setelah membuat slide dasar, Anda dapat memulai kerangka kerja animasi dalam tampilan slide. Hal terpenting yang perlu diingat pada tahap ini adalah mengatasi animasi utama sebelum berurusan dengan minor, yang berorientasi pada detail.

Membuat Efek Pencarian dan Pan

Untuk membuat efek pencarian dan pan, gandakan slide dasar dengan mengklik kanan pada thumbnail di sidebar dan pilih Duplicate.

Duplikat base slide.

Di slide yang baru diduplikasi, hapus roda pemuatan dengan memilihnya dan menekan tombol Hapus. Selanjutnya, geser foto peta sehingga tujuan yang Anda cari muncul di bagian atas layar iPhone.

Masukkan gambar pin ke dalam Keynote dan letakkan di atas tujuan yang diinginkan. Di menu Format, tambahkan Contact Shadow. Tweak bayangan sesuai dengan keinginan Anda. Kemudian, Klik kanan pada pin dan pilih Kirim untuk kembali. Lakukan hal yang sama untuk gambar peta.

Tambahkan bayangan kontak ke pin.

Gandakan slide ini dan pindahkan ke posisi slide kedua. Ambil pin dan pindahkan dari layar, menjaganya langsung di atas penempatan aslinya. Ini dapat dilakukan dengan mudah dengan menekan dan menahan Up arrow key atau dengan mengubah posisi Y di panel Arrange dari menu Format.

Pindahkan pin dari layar, menjaganya langsung di atas posisi yang dimaksudkan.

Mulai Beranimasi!

Sekarang semuanya sudah siap, Anda bisa mulai menganimasi. Alat paling signifikan yang akan digunakan untuk melakukan ini adalah animasi Magic Move, yang menciptakan transisi halus untuk elemen yang muncul di beberapa slide. Magic Move akan menciptakan efek pan halus dan pin-drop yang kami tuju.

Kembali ke Slide 1, dan menerapkan Magic Move dengan membuka menu Animate dan mengklik Add effect > Magic Move. Tick Fade Unmatched Objects. Pilih Match By Object. Atur Akselerasi untuk Ease In & Out. Setel Start Transition ke Otomatis dengan Penundaan 0s. Durasi terserah kebijaksanaan Anda - saya setel ke 1,50s untuk panci.

Konfigurasi animasi Pindahkan Sihir.

Ulangi ini pada Slide 2, tetapi tetapkan durasi lebih pendek dari slide sebelumnya. Saya mengatur yang satu ini menjadi 0,60 detik.

Tip: Uji durasinya dengan mengklik tombol Pratinjau untuk membantu melihat panjang animasi yang diinginkan.

Dengan Magic Move diselesaikan untuk bagian tutorial ini, kembalilah ke Slide 1 untuk membuat animasi pencarian. Pilih teks pada slide. Di panel Build In pada menu Animate, klik Add an effect. Pilih Typewriter dari menu drop-down, dan atur Duration & Direction ke 0.60s dan Forward.

Tambahkan animasi Build In ke teks.

Roda Pemuatan

Roda pemuatan membutuhkan sedikit lebih banyak animasi untuk secara akurat menggambarkan yang ditemukan dalam aplikasi. Pertama, tambahkan animasi Build In. Pilih Dissolve dari menu drop-down, dan atur Durasinya ke kecepatan cepat, sesuatu di sepanjang garis 0.20s.

Tambahkan animasi Build In ke roda pemuatan.

Selanjutnya, buka panel Action dan Add an Effect. Pilih Putar dari menu drop-down. Pilih Ease Both from the Acceleration menu drop-down. Saya menetapkan Durasi menjadi 1.00s, dan Sudut & Rotasi ke Sudut 359˚ dan 0 Rotasi, tetapi ini dapat diubah ke preferensi pribadi.

Tambahkan Tindakan ke roda pemuatan.

Akhirnya, buka panel Build Out dan Tambah Efek. Pilih Larutkan dari menu drop-down, dan atur Durasinya ke kecepatan cepat, sesuatu di sepanjang garis 0.30s.

Tambahkan animasi Build Out ke roda pemuatan.

Membangun Order

Setelah animasi ditambahkan, klik tombol Build Order di bagian bawah menu Animate. Ini akan menampilkan urutan di mana semua animasi pada slide saat ini akan bermain dan dapat digunakan untuk mengotomatisasi slide.

Klik pada animasi pertama, dan pilih Setelah Transisi dari menu Start drop-down. Sesuaikan Penundaan dengan kebijaksanaan Anda — ini akan menyebabkan animasi dimulai secara otomatis setelah beberapa waktu tertentu berlalu.

Selecting After Transition will start the animations automatically when presenting the Keynote
Memilih Setelah Transisi akan memulai animasi secara otomatis saat menampilkan Keynote.

Klik pada animasi kedua, dan pilih With Build 1 dari menu drop-down Start. Ini akan menyebabkan roda pemuatan dibangun saat animasi mesin tik berputar. Anda dapat memilih untuk menambahkan sedikit penundaan dengan menyesuaikan waktu di bidang Delay.

Set the Build In animation to start With Build 1
Setel animasi Build In untuk mulai With Build 1.

Untuk animasi ketiga, pilih After Build 2 dari menu buka-bawah Start, dan atur Delay ke 0s. Ulangi untuk animasi keempat.

Select After Build X from the drop-down menu for the successive animations
Pilih After Build X dari menu tarik-turun untuk animasi berurutan.

Dengan itu, efek Cari dan pan selesai.

Menciptakan efek Panel informasi

Efek panel informasi sedikit lebih sulit untuk dibuat, tetapi memoles demo dengan baik. Di slide ketiga Keynote, gunakan bentuk dan alat teks untuk membangun panel informasi dengan lebar layar iPhone. Jangan menambahkan foto cukup, tetapi pastikan untuk memberikan ruang bagi mereka. Kontrol-klik untuk memilih semua elemen, klik kanan dan pilih Grup untuk menggabungkan elemen. Ini membuat panel informasi lebih mudah dimanipulasi dalam animasi.

Group the information panel elements
Kelompokkan elemen panel informasi.

Selanjutnya, masukkan tiga atau empat foto yang ingin Anda tampilkan di demo Anda. Ubah ukurannya agar sesuai dengan tinggi badan di celah yang Anda tinggalkan di panel informasi. Jangan khawatir jika semuanya tidak muat di panel — ini adalah tempat animasi akan datang sedikit.

Insert pictures you want to display
Masukkan gambar yang ingin Anda tampilkan.

Kontrol-klik untuk memilih panel informasi dan foto-foto dan mengelompokkannya. Pindahkan kelompok sehingga ujung-ujung panel jatuh sesuai dengan layar. Pada slide ini, simpan panel informasi tepat di bawah layar iPhone sehingga tidak terlihat. Kemudian, klik kanan pada iPhone dan pilih Bawa ke depan. Ini akan memberi tampilan panel informasi yang ditampilkan di layar.

Align the panel with the edges of the phone
Sejajarkan panel dengan ujung-ujung telepon.

Gandakan slide, dan geser panel lebih tinggi pada slide sehingga hanya informasi dasar tentang lokasi yang muncul.

Shift the panel so just the basic location information peeks out from the bottom of the screen
Geser panel sehingga hanya informasi lokasi dasar yang keluar dari bagian bawah layar.

Kemudian, gandakan slide, dan geser panel lebih tinggi, sehingga seluruh panel muncul di layar iPhone.

Buat duplikat dari slide ini. Kemudian, klik kanan pada panel dan pilih Ungroup. Ini harus ungroup foto sambil menjaga sisa panel utuh. Jangan bergerak salah satu elemen pada slide.

Ungroup the photos from the information panel
Ungroup foto-foto dari panel informasi.

Sekali lagi, gandakan slide, lalu geser foto sehingga foto terakhir di baris akhirnya muncul di layar. Ini adalah bagian terakhir dari kerangka yang perlu dilakukan sebelum Anda dapat mulai menganimasi.

Shift the photos to the left so the last one appears on the screen
Geser foto ke kiri sehingga yang terakhir muncul di layar.

Pindah Sihir

Untungnya, membuat animasi untuk efek ini cukup sederhana, karena hanya mengandalkan Magic Move.

Kembali ke Slide 3, dan pilih Add an Effect> Magic Move dari menu Animate. Pastikan Fade Unmatched Objects dicentang, Cocokkan Dengan Objek, Akselerasi diatur ke Ease In & Ease Out, dan transisi dimulai Secara otomatis dengan delay 0 detik. Seperti animasi lainnya, Durasi adalah kebijaksanaan Anda — saya menetapkannya ke 1.50 untuk intisari awal panel informasi.

Menambahkan Magic Move animasi.

Tambahkan Magic Move animations ke Slides 4 dan 6, menjaga semuanya tetap sama kecuali untuk Duration, yang dapat diubah sesuai dengan keinginan Anda. Saya menetapkan masing-masing menjadi 2,00s dan 1,00s masing-masing.

Slide 5 seharusnya tidak mengandung animasi, tetapi pastikan untuk memastikan Start Transition diatur ke Otomatis dengan delay 0s agar demo berjalan lancar. Slide 7 tidak memerlukan animasi karena merupakan slide terakhir dari Keynote.

Set Start Transition to Automatically with a 0s delay
Setel Start Transition ke Otomatis dengan delay 0 detik.

Dan voila — ada efek panel informasi, selesai.

Memoles

Setelah semua konten tersedia dan semuanya animasi sebagaimana mestinya, inilah saatnya untuk membersihkan.

Cara termudah untuk melakukannya adalah membuat latar untuk video. Untuk melakukannya, buat empat persegi panjang menggunakan alat Shape yang membingkai iPhone tetapi tidak tumpang tindih dengan layar iPhone. Gunakan alat-alat di panel Format untuk membuat masing-masing kotak terlihat identik satu sama lain.

Create a background by framing the iPhone
Buat background dengan membingkai iPhone.

Tip: Isi warna yang melengkapi warna yang dicerminkan di aplikasi Anda berfungsi paling baik untuk background. Gradien dan isi gambar cenderung terlihat berantakan dan tidak konsisten. Hindari menggunakan bayangan juga.

Pilih masing-masing kotak dengan mengklik-kontrol. Klik kanan pada salah satu kotak yang dipilih dan klik Grup untuk membuat satu bentuk. Kemudian, klik pada gambar iPhone untuk memilihnya, klik kanan, dan klik Bawalah ke depan untuk membuat gambar background di belakang iPhone. Copy bentuk background dan paste pada setiap slide. Pastikan untuk membawa iPhone ke depan pada setiap slide untuk menyelesaikan efeknya.

The background adds finishing touches to the demo
background menambahkan sentuhan akhir pada demo.

Merekam Demo

Semua yang tersisa untuk dilakukan adalah mengekspor slideshow sebagai video. Untuk melakukannya, klik File > Ekspor Ke > QuickTime.

To export the video select File Export To Quicktime
Untuk mengekspor video, pilih File > Ekspor Ke > Quicktime.

Setel Playback ke Slideshow Recording. Format menentukan kualitas video, yang dapat disetel sesuai preferensi Anda. Setelah Anda mengonfigurasi opsi ini sesuai keinginan Anda, klik Berikutnya untuk mengekspor video Anda.

Konfigurasikan pengaturan ekspor.

Semua pekerjaan di Keynote sekarang selesai. Rekaman dapat digunakan sebagaimana adanya atau diedit lebih lanjut dalam aplikasi lain, seperti Final Cut atau iMovie, jika Anda ingin menambahkan elemen audio atau elemen video lainnya.

Kesimpulan

Dalam tutorial ini, saya menginstruksikan cara mendemonstrasikan animasi peta untuk aplikasi iOS di Keynote. Dengan menggunakan animasi Pindah Gulir Keynote, Anda dapat membuat animasi yang halus untuk memodelkan efek panel dan informasi pencarian dan informasi yang dapat ditemukan dalam aplikasi iOS berbasis peta.

Jika Anda memiliki pertanyaan atau kekhawatiran lebih lanjut, atau ingin melihat jenis animasi lain yang dapat dimodelkan dalam Keynote, jangan ragu untuk memberikan komentar di bawah!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.