Cara membuat gradien Anda
Alat ini bekerja dengan dua cara, yang dipilih lewat tombol di bagian atas. Ia terbuka pada mode terapkan ke gambar saya, dengan area unggah yang sudah siap: seret satu foto atau lebih — JPG, PNG, WEBP, GIF, dan BMP diterima — dan gradiennya mulai digambar di atas masing-masing. Kalau foto yang dimuat lebih dari satu, tab berisi nama file muncul di atas pratinjau supaya Anda bisa berpindah di antaranya. Pada tombol kedua, buat latar dari nol, Anda tidak perlu memasukkan apa pun: cukup tentukan warnanya, jenis gradiennya, dan ukurannya, lalu gambarnya langsung jadi.
Gradiennya punya empat pilihan jenis. Linier membuat peralihannya dalam garis lurus, dengan sudut yang diatur lewat penggeser mengikuti aturan CSS, di mana 0 derajat mengarah ke atas. Radial berangkat dari tengah lalu menyebar melingkar. Kerucut memutar warnanya mengelilingi titik pusat, menghasilkan efek kipas yang lazim dipakai di latar modern. Tanpa gradien mematikan gradiennya: di atas foto Anda, gambarnya tetap utuh dan hanya menerima sentuhan akhirnya; pada mode buat latar, warna pertama jadi warna padat. Warnanya ada tepat di bawah: tiap baris punya pemilih warna, pengatur posisi dalam persen, dan tombol untuk membuangnya. Anda bisa memakai dua sampai enam titik warna, dan tombol tambah warna menyisipkan satu warna baru di antara yang sudah ada. Kalau lebih suka mulai dari sesuatu yang jadi, kisi paletnya menyediakan dua belas racikan yang sudah teruji, sementara tombol gradien acak mengundi warna dan sudut di tiap klik.
Keenam teksturnya digambar di atas gradien dan kepekatannya bisa diatur. Bintik menambahkan butiran monokrom: ia hanya mengubah kecerahan pikselnya tanpa mengusik warna, dan inilah cara yang paling sering dipakai untuk menghapus pita yang muncul pada gradien mulus. Derau warna melakukan kebalikannya — hanya mengubah warnanya dan membiarkan kecerahannya utuh, menghasilkan kesan foto yang diambil pada ISO tinggi. Garis menggambar goresan diagonal dan Titik membentuk jalinan yang teratur, keduanya berguna untuk latar bermotif grafis. Kertas memadukan butiran lembut dengan tepi yang sedikit menggelap, meniru kertas cetak. Terpisah dari tekstur, ada dua sentuhan akhir. Vinyet menggelapkan semua tepinya secara bertahap, sehingga pandangan terpusat ke tengah. Gradien tepi melakukan hal yang sama di satu sisi saja — atas, bawah, kiri, atau kanan — dengan empat jenis: gelapkan untuk menampung teks terang, terangkan untuk teks gelap, pakai warna pertama gradiennya, atau pudarkan tepinya sampai transparan. Pengatur jangkauan dan kepekatan menentukan seberapa jauh bidang itu masuk dan seberapa berat kesannya. Keduanya digambar paling akhir, sesudah semuanya, jadi bekerja sama saja di kedua mode dan tidak diubah oleh pencampuran. Pada mode penumpukan masih ada pengatur opasitas dan enam mode pencampuran, yang menentukan bagaimana gradiennya berpadu dengan foto di bawahnya.
Pada mode buat latar, pilih salah satu dari enam ukuran siap pakai — Full HD, persegi, story, thumbnail, Open Graph, atau wallpaper — atau ketik lebar dan tingginya di kolom kustom, sampai 6000 px per sisi. Blok kode CSS menampilkan deklarasi yang setara dengan gradien yang sedang aktif, dan tombolnya menyalin semuanya ke papan klip, siap ditempel ke lembar gaya Anda. Terakhir, pilih PNG, JPG, atau WEBP lalu unduh gambarnya; pada mode penumpukan dengan banyak foto, tombol unduh semua menyerahkan seluruh kumpulannya dalam satu file .zip.
Pertanyaan yang sering diajukan
Apakah gambar yang saya masukkan disimpan di suatu tempat?
Tidak. Gradiennya digambar di browser Anda, dan gambar pada mode penumpukan tidak pernah dikirim ke internet. Tidak ada yang tersimpan di server.
Apakah saya harus memasukkan gambar untuk memakai alat ini?
Tidak. Pada mode buat latar dari nol Anda cukup memilih warna dan ukurannya, lalu filenya langsung jadi. Memasukkan gambar hanya diperlukan untuk mode penumpukan, tempat gradiennya digambar di atas foto Anda.
Apa bedanya mengunduh gambarnya dan menyalin CSS-nya?
CSS menghasilkan gradiennya langsung di browser pengunjung situs Anda, tanpa mengunduh file apa pun — inilah pilihan yang paling ringan, tanpa memakan bandwidth sama sekali, dan paling pas untuk latar seksi dan tombol. Gambar dalam PNG atau JPG baru diperlukan kalau tujuannya tidak membaca CSS, misalnya sampul story, thumbnail video, slide presentasi, atau wallpaper. Perlu diingat bahwa teksturnya hanya ada di gambar hasil ekspor: gradien CSS tidak punya bintik.
Ukuran berapa yang dipakai untuk tiap media sosial atau keperluan?
Ukuran siap pakainya mencakup keperluan yang paling umum: 1080×1080 untuk unggahan persegi di Instagram dan Facebook, 1080×1920 untuk stories dan Reels, 1280×720 untuk thumbnail YouTube, 1200×630 untuk gambar berbagi Open Graph yang muncul di WhatsApp dan LinkedIn, 1920×1080 untuk slide, dan 2560×1440 untuk wallpaper. Kalau Anda butuh ukuran lain, ketik lebar dan tingginya di kolom kustom, sampai 6000 px per sisi.
Untuk apa tekstur berbintik pada sebuah gradien?
Gradien yang mulus di layar 8 bit biasanya memperlihatkan pita warna yang kentara, cacat yang dikenal sebagai banding, terutama kalau kedua warnanya berdekatan. Lapisan bintik yang tipis, sekitar 20% sampai 40%, memecah pita itu dan membuat peralihannya tampak mulus. Selain itu, butirannya memberi kesan cetak yang belakangan lazim dipakai di identitas visual dan sampul proyek.
Bagaimana cara memakai gradien di atas foto tanpa menutupi isinya?
Pilih mode penumpukan lalu mulai dengan opasitas 40% sampai 60%. Mode pencampurannya sangat mengubah hasil: multiply menggelapkan dan cocok untuk menaruh teks terang di atasnya, screen menerangkan, sementara color mewarnai fotonya tanpa mengubah kontras aslinya — mode inilah yang paling menjaga detailnya. Untuk sampul berjudul, gradien gelap dengan multiply di bagian bawah membuat teksnya terbaca tanpa menutupi gambarnya.
Bisakah saya memakai teksturnya atau vinyetnya saja, tanpa gradien sama sekali?
Bisa. Pilih Tanpa gradien pada pilihan pertama, yaitu jenis gradien. Di atas foto Anda, gambarnya lewat begitu saja tanpa berubah dan hanya menerima apa pun yang Anda nyalakan sesudahnya — bintik, vinyet, atau gradien tepi — sehingga alat ini berguna untuk memberi kesan film pada sebuah foto tanpa mengubah warnanya. Pada mode buat latar dari nol, Tanpa gradien memakai warna pertama sebagai latar padat, berguna untuk menghasilkan bidang warna rata yang berbintik.
Apa bedanya bintik dan derau warna?
Keduanya menebarkan variasi acak ke pikselnya, tetapi pada sumbu yang berlawanan. Bintik hanya mengubah kecerahan dan membiarkan warnanya utuh, meniru butiran film — itulah yang memecah pita kentara pada gradien mulus. Derau warna hanya mengubah warnanya dan menjaga kecerahannya, menghasilkan titik-titik berwarna yang mirip foto kamera pada ISO tinggi. Praktisnya: pakai bintik untuk sentuhan akhir dan untuk membenahi banding, dan derau warna kalau Anda ingin kesan foto analog atau layar lawas.
Untuk apa vinyet dan kepekatan berapa yang sebaiknya dipakai?
Vinyet menggelapkan tepinya secara bertahap dan mendorong perhatian ke tengah gambar — trik klasik di fotografi dan sampul video, tempat wajah atau produknya harus bersaing dengan latarnya. Pada 30% sampai 50% efeknya halus dan nyaris tak terasa, dan itu biasanya yang paling pas; di atas 70% ia jadi kentara dan berkesan dramatis. Karena vinyetnya digambar paling akhir, sesudah gradien, mode pencampuran yang Anda pilih tidak memengaruhi hasilnya.
Bagaimana cara menggelapkan bagian bawah foto saja untuk menaruh judul?
Nyalakan gradien tepi lalu pilih sisi tempat teksnya akan berada, dengan jenis gelapkan tetap terpilih. Bawaannya adalah kiri, yang melayani kasus paling umum berupa banner dengan judul di kiri dan gambar di kanan; untuk sampul video, yang judulnya di bawah, ganti ke bawah. Jangkauan 35% sampai 50% dengan kepekatan sekitar 75% memberi kontras yang cukup untuk teks putih tanpa menutupi objek fotonya.
Bisakah gradien yang sama diterapkan ke banyak foto sekaligus?
Bisa. Pada mode penumpukan, masukkan sebanyak apa pun gambar yang Anda mau: warna, tekstur, opasitas, dan pencampuran yang sama diterapkan ke semuanya, dan unduhan .zip menyerahkan seluruh kumpulannya. Ini cara tercepat untuk menyeragamkan sampul blog atau thumbnail sebuah kanal.