GIF transparan di Adobe Illustrator dilakukan sebagai berikut. Buka 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(Ukuran gambar). Faktanya adalah bahwa secara default seluruh halaman masuk ke jendela pengoptimalan, dan ini biasanya tidak diperlukan. Oleh karena itu, di tab Ukuran Gambar, hapus centang pada kotak Klip ke Artboard(Pangkas ke ukuran halaman) dan klik tombol Terapkan.
Kemudian pilih GIF dalam daftar pemilihan format dan centang kotak Transparansi.
Setelah itu kita akan menentukan warna mana yang akan transparan. Semua warna yang ada dalam gambar terkandung dalam tab Meja Warna(Tabel Warna) dan ditampilkan sebagai kotak berwarna. Pilih alat di bilah alat di sisi kiri jendela Penitis mata(pipet).
Ada dua cara untuk menentukan warna. Cara termudah adalah menentukan warna dengan pipet langsung pada gambar - setelah itu, warna akan disorot di tabel warna dengan goresan gelap. Nah, jika Anda tahu persis warna apa yang harus transparan, Anda dapat memilihnya langsung di tabel warna dengan mengklik kotak berwarna yang sesuai. Dan dalam kasus pertama dan kedua, jika Anda perlu memilih beberapa warna, Anda harus bekerja dengan menekan tombol Shift (atau Ctrl). Setelah memilih warna, Anda perlu menginstruksikan program untuk membuatnya transparan. Untuk melakukan ini, Anda perlu mengklik ikon Petakan warna yang dipilih ke Transparan(Tambahkan warna yang dipilih ke transparansi). Dalam ilustrasi, tombol ini dilingkari dan merah dipilih sebagai 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 harus memilihnya di Tabel Warna, lalu klik lagi ikon Petakan warna yang dipilih ke Transparan.
Beberapa kata tentang cara mengatur transparansi. Menu tarik-turun bertanggung jawab untuk itu. Tentukan Algoritma Gentar Transparansi, dalam bahasa Rusia - Algoritma untuk mensimulasikan transparansi (Gbr. di bawah). Empat pilihan dapat dibuat: No Transparency Dither - tidak ada algoritma, Diffusion Transparency Dither - algoritma difus, Pattern Transparency Dither - algoritma berbasis pola, dan Noise Transparency Dither - algoritma berbasis noise. Dalam mode algoritme difus, penggeser menjadi aktif Jumlah(Jumlah) yang memungkinkan Anda untuk mengubah nilai difusi. Apa yang harus dipraktikkan? Tergantung tujuan dan gambarnya. Saya tidak menggunakan opsi ini dan selalu membiarkannya di default - No Transparency Dither.
Klik Simpan - gif transparan siap. Pekerjaan dilakukan di Adobe Illustrator versi CS4 (v. 14), tetapi semua tindakan dan pintasan keyboard relevan untuk versi CS3 sebelumnya (v. 13).
Hari ini kita tidak biasa-biasa saja tutorial Adobe Ilustrator. Karena kali ini kita tidak akan membuat gambar statis, melainkan animasi nyata. Bayangkan ternyata dengan dengan Adobe Anda juga dapat menggambar kartun di Illustrator :)
Dan kita tidak membutuhkan apa-apa untuk ini. Organisasi lapisan yang kompeten dan ekspor karya akhir dalam format swf, di mana setiap lapisan diubah menjadi bingkai animasi. Dalam tutorial hari ini, kita akan menggambar animasi hitung mundur gaya film retro. Outputnya harus berupa video flash dengan hitungan mundur ini.
Hal pertama yang harus dilakukan adalah menggambar semua elemen yang diperlukan untuk animasi masa depan. Untuk melakukan ini, dalam dokumen terpisah, saya membuat dua posisi bingkai film, lingkaran untuk referensi, yang dipotong menjadi sektor terpisah, tekstur dan goresan vertikal untuk menambahkan efek kuno, serta semua angka. dan prasasti.
Ketika semua bagian kartun kami sudah siap, Anda dapat mulai membuat animasi itu sendiri. Untuk kenyamanan, ini paling baik dilakukan dalam dokumen baru. Dalam hal ini, lapisan akan memainkan peran bingkai animasi. Dan di lapisan pertama, Anda hanya perlu menyalin bingkai strip film. Letakkan di tengah area kerja.
Sekarang buat lapisan kedua dan salin strip film ke dalamnya, di mana lubang di sepanjang tepinya diimbangi. Itu juga perlu dipusatkan.
Dari kedua layer tersebut, Anda sudah bisa mendapatkan animasi film bergerak. Tapi nanti kita membutuhkan lebih banyak lapisan. Jadi pilih dua lapisan pertama, buka opsi panel dan buat salinan lapisan.
Demikian pula, kita perlu mengumpulkan 12 lapisan film film.
Sekarang kita memiliki banyak lapisan dan semuanya terlihat. Dalam arti bahwa lapisan atas menghalangi lapisan bawah, yang sangat tidak nyaman untuk bekerja. Oleh karena itu, Anda dapat mematikan beberapa lapisan dengan mengklik ikon dengan mata di sebelah kiri nama lapisan. Untuk mematikan atau menghidupkan semua lapisan sekaligus, tahan tombol Alt sambil mengklik ikon mata. Mengaktifkan dan menonaktifkan lapisan, Anda dapat melihat dengan tepat apa yang terletak di bingkai tertentu dari animasi masa depan kita. Dan sekarang, untuk menambahkan sedikit getaran pada gerakan film, kita perlu memindahkan bingkai yang dihasilkan sedikit ke arah yang berbeda. Untuk melakukan ini, sertakan hanya lapisan yang akan Anda kerjakan saat ini lalu dorong bingkai beberapa piksel ke kedua sisi.
Ketika Anda telah melewati semua lapisan dan menambahkan sedikit pergeseran, Anda dapat mulai membuat animasi lingkaran yang bergerak. Untuk melakukan ini, salin lingkaran, yang terdiri dari sektor, dari dokumen dengan bagian kartun dan letakkan di lapisan pertama di atas bingkai strip film.
Jika Anda membatalkan pilihan lingkaran, itu akan terlihat seperti satu kesatuan. Inilah yang kami butuhkan.
Tetapi karena terdiri dari sektor yang terpisah, Anda dapat membuat animasi dengan sangat cepat dan mudah dengan mengubah warnanya. Untuk melakukan ini, salin lingkaran ini ke lapisan kedua dan buat sektor pertama lebih ringan. Anda ingat bahwa film kami bergetar selama gerakan, jadi sama sekali tidak perlu menempatkan lingkaran tepat di tengah bingkai. Tempatkan dengan mata.
Demikian pula, Anda perlu menyalin lingkaran ke setiap lapisan berikutnya, sambil melukis dengan warna yang lebih terang satu sektor lebih banyak dari waktu sebelumnya. Bersama-sama, 12 lapisan ini membentuk film tween dengan lingkaran pengisi.
Selanjutnya kita perlu menambahkan tekstur ke layer kita. Nyalakan layer pertama dan salin tekstur di sana dari file asli dengan suku cadang.
Kemudian nyalakan layer berikutnya secara bergantian dan salin tekstur yang sama di sana. Untuk membuatnya terlihat berbeda di setiap frame, cukup putar 90 derajat. Seperti yang mungkin sudah Anda duga, kita perlu menambahkan tekstur ke semua 12 frame.
Jika Anda sudah bosan menyalin, maka saya bisa menyenangkan Anda - hanya ada sedikit yang tersisa. Bagian tersulit sudah berakhir. Tetap menambahkan goresan vertikal, dan hampir semuanya. Untuk melakukan ini, sekali lagi, salin goresan asli dan letakkan di tempat yang sewenang-wenang dalam beberapa lapisan. Dalam kasus saya, goresan hanya muncul dalam dua lapisan.
Sekarang loop utama dengan animasi film sudah siap, tinggal menambahkan angka. Karena kita menghitung mundur dari 3 ke 1 ditambah kata Go !!!, kita membutuhkan lebih banyak lapisan. Bukan 12, tetapi sebanyak 48. Untuk melakukan ini, Anda perlu membuat tiga salinan lagi dari lapisan yang sudah jadi dengan animasi film.
Dan kemudian semuanya sederhana. Nyalakan lapisan pertama dan letakkan nomor tiga di sana.
Kemudian Anda perlu menyalin gambar ini ke lapisan berikutnya sampai animasi lingkaran berakhir. Saat Anda mendapatkan salinan lapisan berikutnya, di mana lingkaran akan sepenuhnya dicat lagi, Anda harus sudah meletakkan nomor dua. Dengan cara yang sama, salin nomor satu ke lapisan yang diinginkan. Dan ketika Anda sampai ke lapisan terakhir untuk keterangan Go !!!, hapus saja lingkarannya sebelum menyalin keterangan ke lapisan yang diinginkan.
Itu saja dengan animasi. Hal utama di sini adalah jangan bingung. Anda dapat memberi lapisan beberapa nama yang nyaman, tapi entah bagaimana saya terlalu malas :) Namun, ketika Anda selesai bekerja, pastikan untuk mengaktifkan kembali semua lapisan dengan mengklik ikon mata.
Di jendela dengan pengaturan ekspor, pastikan untuk mengatur Ekspor Sebagai: Lapisan AI ke Bingkai SWF. Opsi inilah yang mengubah lapisan ilustrator menjadi bingkai animasi. Kemudian klik tombol Lanjutan.
Akan buka pengaturan tambahan... Di sini Anda perlu mengatur frame rate Frame Rate. Saya memiliki 12 frame per detik. Kotak centang Looping bertanggung jawab untuk looping animasi. Berkat dia, video akan diputar dalam lingkaran. Dan opsi Layer Order: Bottom Up mereproduksi lapisan ilustrator dari bawah ke atas di panel. Ini persis bagaimana kami membangun animasi kami.
Pada output, kami mendapatkan video flash dengan animasi kami.
Sekarang Anda dapat melihat bahwa membuat animasi sederhana di Adobe Illustrator tidak begitu sulit seperti yang terlihat pada pandangan pertama.
Namun untuk membuat video berdurasi panjang atau aplikasi interaktif tetap lebih baik menggunakan Adobe Flash atau flash editor lainnya. Misalnya, saya membuat kucing ini di Macromedia Flash lama yang saya gali di tempat kerja saya.
Juga, baru-baru ini, HTML5 dan CSS3 semakin banyak digunakan untuk membuat animasi. Kode ini didukung oleh browser modern dan tidak memerlukan flash player.
Roman alias dacascas khusus untuk blog Catatan seorang ilustrator microstock
Berlangganan buletin kami agar tidak ketinggalan sesuatu yang baru:
Halo semuanya! Hari ini saya akan mencoba menggambarkan kemampuan program ilustrator Adobe membandingkannya dengan kemampuan flush. Ini tidak akan menjadi analisis global program dengan tulang, melainkan deskripsi dari beberapa chip menarik yang saya temukan dalam program ini. Saya mengumpulkan informasi sepotong demi sepotong saat saya mempelajarinya untuk meletakkan semuanya dalam satu posting. Saya harus segera mengakui bahwa saya bukan pengguna ilustrator yang sangat berpengalaman, hanya selama enam bulan terakhir saya telah menggunakannya dalam menggambar (sebelum itu saya melukis semuanya dalam sekejap). Banyak orang mengeluh bahwa ilustratornya rumit, tidak selalu jelas secara intuitif. Sampai batas tertentu, saya setuju bahwa setelah flush program ini sulit. Tetapi hal utama di sini bukan untuk berhenti, tetapi untuk terus belajar. Dan setelah beberapa minggu muncul pikiran, bagaimana saya bisa melakukannya tanpa dia sebelumnya!
Jadi, apa yang saya sukai dari ilustrator, dan apa yang saya temukan sendiri yang tidak ada di Flash.
1. Saya akan mulai dengan yang paling sederhana, tetapi pada saat yang sama diperlukan. Cobalah untuk mengatur objek dalam lingkaran dalam sekejap. Sebelumnya Alat Deko, tetapi telah dihapus, tampaknya dianggap tidak perlu. Kami memutuskan bahwa akan lebih menyenangkan melakukannya dengan pena. Illustrator memiliki fungsi ini: Efek - Distorsi & Transformasi - Transform.
Semuanya cepat dan sederhana, nilai (jarak antar objek, jumlah salinan) diatur sendiri dalam pengaturan.
2. Zig-zag
Bahkan lebih sederhana, namun tetap bermanfaat. Kelihatannya sepele, tetapi dalam sekejap Anda harus menggambar dengan tangan, di ilustrator itu hanya dalam hitungan detik.
3. Deformasi benda (Warp)
Tidak ada yang seperti ini dalam sekejap. Pada contoh di bawah ini, saya hanya menunjukkan 2 cara untuk mengubah bentuk sederhana (Effect - Warp - Arc / Fish). Bahkan, ada 15 di antaranya dalam versi terbaru program.
4. Pembulatan sudut otomatis (Round Corners)
Anda dapat melakukannya secara manual: pada objek grafik, saat dipilih, titik putih dan simbol garis bulat muncul di sudut (di semua mata). Kami tarik dengan mouse, sesuaikan dengan selera Anda.
Tapi ini hanya berlaku untuk bentuk, dengan garis pensil sedikit berbeda - terapkan efek pembulatan ( Efek - Stylize - Sudut Bulat). Pada output, kita mendapatkan hasil yang sama.
5. Kasar (kasar)
Efeknya diterapkan ke bentuk sederhana (Efek - Distort & Transform - Kasar). Pada output, kami mendapatkan sesuatu yang menyerupai model 3D poli rendah. Menurut saya, keren :) Dan yang paling penting - sangat sederhana.
6. Kerutan & Kembung(Menarik dan Kembung)
Contoh pada gambar di bawah ini:
7. Perluasan formulir (Jalur Offset)
Flash memiliki fungsi Expand Fill; itu tidak bekerja dengan garis pensil sama sekali, tidak seperti ilustrator.
8. Kuas (Kuas Seni, Kuas Pola, Kuas Menyebar)
Lihat gambar di bawah ini beserta contohnya:
9. Kuas Tekstur
Illustrator juga menampilkan banyak kuas tekstur yang saya tulis dan bagaimana mereka muncul versi baru menyiram -. Telah diketahui bahwa penggunaan kuas di Adobe Animate sangat lambat. Itu dia:(
10. Saya tidak yakin apakah ini trik langsung, tetapi saya ingin fokus pada kuas dengan nama yang lucu. GumpalSikat... Terletak di kotak alat, sikat yang sangat bagus untuk digunakan. Ini memiliki banyak pengaturan, saya menyukainya lebih dari biasanya. Sulit untuk menjelaskan dengan kata-kata tentang manfaatnya, lebih baik mencobanya sekali.
10. Pisahkan ke Grid
Juga berguna adalah fungsi Split to Grid (Object-Path-Split to Grid), yang memungkinkan Anda untuk memotong bentuk menjadi segmen yang sama. Apa ini mengingatkan kita? Itu benar - jendelanya ada di gedung bertingkat tinggi. Bagi saya, hal yang keren untuk menggambar, misalnya, pemandangan kota;)
Satu lagi alat yang berguna disajikan di Illustrator, mungkin sejak rilis pertamanya. Dengan itu, Anda dapat membuat, misalnya, tekstur kayu:
12. Pindah (kanan - Transform - Pindah)
Perpindahan suatu benda dengan jarak tertentu. Jika diinginkan, Anda dapat segera membuat salinan, yang akan ditempatkan pada jarak yang diinginkan dari objek yang dipilih secara horizontal / atau vertikal. Versi Flash sebelumnya memiliki plugin yang fungsi ini... Sayangnya, saya tidak ingat namanya.
Sangat mudah untuk membuat pola mulus di Illustrator ( Objek-Pola-Membuat). Saya ingat bagaimana saya sangat canggih dalam sekejap dengan penciptaan. Dalam versi ilustrator CC 2015, semuanya otomatis, banyak pengaturan akan membantu membentuk pola dalam lusinan variasi, hanya memiliki beberapa elemen grafis. Lebih banyak lagi versi sebelumnya semua program harus dilakukan secara manual, seperti pada flash sampai sekarang.
(Catatan - sebuah pola dapat dibuat menjadi objek yang dapat diedit vektor menggunakan fungsi parse ( Objek - Perluas Tampilan).
14. Mosaik Objek
Pembuatan palet warna berdasarkan gambar yang ada. Kami mengimpor gambar yang Anda suka ke sakit (Buka), lalu Objek - Buat Mosaik Objek... Dalam pengaturan, kami menentukan frekuensi pembagian tinggi dan lebar.
Dan pada output kita mendapatkan:
15.Campuran
Digunakan untuk membuat gradien. Anda dapat membuat transisi langkah demi langkah, seperti, misalnya, pada gambar. Saya tidak akan mengatakan bahwa saya sering menggunakannya, tetapi mungkin berguna bagi seseorang. Saya pikir itu dapat digunakan untuk membuat gambar latar belakang sederhana.
Juga alat ini dapat digunakan untuk mengkloning objek. Tempatkan dua objek pada jarak satu sama lain dan terapkan Blend Options, pilih jumlah langkah (jumlah objek kloning).
16. Alat Bangun Alat Bentuk. Hal yang sangat berguna untuk bekerja dengan primitif. Dalam sekejap, sepertinya saya kurang nyaman.
Menahan Alt dan mengklik segmen yang dipilih - hapus segmen. Jika kita hanya menyeret mouse ke beberapa area yang dipilih - koneksi.
Add-on adalah alat yang membantu untuk secara otomatis memotong, bergabung, dll. formulir yang disorot. Bagi saya, itu sangat tidak nyaman, saya lebih sering menggunakannya MembangunMembentukAlat.
(papan seni)
18. Panel Alat Kustom
Kemampuan untuk membuat toolbar Anda sendiri, membuang yang tidak perlu, dan memilih hanya yang Anda gunakan.
Di Flash, artboards, yaitu adegan ( Adegan 1,2,3 ..) terletak secara terpisah dan Anda perlu beralih di antara keduanya (Shift + F2). Di Illustrator, Anda dapat menempatkan semuanya di depan mata Anda. Lebih mudah ketika Anda membuat beberapa versi dari gambar yang sama, sehingga semua opsi ada di depan mata Anda untuk perbandingan.
19.Isometry menggunakan Gaya Grafis
Dan yang terakhir adalah membuat isometri tanpa menggunakannya dalam 1 klik (atau lebih tepatnya dalam 3 klik, karena kita memiliki 3 sisi;) menggunakan gaya grafis ( Gaya Grafis). Bagaimana ini dilakukan, saya akan menandatangani waktu berikutnya.
Kesamaan ilustrator dengan flash adalah kemampuan untuk menyimpan objek ke simbol, dan dengan mudah simbol ini dapat ditransfer ke flash (buka file .ai di flash, dengan Impor - Impor ke tahap).
Simbol di Illustrator memiliki properti yang sama seperti di Flash.
Dan pada akhirnya saya akan menulis bahwa di ilustrator, menurut saya, itu lebih rendah daripada flash. Ya, ya, dan ada hal seperti itu. Dan ini adalah alat isian ( Ember cat). Tidak peduli bagaimana saya mencoba membiasakan diri dalam keadaan sakit, itu lebih nyaman dalam sekejap.
Jika catatan saya bermanfaat bagi Anda atau jika Anda ingin menambahkan sesuatu dari diri Anda sendiri - selamat datang di komentar! Sukses buat semuanya ;)
Mengoptimalkan Grafik Web
Informasi grafik ditransmisikan jauh lebih lambat daripada informasi teks, dan waktu pemuatan gambar sebanding dengan ukuran file grafiknya. Itu sebabnya pemuatan cepat Halaman web mengasumsikan ukuran kecil dari grafik tertanam, yang dicapai melalui optimasi mereka. Optimalisasi gambar dipahami sebagai transformasinya, yang memastikan ukuran file minimum dengan tetap mempertahankan yang diperlukan kasus ini kualitas gambar, yang dicapai terutama dengan mengurangi jumlah warna dalam gambar grafik, menggunakan format file terkompresi dan khusus dan mengoptimalkan pengaturan kompresi untuk setiap fragmen gambar.
Illustrator memiliki alat pengoptimalan gambar bawaan yang, berkat metode yang berbeda pratinjau implementasi proses optimasi yang cepat dan efisien. Pratinjau memberikan gambaran yang cukup akurat tentang bagaimana gambar yang dioptimalkan akan terlihat secara real time, yang membantu mengevaluasi hasil pengoptimalan dan berhasil memilih pengaturan yang diperlukan. Dan Anda dapat mengoptimalkan kedua gambar yang dibuat langsung di Illustrator dan lainnya, misalnya, foto yang seharusnya diposting di situs Web.
Parameter pengoptimalan diatur di jendela Simpan untuk Web(Simpan untuk Web) dipanggil dengan perintah dengan nama yang sama dari menu Mengajukan(Mengajukan). Program ini menawarkan untuk menggunakan salah satu dari empat mode pratinjau, tetapi dua yang paling cocok untuk mengevaluasi kualitas pengoptimalan:
- 2-Up(dua opsi) - tampilan simultan dari gambar asli dan gambar yang dioptimalkan sesuai dengan pengaturan yang ditentukan (Gbr. 1);
- 4-Up(empat opsi) - dalam mode ini, area tampilan dibagi menjadi empat jendela (Gbr. 2) untuk menampilkan gambar asli dan tiga versi yang dioptimalkan: versi pertama dibuat berdasarkan nilai pengoptimalan yang ditetapkan, dan yang lainnya dua adalah varian dari pengaturan pengoptimalan saat ini.
Kedua mode dapat secara signifikan menghemat waktu dalam pencarian pilihan yang lebih baik pengoptimalan, karena menghilangkan kebutuhan untuk menyimpan gambar dari pengaturan yang berbeda optimasi dan perbandingan visual berikutnya. Selain itu, dimungkinkan untuk mengevaluasi tidak hanya kualitas gambar yang dioptimalkan, tetapi juga ukuran dan waktu muatnya untuk opsi koneksi yang berbeda. Sebagai perbandingan, mode yang paling nyaman adalah 4-Up (empat opsi), yang memungkinkan Anda untuk mengevaluasi secara visual efek kompresi atau pengurangan palet pada kualitas gambar dan ukurannya, dan pada akhirnya menentukan parameter terbaik optimasi.
Illustrator memungkinkan Anda untuk mengoptimalkan grafik web dalam format tidak hanya GIF, JPG, PNG-8, dan PNG-24, tetapi juga dalam SWF dan SVG. Gambar yang diindeks memiliki sejumlah kecil warna disimpan dalam format GIF. Untuk menyimpan gambar penuh warna dan skala abu-abu - foto dan grafik kaya warna seperti isian gradien - gunakan format JPG... Untuk gambar penuh warna dengan area transparan, terapkan format PNG yang memungkinkan Anda menyimpan gambar yang diindeks dan penuh warna, sedangkan dalam format PNG-8 jumlah warna maksimum yang mungkin dari gambar yang dioptimalkan adalah 256, sedangkan dalam format PNG-24 gambar dapat memiliki jutaan warna, dan oleh karena itu mirip dengan format JPEG. Perbedaan antara PNG-24 dan JPEG adalah bahwa metode kompresi yang digunakan untuk mengoptimalkan gambar PNG-24 tidak mengakibatkan penurunan kualitas, tetapi meningkatkan ukuran file. Format SVG dan SWF menggabungkan grafik, teks dan komponen interaktif dan juga dapat dioptimalkan.
Mari kita lihat contoh spesifik pengoptimalan gambar. Katakanlah logo situs web dikembangkan di Illustrator (Gbr. 3), awalnya disimpan dalam format AI. Upaya untuk segera mengoptimalkannya untuk Web tidak akan menghasilkan sesuatu yang baik, karena dalam hal ini gambar akan dipangkas secara otomatis, yang tidak akan memperhitungkan posisi sebenarnya dari huruf yang diperoleh sebagai hasil deformasi (Gbr. 4 dan 5).
Oleh karena itu, mari kita coba mengekspor logo ke format PSD tim Berkas => Ekspor(File => Export) - ukuran gambar yang dibuat akan menjadi 143 KB. Buka file PSD yang dihasilkan dan gunakan perintah File => Simpan untuk Web(File => Simpan untuk Web). Mengingat terbatasnya jumlah warna yang terlibat dalam gambar, dalam hal ini, format GIF optimal, dengan pengaturan khusus yang perlu Anda putuskan. Dengan bereksperimen dengan pengaturan, Anda dapat memastikan bahwa kualitas terbaik memberikan algoritma kompresi default program Selektif(Selektif). Sedangkan untuk anti-aliasing, mengingat adanya pengisian gradien, lebih baik memilih algoritme dengan pembangkitan noise - Kebisingan(gambar 6). Ukuran file pengoptimalan yang dihasilkan akan menjadi 6.729 KB (Gbr. 7), sedangkan transparansi latar belakang akan dipertahankan, yang mudah diverifikasi dengan menyimpan gambar dalam format GIF bersama dengan file HTML (Gbr. 8). Hasilnya, dalam contoh ini, file emblem.html dan emblem.gif diperoleh di folder Primer1.
Tombol
Elemen spesifik yang tak tergantikan dari desain halaman Web mana pun adalah kontrol grafis - tombol. Tidak mungkin membayangkan halaman tanpa mereka. Tombol menggambar telah menjadi genre khusus hari ini, dan Illustrator memungkinkan Anda membuat opsi yang paling rumit. Misalnya, tombol yang dirancang sebagai objek kisi dan / atau dengan topeng overlay terlihat jauh lebih mengesankan daripada yang biasa.
Mari kita pertimbangkan opsi untuk membuat tombol cembung bulat di Illustrator. Gambar objek vektor berbentuk lingkaran yang diisi dengan warna apa saja (Gbr. 9) dan ubah menjadi mesh menggunakan perintah Objek => Buat Gradient Mesh(Object => Create Gradient Mesh) dengan menentukan empat baris dan empat kolom, dan dalam daftar Penampilan(Lihat) dengan memilih opsi Ke pusat Menyorot(Lampu latar) sama dengan 60 (Gbr. 10). Pilih alat Seleksi Langsung dan klik di kiri pojok atas objek, menyoroti titik simpul yang terletak di sana (Gbr. 11). Ubah warna sel yang sesuai menjadi putih dengan memilihnya di palet Swatch(gbr. 12).
Ambil alat Elips(Ellipse), letakkan penanda mouse di tengah lingkaran yang dibuat sebelumnya dan, sambil menahan tombol Alt dan Menggeser, regangkan lingkaran baru di atas yang lama sehingga 1-2 piksel lebih besar dari yang lama di semua sisi. Jadikan dia perbatasan hitam ( Pukulan) lebar 1-2 piksel dan isi dengan gradien radial dari merah ke putih (Gambar 13). Seret objek vektor yang dibuat 1-2 piksel ke kanan dan ke bawah, lalu, tanpa menghapus pilihan, klik kanan padanya dan dari menu konteks pilih tim Atur => Kirim Ke Belakang(Atur => Kirim Kembali). Akibatnya, Anda mendapatkan tombol kosong, yang ditunjukkan pada Gambar. empat belas.
Sebagai aturan, pada halaman Web mana pun ada beberapa tombol dengan jenis yang sama, berbeda, misalnya, hanya dalam arah panah yang digambar di atasnya, yang menunjukkan arah pergerakan melalui situs. Pertimbangkan kasus paling sederhana memiliki dua tombol, salah satunya, dengan panah ke bawah, berarti pindah ke halaman selanjutnya, dan tombol panah atas ke tombol sebelumnya. Sebagai panah kosong, ambil segitiga biasa yang digambar oleh alat Poligon(Polygon), diisi dengan warna hitam dan juga dihias sebagai objek mesh untuk efek yang lebih besar. Pindahkan panah ke tombol dan sesuaikan posisi semua objek relatif satu sama lain menggunakan tombol yang sesuai pada palet Meluruskan(Penyelarasan). Tombol pertama yang diperoleh ditunjukkan pada Gambar. 15. Buat salinan layer tombol dengan memilih perintah Duplikat Lapisan Lapisan, - sebagai hasilnya, kami mendapatkan dua lapisan yang identik. Kemudian, pada salinan layer, pilih panah dan putar 180 ° dengan memilih perintah Transform => Putar- Transformasi => Rotasi. Kami mendapatkan tombol yang sama seperti yang ditunjukkan pada gambar. 16. Harap dicatat bahwa jauh lebih mudah untuk menyimpan semua tombol dari jenis yang sama dari satu proyek dalam satu file pada lapisan yang berbeda, yang ditunjukkan dalam kasus ini.
Sekarang Anda perlu menyimpan versi yang dioptimalkan dari masing-masing tombol. Pertama-tama buat lapisan bawah tidak terlihat - dalam hal ini tombol di lapisan atas akan disimpan. Pilih tim File => Simpan untuk Web(File => Save For Web), konfigurasikan opsi optimisasi tombol, misalnya, seperti yang ditunjukkan pada Gambar 1-4. 17, klik tombol Menyimpan(Simpan) dan masukkan nama file. Tombol yang disimpan sebagai hasilnya ditunjukkan pada Gambar. 18. Sekarang kembalikan visibilitas ke lapisan bawah, dan buat bagian atas tidak terlihat dan dengan cara yang sama simpan tombol kedua, beri nama yang berbeda. Hasilnya ditunjukkan pada Gambar. 19.
Sekarang yang tersisa adalah memastikan bahwa tombol terlihat bagus di halaman Web dan menempatkannya di halaman kustom (Gambar 20). Akibatnya, dalam contoh ini, file Primer2.html dan dua gambar grafik di folder gambar (folder Primer2).
Jika diinginkan, selama proses pengoptimalan, tombol dapat dengan mudah diubah menjadi irisan. Dalam hal ini, setelah memilih perintah File => Simpan untuk Web(File => Save for Web) dan atur parameter pengoptimalan, pilih alat dari palet alat Pilih irisan(Pilih satu irisan) dan klik dua kali pada gambar, yang pada akhirnya akan otomatis berubah menjadi irisan dengan nomor seri 1 (Gbr. 21). Mengklik dua kali mouse lagi akan membuka jendela Opsi irisan(Opsi irisan), di mana Anda perlu menentukan tautan dan, jika diinginkan, mengubah nama irisan (Gbr. 22), lalu menyimpan gambar yang dioptimalkan. Hasilnya dalam hal ini adalah Primer3.html (Gbr. 23) dan Primer3.gif (folder Primer3).
Elemen interaktif
Salah satu cara untuk menghidupkan halaman adalah dengan memperkenalkan elemen desain yang mengubah penampilan(atau status) tergantung pada perilaku mouse atau, lebih jarang, jika terjadi situasi lain: penskalaan, pengguliran, pemuatan, kesalahan, dll.
Di antara elemen-elemen tersebut, yang paling terkenal adalah rollover (dari bahasa Inggris roll over - to roll, turn over) - elemen yang mengubah penampilannya di bawah pengaruh mouse. Tombol animasi adalah contoh rollover biasa. Rollover sering digunakan untuk membuat elemen navigasi lain dari situs. Faktanya, rollover apa pun bukanlah satu, tetapi beberapa (hingga empat) gambar, yang masing-masing sesuai dengan peristiwa tertentu. Peristiwa utama dianggap sebagai berikut: Normal - keadaan normal, Over - mengarahkan kursor mouse ke atas elemen dan Bawah - menekan tombol kiri mouse saat kursor melayang di atasnya. Secara teoritis, peristiwa seperti Klik - melepaskan tombol kiri mouse setelah menekan, Atas - setelah melepaskan tombol, Keluar - saat meninggalkan zona aktif, dapat terlibat. Namun, dalam praktiknya, mereka lebih sering terbatas pada perubahan elemen hanya untuk tiga atau bahkan dua peristiwa pertama.
Rollover klasik
Dalam pengertian klasik, rollover adalah serangkaian gambar GIF dan kode HTML yang sesuai, karena itu, tergantung pada perilaku mouse, satu gambar menggantikan yang lain di jendela browser.
Illustrator tidak dirancang untuk secara langsung membuat rollover klasik, tetapi dapat membantu Anda mendesain elemen awal untuk mereka. Idenya dalam hal ini adalah membuat layer dengan gambar yang sesuai dengan kejadian pertama. Kemudian buat salinan layer dan ubah gambar agar sesuai dengan acara kedua, dll. Gambar multi-lapisan yang dihasilkan diekspor ke file PSD dengan lapisan yang dipertahankan, atas dasar rollover dibuat dalam program Siap Gambar. Keuntungan menggunakan Illustrator, seperti dalam banyak kasus lainnya, adalah sejumlah fitur menariknya yang tidak tersedia di yang lain. alat perangkat lunak, dalam hubungannya dengan kenyamanan mengubah grafik vektor.
Mari kita coba membuat rollover dalam bentuk tulisan yang berubah warna tergantung pada perilaku mouse. Buka Illustrator dan buat bentuk persegi panjang bulat berisi hitam (Gambar 24), buat salinannya, dan letakkan di area bebas layar. Ubah salinan pertama persegi panjang menjadi objek kotak dengan sorotan di tengahnya (perintah Objek => Buat Gradient Mesh- Object => Create Gradient Mesh) dengan menentukan empat baris dan sepuluh kolom (Gambar 25). Aktifkan salinan kedua dari persegi panjang dan sesuaikan isi gradien untuk itu kira-kira seperti yang ditunjukkan pada Gambar. 26. Blend objek gradien di atas mesh, turunkan Opacity objek gradien menjadi sekitar 80% dan ukurannya sekitar 1 piksel untuk meniru efek bump. Dan kemudian cetak teks di atas objek. Dalam bentuk aslinya, biarkan memiliki warna putih, yang akan sesuai dengan status Normal (Gbr. 27), dan kemudian, ketika status rollover berubah, warna keterangan akan berubah, misalnya, menjadi hijau - saat Anda mengarahkan kursor di atasnya dengan penunjuk tetikus (Keadaan Lebih) dan menjadi biru - saat tombol tetikus ditekan (Keadaan turun).
Perhatikan paletnya Lapisan- pada tahap ini hanya ada satu lapisan di dalamnya. Buat dua salinan layer ini menggunakan perintah Duplikat Lapisan(Lapisan Duplikat) dari menu palet Lapisan, - akan ada tiga lapisan di palet (gbr. 28). Kemudian pada salinan pertama dari layer ubah warna teks menjadi hijau, dan pada salinan kedua - menjadi biru (Gbr. 29). Akibatnya, Anda akan mendapatkan blanko yang diperlukan untuk rollover.
Ekspor gambar yang dibuat ke format PSD dengan menyimpan lapisan menggunakan perintah Berkas => Ekspor(File => Export) dan memilih model warna RGB (Gbr. 30). Buka file PSD yang dibuat di ImageReady (Gbr. 31 dan 32). Buat bingkai dari lapisan dengan memilih perintah Buat Bingkai Dari Lapisan(Buat Bingkai Dari Lapisan) dari menu palet Animasi... Jendela Animasi akan terlihat seperti pada Gambar. 33. Pada saat yang sama di palet Rollover awalnya, satu keadaan Normal akan dibuat.
Kemudian di jendela Animasi pilih bingkai yang sesuai dengan status hover, saat berada di palet Lapisan lapisan dipilih secara otomatis Salinan Lapisan 1(gbr. 34). Pergi ke palet Rollover dan klik tombol Buat status Rollover(Buat status rollover) - gbr. 35, yang akan menyebabkan munculnya kondisi Lebih dari negara di palet Rollover(gbr. 36). Buat negara dengan cara yang sama keadaan turun... Aktifkan status Normal di palet Rollover dan hapus di palet Animasi semua bingkai, kecuali yang harus sesuai dengan status Normal... Akibatnya, untuk setiap status rollover di palet Animasi hanya akan ada satu bingkai (gbr. 37, 38 dan 39).
Beras. 38. Tampilan gambar, jendela Animasi dan palet Layers and Rollovers untuk status Over State
Periksa hasilnya dengan mengklik tombol Pratinjau di Browser Default(Pratinjau Browser) pada toolbar dan menavigasi ke jendela browser (Gambar 40). Setelah itu simpan file tersebut menggunakan perintah File => Simpan Dioptimalkan(File => Simpan Dioptimalkan) dan tentukan opsi HTML dan Gambar (* .html)... Hasilnya, dalam contoh ini, kami mendapatkan file Primer4.html dan serangkaian gambar grafik di folder gambar.
Beras. 40. Jendela browser dengan elemen Rollover
Perputaran SVG
Semakin populernya format SVG (Scalable Vector Graphics - scalable vector graphics), dibuat berdasarkan standar XML, juga memungkinkan Anda untuk menerima berbagai elemen interaktif, khususnya rollover, hanya dalam praktiknya diimplementasikan sepenuhnya berbeda. Perlu dicatat bahwa pembuatan rollover SVG interaktif, berbeda dengan yang klasik, ketika kode HTML yang sesuai dihasilkan sepenuhnya secara otomatis, membutuhkan pengetahuan tentang bahasa JavaScript dan pemahaman tentang prinsip-prinsip dasar pemrograman berorientasi objek.
Ada palet khusus untuk bekerja dengan objek SVG. Interaktivitas SVG, yang mudah dibuka menggunakan perintah Jendela => Interaktivitas SVG(Jendela => Interaktivitas SVG) - gbr. 41.
Mempertimbangkan pilihan ini membuat rollover menggunakan contoh tombol interaktif, warna teks yang akan berubah dari hitam menjadi biru saat mouse melayang dan lagi diubah menjadi hitam saat mouse meninggalkan zona aktif.
Buat tombol persegi panjang dengan tepi membulat dan pilih isian gradien yang sesuai untuknya, misalnya, seperti yang ditunjukkan pada Gambar. 42. Sesuaikan transparansi tombol di palet Transparansi(Transparansi) - dalam contoh ini, nilai parameter Kegelapan(Opacity) diatur ke 50%. Gandakan tombol, isi dengan warna hijau tua (gbr. 43), lalu ubah menjadi objek mesh dengan perintah Objek => Buat Gradient Mesh(Object => Create Gradient Mesh) dengan menentukan empat baris dan sepuluh kolom, dan dalam daftar Penampilan(Lihat) dengan memilih opsi Ke pusat(Tengah) dan atur nilainya Menyorot(Sorot) sama dengan 100. Kurangi opacity layer objek mesh sekitar 40% (gbr. 44). Tempatkan objek mesh di atas gradien, dan tombolnya akan menyerupai yang ditunjukkan pada Gambar. 45.
Beras. 44. Mengubah salinan tombol menjadi objek mesh
Lengkapi tombol dengan keterangan yang diinginkan dan sesuaikan posisinya menggunakan tombol yang sesuai pada palet Meluruskan(Penyelarasan). Gambar yang dihasilkan akan berisi satu lapisan dengan tiga objek yang ditumpangkan (Gambar 46). Acara terjadwal akan merujuk ke objek teks, jadi untuk kenyamanan, ubah namanya menjadi Teks dengan mengklik dua kali pada objek dan memasukkan nama baru. Ubah nama layer dengan cara yang sama dari Lapisan 1 ke Lapisan(gbr. 47).
Penanganan peristiwa mengasumsikan penggunaan prosedur JavaScript, jadi Anda perlu menyertakan file yang menjelaskan prosedur ini. Itu disebut Events.js dan disimpan ke disk di folder Sample Files \ Sample Art \ SVG \ SVG selama instalasi program Adobe Ilustrator. Untuk menghubungkan file Events.js gunakan perintah File JavaScript Interaktivitas SVG(gbr. 48). Selanjutnya, Anda perlu menekan tombol Menambahkan(Tambahkan) dan temukan file yang diinginkan pada hard drive Anda. Ketika namanya muncul di lapangan Url(gbr. 49), klik tombol Selesai(Keluar).
Beras. 48. Memilih perintah File JavaScript
Setelah itu, Anda harus menentukan reaksi terhadap peristiwa mouse untuk objek tersebut. Teks... Pilih objek Teks, di bidang Peristiwa(Acara) palet Interaktivitas SVG pilih acara di atas mouse elemColor (evt, "Teks", "# 3333FF")- ini berarti bahwa ketika mouse berada di atas objek Teks warnanya akan berubah menjadi biru (gbr. 50). Agar warna teks berubah menjadi hitam setelah mouse meninggalkan zona aktif, Anda perlu membuat acara lain keluar dari mouse- pilih di lapangan Peristiwa(Acara) palet Interaktivitas SVG... Kemudian di baris tindakan masukkan teks elemColor (evt, "Teks", "# 000000")- ini akan kembali hitam (gbr. 51).
Beras. 51. Tampilan akhir dari palet Interaktivitas SVG untuk objek Teks
Simpan rollover yang dibuat sebagai file SVG dengan perintah Berkas => Simpan sebagai(Berkas => Jenis berkas format SVG, dan kemudian mengonfigurasi opsi untuk menyimpan file SVG seperti yang ditunjukkan pada Gambar. 52. Setelah menyimpan, Anda hanya akan menerima satu file dengan ekstensi SVG, dan bukan dua, seperti dalam kasus rollover klasik - dalam hal ini, file Primer5.svg diperoleh (folder Primer5). Namun, agar rollover benar-benar berfungsi, Anda juga harus menyalin file Events.js dengan deskripsi prosedur JavaScript ke folder dengan file SVG. Setelah itu, Anda dapat memeriksa apakah rollover berfungsi - hasilnya akan terlihat seperti yang ditunjukkan pada Gambar. 53.
animasi SVG
Format SVG juga dapat digunakan untuk menyampaikan animasi. Mari kita coba membuat elemen animasi sederhana (dalam hal ini akan menjadi informasi tentang perusahaan), yang akan muncul di layar saat Anda mengarahkan mouse ke objek grafik yang sesuai dan menghilang saat mouse dihapus dari elemen interaktif.
Mari kita buat serangkaian objek grafik dan teks seperti yang ditunjukkan pada Gambar. 54. Ganti nama cara yang nyaman semua objek yang dibuat dengan mengklik nama objek berikutnya secara berurutan di palet Lapisan dan memasukkan nama yang diinginkan (gbr. 55). Harap dicatat bahwa yang disorot pada Gambar. 56 objek - Teks1, Teks2, Teks3 dan jalan1- akan selalu terlihat, dan yang lainnya - hanya saat Anda mengarahkan mouse ke objek Teks 1.
Beras. 54. Tampilan asli gambar
Sertakan file Events.js dengan deskripsi prosedur JavaScript menggunakan perintah File JavaScript (file JavaScript) dari palet Interaktivitas SVG dengan menekan tombol Menambahkan(Tambah) dengan memilih file yang diinginkan pada hard disk Anda dan mengklik tombol Selesai(Keluar).
Tentukan reaksi terhadap peristiwa mouse untuk suatu objek Teks 1... Pilih objek Teks, di lapangan Peristiwa(Acara) palet Interaktivitas SVG pilih acara di atas mouse dan pada baris di bawah ini masukkan teks elemShow (evt, "Text4"); elemShow (evt, "Jalur2")... Akibatnya, ketika mouse berada di atas objek Teks 1 objek akan menjadi terlihat Teks4 dan jalan2... Harap dicatat bahwa jika beberapa tindakan harus dilakukan ketika suatu peristiwa terjadi, maka tindakan tersebut harus ditentukan melalui tanda ";". Kemudian lakukan operasi serupa sehubungan dengan acara keluar dari mouse dengan memasukkan teks untuk itu, yang berarti menyembunyikan objek (Gbr. 57).
Simpan hasilnya sebagai file SVG dengan perintah Berkas => Simpan sebagai(File => Save As) dengan menentukan nama file dengan memilih di kolom Jenis berkas format SVG, dan kemudian mengonfigurasi opsi untuk menyimpan file SVG seperti yang ditunjukkan pada Gambar. 58. Setelah disimpan, Anda akan mendapatkan file Primer6.svg (folder Primer6). Jangan lupa untuk menyalin file Events.js ke folder dengan file ini. Jika setelah itu Anda menjalankan cos file ini, maka Anda akan melihat hasil yang ditunjukkan pada Gambar. 59. Ini hampir yang Anda butuhkan. Satu-satunya hal yang tidak termasuk dalam rencana kami adalah penampilan awal objek. Teks 4 dan Jalur 2 saat boot. Untuk menghilangkan cacat ini, pilih kedua objek data sekaligus dan buat tindakan untuk mereka. elemHide (evt, "Text4"); elemHide (evt, "Path2") di acara memuat(gbr. 60). Simpan file lagi dan pastikan objeknya sekarang Teks4 dan jalan2 hanya terlihat saat Anda mengarahkan mouse ke objek Teks 1.
animasi GIF
Setiap halaman Web tidak terpikirkan tanpa animasi Web, termasuk animasi gif. Salah satu opsi untuk membuatnya adalah menggunakan aplikasi Adobe ImageReady, yang antara lain memungkinkan Anda membuat animasi dari lapisan. Pada saat yang sama, gambar berlapis itu sendiri dapat disiapkan dalam berbagai aplikasi, termasuk Adobe Illustrator.
Sangat mudah untuk membuat animasi berdasarkan elemen dari palet Simbol(Simbol) dibuka dengan perintah Jendela => Simbol(Jendela => Simbol) atau dari salah satu perpustakaan simbol yang dapat dibuka dengan menggunakan perintah Jendela => Perpustakaan Simbol(Jendela => Perpustakaan Simbol).
Sebagai contoh, kami akan mencoba memperbesar ukuran objek simbol apa pun; tahap kunci dari proses pembesaran objek harus diatur pada lapisan yang terpisah. Pertama, cukup letakkan objek simbol satu di atas yang lain, dan kemudian tingkatkan ukuran setiap objek berikutnya, misalnya, seperti yang ditunjukkan pada Gambar. 61. Hasilnya, di palet Lapisan satu layer dengan banyak objek akan dibuat (Gbr. 62). Jika Anda langsung mengekspor gambar ini ke format PSD, itu tidak akan menghasilkan apa-apa, karena hanya ada satu lapisan, dan tentu saja, ketika Anda membuka file PSD di program ImageReady, hanya akan ada satu lapisan. Oleh karena itu, Anda harus terlebih dahulu menempatkan objek pada lapisan yang berbeda. Ini dapat dilakukan dengan berbagai cara - cara termudah adalah memilih layer terlebih dahulu. Lapisan 1 di palet Layers dan gunakan perintah Lepaskan ke lapisan(Rilis ke lapisan). Hasilnya adalah pergerakan masing-masing objek ke layernya sendiri, tetapi semuanya akan bersarang di layer. Lapisan 1... Oleh karena itu, Anda harus menyeret semua layer bersarang secara manual ke bagian atas palet Layers sehingga berada di atas layer. Lapisan 1 dan kemudian lapisan kosong Lapisan 1 hapus saja (gbr. 63). Ekspor gambar ke format PSD menggunakan perintah Berkas => Ekspor(File => Export) dengan pengaturan seperti pada gambar. 64.
Muat file PSD yang dibuat ke ImageReady (Gambar 65 dan 66). Buka menu palet AnimasiBuat Bingkai Dari Lapisan(Buat bingkai dari lapisan). Akibatnya, lima bingkai akan dibuat, yang masing-masing akan sesuai dengan lapisannya sendiri, dan jendela palet Animasi akan mengambil bentuk seperti pada gambar. 67.
Setelah itu, atur durasi setiap frame yang dibuat - dalam hal ini, durasi untuk semua frame diatur ke 0,2 dtk. Dan kemudian simpan animasi yang dioptimalkan dengan perintah File => Simpan Dioptimalkan(File => Simpan Dioptimalkan). Hasil yang diperoleh mungkin menyerupai Gambar. 68.
Bahkan lebih nyaman untuk mendapatkan yang kosong, yang mudah diubah menjadi animasi di ImageReady, gunakan fungsi Campuran langsung Perangkat lunak ilustrator. Penggunaan gabungan Illustrator dan ImageReady ini secara dramatis mempercepat proses pembuatan animasi GIF.
Misalnya, gambar dua objek multi-warna sewenang-wenang, lalu padukan dengan parameter yang sesuai (Gbr. 69). Tidak mungkin menggunakan file ini secara langsung untuk membuat animasi, karena gambar berada pada satu lapisan (Gbr. 70). Oleh karena itu, pertama-tama Anda harus menempatkan setiap elemen objek campuran pada lapisan terpisah. Untuk ini di jendela Lapisan sorot garis
Beras. 70. Status awal jendela Layers
Ekspor file yang dibuat ke format PSD dengan perintah Berkas => Ekspor(File => Ekspor). Buka file PSD yang dibuat dalam program ImageReady (gbr. 73). Harap dicatat bahwa semua lapisan yang dibuat di Illustrator akan muncul di jendela lapisan (Gbr. 74), dan di jendela Animasi hanya akan ada satu bingkai sejauh ini.
Aktifkan menu palet Animasi dengan mengklik panah hitam di sudut kanan atas palet dan pilih perintah Buat Bingkai Dari Lapisan(Buat bingkai dari lapisan) - sebagai hasilnya, dalam contoh ini, lima bingkai akan dibuat, dan jendela palet Animasi akan mengambil bentuk sesuai dengan Gambar. 75. Pilih semua bingkai sambil menahan tombol Menggeser, dan atur durasi bingkai yang sesuai - dalam contoh ini, untuk setiap bingkai, diambil waktu yang sama yaitu 0,2 detik. Kemudian simpan file yang dioptimalkan dengan perintah File => Simpan Dioptimalkan(File => Simpan Dioptimalkan) dengan mengatur dalam daftar Jenis berkas pilihan Gambar Saja (* .gif)... Animasi akan menyerupai Gambar. 76.
Jauh lebih menarik adalah tidak bergerak, tetapi mengubah ukuran objek campuran dengan halus. Misalnya, Anda dapat menggunakan transisi campuran yang sudah dibuat. Dalam hal ini, setelah membuat lapisan terpisah untuk setiap elemen transisi campuran, tempatkan semua objek di atas satu sama lain menggunakan tombol Pusat perataan horizontal(Perataan tengah horizontal) dan Pusat Perataan Vertikal(Perataan tengah vertikal) palet Meluruskan(gbr. 77).
Ekspor file yang dibuat ke format PSD ( Berkas => Ekspor- File => Export) dan buka file PSD yang dibuat dalam program ImageReady (gbr. 78). Buat bingkai animasi ( Buat Bingkai Dari Lapisan- Buat bingkai dari lapisan) dan pilih durasi yang sesuai untuknya (gbr. 79). Dan kemudian, untuk membuat animasi lebih efektif, salin bingkai yang ada, tetapi dalam urutan terbalik- sehingga gambar pertama meningkat dan kemudian berkurang, dan seterusnya dalam lingkaran (Gbr. 80). Kemudian simpan file yang dioptimalkan ( File => Simpan Dioptimalkan- File => Simpan dengan optimasi). Animasi yang dihasilkan ditunjukkan pada Gambar. 81.
Beras. 80. Keadaan jendela Animasi setelah menggandakan frame
Beras. 81. Animasi selesai
Format File Flash (SWF) didasarkan pada: grafis vektor dan dirancang untuk grafis yang dapat diskalakan dan ringkas untuk web. Karena format file ini didasarkan pada grafik vektor, objek mempertahankan kualitas gambar pada resolusi apa pun dan ideal untuk membuat bingkai animasi. Di Illustrator, Anda dapat membuat bingkai animasi terpisah pada lapisan, dan kemudian mengekspor lapisan gambar sebagai bingkai terpisah untuk digunakan di situs web Anda. Anda juga dapat menentukan simbol di file Illustrator untuk mengurangi ukuran animasi. Saat diekspor, setiap simbol didefinisikan hanya sekali dalam file SWF.
Perintah Ekspor (SWF)
Memberikan kontrol paling besar atas animasi dan kompresi bit.
Memberikan kontrol lebih besar atas campuran format SWF dan bitmap dalam tata letak yang terfragmentasi. Perintah ini menawarkan lebih sedikit opsi gambar daripada perintah Ekspor (SWF), tetapi menggunakan opsi perintah Ekspor yang paling baru digunakan (lihat).
Ingatlah pedoman berikut saat menyiapkan objek untuk disimpan dalam format SWF.
Menggunakan Device Central, Anda dapat melihat bagaimana karya seni Illustrator akan terlihat di aplikasi. Pemutar Flash pada berbagai perangkat genggam.
Memasukkan Karya Seni Illustrator
Karya seni yang dibuat di Illustrator dapat disalin dan ditempelkan ke Flash dengan cepat, mudah, dan mudah.
Atribut berikut dipertahankan saat Anda menempelkan seni Illustrator ke Flash.
Ketebalan garis
Definisi gradien
Teks (termasuk font OpenType)
Gambar Terkait
Mode pencampuran
Kontur dan bentuk
Selain itu, Illustrator dan Flash mendukung hal berikut saat memasukkan karya seni.
Saat memilih lapisan dalam karya seni Illustrator tingkat terbaik dan memasukkannya ke dalam Flash mempertahankan lapisan dan propertinya (visibilitas dan pemblokiran).
Format warna non-RGB Illustrator (CMYK, skala abu-abu, dan format khusus) dikonversi ke RGB oleh Flash. Warna RGB ditempel dengan cara biasa.
Saat mengimpor atau menempelkan karya seni Illustrator, Anda dapat menggunakan berbagai opsi untuk mempertahankan efek tertentu (seperti bayangan yang dibuat oleh teks) sebagai filter Flash.
Flash menyimpan topeng Illustrator.
Mengekspor file SWF dari Illustrator
File SWF yang diekspor dari Illustrator cocok dengan kualitas dan rasio kompresi file SWF yang diekspor dari Flash.
Saat mengekspor, Anda dapat memilih dari berbagai gaya yang telah ditentukan sebelumnya untuk hasil optimal, dan menentukan bagaimana beberapa artboard digunakan, bagaimana simbol, lapisan, teks, dan topeng dikonversi. Misalnya, Anda dapat mengekspor simbol Illustrator sebagai film atau grafik, dan membuat simbol SWF dari lapisan Illustrator.
Mengimpor file Illustrator ke Flash
Untuk membuat tata letak lengkap di Illustrator dan kemudian mengimpornya ke Flash dalam satu langkah, Anda dapat menyimpan karya seni dalam format asli Illustrator (AI) dan mengimpornya dengan fidelitas tinggi ke Flash dengan menggunakan perintah File> Import Into Desktop.area atau File > Impor ke Perpustakaan.
Jika file Illustrator Anda berisi beberapa artboard, pilih artboard untuk diimpor di kotak dialog Impor Flash dan tentukan pengaturan untuk setiap lapisan di artboard itu. Semua objek di artboard yang dipilih diimpor ke Program kilat sebagai satu lapisan. Saat Anda mengimpor artboard yang berbeda dari file AI yang sama, objek dari artboard tersebut akan diimpor ke Flash sebagai layer baru.
Saat mengimpor karya seni Illustrator sebagai AI, EPS, atau lampiran PDF Flash mempertahankan atribut yang sama seperti saat menempelkan karya seni Illustrator. Selain itu, jika file Illustrator yang Anda impor berisi lapisan, Anda dapat mengimpornya dengan salah satu cara berikut.
Mengkonversi lapisan Illustrator ke lapisan Flash.
Konversikan lapisan Illustrator ke bingkai Flash.
Ubah semua lapisan Illustrator menjadi satu lapisan Flash.
