Bagaimana cara membuat animasi GIF prototipe maket, seperti yang ada di Dribbble?

Saya yakin Anda telah melihat Dribbbler mengunggah maket animasi dari desain mereka.

Ini sebuah contoh:

Saya dapat membuat maket di Photoshop dan bahkan menerapkan Animasi Tween sederhana untuk mereka tetapi saya tidak pernah bisa membuat GIF saya terlihat seperti contoh di sini.

Apa yang digunakan Dribbblers untuk membuat animasi ini?

Perhatikan bahwa animasi juga termasuk titik sentuh dan gerakan sempurna. Saya ingin mengonversi maket Photoshop saya untuk melakukan hal yang sama.

Bagaimana saya bisa membuat contoh animasi mockup saya, mirip dengan yang dibuat oleh Dribbblers?

Hal-hal yang perlu Anda ketahui untuk membuat sesuatu seperti ini di After Effects:

Cara membuat Proyek dan Komposisi

Ketika Anda memulai AE, Anda dapat menekan Cmd+Nuntuk membuat Proyek baru dengan satu Komposisi di dalamnya.

Jika Anda sudah memiliki Proyek terbuka, menekan Cmd+Nhanya membuat Komposisi baru.

Dalam proyek ini, saya menggunakan 2 komposisi. GUIcomp untuk memegang GUI dan animasinya. iphonecomp untuk menahan keduanya, latar belakang dan GUIcomp.

Komposisi kedua dengan animasi GUI harus memiliki ukuran yang sama dengan layar, atau setidaknya memiliki rasio aspek yang sama. Kemudian, ketika Anda akan meletakkannya di layar, mungkin terlihat aneh jika rasio aspek tidak aktif.

Mengimpor gambar ke AE

After Effects memiliki sistem yang cukup bagus untuk mengimpor file .dpd, tetapi saya tidak suka menggunakannya karena jika Anda salah tempat, memindahkan atau mengganti nama file .dpd, setelah efek tidak dapat menemukannya dan Anda harus mengganti rekaman untuk setiap lapisan secara terpisah.

Jika Anda mengimpor folder gambar ke proyek dan Anda, misalnya. ganti nama folder gambar, Anda hanya perlu mengganti satu rekaman gambar dan semua gambar yang hilang dipulihkan (Selama semua gambar yang hilang ada di folder yang sama). Juga dengan cara ini ada lebih sedikit kekacauan.

Cara mengimpor gambar ke proyek

Klik kanan di dalam panel Project di sebelah kiri pilih: Import > Multiple files

... atau Anda cukup menyeret file ke panel itu

Saya menggunakan slicy untuk mengekspor gambar saya dari photoshop.

Objek apa yang harus Anda simpan sebagai file gambar terpisah

Pada dasarnya Anda ingin menyimpan semua objek bergerak secara terpisah. Anda mungkin juga perlu menyimpan beberapa objek statis secara terpisah.

^{Dalam proyek ini saya bisa berpotensi menyimpan header dan footer sebagai satu, tetapi header memiliki bayangan yang melewati tombol pertama, jadi saya harus menyimpannya secara terpisah.}

Berikut ini rincian cara saya menyimpan file gambar saya di photoshop sebelum mengimpornya ke AE.

Animasi 101

Animasi posisi:

1. Animasi posisi:
   • Pilih objek Anda di daftar di sebelah kiri timeline.
   • tekan P
   • Klik ikon stopwatch yang sekarang di bawah lapisan yang Anda pilih. Ini secara otomatis menambahkan keyframe pertama, di mana indikator waktu Anda berada (itu garis merah di timeline).
   • 
   • pindahkan indikator Waktu ke depan dalam timeline. Seret atau Cmd+{Arrow left or right}atauCmd+Shift+{Arrow left or right}
   • di penampil komposisi, seret objek Anda ke posisi di mana Anda ingin memindahkannya (Anda juga dapat menggunakan Shift+arrow keys , seperti di photoshop Atau dengan menyeret nilai angka.).
   • Bingkai kunci lain muncul di timeline dan sekarang Anda memiliki animasi.
   • 
   • Anda dapat memainkan animasi dengan menekan space

