Uygulama Simgesi Kuralları: Alfa Kanalı ve Boyutlar

Elinde tek bir logo ve iki uygulama mağazası var; Apple'ı memnun eden dosya, Google'ın istediği dosya değil. Sorun da en kötü anda ortaya çıkıyor: build hazır, ama yükleme bir alfa kanalı yüzünden üst üste başarısız oluyor.

Apple, opak arka planlı kare bir 1024x1024 simge istiyor. Play ise teknik olarak alfayı destekleyen ama Google'ın kendi tasarım kılavuzuna göre alfa kullanmaması gereken 512x512 boyutunda 32 bit bir PNG istiyor. Üstelik iki mağaza da bitmiş görünen bir dosya istemiyor — köşeleri ve efektleri yükleme sonrasında kendileri uyguluyor. İşte her mağazanın ne istediği ve tek logodan iki dosyayı nasıl çıkaracağın.

Apple: 1024 piksel, kare, hiçbir yerde şeffaflık yok

Apple'ın Human Interface Guidelines belgesi iOS, iPadOS ve macOS için uygulama simgesi yerleşim boyutunu 1024x1024 px olarak veriyor: kare, sRGB, Gray Gamma 2.2 ya da Display P3. Apple'ın artık tercih ettiği yol Icon Composer — ön plan katmanlarını içeri aktarıp arka planı aracın içinde tanımlıyorsun — ama düzleştirilmiş bir görsel hâlâ kabul ediliyor: katmanlar daha fazla kontrol veriyor, zorunlu değiller.

İlk kez gönderim yapanları durduran şey arka plan oluyor. Apple'ın içeri aktarılan arka plan katmanı için talimatı net: kenardan kenara ve opak olacak. Şeffaf arka planlı 1024px'lik bir PNG geçerli bir App Store simgesi değildir — böyle bir dosya yüklediğinde App Store Connect sana ITMS-90717'yi döndürür: App Store simgesi şeffaf olamaz veya alfa kanalı içeremez. Tek istisna koyu görünüm varyantı: Apple onu şeffaf arka planla vermeni istiyor ki sistemin sağladığı arka plan arkadan görünsün. Diğer her yerde, logonun arkasında hangi rengin duracağına karar ver ve o rengi dosyaya göm.

Diğer Apple platformları yerleşim boyutunu değiştiriyor: watchOS 1088x1088, visionOS 1024x1024 — ikisi de dairesel maskeleniyor — ve tvOS yatay 800x480. Yöntemi de değiştiriyorlar: tvOS ve visionOS simgeleri Icon Composer'da değil, Xcode içinde katmanlı görsel yığınları olarak kuruluyor.

Google Play: 512 piksel, alfa serbest, şeffaflık yine de hata

Play'in mağaza ilanı simgesi alfa kanallı 32 bit PNG, 512x512 px, sRGB, en fazla 1024KB. Yalnızca bunu okursan elindeki şeffaf kesit gayet uygun görünür.

Google'ın simge tasarım kılavuzu o kapıyı kapatıyor: şeffaf görseller Google Play arayüzünün arka plan rengini gösterir. Logon o zaman Play hangi zemini çiziyorsa onun üstünde yüzer ve koyu bir logo, koyu modda görünmez olur. Google'ın tavsiyesi: markana uygun bir arka plan rengi seç.

İki Play kuralı daha: sıralama, fiyat ya da Play kategorileri ima eden rozet veya metin olmayacak; ayrıca mağaza ilanı simgesi, cihazdaki başlatıcı simgesinden ayrıdır. O uyarlanabilir simge 108x108 dp katmanlar kullanır ve yalnızca içteki 66x66 dp'nin bir OEM maskesi tarafından asla kırpılmayacağı garanti edilir.

Tek logodan iki dosyayı çıkarmak

İki dosya da aynı şeyden başlıyor: neyin üstünde duruyorsa ondan temizce ayrılmış logon. Logon yalnızca tedarikçiden gelen bir JPEG ya da basılı bir antetli kâğıdın fotoğrafı olarak duruyorsa, önce onu kes ki şekil gerçek bir alfa kanalıyla izole olsun. remover.bg logoyu arka planından kaldırıyor ve düzenleyicide düz bir renge ya da özel bir marka rengine bırakmanı sağlıyor — Apple'ın istediği düzleştirme adımı.

İşe yarayan sıra şu:

1. Arka planı kaldır ki logo tek başına dursun. Kenarları beyaza değil, koyu bir renge karşı kontrol et — ince çizgiler ve serifler kusurlarını beyaz önizlemede saklar.
2. Arka planı marka rengine ayarla ve PNG olarak dışa aktar. Şeffaf sürümü de sakla — basın kitleri ve favicon'lar için.
3. Kendi tasarım aracında o PNG'yi kare bir tuvale yerleştir ve Apple için 1024x1024, Play için 512x512 olarak dışa aktar. Boyutlandırma oraya aittir, arka plan silme adımına değil.

Taranmış ya da fotoğraflanmış bir logo için logo arka planı silme rehberi sınır durumları anlatıyor, şeffaf PNG rehberi de o ana dosyayı saklamanın neden değdiğini açıklıyor.

Köşeleri ve gölgeyi mağazalar çizsin

Play bu konuda çok net: köşeleri simge boyutunun %30'u kadar bir yarıçapla kendisi yuvarlıyor, yükleme sonrasında kendi gölgesini ekliyor ve senden ikisini de eklememeni istiyor. Apple ise kareni sistemin yuvarlatılmış dikdörtgenine maskeliyor, üstüne kendi parlamalarını, kırılma ve yarı saydamlık efektlerini uyguluyor; önceden maskelenmiş katmanların bu efektleri bozduğu ve kenarları tırtıklı gösterdiği konusunda uyarıyor.

Yani: önceden yuvarlatılmış köşe yok, gölge yok, kabartma yok, parlama yok. Bu ölçülülük simgelere özgü — bir ürün fotoğrafında ise ürünün üstüne yapıştırılmış gibi durmasını engelleyen şey gerçekçi bir temas gölgesi.

İki mağaza da maskelediği için logonun önemli kısmını ortada tut. Apple'ın yönlendirmesi, maskeleme onu kesemesin diye birincil içeriği ortalamak. Play'in keyline ızgarası ise insanların sandığından farklı çalışıyor: bir sınır değil, konumlandırma kılavuzu. Google'ın talimatı, mümkün olduğunda görselin tamamını tasarımla doldurmak; keyline'lara ancak logonun çevresindeki şekil marka için vazgeçilmezse dönmek. İhtiyattan kareye boşluk bırakırsan simgen, yanındaki her ilandan gözle görülür biçimde küçük görünür.

%30'luk yarıçapın gerçekte yediği şey köşelerdir; köşelere kadar itilmiş bir wordmark (yazı logosu) uçlarını kaybeder. watchOS ve visionOS'un dairesel maskelerinde ise kenardan kenara uzanan bir wordmark ilk ve son harfini doğrudan kaybeder.

Yüklemeden önce

• Apple: 1024x1024 PNG, kare, tümüyle opak, köşeler keskin bırakılmış.
• Play: 512x512 32 bit PNG, en fazla 1024KB, şeffaflık yerine marka renkli arka plan, köşeler keskin bırakılmış.
• İki mağazada da aynı tasarım ve aynı renkler: kullanıcılar iki değil, tek bir uygulama tanımalı.
• İkisini de küçük resim boyutunda önizle. 1024'te okunan detay, 40 pikselde kayboluyor.

Simgeyi bir kez düzelt; bundan sonraki her sürümde düzelmiş kalır.