Görsele Yuvarlak Köşe Ekleme

Nasıl çalışır?

Görselleri kutudan seçin (dokunarak ya da tıklayarak), köşe yuvarlaklığını kaydırıcıyla ayarlayın ve Yuvarlat düğmesine basın. Yarıçap yüzde olarak verilir, çünkü sabit bir piksel değeri her çözünürlükte bambaşka görünür: 1024×1024 piksellik bir uygulama ikonunda %18 seçtiğinizde köşe yarıçapı 184 piksel olur, 96 pikselik küçük bir avatarda aynı %18 yalnızca 17 piksel yapar — ikisi de gözle aynı yumuşaklıkta görünür. Yarıçap her eksende o eksenin kendi uzunluğundan hesaplanır: 1200×800 piksellik bir kart görselinde %10, yatayda 120 dikeyde 80 piksellik bir yay demektir. Kaydırıcıyı sona kadar, yani %50'ye çektiğinizde dört yay tam ortada buluşur; kare görsel tam daireye, dikdörtgen görsel tam ovale döner. Görselin piksel ölçüsü hiçbir ayarda değişmez, yalnızca köşelerdeki pikseller düşer. Köşelerde renk kalmasını istemiyorsanız Saydam seçeneğini bırakın; bu durumda çıktı kaynak JPG olsa bile PNG olarak iner, çünkü JPG saydamlık taşıyamaz.

Bu araç rounded corners image, round image corners aramalarıyla da biliniyor.

Köşe yarıçapı nedir?

Köşe yarıçapı, dikdörtgenin köşesinde çizilen yayın büyüklüğüdür: yarıçap ne kadar büyükse köşe o kadar yuvarlaktır. Web tasarımında aynı değer border-radius adıyla geçer ve piksel ya da yüzde olarak yazılır. Burada yüzde tercih edilmesinin sebebi ölçekten bağımsız olmasıdır: bir görselin köşesi, o görselin kendi büyüklüğüne oranla yuvarlanır, böylece küçük bir avatarla büyük bir kapak görseli yan yana konduğunda ikisi de aynı yumuşaklıkta görünür. Yarıçap kenarın yarısına ulaştığında yaylar birleşir ve köşe kavramı ortadan kalkar.

Alfa kanalı nedir?

Alfa kanalı, bir pikselin renginin yanında taşıdığı dördüncü değerdir ve o pikselin ne kadar görünür olduğunu söyler: 255 tamamen opak, 0 tamamen boştur. Yuvarlatılan köşe tam olarak budur — köşedeki piksellerin rengi silinmez, görünürlüğü sıfırlanır. Yayın hemen kenarındaki birkaç piksel ise ara değerler alır; kenarın tırtıklı değil pürüzsüz görünmesini sağlayan şey bu ara değerlerdir. Alfa kanalı olmayan bir biçime kaydedilirse bu bilgi kaybolur ve boş alan düz bir renge dönüşür.

Uygulama ikonu maskesi nedir?

Uygulama ikonu maskesi, işletim sisteminin ikonunuzu ekrana basmadan önce üzerine uyguladığı şablondur. iOS köşeleri kendi eğrisiyle yuvarlar, Android sürüme ve üreticiye göre daire, kare veya damla biçimi uygulayabilir. Bu yüzden mağazalar ikonu köşesiz, tam kare ister: maske zaten sistemde vardır. Önceden yuvarlatılmış bir ikon maskeden geçirilince köşede iki eğrinin üst üste binmesinden doğan ince bir iz kalır. Sitede, sunumda veya belgede kullanacağınız kopyada ise maske yoktur; köşeyi siz vermelisiniz.

Yuvarlak köşe ile dairesel kırpma arasındaki fark nedir?

İkisi farklı işlerdir ve çıktıları farklı ölçüdedir. Görsel Kırpma aracındaki daire ve oval seçenekleri görseli önce keser: 4000×3000 piksellik bir fotoğraftan ortadaki 3000×3000 kare alınır, kenarlardaki 1000 piksel dosyadan tamamen çıkar, sonra o karenin içine daire yerleştirilir. Bu araç ise hiçbir şey kesmez; çerçeve 4000×3000 kalır ve yalnızca dört köşedeki pikseller düşürülür. Yani konunun kenarda kalan bir parçasını kaybetmek istemiyorsanız buradasınız; görseli kare bir çerçeveye oturtup çevresini daireye almak istiyorsanız kırpma aracı doğru olandır. Kaydırıcıyı %50'ye çektiğinizde burada da tam daire elde edersiniz, ama daire özgün dikdörtgen çerçevenin içinde durur ve kare olmayan görsellerde oval çıkar.

Saydam köşe istiyorsanız çıktı PNG olmak zorunda