Pindahkan bingkai kunci lebih dekat satu sama lain untuk mempercepat animasi atau lebih jauh dari satu sama lain untuk memperlambatnya.

Animasi yang berlanjut setelah jeda.

sebuah skenario: Anda telah menganimasikan sesuatu dari A ke B dan Anda ingin menjeda selama jumlah X milidetik dan kemudian berpindah dari B ke C.

Saat Anda telah membuat animasi B, maju dalam timeline dan klik ikon keyframe di sisi kiri, di sini:

Seharusnya terlihat abu-abu, jadi jangan khawatir. Itu hanya berarti tidak ada keyframe di posisi itu

Karena keyframe # 2 dan transformasi keyframe # 3 yang baru dibuat memiliki nilai yang sama, sekarang ada jeda di antara kedua keyframe tersebut. Kemudian Anda dapat melanjutkan animasi secara normal, dengan bergerak maju dalam timeline, dan mengubah nilainya lagi.

Animasi hal-hal lain, seperti Rotasi atau Opacity

Saya hanya ingin meluangkan waktu ini untuk memberi tahu Anda bahwa semuanya berfungsi seperti animasi posisi (... dikurangi seret).

Cukup gunakan bilah geser angka yang muncul saat Anda menekan tombol pintas di bawah ini.

Tombol cepat untuk metode transformasi yang berbeda:

• P - Posisi
• T - Opacity
• R - Rotasi
• S - Skala
• A - Titik jangkar

Cukup pilih objek dan tekan salah satu hotkey ini dan mulai menjiwai. Jika Anda tidak memilih apa pun, itu mengungkapkan metode transformasi untuk setiap objek di comp.

Bagaimana cara meng-slave objek ke objek lain

Di panel Comp Anda akan melihat daftar dropdown Induk pada setiap objek.

Anda dapat menggunakannya untuk menentukan orang tua untuk objek.

Jika Anda kemudian memindahkan Orang Tua, Anda akan melihat bahwa elemen Anak sekarang bergerak dengannya. Hal yang sama berlaku untuk animasi yang Anda lampirkan ke elemen Induk.

Jika Anda menghidupkan objek Orangtua untuk diputar, Anak akan mengikuti ...

Menambahkan elastisitas ke animasi Anda

Jadi mungkin Anda memperhatikan bahwa animasi tombol tidak berhenti di dinding, melainkan berhenti dengan cara yang sangat elastis.

After Effect Expressions dapat digunakan untuk mencapai ini (Ini dapat melakukan lebih banyak juga).

Untuk menerapkan skrip Ekspresi ke animasi, Alt+{mouse click}stopwatch dan rekatkan dalam skrip.

Ekspresi yang saya gunakan dalam animasi tombol saya

3 variabel pertama amp, freq, decaydapat diedit untuk mendapatkan hasil yang berbeda dari itu.

Anda dapat menerapkan skrip yang sama ini untuk animasi berbasis gerakan. Misalnya, animasi opacity tidak terpengaruh.

Bisa juga ditemukan di sini.

amp = .1;
freq = 1.0;
decay = 9.0;
n = 0;
if (numKeys > 0){
n = nearestKey(time).index;
if (key(n).time > time){
n--;
}}
if (n == 0){ t = 0;
}else{
t = time - key(n).time;
}
if (n > 0){
v = velocityAtTime(key(n).time - thisComp.frameDuration/10);
value + v*amp*Math.sin(freq*t*2*Math.PI)/Math.exp(decay*t);
}else{value}

Meringankan ....

Jadi ini adalah hal lain yang dapat membuat animasi tampak jauh lebih linier, sama seperti skrip Ekspresi di atas.

Saya menggunakan Ease Ease dalam "lingkaran indikator sentuh" ​​untuk membuatnya terlihat lebih mirip gerakan manusia.

Anda dapat memilih satu atau beberapa bingkai kunci dan klik kanan salah satu darinya.

