Saturday, July 29, 2017

Motion Graphic & 2D Animation Technic


Grafik Gerak Dan Animasi 2-D: 10 Tip Untuk Aliran Kerja Bersih
Melinda Rainsberger

Semakin banyak, desainer, ilustrator dan coders diminta untuk bernyawa. Animasi menambahkan energi pada merek dan meningkatkan respons emosional pelanggan. Perangkat lunak untuk melakukannya cukup terjangkau, dan koneksi internet sekarang dapat menghadirkan video berkualitas tinggi. Untuk dua alasan ini, iklan berbasis animasi berkembang pesat di Web. Pembuat aplikasi telepon kecil bahkan bisa menghabiskan banyak anggaran mereka untuk animasi Web yang menjelaskan bagaimana aplikasi bekerja. Namun, animasi menambahkan tingkat kerumitan yang tidak semua orang diperlengkapi untuk segera mengambilnya.



Animasi adalah media berbasis waktu. Ini memiliki unsur tidak hanya tinggi, lebar dan kedalaman, tapi juga waktu. Dengan cara ini, ini lebih seperti sebuah situs web atau katalog: bisa berubah dari waktu ke waktu. Tapi bedanya dengan animasi adalah elemen waktu sepenuhnya berada di bawah kendali perancang, dan penampilnya hanya untuk perjalanan.

Tentu saja, organisasi itu penting. Tapi profil pemirsa, ukuran layar dan metode pengiriman dapat sangat mempengaruhi visual dan alur kerja Anda. Pada artikel ini, kita akan membahas beberapa panduan tentang bagaimana memulai pengorganisasian proyek animasi Anda, serta beberapa tip dan trik untuk menciptakan alur kerja yang lebih ramping dan bersih.


1. papan cerita

Storyboard memberikan cara terbaik untuk merencanakan sebuah proyek animasi. Mereka memungkinkan Anda untuk merencanakan komposisi dan waktu Anda dengan cepat sebelum melompat ke animasi akhir. Mereka membiarkan Anda dengan cepat menentukan semua elemen kunci sebelum membuat render akhir. Ini juga tahap terbaik untuk dipangkas dan diedit. Animasi adalah media yang menyita waktu, dan Anda tidak ingin memberi diri Anda pekerjaan ekstra. Cobalah untuk menentukan 10 gambar terpenting dari potongan Anda, dan kemudian tambahkan dan kurangi papan untuk menemukan tingkat detail yang tepat untuk menyampaikan lingkup proyek Anda.



Suara adalah elemen lain yang perlu dipertimbangkan pada tahap ini. Ini bisa memberi proyek Anda sebuah tulang punggung untuk timing. Jika Anda dapat membeli musik yang diproduksi secara komersial, lakukan ini sebelum mulai menghidupkan, lalu jadikan gambar Anda mengikuti irama musik. Anda juga bisa menggunakan lagu dengan mood dan timing yang tepat sebagai trek temp dan kemudian membuat musisi menciptakan suara akhir berdasarkan animasi Anda.

03
Semuanya untuk proyek harus disimpan dalam satu folder. Sebagian besar program animasi tidak menyisipkan file ke dalam animasi, namun cukup mengarah ke media. Jika sebuah file dipindahkan, program akan mengalami kesulitan menemukan file asli dan mungkin tidak menampilkannya. Rumah produksi yang berbeda memiliki sistem yang berbeda, namun umumnya mereka akan mengurutkan file mereka ke dalam folder dan kategori sub-folder ini:

    File proyek AEP atau Flash
    Grafik / ilustrasi
        Hi-res (ukuran layar atau lebih besar)
        Lo-res (ukuran layar atau lebih kecil)
        Papan cerita
    Foto
        Hi-res (ukuran layar atau lebih besar)
        Lo-res (ukuran layar atau lebih kecil)
    Suara
    Dokumen teks

    (Skrip dan dokumen yang mungkin Anda terima dari atau yang diberikan kepada klien.)

Video

    Suntingan
    Pra-renders
    Animatics (video membuat papan cerita)


Struktur folder ini sangat detail. Tapi Anda tidak hanya akan bisa menemukan sesuatu dengan mudah, tapi siapa pun yang datang ke proyek juga dapat menavigasi struktur file dengan mudah. Di perusahaan iklan dan studio animasi komersial, orang lain dapat memasuki proyek yang sedang berjalan. Mereka harus bisa membantu Anda, tidak berjuang untuk belajar sistem organisasi yang tidak konvensional.
Nama

