Cara membuat animasi di Adobe Illustrator. Tips & Trik dalam Adobe ilustrator: Trik dalam Illustrator. Kemungkinan untuk membuat grafik di Illustrator (dibandingkan dengan Adobe Flash) Cara membuat animasi di Illustrator

Anda memiliki satu atau dua ikon yang ingin Anda hidupkan dengan animasi. Di mana Anda akan memulai? Katakanlah Anda memiliki file SVG, Illustrator CC, dan After Effects CC, tetapi solusinya tidak Anda ketahui.

Pada artikel ini, saya akan menunjukkan bagaimana Anda dapat dengan mudah menganimasikan file SVG, termasuk menyiapkan file SVG di Illustrator dan mengimpornya ke After Effects CC. Saya juga akan menjelaskan bagaimana Anda dapat mengubahnya menjadi Shape Layers dan menambahkan gerakan. Terakhir, mari kita bicara tentang ekspor dan rendering.

Hasil akhir pekerjaan.

Sekarang mari kita ke bagian yang menyenangkan - mempelajari cara menghidupkan gambar.

Mempersiapkan File SVG di Illustrator

Mari kita mulai dengan membuka file SVG Anda di Adobe Illustrator CC. Saya akan menganimasikan ikon mobil kecil yang tersedia gratis di Week Of Icons.

Setelah membuka file, kita perlu memisahkan dan membagi semua objek menjadi beberapa lapisan. Anda dapat melakukannya secara manual atau menggunakan Rilis ke Lapisan (Urutan) untuk mempercepat prosesnya. Sebelum kita mengimpor file ke After Effects, kita perlu menyimpannya sebagai format file Illustrator.

Kita dapat memisahkan objek menggunakan Release to Layers (Sequence) agar tidak membuang waktu yang berharga. Impor dan atur file di After Effects CC

Sekarang Anda siap untuk mengimpor ke After Effects CC. Mari gunakan pintasan keyboard Ctrl+I (Windows) atau Command+I (Mac) untuk memuat kotak dialog Impor File, atau buka File > Impor > File... Dari sana, pilih file Illustrator CC yang telah kami siapkan dan klik Impor . Kotak dialog kecil akan muncul dengan nama file yang dipilih. Pilih Komposisi dari daftar drop-down yang disebut Jenis Impor.

Lagi cara cepat mengimpor file - klik dua kali pada lokasi kolom di panel proyek.

Di Panel Timeline kita akan melihat komposisi baru. Klik dua kali di atasnya. Kita sekarang akan melihat layer Illustrator CC dengan ikon oranye di sebelah kiri namanya.

Sebelum kita memulai, kita perlu mengubah semua layer ini menjadi Shape Layers. Kita perlu memilih semuanya menggunakan Ctrl+A/Command+A, atau secara manual menggunakan Shift + Left Mouse. Setelah itu, klik kanan pada layer tersebut dan pilih Create > Create Shapes from Vector Layer.

Sekarang setelah layer baru dipilih, seret layer tersebut ke bagian atas panel di atas layer Illustrator CC, dan kemudian hapus layer Illustrator CC sehingga tidak mengganggu.

Ubah Lapisan Illustrator CC menjadi Lapisan Bentuk di After Effects CC

Meskipun hal ini tidak perlu, penting bagi kita untuk memberi setiap lapisan nama dan/atau kode warna yang sesuai. Hal ini akan memungkinkan kami bekerja lebih efisien karena kami fokus pada personel kunci. Pada contoh di bawah, warna label kurang lebih cocok dengan isi lapisan terkait.

Memberi label pada Layer Bentuk dengan nama, warna, teks, dan penempatan yang sesuai sangatlah praktis.

Untuk mengonfigurasi parameter, gunakan pintasan keyboard Ctrl+K/Command+K atau Komposisi > Pengaturan Komposisi... Dari Pengaturan Komposisi, kita perlu memilih Lebar, Tinggi, Kecepatan Bingkai, dan Durasi. Untuk proyek ini saya memilih 60 frame per detik agar animasi tetap lancar.

Pada titik ini segala sesuatunya tampaknya sudah siap, tetapi ada satu hal lagi yang perlu dilakukan. Kita perlu mengelompokkan layer tertentu agar pergerakannya sinkron dengan layer utama, yang dapat kita kendalikan. Cara ini disebut dengan Parenting.

