Skip to main content
Pada latihan ini, Anda akan mengetahui cara menambahkan gambar ke dalam komponen beserta memahami tipe-tipe yang dipilih.
  1. Kita mulai dari yang paling atas, yaitu bagian Banner. Namun, sebelum melangkah lebih jauh, unduh dan extract terlebih dahulu asset yang akan digunakan untuk materi ini pada tautan berikut:
  2. Untuk membuat banner, buat bentuk persegi panjang menggunakan Rectangle Tool (R) dengan ukuran 360x160.
    dos:018877facbfff6453c09e4e09a2d6b9020211005165645.jpeg
  3. Kemudian untuk memasukkan gambar banner ke dalam kotak, pilih elemen tersebut dan klik pada bagian thumbnail warna pada properti Fill. Lalu, ganti tipe pada dropdown yang ada di pojok kanan atas dari Solid menjadi Image.
    dos:03127d8d5f7f1abd663dbbd80f5adee620211005165645.jpeg
  4. Nah, sekarang Anda bisa menambahkan gambar dengan cara klik tombol Choose image dan pilih gambar Banner dari aset yang sudah diunduh tadi. Selain itu, Anda juga bisa melakukan drag and drop atau copy paste untuk memasukkan gambar.
    dos:1a1c9067218b7d276a7831c0993db73120211005165645.jpeg
  5. Mantap! Gambar sudah tampil di halaman desain. Anda juga bisa mengubah tipe gambar dengan menggantinya melalui dropdown seperti berikut ini:
    dos:f639debc408d2a972fe96604d627fb5f20211006092540.gif
    Ada empat pilihan tipe yang bisa Anda gunakan, antara lain:
    • Fill : menyesuaikan ukuran gambar sesuai dengan ukuran elemen.
    • Fit : memperlihatkan gambar secara penuh walaupun mungkin ada sisa ruang kosong.
    • Crop : mengatur ukuran dan memindahkan gambar sesuka hati.
    • Tile : menampilkan gambar sesuai ukuran aslinya, apabila ada sisa akan diulang-ulang.
Selain itu, Anda juga bisa memanipulasi suatu gambar dengan mengubah pengaturan pada Exposure, Contrast, Saturation, Temperature, Tint, Highlights, dan Shadows.