Yuvarlatılan köşelerde renk yoktur; orada hiçbir boya kalmaz. Bunu dosyada tutabilmek için alfa kanalı gerekir ve alfa kanalını yalnızca bazı biçimler taşır. PNG ve WEBP taşır, JPG taşımaz. Bu yüzden Saydam seçildiğinde araç, kaynağınız JPG olsa bile çıktıyı PNG olarak kaydeder ve dosya uzantısını da birlikte değiştirir.

Uzantının birlikte değişmesi kritik: içi PNG olan ama adı .jpg olarak kalan bir dosya, yükleyeceğiniz sistemin biçim denetimini geçer, sonra da açılmaz ya da bozuk görünür. Bu sessiz hatayı yaşamamak için burada uzantı hep içerikle aynı kalır.

Köşelerin boş değil düz renk olmasını istiyorsanız Beyaz ya da Siyah seçin. O zaman köşe pikselleri seçtiğiniz renkle dolar, alfa kanalına ihtiyaç kalmaz ve kaynağınız JPG ise çıktı da JPG olarak iner. Beyaz kâğıda basılacak bir görselde bu, saydam PNG'den daha güvenli bir tercihtir: baskı sürücüleri saydam alanı bazen siyaha çevirir.

Hangi yüzdeyi seçmelisiniz?

Yuvarlaklık bir görselin tonunu değiştirir: az yuvarlak köşe kurumsal ve sakin, çok yuvarlak köşe yumuşak ve oyuncul durur. Aşağıdaki aralıklar gerçek kullanım yerlerinden çıkarılmıştır; kesin kural değil, başlangıç noktasıdır.

Bir yerde önemli bir ayrıntı var: uygulama ikonlarında köşeyi çoğu zaman işletim sistemi kendisi yuvarlar. iOS ve Android ikonu kendi maskesinden geçirir, yani siz de yuvarlattıysanız köşede ince bir çift kesim izi kalabilir. Mağazaya gönderilecek ikonu kare bırakın; bu aracı web sitesinde, sunumda veya belgede kullanacağınız kopya için kullanın.

• %2-%5 — kurumsal kart, tablo içindeki küçük görsel: köşe yumuşar ama fark edilmez
• %8-%15 — web kartı, ürün görseli, blog kapağı: en yaygın aralık
• %20-%30 — sohbet balonu görünümü, oyuncul tasarım
• %50 — tam daire (kare görselde) ya da tam oval (dikdörtgen görselde), profil fotoğrafı için
• Yalnız üst — altında yazı bloğu olan kart görselleri; alt kenar düz kalır ki metne otursun

Toplu işlemde ne olur?

Birden fazla görsel seçtiğinizde hepsine aynı yüzde uygulanır, ama piksel yarıçapı her dosyada kendi ölçüsünden hesaplanır. Farklı boyutlardaki görselleri birlikte işlediğinizde bu tam istediğiniz sonucu verir: hepsi gözle aynı yuvarlaklıkta görünür, birinde köşe kaybolup diğerinde belirsiz kalmaz.

Sonuç satırında her dosya için özgün ölçü, hesaplanan yarıçap ve seçilen zemin yazar. Ölçünün değişmediğini oradan doğrulayabilirsiniz.

Sık sorulanlar

Fotoğrafın köşelerini nasıl yuvarlarım?

Görselleri kutudan seçin, köşe yuvarlaklığı kaydırıcısını istediğiniz yüzdeye getirin ve Yuvarlat düğmesine basın. Köşelerde renk kalmasın istiyorsanız zemin olarak Saydam'ı bırakın; çıktı PNG olarak iner.

Görselin boyutu küçülür mü?

Hayır. Bu araç kırpmaz: çıktının genişliği ve yüksekliği girdiyle birebir aynıdır. Yalnızca köşelerdeki pikseller kalkar. Sonuç satırında ölçünün değişmediğini görürsünüz.

%50 seçersem ne olur?

Dört köşe yayı tam ortada buluşur. Kare bir görselde sonuç tam daire, dikdörtgen bir görselde tam ovaldir. Çerçeve yine özgün ölçüde kalır; dairenin dışındaki alan seçtiğiniz zemine göre saydam, beyaz veya siyah olur.

Yalnızca üst köşeleri yuvarlayabilir miyim?

Evet. Köşe seçiminde Yalnız üst veya Yalnız alt'ı işaretleyin. Üstü yuvarlak, altı düz görseller kart tasarımında sık kullanılır: görselin altına gelen yazı bloğu düz kenara oturur.

Çıktı hangi biçimde iner?

Zemin Saydam ise çıktı her zaman PNG'dir, çünkü JPG saydamlık taşıyamaz. Beyaz veya Siyah seçtiyseniz kaynak JPG ise JPG, diğer biçimlerde PNG olarak iner. Dosya adına -yuvarlak eki gelir.

Uygulama ikonu için kullanabilir miyim?

Web sitesinde veya sunumda göstereceğiniz kopya için evet. Ama App Store ve Google Play'e gönderilen ikon kare olmalıdır: mağaza ikonu kendi maskesinden geçirir, önceden yuvarlatılmış köşe orada çift kesim izi bırakabilir.