Gunakan Pick Whip untuk menetapkan lapisan induk ke beberapa lapisan.

Dalam contoh kita, saya menugaskan lapisan yang kurang signifikan (lapisan anak) seperti kaca depan, bagian bodi, kayu, dan tali ke lapisan bodi utama (lapisan induk). Hal ini memungkinkan saya untuk mengontrol posisi dan putaran seluruh mobil (kecuali roda) menggunakan lapisan induk.

Membuat Animasi

Saya ingin mobil itu menabrak batu dan melayang di udara sebentar. Saya juga ingin pohon itu bergerak ke atas dan ke bawah dan membuka batangnya. Saya mulai dengan membuat batu, mobil, dan roda. Maka inilah waktunya untuk mengatasi rintangan terbesar – melakukan tindakan di pohon. Setelah selesai saya beralih ke bagian yang lebih kecil seperti rak dan tali.

Sketsa yang menggambarkan animasi

Langkah pertama adalah membuat elemen atau layer batu, tapi daripada kembali ke Illustrator CC untuk menambahkan layer lain, saya hanya menggunakan Pen Tool di After Effects CC. Ini memungkinkan saya mendesain batu kecil dengan cepat.

Oh, Alat Pena yang hebat!

Bagasinya adalah tugas yang relatif sederhana. Saya memasangnya ke bagian belakang mobil dan membuat titik jangkar di titik kiri bawah. Menggunakan Pick Whip saya menugaskannya ke lapisan tubuh induk. Langkah kedua dari belakang adalah menciptakan efek rotasi, yang pada gilirannya membuat momen pantulan mobil menjadi lebih realistis.

P.S.

Anda dapat menemukan file Illustrator CC dan After Effects CC saya.

Kumpulan ikon tersedia untuk diunduh secara gratis di .
Adobe Ilustrator dan After Effects

Impor dan animasi sederhana Halo. Hari ini kita melihat animasi sederhana di After Effects.
Sumber: Adobe Illustrator CC

Adobe After Effects CC

Mari mulai belajar dengan menggambar di Illustrator.
Ayo menggambar

1) Gambarlah persegi panjang kuning sebagai latar belakang

Gambar 1 - Persegi Panjang
2) Gambarlah sebuah Lingkaran dan isi dengan gradien
Mari kita bekerja sedikit pada lingkaran:
- hapus titik bawah pada kontur, kita mendapatkan busur;

- menggambar garis lurus, menutup bagian bawah busur, kita mendapatkan setengah lingkaran

Gambar 2 - 1) menggambar lingkaran; 2) gradien; 3) hapus titik
3) Gambarlah sebuah Persegi Panjang dan buatlah salinannya
- satu persegi panjang abu-abu;
- persegi panjang lainnya berwarna abu-abu tua

4) Gambarlah Segitiga dari tanda bintang dengan mengatur jumlah sinar menjadi 3

Gambar 3 - 1) lampu persegi; 2) benar-benar gelap; 3) segitiga

5) Menggambar kucing menggunakan Pena dan bentuk sederhana

Gambar 4 - 1) kepala; 2) leher; 3) tubuh; 4) kaki; 5)ekor
Dan sekarang momen yang paling PENTING

Mari kita sebarkan gambar ke dalam beberapa lapisan (yang akan dianimasikan ada pada lapisan tersendiri) seperti ini:

Gambar 5 - semua foto (tanda merah pada lapisan penting)
Itu saja, sekarang mari kita simpan.

Mari kita lihat pengaturan penyimpanannya

Gambar 6 - Simpan

Dan sekarang tahap selanjutnya. Tutup Adobe Illustrator dan buka After Effects.
Impor ke After Effects
File - Impor - File - pilih file Illustrator yang kami simpan.

Mari kita pilih untuk mengimpor lapisan dari Illustrator; jika kita memasukkan cuplikan, kita akan mendapatkan gambar dengan lapisan yang digabungkan, tetapi kita tidak memerlukannya.

Gambar 7 - Impor Sebagai Komposisi
Itu saja, diimpor. Sekarang mari kita lihat apa yang kita punya. Klik dua kali

sesuai komposisinya, sehingga terbuka dan kita melihat lapisan-lapisannya (jika semuanya dilakukan dengan benar, akan ada beberapa lapisan). Kami mendapatkan ini, lihat gambar

