Görsel Köşelerini Yuvarlak Yap

Resim yüklemek için tıklayın

JPG / PNG / WEBP

Köşe Ön Ayarı

Köşe Yarıçapı

20%
050%

Çıkış Formatı

Önizleme göstermek için görsel yükleyin

Herhangi bir görsele çevrimiçi olarak yuvarlak köşeler ekleyin. Hazır ayar seçin veya kaydırıcıyı sürükleyin, anında önizleyin ve her zemine uyan şeffaf bir PNG dışa aktarın — tüm işlem tarayıcınızda yapılır.

İlgili Öneriler

ICO olusturucu

Resim Kırpma

Resim Boyutlandırma

Resim Sıkıştırma

Resim Dönüştürme

Görsel köşelerini yuvarlama nedir?

Görsel köşelerini yuvarlama, bir görselin dört dik açısını pürüzsüz yaylarla değiştirme işlemidir. Araç, Canvas arcTo() ile yuvarlatılmış dikdörtgen yolunu çizer ve clip() çağırarak görseli bu alana kırpar. Kırpılmayan alan, PNG dışa aktarımında Alpha=0 şeffaf piksellere dönüşür.

**Yuvarlak köşelerin görsel etkisi nedir?** Yuvarlak köşeler, dik köşelere göre daha yumuşak ve samimi görünür, görsel sertliği azaltır. Uygulama simgeleri, düğmeler, kartlar ve avatarlarda yaygın biçimde kullanılır. iOS'un benimsediği 'Süperelips (squircle)' daha pürüzsüz eğrilerle bunu bir adım öteye taşır.

**Birçok uygulama simgesi neden yuvarlak köşe ister?** iOS, iPadOS ve macOS Big Sur'dan bu yana sistem, uygulama simgelerine otomatik olarak yuvarlak bir maske uygular ve kaynak görselde beyaz arka plan varsa fark edilir bir beyaz kenar oluşur. Çözüm, kaynaktan yuvarlatılmış bir PNG'yi önceden dışa aktararak sistemin yeniden maskeleme yapmasını önlemektir; bu araç tam olarak bu amaçla tasarlandı.

**Piksel mi yüzde mi:** Pikseller hassastır ancak görseller arasında hizalamak zordur; yüzdeler farklı boyutlara otomatik uyum sağlar. Tasarım sistemleri genelde yüzde kullanır; örneğin iOS uygulama simgeleri için %22,37 ve Android Adaptive Icon için %25.

**CSS border-radius'tan farkı:** CSS border-radius bir görüntüleme katmanı işlemidir, dolayısıyla dışa aktarılan görselin köşeleri hâlâ diktir. Bu araç, Alfa kanallı gerçek bir PNG üretir; böylece PowerPoint, video ve baskı gibi CSS desteği olmayan ortamlarda da kullanılabilir.

Kullanım senaryoları

  • Mesajlaşma ve sosyal platformlar (WhatsApp, Telegram, X, Instagram, Facebook) için tek tıkla kusursuz daire avatar oluşturun
  • Uygulama simgelerine hızlıca yuvarlak köşe ekleyin (iOS %22–25, Android Adaptive Icon %25)
  • E-ticaret ürün ana görsellerine hafif yuvarlak köşeler ekleyerek tıklama ve dönüşüm oranını artırın
  • PowerPoint slaytları, video düzenleme ve baskı için yuvarlak köşeli görsel varlıklarını yerel olarak işleyin
  • Tasarım sisteminde aynı köşe boyutuna sahip simge ve varlıkları standart hale getirin (birer birer işleyerek)

Nasıl Kullanılır

  1. Yükleme alanına tıklayarak bir görsel seçin ya da JPG/PNG/WEBP dosyasını doğrudan bu alana sürükleyin
  2. Anında köşeler için Küçük (%10), Orta (%25) veya Büyük (%50) hazır ayarını seçin ya da özel değer için kaydırıcıyı sürükleyin (yüzde/piksel arasında geçiş için tıklayın)
  3. Çıktı biçimini seçin: PNG (şeffaf arka plan), WEBP (daha küçük) veya JPG (beyaz arka plan, şeffaflık yok)
  4. Sağdan anlık önizleme yapın ve İndir düğmesine tıklayın; dosya otomatik -rounded sonekiyle kaydedilir

