Sekarang kita telah mempelajari banyak cara membuat animasi, namun kita masih belum begitu paham tentang bentuk akhir dari animasi. Bagaimana cara menampilkan animasi? Di mana itu digunakan? Apa yang harus kita perhatikan saat digunakan? Dalam pelajaran ini kami akan menjelaskan masalah ini secara rinci.
Saat ini, format gambar animasi utama pada sistem Windows adalah GIF, yang juga dapat ditampilkan langsung di halaman web. Ini merupakan format gambar animasi yang paling banyak digunakan. Penyertaan animasi dalam pesan MMS ponsel yang kini populer juga termasuk dalam format GIF. Format GIF mendukung ekspresi diam dan animasi. Baik diam maupun animasi, ciri-cirinya sama.
Prinsip penerapan animasi format GIF tidaklah rumit. Anda dapat memahaminya dengan menggabungkan beberapa gambar diam (bingkai) untuk ditampilkan secara bergantian. Ada juga hubungan operasional antara gambar (bingkai) ini, yang mirip dengan operasi jalur mana pun yang dipilih, yaitu penjumlahan, pengurangan, dan eliminasi. Ini untuk mengoptimalkan jumlah byte animasi.
Jika bingkai tertentu ditambahkan, maka bingkai sebelumnya akan dipertahankan dan isi bingkai ini akan ditambahkan untuk membentuk gambar baru. Misalnya, animasi bilah kemajuan yang umum adalah contoh tipikal, seperti yang ditunjukkan pada gambar di bawah. Asumsikan bahwa bilah kemajuan terdiri dari 3 bingkai. Dari segi bentuk bingkai teoretis yang kita lihat, tampaknya bingkai terpendek dan sedang disimpan dalam 3 bingkai ini masing-masing dan gambar bilah kemajuan terpanjang. Namun nyatanya, frame kedua hanya berisi piksel-piksel yang tidak ada pada frame pertama, lalu bekerja pada frame pertama secara aditif, membentuk gambar "1+2". Hal yang sama berlaku untuk bingkai 3. Pengoptimalan ini secara efektif mengurangi jumlah byte gambar.
Metode pengurangan justru sebaliknya, yaitu menghapus piksel tertentu pada bingkai gambar sebelumnya, yang dapat dipahami dengan "bilah kemajuan terbalik". Metode eliminasi adalah dengan menghapus seluruh frame sebelumnya. Hal ini terutama digunakan ketika tidak ada korelasi antara dua frame sebelum dan sesudah frame sebelumnya dan berikutnya, metode eliminasi digunakan.
Dalam produksi sebenarnya, Photoshop akan secara otomatis memutuskan metode mana yang akan diterapkan berdasarkan situasi gambar, tanpa intervensi manual. Cukup memahami metode perhitungan ini sebagai sebuah pengetahuan. Ini juga dapat digunakan sebagai referensi ketika membuat animasi.
Sekarang mari kita bahas tentang fitur penting format GIF berikut ini, yaitu batasan jumlah warna. GIF hanya dapat mendukung maksimal 256 warna , artinya gambar GIF hanya dapat memiliki maksimal 256 warna. Hal ini terutama terlihat pada GIF statis. Beberapa gambar dengan warna yang kaya, seperti gradien berbagai warna, sulit untuk diekspresikan secara sempurna dalam GIF. Seperti yang ditunjukkan pada gambar kiri di bawah, sebagian foto (perhatikan bahwa ini adalah sebagian, bukan gambar lengkap) adalah gambar dalam PNG24-bit dan GIF256 tanpa dithering dan diffusion dithering. Gambar keseluruhannya adalah etalase toko yang diambil di Venesia, seperti yang ditunjukkan di sebelah kanan bawah.
Terlihat jelas bahwa PNG24-bit memiliki warna terbaik dan dapat dikatakan sebagai gambar aslinya. Format GIF memiliki ekspresi warna yang buruk. Tanpa ragu-ragu, bintik-bintik warna muncul di beberapa area dengan transisi warna pada gambar aslinya. Dalam dithering difusi, bintik-bintiknya agak lebih terang, tetapi butirannya lebih berat. Hal ini disebabkan oleh prinsip dithering itu sendiri. Konsep dithering telah diperkenalkan di tutorial dasar.
Perlu dicatat bahwa 256 warna mengacu pada keseluruhan gambar. Jika keseluruhan gambar asli berukuran seperti gambar di bawah ini, maka perbedaan antara 256 warna dan gambar asli tidak terlalu besar. Pasalnya, saat mereduksi warna menjadi 256 warna, Photoshop akan menyusunnya sesuai dengan warna pada gambar aslinya. Proses ini disebut juga dengan pengindeksan, yaitu mengelompokkan warna-warna serupa menjadi satu.
Jika warna-warna pada gambar asli mengandung banyak corak, maka ketika 256 warna tersebut dirata-ratakan, jumlah yang dialokasikan pada satu corak akan menjadi sangat kecil. Sebaliknya, jika rona pada gambar asli pada dasarnya sama atau mendekati, 256 warna juga dapat diekspresikan dengan baik. Inilah sebabnya mengapa warna 256 non-imitasi sebelumnya tampak seperti bintik-bintik yang terlihat jelas, namun kini bintik-bintik tersebut menjadi kurang jelas. Karena gambar asli mengandung lebih banyak rona, beberapa warna ditetapkan ke biru, merah, dll., dan lebih sedikit warna yang ditetapkan ke fase kuning. Gambar asli yang terakhir pada dasarnya hanya memiliki fase kuning, jadi tidak perlu memberi warna pada corak lain.
Gambar di bawah ini adalah foto pemandangan jalan yang diambil di Piacenca. Kami membandingkan bagian-bagiannya yang berbeda. Kotak di bawah adalah tabel warna, dan blok warna mewakili 256 warna yang digunakan. Pengaruh komposisi warna gambar asli terhadap indeks warna dapat dengan mudah dilihat pada tabel warna. Terdapat lebih banyak rona pada gambar di sebelah kiri, sehingga jumlah fase biru yang dialokasikan ke langit di antara 256 warna lebih kecil, dan terdapat titik warna yang jelas di langit pada gambar. Gambar di sebelah kanan pada dasarnya hanya berisi bagian langit, jadi sebagian besar dari 256 warna ditetapkan ke fase biru, sehingga performa langit dalam gambar menjadi lebih baik.
Gunakan [File>Save for Web and Devices] [CTRL+SHIFT+ALT+S], dan kotak pengaturan penyimpanan akan muncul. Ini adalah fungsi keluaran yang paling umum kami gunakan, terutama dalam tutorial ekstensi desain web yang akan kita pelajari di masa mendatang.
Setelah masuk ke antarmuka pengaturan, perhatikan panah merah. Yang harus Anda lihat di tab "Optimasi" adalah efek sebenarnya setelah keluaran, yaitu efek di browser atau perangkat lunak penampil gambar. Tab "Asli" adalah efek di Photoshop dan tidak dapat digunakan sebagai standar referensi. Ini harus diingat.
Panah hijau adalah area pengaturan yang sesuai, dari mana kita mengatur format gambar ke GIF, mengatur jumlah warna menjadi 256, dan mematikan opsi gentar. Pengaturannya sesuai dengan efek di sisi kiri gambar di atas.
Perhatikan indikasi jumlah byte pada panah biru, ini merupakan indikator yang sangat penting, kapanpun kita harus membuat angka ini sekecil mungkin, jika tidak kita tidak akan dapat menggunakan gambar atau animasi secara efektif.
Untuk memperkecil jumlah byte, jumlah warna perlu dikurangi, dan jumlah blok warna dalam tabel warna akan dikurangi. Namun jelas bahwa terlalu sedikit warna akan berdampak signifikan pada kualitas gambar dan dapat dengan mudah membentuk bintik-bintik warna. Meskipun mengaktifkan dithering dapat mengurangi bintik warna, hal ini juga akan meningkatkan jumlah byte. Ini seperti jungkat-jungkit antara jumlah byte dan kualitas. Untuk gambar yang dimaksudkan untuk dikirimkan melalui Internet, jumlah byte seringkali lebih penting karena sebagian besar pengunjung tidak memiliki kesabaran untuk menunggu beberapa menit hingga halaman web ditampilkan. Selain gambar, halaman web juga memiliki kode lain yang juga perlu menempati byte. Oleh karena itu, meminimalkan jumlah byte adalah prinsip dasarnya. Tentu saja prinsip ini bertentangan dengan kualitas gambar yang mengharuskan kita memiliki keterampilan yang cukup untuk menyeimbangkan keduanya dalam proses konsepsi dan produksi. Teknik-teknik ini meliputi:
1. Jangan gunakan warna yang terlalu kaya dalam animasi. Alasannya telah disebutkan. Lebih banyak warna akan menyebabkan penurunan kualitas gambar setelah pengindeksan dan membentuk bintik-bintik warna yang tidak sedap dipandang. Dalam hal ini sebaiknya menggunakan satu warna saja. Meski mungkin kurang cantik, setidaknya bisa menghindari munculnya cacat seperti noda.
2. Jika diperlukan warna yang kaya, piksel di bagian yang kaya warna harus tetap diam dalam animasi. Karena terdapat hubungan operasional antara bingkai sebelumnya dan berikutnya dalam animasi GIF, bagian dalam keadaan diam dapat digunakan dalam bingkai berikutnya, dan bagian gambar ini tidak perlu disimpan dalam bingkai berikutnya. Ini secara efektif dapat mengurangi jumlah byte sambil mempertahankan kekayaan warna seluruh animasi. Sebaliknya, jika piksel yang lebih kaya juga bergerak, maka piksel yang lebih kaya harus disimpan dalam frame berikutnya, yang akan sangat meningkatkan jumlah byte keseluruhan animasi.
Perbandingan dua animasi di bawah ini. Yang pertama menjaga cahaya luar, proyeksi, dan bagian lain dari bola tidak berubah, dan hanya bagian sorotan yang berubah. Yang kedua adalah pergerakan bola secara keseluruhan. Berdasarkan premis frame rate yang sama, durasi yang sama, dan keduanya 256 dan tanpa dithering, jumlah byte yang pertama adalah 9,29K, dan yang terakhir adalah 57,1K. Perbedaannya sebanyak 6 kali lipat. Maka waktu yang diperlukan untuk mengirimkannya melalui jaringan akan berbeda sebanyak 6 kali lipat.
Ketika kita memikirkan animasi, kita harus mempertimbangkan tujuannya terlebih dahulu. Jika ingin digunakan di halaman web, kita juga harus mengacu pada pentingnya di halaman web. Jika tidak terlalu penting dan bersifat dekoratif, coba kurangi byte sebanyak mungkin. Hal ini dapat dicapai dari dua aspek: pengurangan jumlah warna selama penyimpanan dan perencanaan produksi yang baik. Jika Anda menemukan animasi dengan instruksi penting yang harus berwarna atau dinamis, sebaiknya perkecil ukuran animasinya sebanyak mungkin. Karena jumlah total piksel dalam gambar berukuran kecil juga kecil, pengindeksan dengan 256 warna tidak akan terlihat terlalu sempit. Anda dapat mempelajarinya melalui eksperimen Anda sendiri.
Fitur penting lainnya dari GIF adalah mendukung transparansi latar belakang , yang memungkinkannya menyatu dengan baik dengan latar belakang halaman web. Anda juga dapat menampilkan GIF dengan latar belakang transparan dengan mematikan lapisan latar belakang. Namun, transparansi latar belakang GIF hanya dapat berada dalam dua keadaan, yaitu transparan penuh atau buram penuh, namun tidak tembus cahaya di antara keduanya. Oleh karena itu, kecuali batas gambar berupa garis horizontal, vertikal, atau diagonal 45 derajat, aliasing yang jelas akan terbentuk karena transparansi. Seperti yang ditunjukkan pada gambar di bawah, sekumpulan grafik dengan batas berbeda muncul di bawah warna latar belakang berbeda. Tidak sulit untuk melihat perbedaan keduanya.
Perlu dicatat bahwa prinsip pembentukan tepi bergerigi bukan hanya masalah gambar, tetapi juga faktor yang terkait dengan keterbatasan fisik tampilan. Pengetahuan yang relevan disebutkan dalam tutorial dasar.
Untuk gambar dengan piksel semi-transparan (seperti gaya drop shadow), jika Anda ingin menyimpannya sebagai latar belakang transparan, Anda perlu mengaktifkan proyek dithering transparansi, sehingga titik-titik kecil yang tersebar dengan kepadatan berbeda dapat digunakan untuk mensimulasikan tembus cahaya . Seperti yang ditunjukkan pada gambar di bawah ini. Terlihat bahwa meskipun GIF di bawah "No Transparency Dithering" juga memiliki latar belakang transparan, bagian asli yang tembus cahaya tetap mempertahankan warna putih, sehingga hanya dapat diterapkan pada latar belakang putih. Yang terakhir ini dapat diterapkan pada latar belakang apa pun. Seperti yang ditunjukkan di bawah ini di sebelah kanan.
Perlu dicatat bahwa transparansi dithering bukanlah solusi yang sempurna, bahkan bisa dikatakan solusi yang sangat buruk. Namun karena keterbatasan transparansi GIF itu sendiri, ini juga menjadi solusi. Dalam produksi sebenarnya, jika Anda memutuskan untuk menggunakan format GIF, Anda harus menghindari pembuatan piksel semi-transparan pada batas gambar. Dengan kata lain, cobalah untuk menghindari penggunaan dithering transparansi.
Hal lain yang perlu diperhatikan adalah jika animasi keluaran memiliki latar belakang transparan, hal ini dapat mengubah hubungan penghitungan setiap frame dalam keadaan tidak transparan, dan juga dapat menyebabkan jumlah byte animasi bertambah.
Sekarang mari kita bahas secara singkat tentang penggunaan animasi sebagai pesan MMS di ponsel.
China Mobile saat ini mengizinkan maksimal 100 ribu pesan MMS. Yang terbaik adalah mengontrol animasi di bawah 95 ribu dan memberikan ruang untuk teks dan kode SMS itu sendiri. Hal lain yang perlu diperhatikan adalah ukuran animasinya. Setiap model ponsel memiliki ukuran animasi berbeda yang dapat ditampilkan dengan sempurna karena resolusi layarnya berbeda. Yang disebut tampilan sempurna berarti resolusi layar ponsel sama atau lebih besar dari ukuran animasi. Jika ukuran animasi melebihi resolusi layar ponsel, maka ponsel akan memperkecil tampilannya. Namun kualitas animasi yang dikurangi akan menjadi sangat buruk. Ukuran layar yang umum adalah:
128×128: Umum pada ponsel kelas bawah awal dan saat ini. Ini adalah ukuran dasar animasi MMS. Kebanyakan animasi MMS yang diunduh dari Internet berukuran ini karena dapat dijalankan di hampir semua ponsel yang mendukung MMS.
128×160: Meskipun memiliki piksel lebih banyak dari yang sebelumnya, ini terutama digunakan untuk menampilkan beberapa informasi, sehingga sebagian besar ukuran animasi yang dapat dijalankan masih 128×128.
176×208, 240×320: Biasa digunakan pada ponsel dengan sistem operasi terbuka seperti Symbian dan Windows Mobile, serta dapat memutar animasi layar penuh. Ada juga ponsel biasa yang menggunakan resolusi ini, namun belum bisa dipastikan apakah bisa mendukung pemutaran layar penuh.
480×640: Umum pada model ponsel kelas atas. Meskipun secara teoritis dapat mendukung pemutaran animasi layar penuh dengan ukuran yang sama, karena keterbatasan GIF itu sendiri, kelancaran pemutaran tidak dijamin.
Saat membuat animasi MMS, 128×128 harus menjadi ukuran utama yang dipertimbangkan, karena memiliki kompatibilitas terbaik, dan karena ukurannya yang kecil, jumlah byte animasi untuk konten yang sama lebih kecil dibandingkan ukuran yang lebih besar. Tentu saja, jika resolusi layar receiver ditentukan, bisa juga dibuat dengan ukuran yang sebanding. Latar belakang animasi sebaiknya berwarna putih sehingga tidak ada batas yang jelas. Karena putih juga menjadi warna background saat ponsel menampilkan pesan MMS, sama seperti background halaman web. Tentu saja, terkadang perlu dengan sengaja menciptakan kesan batasan (seperti garis besar segel). Selain itu, karena sebagian besar ponsel tidak dapat mengubah latar belakang saat menampilkan pesan MMS, maka tidak masuk akal jika menggunakan latar belakang transparan dalam animasi pesan MMS.
Ada tombol "Pusat Perangkat..." di sudut kanan bawah "Simpan untuk Web dan Perangkat". Setelah menekannya, Anda dapat melihat pratinjau efek animasi pada perangkat ponsel yang dipilih. Seperti yang ditunjukkan di bawah ini. Anda dapat memilihnya dari daftar perangkat di sebelah kiri. Adobe Device Central sebenarnya adalah database perangkat seluler yang menyediakan lingkungan terpusat bagi mereka yang memproduksi perangkat seluler. Selain tampilan biasa, juga dapat mensimulasikan situasi tampilan saat lampu latar layar ponsel dimatikan, dan layar luar ruangan memiliki lampu latar. Namun, fitur-fitur ini tidak terlalu penting bagi kami saat ini.
Hal lain yang perlu diperhatikan adalah frame rate animasinya. Di komputer, animasi pada 30fps pada dasarnya dapat diputar dengan lancar, tetapi prosesor ponsel tidak lebih baik dari komputer desktop, dan sumber dayanya terbatas. Kecepatan bingkai animasi harus disetel ke 2~5fps. Untuk ponsel dengan sistem operasi terbuka, karena kinerja prosesornya lebih baik daripada ponsel biasa, maka dapat disetel ke 10fps atau lebih tinggi. Pada saat yang sama, faktor-faktor seperti ukuran, durasi total, jumlah byte, dll. juga mempengaruhi efek pemutaran di ponsel. Yang terbaik adalah mencoba animasi di ponsel Anda untuk melihat seberapa mulusnya.
Jika Anda ingin menghasilkan animasi dengan berbagai ukuran berbeda, yang terbaik adalah menggunakan format vektor untuk produksi, dan format vektor juga merupakan format terbaik untuk menyimpan gambar asli, sejalan dengan prinsip "menjaga kemampuan edit maksimum" yang selalu kami miliki. menganjurkan.