Dan sekarang yang kita hadiri hari ini adalah Animasi.

Animasi di After Effects
Atur titik rotasi di bagian atas panah menggunakan Pan Behind Tool (pintasan - Y). Kami hanya mengambil satu poin dan memindahkannya ke tempat yang diperlukan. Hasilnya akan terlihat seperti ini..

Gambar 9 - Alat geser dan Lapisan

Itu saja, sekarang mari beralih ke lapisan untuk animasi.
Kita membutuhkan layer Arrow dan Head_cat.
Mari kita mulai dengan panah.
Mari perluas daftarnya, temukan dan klik pada jam. Jadi kita tetapkan titik pertama pada nol detik. Animasi akan berlangsung total 2 detik.
Jadi, ini adalah pengaturan yang perlu Anda buat (kami akan memberikan total 3 poin):

Kedua	0	1	2
	+66	- 70	+66

Ini akan terlihat seperti ini:

Gambar 10 - Panah rotasi

Sekarang mari kita menganimasikan kepala kucing.
Mari perluas head_cat dan temukan Position .
Akan ada 4 titik di sini.
Hanya koordinat terakhir yang akan diubah tanpa mempengaruhi koordinat lainnya.

Kedua	0.1	0.17	1.12	2.0
Posisi	689.3	729.3	729.3	689.3

Mari kita lihat gambarnya.

Gambar 11 - Posisi kepala

Jadi, prinsip animasinya seperti ini. Anak panah itu berayun dari sisi ke sisi, begitu mendekati anak kucing, ia menarik kepalanya ke dalam, berlama-lama di posisi ini beberapa saat, lalu mengembalikannya ke tempatnya.

Tahap akhir

Produksi
Anda perlu membuat produk jadi dari pekerjaan Anda.
Masuk ke menu - Tambahkan ke Render Queue
Panel Render akan terbuka dan di Modul Output (dua klik) pilih format output. Saya mengambil *.mov

Gambar 12 - Render

Klik tombol RENDER dan dapatkan hasilnya (jangan lupa tentukan jalurnya).
Itu saja.

Sekarang mari kita sedikit memperumit tugasnya - mari membuat spanduk Flash animasi. Tentu saja, dalam hal ini tidak perlu membicarakan animasi Flash lengkap - ada paket khusus untuk ini. Namun untuk membuat video amatir yang sederhana, Anda juga bisa menggunakan Illustrator.

Tidak ada alat khusus dan alat antarmuka, seperti garis waktu, yang umum untuk program pengembangan animasi, tidak tersedia di Adobe Illustrator. Namun ada satu kehalusan - Anda dapat menggunakan lapisan sebagai bingkai.

Buat spanduk hanya dengan teks.

Kelompokkan simbol menggunakan perintah Objek › Grup.

Tugas selanjutnya adalah membuat objek kontur dari simbol font, jika tidak, pembentukan lapisan yang benar tidak akan berfungsi. Untuk melakukan ini, pilih grup dan pilih Tipe › Buat kerangka (Font › Jejak).

Setelah itu, buka menu palet Layers dengan mengklik tombol panah pada palet (Gbr. 8.11).

Beras. 8.11. Menu palet lapisan

Dalam menu ini kita tertarik pada perintah Rilis ke Lapisan (Urutan), yang mengubah setiap objek menjadi lapisan baru. Harap dicatat bahwa saat menggunakan perintah, itu harus disorot Kelompok, bukan Lapisan 1 .

Bagaimana tampilan palet Layers setelah melakukan Release to Layer (Sequence) ditunjukkan pada Gambar. 8.12.

Beras. 8.12. Palet lapisan setelah menjalankan Rilis ke Lapisan (Urutan)

Sampai di sini persiapan sudah selesai, Anda bisa menyimpan menggunakan Save for Web di SWF. SWF adalah format grafik utama berdasarkan teknologi Flash. Akan lebih akurat jika dikatakan bahwa ini adalah format Flash (Gbr. 8.13).

Mungkin, saat ini semua pengguna sudah familiar dengan Flash sampai tingkat tertentu. Saat ini, ini adalah format animasi paling umum di Internet, yang dengannya sebagian besar halaman Internet multimedia dibuat.