Özellikler

  • Çift birim: köşe yarıçapı için piksel (0–500 px) ve yüzde (0–50 %) arasında serbestçe geçiş yapın
  • 3 hazır ayar: Küçük (%10), Orta (%25), Büyük (%50) tek tıkla, ayrıca özel kaydırıcı
  • 3 çıktı biçimi: PNG (şeffaf), WEBP (daha küçük) veya JPG (beyaz arka plan)
  • Anlık önizleme: kaydırıcıyı ayarladığınız anda yuvarlak köşe efektini görün, şeffaf alanları gösteren dama tahtası arka plan
  • Sürükle bırak yükleme: tıklayın ya da JPG/PNG/WEBP görsellerini doğrudan yükleme alanına sürükleyin
  • Yerel işleme: tüm işlem tarayıcı Canvas'ında yapılır, görsel cihazınızdan çıkmaz

Best Practices

Şeffaflık gerektiğinde JPG yerine PNG seçin

JPG Alfa kanalını desteklemez. JPG seçerseniz köşeler beyazla dolar ve çirkin beyaz bloklar oluşur. Yalnızca şeffaflık gerekmediğinden eminseniz JPG seçin, aksi durumda varsayılan olarak PNG kullanın.

Şeffaf ve küçük varlıklar için WEBP seçin

WEBP de şeffaflığı destekler ve PNG'den %25–35 daha küçüktür; web varlıkları için idealdir. Eski tasarım yazılımlarının bir kısmı WEBP'yi tanımadığından araçlar arası iş birliğinde PNG'yi tercih edin.

Uygulama simgesi köşe oranı seçimi

iOS, uygulama simgelerine otomatik olarak yaklaşık %22,37 oranında köşe ekler; ancak kaynak görseldeki beyaz arka plan fark edilir bir beyaz kenara yol açar. Çözüm, önce bu araçla yuvarlatılmış bir PNG (önerilen %22–25) oluşturmaktır. Android Adaptive Icon için güvenli oran %25'tir.

Avatar için kusursuz daire oluşturmak amacıyla %50 yarıçap kullanın

Çoğu sosyal platform (WhatsApp, Telegram, X, Instagram vb.) avatarları kusursuz daire olarak görüntüler. %50 hazır ayarı, açık ve koyu temalara uyum sağlayan şeffaf bir dairesel PNG'yi tek tıkla oluşturur.

iOS uygulama simgesi yönergeleri

Dışa aktarılan yuvarlatılmış görselin üstüne CSS border-radius uygulamayın

Bu araçtan dışa aktardığınız yuvarlak PNG'yi CSS border-radius + overflow:hidden kabının içine koymayın; aksi takdirde kenarlar iki kez işlenir ve bulanıklaşır. Yuvarlatılmış görseli düz bir img etiketiyle gösterin.

Daha karmaşık bir şekle mi ihtiyacınız var (köşeden köşeye farklı, sadece üstte)?

Bu araç yalnızca dört kenarda eşit köşeleri destekler. Yalnızca üst, yalnızca alt veya köşeden köşeye farklı yarıçaplar (TabBar, açılış ekranları) için görsel düzenleyiciyi ya da Figma gibi bir tasarım aracını kullanın.

Sık Sorulan Sorular

Bir görsele yuvarlak köşeler nasıl eklenir?

Yükledikten sonra hızlı sonuç için Küçük, Orta veya Büyük hazır ayarına tıklayın ya da kaydırıcıyı sürükleyerek kendi piksel değerinizi (0–500 px) veya yüzdenizi (0–50 %) belirleyin. Sağ panel sonucu anında gösterir. Hazır olduğunuzda İndir düğmesine tıklayın; dosya otomatik olarak -rounded sonekiyle kaydedilir.

Köşe yarıçapı için piksel mi yoksa yüzde mi kullanmalıyım?

Pikseller hassas kontrol sağlar ve sabit boyutlu varlıklar için uygundur. Yüzdeler görselin kısa kenarına göre ölçeklenir ve farklı boyutlara uyum sağlar. Araç tek tıkla birim değiştirmeyi destekler; %50 her zaman kusursuz bir daire verir ve profil fotoğrafları için idealdir.

Yuvarlatılan alan ne olur?

PNG veya WEBP çıktısında yuvarlatılan alan tamamen şeffaftır (Alpha=0) ve her arka planla doğal biçimde bütünleşir. JPG çıktısında alan beyazla doldurulur (arabirimde sarı uyarı görünür); JPG'yi yalnızca şeffaflık gerekmediğinde tercih edin.

Hangi görsel biçimleri destekleniyor?

Giriş JPG, PNG ve WEBP biçimlerini destekler. Çıkış olarak PNG (şeffaf), WEBP (daha küçük) veya JPG (beyaz arka plan) seçilebilir. İndirilen dosya, orijinalden ayırt etmek için otomatik olarak -rounded soneki alır.

Köşe yarıçapının sınırları nedir?