Jika Anda bisa, gunakan semacam sistem pengkodean untuk menunjukkan proyek mana file itu miliknya. Dengan cara ini, jika terpisah, Anda dapat menemukannya dengan mudah. Anda mungkin menggunakan grafis serupa untuk beberapa proyek. Misalnya, bola dunia adalah gambar umum yang saya gunakan banyak karena saya melakukan animasi untuk aplikasi Web GPS. Mereka semua terlihat berbeda, jadi label generik "globe" tidak akan memberi tahu saya seperti apa rupa dunia dalam file tertentu. Berikut adalah contoh sistem penamaan kode:



    ADV_globe_all.ai

atau

    Goloco_globe_NE.psd

Kode akan tergantung pada apakah nama klien Anda panjang atau pendek. Nama pendek dapat digunakan secara keseluruhan, namun menyingkat nama yang panjang menjadi kode yang mudah diingat membantu.
Pengurutan

Jika Anda berencana untuk menampilkan satu gambar demi satu, nama file bernomor dapat mempercepat alur kerja Anda. Sebagian besar program animasi mengenali angka dan akan membariskannya satu demi satu jika Anda memasukkannya dengan benar. Contohnya adalah:

Animasi bingkai demi bingkai tradisional:

Karena tingginya volume frame dalam animasi, gunakan sistem penamaan tiga atau empat digit. Spasi, garis bawah dan garis-garis kecil mempengaruhi bagaimana program memahami file. Berikut adalah contoh penomoran yang benar dan salah:


Benar:

     Face_001.jpg
     Face_002.jpg
     Face_003.jpg

Salah:

     Image1.jpg
     Image_02.jpg
     Image__003.jpg

Angka yang lebih rendah seharusnya memiliki angka nol yang ditempatkan di depan mereka (sehingga angka 1, misalnya, muncul sebelum nomor 10). Program seperti Photoshop dan Adobe Bridge dapat membantu proses penggantian nama batch.

3. Vektor Dan Grafik Bitmap

Vektor memiliki resolusi tak terbatas, yang sangat bagus untuk animasi. Apakah Anda menggunakan bitmap atau vektor, gambarnya harus 72 DPI dan RGB.

Layar komputer dan televisi keduanya menggunakan spesifikasi ini. 72 DPI adalah satu-satunya DPI untuk video, dan video berkualitas tinggi dan rendah hanya akan berbeda dalam rasio aspek. Program Adobe telah dibangun untuk alur kerja kooperatif; Nama yang Anda beri lapisan di Illustrator dan Photoshop akan terbawa ke AfterEffects dan Flash.

Di Illustrator, letakkan elemen yang ingin Anda berimigrasi secara terpisah ke lapisan yang terpisah dan bukan jalur.




4. Foto

Untuk hasil terbaik, ubah ukuran foto dan gambar bitmap Anda. Jika Anda akan memperbesar gambar Anda, buat ukurannya lebih besar dari ukuran bingkai keseluruhan Anda. Jika Anda akan memperbesar 50%, maka ukurannya hanya 150% lebih besar dari keseluruhan bingkai Anda.

Jika kita ingin memperbesar karakter ini, kita perlu membuatnya lebih besar dari keseluruhan ukuran layar, jika tidak, ia akan terlihat terpincang-pincang.

Jika gambar akan lebih kecil dari layar Anda, kurangi itu. Karena semua gambar dimuat secara dinamis, ini akan mengurangi waktu rendering. Gambar kecil muat lebih cepat dari gambar besar, jadi penskalaan ulang sebelum animasi adalah praktik terbaik.

Gambar mini kami di sini tidak akan lebih dari 50% dari ukuran layar. Elemen penskalaan dengan ukuran yang sesuai di Photoshop menghemat waktu nanti saat merender.

Ini mungkin sedikit membingungkan, tapi itu penting; Karena rendering bisa memakan waktu berjam-jam, dan sedikit resize bisa menghemat satu atau dua jam waktu rendering dan membuat banyak media lebih mudah diatur. Kamera digital semua memotret dengan lebar 3000 piksel atau lebih, namun bingkai video terbesar hanya memiliki lebar 1920 piksel.

5. Komposisi Dan Warna

Di sinilah mengetahui metode pengiriman dan audiens Anda sangat berguna. Gambar yang ditujukan untuk rilis teatrikal tidak harus bekerja pada layar yang lebih kecil, dan sebaliknya

Perbandingan Ukuran Layar
Benda kecil bisa terlalu kecil dalam video Web dan menjadi tidak terbaca. Sebagian besar video Web menggunakan rentang ukuran yang lebih kecil sehingga pemirsa dapat melihat elemen dengan benar. Elemen yang terlalu kecil di Web bisa berhenti dikenali. Garis rambut berubah menjadi garis piksel dan pupil menjadi lubang hitam.

Skala Web

