Membuat Warna Turunan pada UI Design
Oke langsung saja, karna kamu telah menemukan artikel ini, saya asumsikan kamu tau apa itu warna turunan. Sebenarnya warna turunan yang akan dibuat ini bisa digunakan untuk kebutuhan apa saja, tapi karna saya akan memberikan contoh dalam UI design, maka artikel ini akan kita fokuskan ke UI Design saja dan untuk kebutuhan lain dapat menyesuaikan. Berikut langkah-langkahnya.
Saya menggunakan software bernama Figma. Kamu dapat menggunakan software lain seperti Adobe XD, Sketch, Adobe Illustrator, Corel Draw, dan bahkan Adobe Photoshop, cukup sesuaikan saja dengan software yang kamu gunakan.
Langkah 1 — Menentukan Warna Utama
Tentukan warna dari komponen yang kamu buat. Biasanya saya mencari warna di https://flatuicolors.com/ atau di https://color.adobe.com/create
Disini saya memilih warna ungu, jika kamu mau mempraktekkannya dengan warna yang sama, kamu bisa menggunakan kode hex berikut #706FD3
Langkah 2 — Buat Persegi Panjang
Buat persegi panjang pada frame, canvas, atau artboard software desain kalian, lalu berikan fill warna dari kode warna pada langkah pertama.
Langkah 3 — Buat Persegi dengan Opacity
Buat lagi persegi diatas persegi sebelumnya, berikan fill warna putih (hex #FFFFFF) lalu berikan opacity 70% sehingga menjadi seperti gambar berikut.
Langkah 4 — Ulangi Langkah Sebelumnya
Ulangi langkah sebelumnya namun dengan mengubah besaran opacity pada persegi yang ada diatas dengan opacity 45% dan opacity 20% sehingga hasinya seperti gambar berikut
Langkah 5– Mengambil Warna Turunan
Duplicate/copy persegi sebelumnya, lalu geser kebawahnya. Selanjutnya pick/ambil warna dari tumpukan persegi yang sebelumnya dibuat, maka kamu akan mendapatkan kode warna turunan dan dapat kamu gunakan untuk kebutuhan desain kamu.
Cukup simpel kan? Oiya.. artikel ini terinspirasi dari salah satu postingan di instagram oleh mas Afif Bimantara. Kamu bisa mengakses profilnya di link berikut — Instagram dan postingan mengenai warna turunan
Untuk melihat-lihat desain yang pernah saya buat, kamu bisa melihat shot saya di dribbble di link berikut — Dribbble
Terimakasih, sampai jumpa di artikel berikutnya!