Yüzde modu 0–50 (%50 kusursuz daire verir), piksel modu 0–500 px aralığındadır. Değer büyüdükçe köşe daha yuvarlak olur. Araç, standart dairesel köşeler için Canvas arcTo + clip kullanır; Squircle süperelipsleri desteklemez.

Avatar veya uygulama simgesi oluşturabilir miyim?

Evet. Kusursuz dairesel avatar için %50 hazır ayarını kullanın. iOS uygulama simgeleri için %22–25 önerilir (%25 hazır ayarı tek tıkla eşleşir). Android Adaptive Icon için güvenli yarıçap %25'tir. Şeffaf PNG çıktısı her temaya uyar.

Yuvarlatma görseli bulanıklaştırır mı?

Bulanıklaştırmaz. Araç, Canvas'ta orijinal çözünürlükte yol kırparak çalışır; yeniden örnekleme ya da sıkıştırma yapmaz. Çıktı kalitesi orijinaliyle birebir aynıdır; yalnızca köşeler kırpılır, kenarlar net kalır.

Görselim sunucuya gönderiliyor mu?

Hayır. Her şey tarayıcıdaki Canvas API'si üzerinden yerel olarak yapılır. Görsel hiçbir sunucuya gönderilmez, sayfadan ayrıldığınızda silinir. Kişisel fotoğraflar, kimlik taramaları ve hassas varlıklar güvenle işlenebilir.

Yuvarlatma efekti neden görünmüyor?

Lütfen şunları kontrol edin: ① yarıçap değeri 0'dan büyük (kaydırıcı en solda değil); ② görsel başarıyla yüklendi (JPG, PNG veya WEBP olmalı); ③ tarayıcınız HTML5 Canvas destekliyor (tüm modern tarayıcılar destekler). Sorun devam ederse sayfayı yenileyip tekrar yükleyin.

CSS border-radius'tan farkı nedir?

CSS border-radius yalnızca tarayıcının görüntüleme katmanında çalışır ve köşeyi görsel dosyasına işlemez. Bu araç, Alfa kanallı gerçek bir PNG dosyası dışa aktarır; bu sayede yuvarlatılmış görsel PowerPoint, video düzenleme, baskı ve CSS'in desteklenmediği her ortamda kullanılabilir.

Sözlük

Köşe yarıçapı (Border Radius)
Yuvarlatılmış köşe yayının yarıçapıdır. Değer büyüdükçe köşe daha çok yuvarlanır; maksimum, görselin kısa kenarının yarısıdır ve bu da kusursuz bir daire verir. Araç piksel (0–500 px) ve yüzde (0–50 %) birimlerini destekler.
Alfa kanalı
PNG ve WEBP'de yerleşik olarak bulunan, piksel başına 0–255 ile şeffaflığı temsil eden kanaldır. Araç, yuvarlatılan köşelerdeki pikselleri Alpha=0 yaparak her arka planla doğal biçimde bütünleşen tamamen şeffaf bir çıktı üretir.
Squircle (süperelips)
iOS 7+ ile tanıtılan, standart köşeden daha pürüzsüz bir yuvarlatma biçimidir ve x⁴+y⁴=r⁴ denklemine uyar. Araç standart yaylar üretir; Squircle gerekirse Figma veya Sketch kullanın.
Adaptive Icon
Android 8.0+ için ön plan ve arka plan olarak ayrılmış katmanlara sahip simge biçimidir. Güvenli yarıçap %25'tir; OEM başlatıcısı kendi maskesini uygular (daire, squircle vb.).
Canvas arcTo
Canvas 2D API'sinin yay çizme yöntemidir. Araç, arcTo + clip kombinasyonuyla yuvarlatılmış dikdörtgen yolunu oluşturur, görseli bu yolun içine kırpar ve dışa aktarırken dış alanı Alpha=0 şeffaf piksel yapar.

Platformlara göre köşe yarıçapı hızlı referansı

Platform / öğeReferans boyutÖnerilen oranYaklaşık (px)
iOS / iPadOS uygulama simgesi1024 × 1024Yaklaşık %22,37≈ 229 px
Android Adaptive Icon108 × 108Yaklaşık %25≈ 27 px
macOS Sonoma uygulama simgesi1024 × 1024Squircle süperelipsSabit px yok
Windows 11 kartı—Yaklaşık 8 px8 px
Material Design 3 Large—Yaklaşık 28 px28 px
WhatsApp / Telegram avatarı640 × 640%50 (kusursuz daire)320 px
Twitter / Instagram avatarı400 × 400%50 (kusursuz daire)200 px
E-ticaret ana görseli800 × 80016–24 px önerilir16-24 px

Authoritative References