Generator Gambar Sudut Membulat

Yang membuat pembulat ini berbeda: setiap sudut dapat membawa radiusnya sendiri, radius dapat dinyatakan dalam piksel atau sebagai persentase dari sisi yang lebih pendek, dan sudut itu sendiri dapat berupa busur membulat biasa, squircle yang halus, bevel lurus, atau scoop ke dalam. Alat ini juga mencetak aturan CSS border-radius yang sesuai, sehingga bentuk yang sama dapat direproduksi di kode, bukan sebagai file.

Mengapa membulatkan sudut gambar?

Cara Menambahkan Sudut Membulat pada Gambar

1. Muat gambar Anda. Seret file ke area lepas atau pilih Pilih Gambar. JPG, PNG, WebP, GIF, BMP, AVIF, dan SVG semuanya berfungsi selama browser Anda dapat mendekodenya.
2. Atur radius. Seret salah satu gagang sudut bundar pada pratinjau, geser penggeser Radius sudut, atau ketik angka yang tepat lalu ganti satuan antara px dan %.
3. Pilih gaya sudut. Membulat, Squircle, Bevel, atau Scoop. Matikan Tautkan semua sudut untuk memberi setiap sudut nilainya sendiri, disusun di layar persis seperti sudut yang dikontrolnya.
4. Tambahkan padding, latar belakang, atau tepi, jika Anda menginginkannya. Padding memperbesar kanvas di sekitar gambar, latar belakang mengisinya, dan cincin tepi mengikuti garis luar membulat, bukan persegi panjang lama.
5. Unduh. Pertahankan PNG untuk sudut tembus pandang, lalu klik Unduh Gambar. Panel melaporkan dimensi dan ukuran file yang diekspor, dan kotak CSS menampilkan aturan stylesheet yang setara.

Radius dalam piksel atau dalam persen

Radius dalam piksel bersifat mutlak: 32 px adalah 32 px baik gambar itu lebarnya 400 atau 4000 piksel, sehingga nilai yang sama terlihat dramatis pada thumbnail kecil dan hampir tidak terlihat pada foto besar. Radius dalam persen diukur terhadap sisi yang lebih pendek dari gambar, sehingga mengikuti ukuran gambar dan terlihat sama pada setiap ekspor. 50% adalah nilai berguna maksimum, dan menghasilkan lingkaran pada gambar persegi serta pil pada persegi panjang.

Keempat gaya sudut

• Membulat — seperempat lingkaran, geometri yang sama yang digambar browser untuk border-radius. Dapat diprediksi, dan satu-satunya gaya yang memetakan satu-ke-satu ke CSS.
• Squircle — sudut bergaya superellipse. Lengkungan dimulai lebih jauh di sepanjang setiap tepi dan mengalir ke sisi lurus tanpa perubahan kelengkungan mendadak yang dimiliki lingkaran, itulah sebabnya panduan ikon aplikasi di iOS dan Android menggunakan bentuk ini.
• Bevel — sudut dipotong oleh diagonal lurus. Lebih tajam dan lebih teknis daripada lengkungan, dan tetap tegas pada ukuran kecil.
• Scoop — busur melengkung ke dalam, menghilangkan gigitan cekung. Dua sudut scoop di sisi berlawanan langsung terbaca sebagai tiket atau tag.

Memilih format keluaran

Karena JPG tidak memiliki saluran alfa, mengekspornya mengisi sudut yang terpotong dengan warna latar belakang yang dipilih, bukan membiarkannya kosong. Itu sering justru yang Anda inginkan — foto membulat putih di halaman putih — tetapi itu bukan transparansi, dan tidak dapat dibatalkan kemudian.

Fitur utama

• Pribadi sejak dirancang: file dibaca dengan FileReader API browser dan digambar pada kanvas secara lokal. File itu tidak pernah diunggah.
• Pengeditan seret-sudut: tarik gagang secara diagonal pada pratinjau dan lihat radius mengikuti jari atau kursor Anda.
• Kontrol per sudut: bulatkan hanya dua sudut atas, atau scoop satu sisi dan biarkan sisanya persegi.
• Latar belakang pratinjau: beralih antara papan catur transparansi, putih, gelap, dan gradien warna untuk memeriksa tepi alfa sebelum Anda mengunduh.
• Padding, isian latar belakang, dan cincin tepi yang semuanya mengikuti garis luar membulat yang sama.
• Skala keluaran: ekspor pada resolusi asli, atau perkecil ke 75%, 50%, atau 25% dalam sekali proses.
• CSS yang dapat disalin: aturan border-radius yang dihasilkan mereproduksi bentuk yang sama dalam stylesheet ketika file bukan jawaban yang tepat.
• Tepi anti-alias: sudut digambar sebagai jalur kliping, sehingga lengkungan tetap halus, bukan menampilkan tepi bergerigi seperti tangga.

