Görüntü Köşelerini Yuvarlatma

Köşe yarıçapı

İşletim sistemleri, uygulama mağazaları ve kullanıcı arayüzü tasarım sistemlerinin tümü yuvarlak köşeleri sever: iOS simgeleri, Material kartları ve modern Tailwind bileşenleri. Herhangi bir görüntü yükleyin; bu araç belirlediğiniz yarıçapla dört köşeyi yuvarlatır, görüntüyü şeffaf köşelerle PNG olarak dışa aktarır ve isteğe bağlı olarak bilet koçanı veya konuşma balonu görünümleri için her köşeye farklı bir yarıçap uygular.

Resmin köşelerini nasıl yuvarlayabilirsiniz?

  1. 1

    Bir görüntü yükleyin

    JPG, PNG veya WebP formatlarında.

  2. 2

    Bir yarıçap seçin

    piksellerde veya daha kısa kenarın yüzdesi olarak.

  3. 3

    İsteğe bağlı: her köşe için farklı

    Yalnızca üst köşeleri yuvarlatın (kart) veya asimetrik yapın (bilet).

  4. 4

    Arka planı seçin

    Şeffaf (PNG) veya JPG olarak kaydederken düz renk.

  5. 5

    Dışa aktarın

    PNG yuvarlatılmış alfayı korur; JPG seçtiğiniz renge göre düzleştirilir.

Yaygın kullanıcı arayüzü şekilleri için yarıçap seçenekleri

Yarıçap ön ayarları

Şekil Yarıçap
İnce UI kartı 4–8 px
Material Design kartı 4 px (M3’te 8 px)
iOS uygulama simgesi Kenarın %22,37’si (“squircle”)
macOS uygulama simgesi Kenarın %18,75’i
Instagram hikâye balonu 12–16 px
Yuvarlak avatar Kısa kenarın %50’si (tam daire)
Bilet koçanı Asimetrik, yalnızca bir veya iki köşeyi yuvarlatın
Sohbet balonunun kuyruk tarafı Bir köşe küçük, diğerleri büyük

squircle sorunu

iOS simgeleri basit yuvarlak dikdörtgenler değildir; geçiş noktalarında matematiksel olarak daha pürüzsüz olan bir “süperelips” kullanırlar. Gerçek squircle’lar, CSS border-radius veya basit bir alfa maskesinin oluşturabileceğinin ötesindedir; bu araç, tipik simge boyutlarında ayırt edilemeyecek yüksek dereceli bir yuvarlak dikdörtgenle bunları yaklaşık olarak elde eder.

Şeffaflık davranışı

  • PNG çıktısı varsayılandır; yuvarlatılan köşeler şeffaf piksellere dönüşür. Uygulama simgeleri, kullanıcı arayüzü kartları ve görüntüyü farklı arka planlara yerleştirmeniz gereken her yerde kullanışlıdır.
  • JPG çıktısı şeffaf olamaz. Yuvarlatılan köşeler seçtiğiniz bir renkle doldurulur ve böylece fotoğraf çerçevelenmiş gibi görünür.

Her köşe için farklı yarıçap

Bir sohbet kabarcığı görünümü: üç köşeyi 12 px’de yuvarlayın ve birini 0 px’de bırakın (bu köşe, “kuyruğun” bağlanacağı yerdir). Bir bilet izi: iki köşesi keskin, diğer ikisi yuvarlak. Asimetrik yarıçaplar, görüntünün başka bir nesneye bağlı olduğunu göstermenin hızlı bir yoludur.

Anti-aliasing

Köşe eğrileri 4 kat süper örnekleme ile çizilmiştir; bu sayede normal görüntüleme boyutlarında net görünür. Basılıyorsa ya da yoğun zoom altında incelendiğinde de yarıçap hâlâ açıkça pürüzsüzdür.

Sık Sorulan Sorular

Apple, köşe eğriliği simge kenarının yaklaşık %22,37’sine denk gelen bir squircle kullanır. 1024 × 1024 boyutlu bir tuvalde bu, yaklaşık 229 piksel etkin köşe yarıçapına karşılık gelir; ancak kesin matematiği düz bir yuvarlak dikdörtgenden biraz farklıdır.

Evet. Yarıçap, görüntünün en boy oranından bağımsız olarak her köşeye uygulanır. Uç oranlarda (çok geniş veya çok uzun) yarıçapı kısa kenarın %50’sine ayarlamak kapsül şeklinde bir biçim oluşturur.

Hayır, JPG formatı şeffaflığı desteklemez. Yuvarlatılmış alfa değerlerini korumak için dosyayı PNG olarak dışa aktarın ya da JPG için bir arka plan rengi seçin; köşeler bu renkle doldurulur.

Evet. Bu araç yalnızca bir alfa maske ekler ve görüntü boyutunu değiştirmez. Yuvarlatmayı boyut değişikliğiyle birleştirmek istiyorsanız, önce boyutlandırma aracını uygulayın.

İlgili Araçlar

Araç diğer dillerde mevcuttur