Tentu saja, Adobe Illustrator tidak mengimplementasikan sepersepuluh dari kemampuan Flash, karena program ini tidak dirancang untuk itu. Namun, di dalamnya Anda dapat membuat gambar statis atau animasi sederhana.

Beras. 8.13. Pengaturan optimasi untuk format SWF

Pengaturan berikut tersedia.

Hanya Baca. Jika Anda mencentang kotak ini, file akan ditulis sedemikian rupa sehingga tidak dapat dibuka lagi untuk diedit di program apa pun. Hal ini, di satu sisi, mengurangi ukuran file, dan di sisi lain, melindungi hak cipta Anda.
Pengaturan ditunjukkan oleh 1. Parameter yang menentukan jenis penyimpanan - gambar atau animasi.
Jika Anda memilih opsi AI File to SWF File, gambar akan disimpan sebagai gambar statis, persis sama dengan apa yang Anda lihat di layar saat bekerja di Illustrator.
Layers to SWF Frames memungkinkan Anda membuat animasi berdasarkan lapisan yang ada, yang akan direpresentasikan sebagai bingkai. Kita harus memilih opsi ini.
Kualitas Kurva. Keakuratan kurva mengulangi file kurva gambar aslinya. Mengurangi parameter ini secara signifikan mengurangi kualitas, terutama di area detail kecil, tetapi juga mengurangi ukuran file. Untuk kasus kami, nilai optimalnya adalah “7”.
Kecepatan Bingkai. Kecepatan bingkai dan, sebagai hasilnya, kecepatan animasi. Agar efeknya benar, atur ke tidak lebih dari 4 frame per detik.
Ulangi (Ulangi). Mainkan animasi berulang kali. Cocok untuk animasi yang memerlukan perulangan berulang. Spanduk termasuk dalam jenis ini.

Belakangan ini berbagai macam animasi grafik SVG (Scalable Vector Graphics) di website dan aplikasi menjadi sangat populer. Hal ini disebabkan oleh kenyataan bahwa semuanya browser terbaru sudah mendukung format ini. Berikut informasi tentang dukungan browser untuk SVG.

Artikel ini membahas contoh paling sederhana Animasi SVG vektor menggunakan plugin Jquery yang ringan, Lazy Line Painter.

Sumber

Untuk menyelesaikan dan memahami tugas ini sepenuhnya, pengetahuan dasar tentang HTML, CSS, Jquery diinginkan, tetapi tidak diperlukan jika Anda hanya ingin menganimasikan SVG) Mari kita mulai!

Dan inilah langkah-langkah yang perlu kita ikuti:

Buat struktur file yang benar

Unduh dan sambungkan plugin

Buatlah gambar outline yang keren di Adobe Illustrator

Ubah gambar kita menjadi Lazy Line Converter

Rekatkan kode yang dihasilkan ke main.js

Tambahkan beberapa CSS sesuai selera

1. Buat struktur file yang benar
Layanan Initializr akan membantu kita dalam hal ini, dimana kita perlu memilih parameter seperti pada gambar di bawah ini.

H5BP Klasik (Pelat Boiler HTML5)
Tanpa Templat
Hanya HTML5 Shiv
Diperkecil
Kelas IE
Bingkai Chrome
Lalu klik Unduh!

2. Unduh dan sambungkan plugin

Karena inisialisasi hadir dengan perpustakaan Jquery terbaru, dari arsip yang perlu kita unduh dari repositori proyek Lazy Line Painter, kita hanya perlu mentransfer 2 file ke proyek kita. Yang pertama adalah 'jquery.lazylinepainter-1.1.min.js' (versi plugin mungkin berbeda) terletak di root folder yang dihasilkan. Yang kedua adalah example/js/vendor/raphael-min.js.

2 file ini ditempatkan di folder js. Dan kami menghubungkannya ke index.html sebelum main.js sebagai berikut:

3. Buatlah gambar outline yang keren di Adobe Illustrator

Gambarlah gambar garis besar kita di Illustrator (cara termudah untuk melakukannya adalah dengan Pen Tool)

Kontur gambar kita harus tidak menutup karena untuk efek kita memerlukan awal dan akhir

Seharusnya tidak ada isian

Ukuran file maksimum – 1000×1000 piksel, 40kb

