Halo semuanya di awal tahun 2023 aku mutusin buat lakuin 100 days challange UI UX Design. Terinspirasi dari beberapa creator dan designer Indonesia maupun luar negri, 100 days project adalah 100 hari ngelakuin challenge entah itu design, belajar, atau mengikuti tutorial.
Di day 19 ini kita akan membuat belajar membuat animate magnified atau efek kaca pembesar di design kita sehingga card kita bisa lebih interaktif untuk ketika dihover. Terlihat sulit tapi cara buatnya mudah
Hasilnya seperti ini :
Cara membuatnya :
Buka situs Unsplash dan pilih gambar yang diinginkan, misalnya sneakers. Cari gambar dengan background kosong (hanya warna saja).
Hapus background gambar menggunakan plugin Icons
Setelah background gambar dihapus, masukkan gambar ke dalam frame dengan ukuran 1080 x 1080
Duplicate frame dan klik tombol K pada keyboard, lalu pilih scale 2x. Hasilnya akan seperti ini
Selanjutnya, crop gambar dengan pilih crop di image dan ubah jadi ukuran 500x500
letakan foto yang udah dipotong di posisi semula
menjadi lingkaran dan beri stroke putih dengan tebal 7.
Buat shape rectangle dan letakkan di belakang foto yang telah kita crop (lihat gambar). Beri efek latar blur sebesar 20 dan ubah warna jadi 60% oppacity
Setelah jadi, duplikasi menjadi 3, lalu sembunyikan foto crop di belakang pada frame pertama, frame kedua tetap sama, dan pada frame ketiga, geser gambarnya ke ujung.
Lalu, klik prototype, frame 1 ke frame 2 on klik, lalu frame 2 dan 3 on drag dengan smart animate ease out.
Tambahkan sedikit design, dan jadilah prototipe UI kaca pembesar.
Itu aja untuk belajar kali ini, semoga membantu see you di day 20 ^^
Subscribe dan follow aku di Tiktok atau Instagram untuk liat days berikutnya
Untuk yang mau join challenge bisa download Template Notion 100 daysnya disini