| BACKGROUND DAN ASSET DESIGN

Asset visual berupa background dan objek-objek graphic memegang peranan penting dalam pembuatan animasi 2D/motion graphic. Background membuat karakter/figure yang dianimasikan tampak lebih hidup dan dinamis. Background terdiri dari dua kata, yaitu kata back (belakang) dan ground (dasar). Background sering diartikan sebagai latar belakang. Penempatan background berada di belakang objek. Selain Background di animasi juga dikenal dengan foreground. Peran foreground sama dengan background, tetapi penempatan foreground ada di depan objek yang bergerak.

Contoh gambar :

Background Foreground

Berikut beberapa hal-hal penting yang harus diperhatikan sebelum mendesain background dan asset design untuk animasi motion graphic :

a. Software dan Shortcut b. Resolusi dan Ukuran Desain Background c. Elemen Desain d. Value dan Point Of Interest e. Komposisi dan Perspective f. Desain Background dan Asset g. Aliran Desain Background

a. Software dan Shortcut Dalam pembuatan animasi motion graphic, aset-aset desain berbasis vector lebih sering digunakan dibanding aset berupa gambar raster/bitmap karena gambar vector tidak akan pecah/blur meski dizoom berkali-kali dari ukuran sebenarnya. Ada banyak software yang bisa dipakai untuk membuat desain vector. Dua software utama yang akan sering kita pakai adalah 1. Adobe Animate 2. Adobe Illustrator

Berikut adalah beberapa shortcut penting yang harus diingat untuk mempercepat kinerja ;

Fungsi Adobe Animate Adobe Illustrator

Selection V V

Transform Q V

Zoom Z atau CTRL +- Z atau CTRL +-

Group CTRL+G CTRL+G

Break apart CTRL+B -

Library CTRL+L -

Bring to front CTRL+Shift+↑ CTRL+Shift+]

Bring forward CTRL+↑ CTRL+]

