> ## Documentation Index
> Fetch the complete documentation index at: https://v1-learn.neoartd.my.id/llms.txt
> Use this file to discover all available pages before exploring further.

# Latihan Memasukkan Gambar Banner

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:

   * [Asset Mockup Aplikasi Kedai Kopi](https://drive.google.com/file/d/1mrQTJ8XyUdCKVk4YuLXHZqeDNWgvfY4q/view?usp=sharing)

2. Untuk membuat banner, buat bentuk persegi panjang menggunakan **Rectangle Tool (R)** dengan ukuran **360x160**.\
   [![dos:018877facbfff6453c09e4e09a2d6b9020211005165645.jpeg](https://dicoding-web-img.sgp1.cdn.digitaloceanspaces.com/original/academy/dos:018877facbfff6453c09e4e09a2d6b9020211005165645.jpeg)](# "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](https://dicoding-web-img.sgp1.cdn.digitaloceanspaces.com/original/academy/dos:03127d8d5f7f1abd663dbbd80f5adee620211005165645.jpeg)](# "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](https://dicoding-web-img.sgp1.cdn.digitaloceanspaces.com/original/academy/dos:1a1c9067218b7d276a7831c0993db73120211005165645.jpeg)](# "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](https://dicoding-web-img.sgp1.cdn.digitaloceanspaces.com/original/academy/dos:f639debc408d2a972fe96604d627fb5f20211006092540.gif)](# "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.