Sudut Membulat pada Gambar

Radius sudut

Sistem operasi, app store, dan design system UI semua menyukai sudut bulat, ikon iOS, kartu Material, komponen Tailwind modern. Unggah gambar mana pun dan tool ini membulatkan keempat sudut ke radius yang Anda atur, ekspor sebagai PNG dengan sudut transparan, dan secara opsional menerapkan radius berbeda per sudut untuk tampilan sobekan tiket atau gelembung percakapan.

Cara membulatkan sudut gambar

  1. 1

    Unggah gambar

    JPG, PNG, atau WebP.

  2. 2

    Pilih radius

    Dalam piksel atau sebagai persentase sisi yang lebih pendek.

  3. 3

    Opsional: berbeda per sudut

    Bulatkan hanya sudut atas (kartu), atau asimetris (tiket).

  4. 4

    Pilih latar

    Transparan (PNG) atau warna solid jika menyimpan sebagai JPG.

  5. 5

    Ekspor

    PNG mempertahankan alpha bulat; JPG meratakan ke warna yang Anda pilih.

Pilihan radius untuk bentuk UI umum

Preset radius

Bentuk Radius
Kartu UI halus 4-8 px
Kartu Material Design 4 px (atau 8 px di M3)
Ikon aplikasi iOS 22,37% dari sisi (si “squircle”)
Ikon aplikasi macOS 18,75% dari sisi
Gelembung story Instagram 12-16 px
Avatar bulat 50% dari sisi pendek (lingkaran penuh)
Sobekan tiket Asimetris, bulatkan hanya satu atau dua sudut
Sisi ekor gelembung obrolan Satu sudut kecil, sisanya lebih besar

Masalah squircle

Ikon iOS bukan persegi panjang bulat sederhana, mereka memakai “superellipse” yang secara matematis lebih halus di transisinya. Squircle sejati melampaui yang bisa dirender border-radius CSS atau mask alpha sederhana; tool memperkirakannya dengan persegi panjang bulat berorde tinggi yang tampak tak terbedakan pada ukuran ikon tipikal.

Perilaku transparansi

  • Output PNG adalah default, sudut bulat menjadi piksel transparan. Berguna untuk ikon aplikasi, kartu UI, dan di mana pun Anda perlu menyusun gambar di atas latar yang bervariasi.
  • Output JPG tidak bisa transparan. Sudut bulat terisi dengan warna yang Anda pilih, efektif membuat foto tampak berbingkai.

Radius berbeda per sudut

Tampilan gelembung obrolan: bulatkan tiga sudut pada 12 px dan biarkan satu pada 0 px (sudut tempat “ekor” akan terpasang). Sobekan tiket: dua tajam dan dua bulat. Radius asimetris adalah cara cepat untuk menyiratkan gambar terpasang ke sesuatu yang lain.

Anti-aliasing

Kurva sudut digambar dengan super-sampling 4x agar tampak tajam pada ukuran tampilan normal. Dicetak atau di-zoom kuat, radiusnya tetap terlihat halus.

Pertanyaan yang Sering Diajukan

Apple memakai squircle yang kelengkungan sudutnya sekitar 22,37% dari sisi ikon. Pada kanvas 1024 × 1024 itu sekitar 229 px radius sudut efektif, meskipun matematika tepatnya sedikit berbeda dari persegi panjang bulat biasa.

Ya. Radius diterapkan per sudut terlepas dari rasio aspek gambar. Pada rasio ekstrem (sangat lebar atau sangat tinggi), mengatur radius ke 50% dari sisi pendek menghasilkan bentuk kapsul.

Tidak, JPG tidak mendukung transparansi. Ekspor sebagai PNG untuk menjaga alpha bulat, atau pilih warna latar untuk JPG dan sudut akan terisi warna itu.

Ya. Tool hanya menambah mask alpha dan tidak mengubah ukuran gambar. Jika Anda ingin menggabungkan pembulatan dengan resize, terapkan resizer dulu.

Alat Terkait

Alat ini tersedia dalam bahasa lain