Kemudian dari daftar: Keyframe assistant > Easy Ease

Saya sering menggunakan Easy Easy, karena saya malas ...

Foto atau tidak terjadi ...

Berikut ini adalah animasi posisi sederhana yang menunjukkan bagaimana pelonggaran dan skrip ekspresi khusus ini dapat berdampak besar pada animasi.

Menempatkan comp / footage animasi ke layar

Jadi setelah GUI dianimasikan, sekarang saatnya untuk meletakkannya di layar perangkat.

1. Tempatkan GUI comp di dalam iPhone comp, sama seperti Anda menempatkan gambar di dalam komposisi.
2. Klik dua kali iPhone comp di panel Project
3. Pilih GUI comp
4. Dari menu paling atas Effects > Distort > Corner pin
5. Kemudian cukup tarik setiap sudut untuk mencocokkan sudut layar perangkat.

Mengekspor ke .gif

AE tidak memiliki metode asli untuk melakukan ini, tetapi jangan khawatir, ada beberapa cara.

Saya lebih suka melakukan ini:

1. Klik komposisi di Projects panel
2. Composition > Add to render queue Cmd+Ctrl+M
3. Kemudian di bagian bawah tempat timeline biasanya duduk, Anda memilih apa yang akan diekspor dan di mana.
   • Saya biasanya mengekspor .mov lossless
   • Jika Anda mengklik "Pengaturan render", Anda dapat memilih framerate, jika tidak maka akan menggunakan framerate Comp
4. Kemudian cukup tekan render di sudut kanan atas atau panel itu.
5. Temukan file yang diekspor dan buka di photoshop.
6. Simpan untuk web Cmd+Shift+Alt+S
   • Simpan sebagai .gif

Sejujurnya tidak seburuk itu ...

Mengekspor sebagai file video

Jadi meskipun metode di atas menunjukkan kepada Anda cara mengekspor file lossless, itu bukan cara Anda harus mengekspor file video.

Anda melakukannya seperti ini:

1. Simpan file proyek Anda.
2. Klik komposisi di Projects panel(jika Anda memiliki lebih dari satu)
3. Composition > Add to adobe media encoder queue Cmd+Alt+M
4. Seret prasetel dari kolom kanan ke kolom kiri
5. Tekan mainkan.
6. Jika Anda tidak memilih folder ekspor, secara default folder itu berada tepat di sebelah file proyek.

Bagaimana cara mengganti rekaman

Jadi AE tidak dapat menemukan file Anda? Melakukan hal ini:

• Klik kanan salah satu rekaman yang hilang di panel Proyek
• Dari daftar Replace footage > File...
• Temukan rekaman dan barang-barang Anda

Tombol cepat bermanfaat lainnya

• U- Mengungkapkan semua keyframe yang digunakan dalam comp (jika Anda tidak ada yang dipilih). Sangat berguna ketika Anda perlu memindahkan beberapa bingkai kunci sekaligus, misalnya.
• U( Ketuk dua kali ) - Mengungkapkan semua yang telah diubah.
• E( Ketuk dua kali ) - Mengungkapkan semua Ekspresi yang digunakan.
• J - Bergerak ke bingkai kunci sebelumnya.
• K - Bergerak ke bingkai kunci berikutnya.
• space - Dimainkan comp
• Iatau homekunci - Memindahkan indikator waktu saat ini ke awal di timeline.
• Cmd+K - Pengaturan komposisi saat ini.
• Cmd+I - Impor file.
• Alt+{Arrow keys left and right} - Pilih bingkai kunci dan tekan tombol pintas untuk memindahkannya.
• Alt+Shift+{Arrow keys left and right} - Pilih bingkai kunci dan tekan tombol pintas untuk memindahkannya.

File proyek dapat ditemukan here.

INI ADALAH MOCKUP ANIMASI GRATIS. FILE PSD dari situs web gulir dow dan menu animasi sepenuhnya mengedit dan animasi di photoshop konyol mudah untuk mengedit dan bermain-main, Anda dapat mengunduh file secara gratis di sini , saya juga memiliki video tutorial bagaimana mudah untuk mengedit freebie ini.