Mari kita crop pada batas objek Object>Artboards>Fit To Artboards Bounds

Simpan dalam format SVG (pengaturan penyimpanan standar boleh)

Misalnya, Anda dapat menggunakan ikon di lampiran.

4. Ubah gambar kita menjadi Lazy Line Converter
Cukup seret ikon Anda ke jendela pada gambar di bawah.
Ketebalan, warna garis luar, dan kecepatan animasi dapat diubah dalam kode itu sendiri, yang akan muncul setelah konversi!

5. Tempelkan kode yang dihasilkan ke main.js
Sekarang kita cukup menempelkan kode yang dihasilkan ke file main.js yang kosong
Parameter:
strokeWidth — ketebalan garis luar
strokeColor — warna garis luar
Anda juga dapat mengubah kecepatan menggambar setiap vektor dengan mengubah nilai parameter durasi (default 600)

6. Tambahkan sedikit CSS sesuai selera
Menghapus paragraf dari index.html

Halo dunia! Ini adalah Pelat Boiler HTML5.

Dan sebagai gantinya kita menyisipkan blok di mana animasi kita akan berlangsung

lalu kita tambahkan beberapa CSS pada file main.css agar terlihat lebih bagus:

Isi ( latar belakang:#F3B71C; ) #ikon ( posisi: tetap; atas:50%; kiri:50%; margin: -300px 0 0 -400px; )

simpan semua file.
Sekarang buka saja index.html di browser modern dan nikmati efeknya.

P.S. Saat dijalankan di mesin lokal, permulaan animasi mungkin tertunda selama beberapa detik.

GIF transparan di Adobe Illustrator dibuat sebagai berikut. Masuk ke menu File > Simpan untuk Web & Perangkat (Alt+Ctrl+Shift+S).

Di jendela yang terbuka, di bidang Format file yang dioptimalkan, Anda harus terlebih dahulu membuka tab Ukuran gambar. Faktanya adalah secara default seluruh halaman disertakan dalam jendela pengoptimalan, dan ini biasanya tidak diperlukan.

Oleh karena itu, di tab Ukuran Gambar, hapus centang pada kotak Clip to Artboard dan klik tombol Terapkan.

Ada dua cara untuk mendefinisikan warna. Cara termudah adalah dengan menentukan warna dengan pipet langsung pada gambar - setelah ini, warna akan disorot pada tabel warna dengan guratan gelap. Nah, jika Anda tahu persis warna apa yang harus transparan, Anda bisa langsung memilihnya di tabel warna dengan mengklik kotak berwarna yang sesuai. Dalam kasus pertama dan kedua, jika Anda perlu memilih beberapa warna, Anda perlu bekerja dengan menekan tombol Shift (atau Ctrl). Setelah memilih warna, Anda perlu menginstruksikan program untuk membuatnya transparan. Untuk melakukannya, klik ikon Petakan warna yang dipilih ke Transparan. Pada gambar, tombol ini dilingkari dan warna merah diatur menjadi transparan. Area transparan akan muncul pada gambar, dan kotak pada tabel warna akan berubah tampilannya - sebagian akan menjadi segitiga putih. Untuk membatalkan warna yang dipilih, Anda perlu memilihnya di Tabel Warna, lalu klik lagi ikon Petakan warna yang dipilih ke Transparan.

Beberapa kata tentang metode pengaturan transparansi. Ini bertanggung jawab atas menu drop-down Tentukan Algoritma Gentar Transparansi, dalam bahasa Rusia - Algoritma untuk mensimulasikan transparansi (Gbr. di bawah). Ada empat pilihan: No Transparency Dither, Diffusion Transparency Dither, Pattern Transparency Dither, dan Noise Transparency Dither. Dalam mode algoritma difusi, penggeser Jumlah menjadi aktif, memungkinkan Anda mengubah nilai difusi. Apa yang harus diterapkan dalam praktik? Tergantung pada tujuan dan gambar. Saya tidak menggunakan opsi ini dan selalu membiarkannya pada default - Tanpa Transparansi Gentar.

Klik Simpan - GIF transparan sudah siap. Pekerjaan dilakukan di Adobe Illustrator versi CS4 (v.14), tetapi semua tindakan dan pintasan keyboard juga relevan untuk versi CS3 sebelumnya (v.13).