Send Backward CTRL+↓ CTRL+[

Send to back CTRL+Shift+↓ CTRL+Shift+[

b. Resolusi dan Ukuran Desain Background

Ukuran desain background menyesuaikan kebutuhan animasi yang akan diproduksi. Ukuran background untuk animasi berkualitas HD adalah 1280x720 pixel, sementara untuk ukuran full HD adalah 1920x1080 pixel.

TASK! 1. Buat lembar kerja baru berukuran full HD di Adobe Animate:

Klik New → Template → Title Safe Area HDTV 1080 2. Buat desain background dan foreground sederhana bergaya flat

design! (tema bebas)

c. Elemen Desain : 1. Garis (Line) Garis adalah sebuah unsur desain yang menghubungkan antara satu titik dengan titik lainnya sehingga tergambarlah sebuah garis dengan bentuk lengkung (curve) atau lurus (straight). Ada dua jenis garis yang paling sering digunakan dalam pembuatan asset yakni garis solid dan garis putus-putus (Dashed line).

2. Bentuk (Shape) Bentuk adalah obyek 2 (dua) dimensi yang memiliki diameter, tinggi dan lebar. Shape dapat berupa bentuk-bentuk geometris (lingkaran, segitiga, elips, persegi, dsb.) dan bentuk-bentuk yang tidak beraturan.

Dua elemen diatas seringkali digunakan dalam pembuatan background, speech balloon dan label bergaya abstract.

o Background abstract Memphis : perpaduan elemen garis, titik dan shape-shape kecil yang didesain sedemikian rupa hingga terlihat seperti pattern abstract. Pattern Memphis biasanya diaplikasikan secara transparan diatas background solid untuk menghilangkan kesan kosong.

o Background abstract Geometric : perpaduan bentuk-bentuk geometris; (lingkaran, segitiga, persegi dsb) ditambah elemen-elemen memphis. Background geometric biasanya dibuat dengan warna yang beragam sehingga menimbulkan kesan yang ramai.

o Speech balloon dan label bergaya abstract

TASK! Membuat background menggunakan elemen-elemen abstract

a. Buat 3 jenis background dengan gaya Memphis b. Buat 3 jenis background dengan gaya Geometric c. Buat 5 jenis label dan 5 jenis speech balloon abstract

3. Tekstur (Texture) Tekstur merupakan visualisasi corak dari suatu permukaan benda. Tekstur dapat menambah dimensi dan kekayaan sebuah layout. Dalam pembuatan background bergaya flat desain penggunaan tekstur tidak dibuat secara realistik, corak tekstur cenderung lebih sederhana, hanya untuk memunculkan kesan dari tekstur yang sebenarnya. Tekstur yg paling sering digunakan dalam desain background adalah tekstur dinding, kayu dan kaca.

Pembuatan teksture dinding/bata kuncinya pada desain shape. Desain dan warna tekstur dinding dengan gaya flat dibuat sesederhana mungkin, untuk menghindari kesan teksture bata yang terlalu realistik.

Pembuatan teksur kaca kuncinya pada pengaturan opacity atau transparansi. Shape berwarna putih/biru diberi opacity kurang dari 80% ditambah beberapa shape vertikal untuk memberikan kesan kilauan cahaya. Pembuatan teksur kayu kuncinya pada shape dan warna. Corak kayu memiliki bentuk yang khas. Kebanyakan asset yang memiliki tekstur kayu lebih gampang dikenali jika memakai perpaduan warna coklat atau hijau tua.

TASK! 1. Buat 3 jenis background bertema café, workspace dan hospital

dengan memakai tekstur seperti yang dicontohkan diatas!

4. Ruang kosong (White Space) Rung kosong adalah setiap ruang yang tidak berisi atau sengaja dibiarkan kosong. White space diperlukan untuk memberikan jeda pada mata agar mata tidak terlalu lelah melihat desain yang terlalu padat.

Pada desain background disamping, elemen selain elemen utama berupa ruang kosong. Fungsi ruang kosong selain untuk memberikan jeda pada mata juga untuk mempertajam focus pada objek utama dalam background.

5. Ukuran (Size) Ukuran adalah seberapa besar atau kecil objek. Perbandingan ukuran satu bentuk terhadap bentuk lainnya. Dengan menggunakan elemen ini kamu dapat menciptakan kontras dan penekan pada obyek desain, sehingga orang akan tahu sisi menonjol dari desain itu dan melihatnya terlebih dahulu.

Pada desain background disamping bisa kita lihat perbedaan ukuran kursi di depan dan kursi yang seolah-olah terletak jauh dibelakang. Pengaturan ukuran didasarkan prinsip perspective, semakin jauh benda ukurannya juga akan terlihat semakin kecil.

TASK! 1. Buat 2 jenis background bertema indoor (living room) dan indoor

(bedroom) dengan menerapkan elemen ruang kosong (white space) di masing-masing desain!

2. Buat 3 jenis background bertema shop, library dan restaurant dengan menerapkan elemen ukuran (size) di tiap desain!

6. Warna Warna membawa suasana tertentu, menarik perhatian, menegaskan sesuatu dan mengatur elemen-elemen layout. Berdasarkan warnanya background dibagi menjadi empat kategori yaitu

Fullcolor : memakai berbagai palette warna. Palette warna colorfull tapi bukan warna fanta yang terlalu cerah dan mencolok. One Tone : menggunakan satu turunan warna, hanya aset utama yg berwarna. Background one tone biasanya dibuat dengan palette warna soft. Solid : hanya latar berwarna solid tanpa aset desain apapun. Gradasi: memakai perpaduan warna gradasi. Background dengan perpaduan gradasi akan menimbulkan kesan semirealis.

Palette Warna Untuk mempercepat pembuatan background salah satu caranya adalah mengoleksi palette warna. Warna-warna yang sering kita pakai adalah warna colorful soft. Contoh: palette warna di flatuicolors.com Russian palette.

Gambar disamping adalah contoh palette turunan warna soft sesuai dengan warna-warna asset yang sering dipakai. Misal palette warna untuk tanaman, langit, dinding dan warna-warna furniture,

TASK! 1. Buat 10 jenis background fullcolor 2. Buat 10 Jenis background one tone 3. Buat 10 jenis background gradasi 4. Buat koleksi palette warna-warna soft dari background yang sudah

dibuat

d. Value dan Point Of Interest 1. Value

Seberapa gelap atau terang sebuah area. Value memisahkan elemen-elemen layout, memberikan suasana tertentu dan membuat sebuah ilusi kedalaman.

Pada contoh desain background disamping warna dinding dibagian belakang dibuat beberapa tingkat lebih gelap untuk menciptakan ilusi seolah-olah ada dimensi ruangan.

2. Point of interest/Emphasis Dalam setiap bentuk desain ada hal yang perlu ditonjolkan lebih dari yang lain. Penekanan bisa berupa warna, ukuran maupun bentuk. Tapi yang perlu diingat adalah tidak semua elemen harus ditonjolkan karena bila itu terjadi, desain akan berakhir terlalu ramai dan pesan tidak tersampaikan.

Pada contoh desain background disamping sayuran sebagai point of interest, warna sayuran dibuat lebih mencolok dibanding warna elemen lain di dalam background.

3. TASK! 1. Buat background bertema sport, taman dan toko dengan

menerapkan prinsip value dan point of interest.

e. Komposisi dan Perspective Komposisi ialah susunan unsur-unsur rupa yang memancarkan kesan-kesan kesatupaduan, irama, dan keseimbangan dalam suatu karya, sehingga karya itu terasa utuh, jelas, dan memikat. Pola komposisi ada 3 macam, yaitu: simetri, asimetri, dan bebas atau informal. 1. Pola simetri

Pola simetri menggambarkan dua bagian yang sama dalam sebuah susunan. Komposisi yang berpola simetri meletakkan fokusnya di tengah, dan meletakkan unsur-unsurnya di bagian kiri sama dengan bagian kanan. Jika ada dua fokus dalam komposisi simetri, maka penempatanya bisa satu di kiri, satu di kanan. Penempatan demikian memberikan kesan bagian kiri dan bagian akanan sama kuat. Komposisi berpola simetri memberikan kesan formal, beraturan dan statis.

2. Pola asimetri

Komposisi asimetri meletakkan fokusnya tidak di tengah-tengah, dan paduan unsur-unsur di bagian kiri tidak sama dengan yang di bagian kanan, tetapi tetap memancarkan keseimbangan. Kompisisi asimetri memberikan kesan keteraturan yang bervariasi dan karenanya tidak formal serta lebih dinamis.

3. Pola bebas Komposisi pola bebas meletakkan fokus dan unsur-unsurnya secara bebas, tetapi tetap memelihara keseimbangan. Dibandingkan dengan pola simetri, pada pola bebas ini kesan keteraturan dan kesan formal sama sekali tidak terasa. Meskipun demikian, kecermatan dan ketelitian dalam membentuk irama dan keseimbangannya menjadikan komposisi berpola bebas ini tampak dan terasa lebih hidup serta semakin menarik.

Perspective : Gambar ruang atau objek yang berkesan tiga dimensi sebagaimana kesan mata kita ketika melihat objek tersebut yang meliput kesan jauh dan dekat.

TASK! 1. Buat background indoor dan outdoor menerapkan pola simetri,

asimetri, dan pola bebas 2. Buat background bertema class, factory dan IT dengan

menerapkan prinsip perspective

f. Desain Background Dan Asset 1. Asset Desain Paper and Board

2. Asset Desain Tanaman

3. Asset Desain Wall Dekorasi

4. Asset Desain Furniture

5. Asset Desain Gadget

6. Asset Desain Food & Drink

7. Asset Desain Pets

8. Asset Desain Transportation

9. Asset Desain Mesin Pabrik

10. Asset Desain Speech Bubble

TASK! 1. Buat koleksi asset dengan kategori yang sama dengan contoh diatas, kumpulkan

minimal 10 asset dalam masing-masing tema 3. Buat koleksi asset label and badges, snack and drink, hospital tools, book and

library, school supply, kumpulkan asset sebanyak-banyaknya dalam satu dokumen tiap tema

g. Aliran Desain Background a. Flat Desain

Flat design adalah desain dengan pendekatan minimalis yang menekankan kegunaan, dengan desain yang bersih tanpa ada bevel, bayangan maupun tekstur. Perpaduan elemen flat desain menimbulkan kesan ilustrasi dua dimensi.

b. Illustrative Design Illustratif Design adalah desain yang memberikan kesan gambar terkonsep, menekankan kesederhaanaan, bentuk-bentuk abstract dan warna-warna soft-pastel semi one tone. Desain illustratif berfungsi untuk menonjolkan karakter utama yang dianimasikan.

c. Semirealism Design Semirealism Design adalah desain yang memberikan kesan seolah-olah gambar realis atau mendekati nyata. Desain ini lebih menekankan pada penggunaan gradasi, shading dan texture.

d. Lineart Desain Lineart Desain adalah desain yang dibuat dengan perpaduan elemen garis dan shape. Penggunaan warna di desain lineart tidak terlalu banyak, white space atau ruang kosong lebih ditonjolkan.

TASK!

1. Buat Background aliran flat desain dengan tema building, public area dan perumahan

2. Buat Background aliran Illustrative Desain dengan tema outdoor, taman dan tempat liburan

3. Buat Background aliran Semirealism Desain dengan tema indoor dalam rumah, kantor dan cafe