File gambar atau CSS?

Jika gambar membulat akan masuk ke dek slide, PDF, tanda tangan email, daftar marketplace, atau alat apa pun yang tidak akan menjalankan stylesheet Anda, Anda membutuhkan file nyata dengan transparansi nyata — ekspor PNG. Jika akan ditaruh di halaman web yang Anda kendalikan, aturan CSS lebih ringan, tetap tajam pada ukuran apa pun, dan lebih mudah diubah kemudian; salin cuplikannya. Keduanya tidak saling meniadakan: banyak tim mengirim PNG untuk penggunaan eksternal dan CSS untuk situs.

Pemecahan masalah

• Sudut terlihat bergerigi: sumbernya mungkin sudah kecil. Bulatkan pada resolusi terbesar yang tersedia, lalu perkecil, daripada membulatkan gambar yang telah diperbesar.
• Halo terang tipis muncul pada latar belakang gelap: gambar memiliki matte putih yang sudah tertanam. Tambahkan satu atau dua piksel padding dengan warna yang sesuai, atau tingkatkan radius sedikit agar halo terpotong.
• Unduhan terbuka sebagai kotak putih: formatnya JPG atau latar belakang tidak diatur ke Transparan. Ganti format keluaran ke PNG.
• Foto yang sangat besar terasa lambat: kanvas menggambar ulang gambar resolusi penuh pada setiap gerakan penggeser. Lepaskan penggeser dan beri browser sejenak, atau kurangi skala keluaran.
• GIF animasi kehilangan animasinya: kanvas mengekspor satu bingkai. Hanya bingkai pertama yang dibulatkan dan disimpan.

Pertanyaan yang Sering Diajukan

Apakah gambar saya diunggah ke server?

Tidak. File dibaca oleh browser Anda dengan FileReader API dan digambar ke kanvas HTML di perangkat Anda sendiri. Tidak ada yang dikirim ke miniwebtool, sehingga tangkapan layar pribadi, karya klien, dan foto pribadi tidak pernah meninggalkan komputer Anda. Halaman itu sendiri tetap membutuhkan koneksi internet untuk dimuat.

Mengapa sudut membulat saya terlihat putih atau hitam, bukan transparan?

Hanya PNG dan WebP yang dapat menyimpan transparansi. Jika Anda mengekspor JPG, format itu tidak memiliki saluran alfa, sehingga sudut yang terpotong diisi dengan warna latar belakang. Pilih PNG di daftar Format keluaran dan atur latar belakang ke Transparan. Jika sudut masih terlihat salah, periksa apakah aplikasi atau situs yang Anda tempeli mendukung alfa, karena beberapa editor meratakan transparansi PNG ke putih.

Bagaimana cara membuat gambar yang benar-benar lingkaran?

Ganti satuan radius ke persen dan atur radius ke 50%. Pada gambar persegi, itu menghasilkan lingkaran sempurna. Pada persegi panjang, itu menghasilkan bentuk pil atau stadion, karena radius persen diukur terhadap sisi yang lebih pendek. Gunakan preset Lingkaran untuk memotong ke persegi dan membulatkannya dalam satu klik.

Apa perbedaan antara sudut membulat, squircle, bevel, dan scoop?

Membulat adalah seperempat lingkaran biasa, bentuk yang sama yang digambar CSS border-radius. Squircle menyebarkan lengkungan lebih jauh di sepanjang setiap tepi sehingga sambungannya halus dan berkesinambungan, yaitu tampilan yang digunakan ikon aplikasi iOS dan Android. Bevel memotong sudut dengan garis diagonal lurus. Scoop melengkung ke dalam, bukan ke luar, dan mengukir gigitan cekung pada setiap sudut, yang cocok untuk tiket, kupon, dan lencana.

Apakah radius dalam piksel cocok dengan CSS border-radius di situs saya?

Radius diterapkan dalam piksel gambar itu sendiri, jadi hanya cocok dengan CSS ketika gambar ditampilkan pada ukuran alaminya. Ekspor selebar 1200 piksel yang ditampilkan di kolom selebar 600 piksel diskalakan menjadi setengah, sehingga radius 48 piksel terlihat seperti 24 piksel di layar. Gunakan satuan persen untuk hasil yang independen dari ukuran, atau salin cuplikan CSS yang dihasilkan alat, yang sudah melaporkan padanan yang telah diskalakan.

Bisakah saya mempertahankan kualitas gambar dan resolusi asli?

Ya. Ekspor mempertahankan dimensi piksel asli kecuali Anda mengubah skala keluaran atau menambahkan padding, dan PNG bersifat lossless, sehingga tidak ada yang dikompresi ulang. Hanya piksel sudut yang berubah, dari buram menjadi transparan. WebP dan JPG bersifat lossy, jadi gunakan keduanya ketika ukuran file lebih penting daripada salinan piksel sumber yang tepat.