Dalam medium apapun, warna itu penting, tapi terutama di Web, di mana penting untuk menciptakan kontras dan membimbing mata pemirsa. Pikirkan komposisi Anda sebagai seperangkat bentuk daripada karakter dan adegan, dan Anda akan bisa lebih mudah menghasilkan komposisi grafis yang efektif yang dapat dibaca pada berbagai skala.
Menggunakan Warna untuk Menekankan Unsur

Daerah yang paling kontras adalah antara kemeja kuning muda dan semak hijau gelap. Mata secara alami ditarik ke sana. Namun, perhatikan orang-orang dengan buta warna. Warna yang "pop" bagi kebanyakan orang mungkin bukan seseorang dengan persepsi warna yang terganggu. Melontar filter desaturasi cepat di atas proyek akan menyoroti area lemah skema warna Anda.
Salah Penggunaan Kontras Warna

Meskipun warna oranye dan biru melengkapi dan menarik mata, warnanya sama pada grayscale. Dengan desaturasi gambar, kita melihat nilai grayscale dari warna. Seseorang dengan isu penglihatan berwarna tidak akan menganggap daerah ini sebagai daerah yang paling khas.

6. Aspek Rasio Dan Web

Sebagian besar video Web memiliki rasio aspek 16: 9 (yaitu layar lebar). Layanan seperti YouTube atau Vimeo mendorong format ini. Ada banyak ukuran "standar", tapi yang paling berguna adalah HDV / HDTV 720 dan HDV 1080.

Kedua format adalah layar lebar, dan keduanya memiliki piksel persegi. Monitor komputer memiliki piksel persegi, yang berarti pemirsa akan melihat representasi sebenarnya dari gambar akhir Anda. Program seperti AfterEffects dapat mensimulasikan jenis layar lainnya, namun jika proyek Anda untuk Web, membuatnya bekerja dengan piksel persegi.

Jika Anda melakukan proyek untuk penyiaran, konsultasikan dengan klien Anda, tempat atau penyiar yang akan mempresentasikannya. Mereka semua memiliki ukuran dan spesifikasi yang berbeda untuk dipatuhi.



7. Dimana Untuk Ketik

Program animasi memiliki tipografi sendiri, atau Anda bisa membuat sendiri program seperti Illustrator atau Photoshop. Dengan Illustrator, Anda tidak perlu khawatir teks Anda terlalu kecil atau besar karena akan menjadi gambar vektor. Anda bisa mengukur skala tanpa batas tanpa kehilangan kualitas atau meningkatkan waktu rendering.
Untuk judul hiasan atau kredit bergulir panjang, meletakkan ini di program yang dirancang untuk teks adalah yang terbaik. AfterEffects dan Flash dapat melakukan cukup banyak hal yang bisa dilakukan oleh Illustrator, namun di dalamnya Anda tidak akan dapat melihat kapan teks mengalir dari kanvas, yang membuat sulit merencanakan pengguliran atau memperbesar kredit tanpa terus-menerus memindahkan teks atau rescaling untuk mendapatkan yang lebih baik. melihat. Illustrator dan Photoshop memungkinkan alat yang lebih canggih untuk menguraikan dan menyesuaikan gaya jenis Anda.

Selain itu, merancang di Illustrator atau Photoshop memungkinkan Anda berfokus pada desain tipe ini. Anda dapat lebih berkonsentrasi penuh untuk membuat desain tipografi Anda kohesif dan menarik.
Untuk teks kecil, Anda bisa langsung mengetikkan program animasi.


8. Pra-Rendering

Membuat "Proxy" adalah cara yang bagus untuk menggunakan kembali elemen dan mengurangi waktu rendering. Mereka memungkinkan Anda membuat satu lapisan atau banyak lapisan. Jika elemen selesai dan Anda tidak perlu mengubahnya, Anda dapat menjadikannya sebagai file video tunggal dengan saluran alfa. Anda bahkan bisa membuat animasi dengan alpha channel.

Bidang bintang berkelap-kelip menjadi lebih sederhana dengan pra-rendering. Bidang bintang kemudian bisa digabungkan dan dirender sebelumnya, sehingga membuat satu file video dari langit berbintang yang mudah digunakan lagi dan lagi.



Sebagian besar program animasi bisa menangani video, begitu pula file Photoshop dan Illustrator.



Program seperti AfterEffects dengan mudah menangani saluran alfa tanpa rasterisasi atau dithering. Ini sangat berguna jika elemen memiliki banyak filter intensif rendering. Efek seperti lapisan secara dinamis dimasukkan ke dalam setiap frame. Video biasanya 30 frame per detik, jadi filter blur yang sederhana akan menghasilkan ratusan kali hanya dalam 10 detik. Jika Anda memikirkan berapa lama waktu yang dibutuhkan untuk meletakkan filter pada lapisan di Photoshop, Anda memiliki beberapa gagasan tentang berapa lama waktu yang dibutuhkan filter yang sama untuk diterapkan pada banyak bingkai di Photoshop.