Jika Anda melihat komentar di pos tertentu, orang itu mengatakan ia menggunakan Adobe After Effects http://www.adobe.com/uk/products/aftereffects.html

Ada dua cara untuk melakukan ini.

1. Buat / Mockup animasi yang diinginkan dalam program animasi (yang After Effects adalah satu) dan kemudian ekspor itu sebagai gif animasi. Jelas (seperti yang telah Anda sadari) ini akan melibatkan juga menciptakan sentuhan "palsu" dan interaksi lainnya untuk menunjukkan apa yang terjadi.

2. Buat prototipe fungsional dan kemudian rekam output dari perangkat Anda melalui AppleTV atau yang serupa melalui output HDMI saat diteruskan ke televisi Anda.

Keduanya sangat memakan waktu dan perjalanan ada di tangan mereka sendiri.

Tetapi opsi 2 memiliki kelebihan BESAR daripada opsi 1. Yang paling penting adalah Anda akan belajar beberapa pemrograman dasar.

Jauh lebih besar dari itu, bagaimanapun, adalah bahwa dengan beberapa kemampuan pemrograman interaktif yang sangat dasar Anda akan dapat beralih melalui variasi dan pendekatan alternatif yang jauh lebih cepat daripada seseorang yang menggunakan perangkat lunak Animasi.

Dan Anda akan memiliki sesuatu yang benar-benar interaktif untuk menunjukkan desain Anda. Ditambah karya seni telah benar-benar diuji dalam lingkungan yang interaktif pada perangkat, jadi sudah pasti pixel dan warna yang sempurna.

Tapi tunggu, saya tahu. Kamu ketakutan. Ini akan sulit, bukan?

Tidak jika Anda punya iPad.

Codea adalah cara termurah dan tercepat untuk membuat animasi dan interaktivitas sepele (dan SANGAT kompleks) dalam bahasa skrip yang paling sederhana dan terbersih di dunia ... Lau.

http://codea.io

Jika Anda tidak memiliki iPad, dapatkan iPad.

Sampai saat itu, lanjutkan dengan belajar processing.org karena Anda akan dapat membuat mockup yang serupa dengan itu:

http://processing.org/

Pemrosesan menggunakan bahasa skrip lain yang disebut Javascript. Ini juga sederhana, tetapi tidak seanggun Lua.

Anda juga dapat membuat animasi UI menggunakan Keynote. Ini cukup sederhana dan sempurna untuk membuat animasi UI. Saya kemudian menggunakan efek setelah hanya menempatkan video ke dalam Telepon.

Langkah 1: Saya pertama kali membuat animasi UI pada keynote dan membuatnya: http://vimeo.com/108991829

Langkah 2: Saya kemudian menempatkan video ke iPhone setelah efek mockup yang saya temukan online dan menyimpan file .mov. Mengikuti instruksi pada video ini: http://youtu.be/VeZGwjVwDrc

Langkah 3: Dengan bantuan photoshop dan mengikuti instruksi yang saya buat ini.

jika Anda ingin tetap menggunakan Keynote dan mengekspornya sebagai format Quicktime, saya pikir mungkin tidak ada salahnya untuk mencoba:

GIF Brewery

Pabrik Bir GIF memungkinkan Anda mengkonversi klip singkat dari file video Anda menjadi GIF. Baik Anda ingin membuat GIF kucing terbaru atau memberikan pratinjau video yang lebih panjang, GIF Brewery cocok untuk Anda.

Anda tidak lagi harus mengekstrak bingkai dari film dan bermain-main dengan lapisan dalam Adobe® Photoshop®. Sebaliknya, biarkan GIF Brewery melakukan semua pekerjaan yang membosankan untuk Anda.

Selain itu, GIF Brewery mengandung banyak fitur lain untuk mengekspresikan kreativitas Anda. Anda dapat menambahkan teks untuk membuat ulang dialog atau menambahkan beberapa filter gambar.

Saya sangat suka semua instruksi yang diberikan dari @Joonas.