1 detik untuk memberi efek x 30 frame / detik x 10 detik = 5 menit rendering.

Anda juga bisa menduplikat animasi atau layer dan menggunakannya berkali-kali. Hal ini membuat animasi kaleidoskop lebih mudah, dan pra-rendering mengurangi waktu rendering. Program seperti Flash bagus dalam bersarang dan menangani "contoh" dari animasi yang sama, namun yang setara dengan AfterEffects adalah pra-rendering dan menggunakan lapisan video baru.

Flash dan AfterEffects keduanya memiliki fitur yang memungkinkan Anda untuk mengambil animasi kompleks dan menguranginya ke satu lapisan.
Kompleksitas bisa dibangun dari beberapa elemen sederhana dengan hasil yang spektakuler.

9. Atur Diri Sendiri

Pertama, buat grup di proyek Anda dengan "Garis Waktu," "Layar" atau "Komposisi" yang merupakan daftar akhir. Dengan cara ini Anda, atau siapa pun, akan dapat dengan mudah menemukan dan mengembalikannya lagi. Sebagian besar program video dan animasi memiliki bin atau perpustakaan dan memungkinkan pembuatan folder internal yang mudah.


Kedua, memiliki sistem penamaan incremental yang bagus untuk merender. Seringkali, render "final" tidak terlalu final. Dengan menggunakan angka atau huruf, komputer secara otomatis akan memesan file untuk Anda; Dan lagi, siapa pun akan bisa mencari tahu apa yang terakhir render. Your_project_final_Final_FINAL_v4.mov tidak akan menjelaskan apa pun untuk siapa pun. Dalam AfterEffects, file film diberi nama sesuai dengan Komposisi mereka. Saya meletakkan "v" di akhir masing-masing sehingga saya dapat dengan mudah memasukkan nomor yang tepat sebelum saya memberikannya. Saat membuat versi Web, saya mengubah "v" menjadi "w" untuk menunjukkan bahwa ini adalah versi Web. Daftar daftar akan terlihat seperti ini:



    CI_TCfIH_edit_v1.mov
    CI_TCfIH_edit_w1.mov
    CI_TCfIH_edit_v2.mov
    CI_TCfIH_edit_w2.mov

Komputer seperti angka, huruf dan pesan. Mengeksploitasi kecenderungan ini membebaskan Anda untuk usaha yang lebih kreatif. Karena animasi bisa memakan ribuan file, organisasi sangat penting.


10. Memasukkan Live Action

Jika Anda perlu memasukkan layar hijau atau rekaman live action lainnya, tembaklah dalam format HD jika memungkinkan. Ini cenderung memiliki rasio aspek yang lebih besar daripada televisi standar, yang menyisakan ruang untuk beberapa trik sinematik nantinya saat Anda sedang mengerjakan program animasi.



Kami tidak akan masuk ke pencahayaan, editing atau shooting di artikel ini. Tapi begitu Anda menguasai sekumpulan keterampilan ini, Anda bisa membawa elemen tersebut ke dalam animasi Anda dan membuat elemen live action Anda berinteraksi dengan animasi.

Video web, seperti yang ada di YouTube, berukuran 640 × 360: jauh di bawah ukuran HD video standar. Ini berarti Anda akan memiliki video "ekstra". Dengan memfilmkan aksi live Anda dengan kamera yang terkunci (tidak bergerak), Anda akan mendapatkan yang terbaik dari tembakan mantap dan panci yang sempurna. Cukup masukkan cuplikan Anda ke dalam komposisi yang sedikit lebih kecil dan hidupkan posisinya. Motion juga memandu mata pemirsa dan menyoroti bagian-bagian tertentu dari layar. Tapi panning kamera bisa membuat sulit untuk berbaris live-action dan elemen animasi.


Gambar-gambar ini ditunjukkan pada skala yang benar. Kita bisa mengecilkan video besar bahkan lebih untuk framing yang lebih baik.


11. Bersenang-senang dan Percobaan

Program animasi adalah kombinasi dari dua sampai tiga program desain grafis yang lebih kecil ditambah editor video. Mereka memiliki berbagai efek, alat dan kemampuan. Hanya dengan bermain-main dengannya Anda akan benar-benar belajar apa yang bisa dilakukan program. Namun, hanya dengan mencoba sesuatu yang belum pernah Anda lakukan sebelumnya, Anda akan tahu apa yang benar-benar Anda mampu (yaitu mengubahnya menjadi 11).

No comments:

Post a Comment

loading...