Ürün simgeleri oluşturmak ilk bakışta göründüğü kadar zor değil. İlk Android uygulama simgenizi sıfırdan tasarlama hakkında daha fazla bilgi edinin!
Bir uygulamanın dağıtıldığı pazar veya hizmet ne olursa olsun, potansiyel kullanıcının fark edeceği ilk şey uygulama simgesidir. Yeni kullanıcıların ilgisini çekmeye çalışırken ilk izlenimler son derece önemlidir; bu, simgelerin herhangi bir uygulamanın temel bileşenleri olduğu anlamına gelir. Ve uygulamanın amacı ne olursa olsun, güzel bir uygulama simgesi oluşturmak her uygulamanın geliştirme aşamasının önemli bir parçası olmalıdır. Birçok teknik uygulama geliştiricisi grafikleri özel tasarımcılara bıraksa da, grafiklerin anlaşılması Tasarımın temellerini öğrenmek ve bunları uygulamak, deney yapma becerisine sahip herkesin yapabileceği bir şeydir. analiz. Uygulama simgeleri istisna değildir!
Bu kılavuz, açık kaynaklı yazılım kullanılarak örnek bir Android uygulaması için uyarlanabilir bir simgenin oluşturulmasını anlatmaktadır. Nihai sonuç ihtiyaç duyabileceğiniz formatta olmasa da burada tartışılan tasarım ipuçlarının çoğu birden fazla platformda geçerli olacaktır.
Android Oreo ile "uyarlanabilir simgeler"in piyasaya sürülmesinden sonra, bir uygulama simgesi üç temel katmandan oluşabilir: opak arka plan katmanı, bir ön plan katmanı ile şeffaflık desteğive bir maske bu, simgenin şeklini tanımlar. Tüm bu katmanların boyutu 108 x 108 dp'dir, ancak yalnızca içteki 72 x 72 dp'lik kısım kullanıcı tarafından görülebilmektedir; Üstteki maskeyle kesilen diğer bölge, simgenin dinamik görünmesini sağlamak amacıyla kullanıcı arayüzünde özel efektler için kullanılıyor. Başlatılmamış olanlar için, dp veya ekrandan bağımsız piksel Android’in tüm arayüzü için bir ölçü birimi görevi görüyor ve boyutuna eşit olacak şekilde tanımlanıyor. İnç başına 160 noktalı ekranda bir piksel.)
Google'dan Nick Butcher 66 dp'lik bir daireden bahsediyor simgenin ortasında hiçbir maskenin kırpamayacağı, "güvenli bölge" adı verilen yer. Daha sonra gerçek tasarıma geçtiğimizde, simge tasarımımızın ana unsurlarının yer alacağı yer burasıdır. Bu 33 dp yarıçapın ötesindeki herhangi bir şey, şekil maskesi açıkken simgede görünmeyebilir.
Kullanıcı arayüzü ölçeklendirmesi nedeniyle simgelerin vektör görüntüleri olması daha iyi olduğundan, simgemizi oluşturmak için bir vektör grafik düzenleyicisine ihtiyacımız olacak. Inkscape açık kaynaklıdır ve daha pahalı yazılımlara harika bir alternatif olduğundan, bu eğitimin amaçları doğrultusunda bizim tercihimiz bu olacaktır. Ayrıca bir proje dosyası tasarladım burada mevcut Güvenli bölge ve Google'ın kendi tasarım ana çizgisi işaretlenmiş ve simgenin şeklini önizlememizi sağlayan şık bir katman maskesine sahip.
Inkscape'te açılan proje dosyasıyla ve Doldur ve Konturla (Üst Karakter+Ctrl+F), PNG Görüntüsünü Dışa Aktar (Shift+Ctrl+E) ve Katmanlar (Shift+Ctrl+L) panelleri açıldığında başlamaya hazırız. Katmanlar paneli projenin ana kısmının bulunduğu yerdir. Ön plan Ve Arka plan başlık bileşenlerini barındıracak katmanlar ve Yönergeler Ve Maske referans olarak açılıp kapatılması (yanlarındaki küçük göz simgesine tıklayarak) anlamına gelir.
Simge, bir uygulamanın kimliğinin ifadesidir. Bu nedenle, hem uygulamanın kişiliğinin karakterini hem de Android'inkiler gibi platforma özgü tasarım yönergelerini içermelidir. Materyal tasarım dilinin sunduğu özellikler. Gösterim amacıyla, Materyal öğelerini kullanan bir hava durumu uygulaması üzerinde çalıştığımızı varsayalım. Kullanıcıyı uygulamanın amacı hakkında bilgilendirmek için klasik güneş ve bulutlar motifini kullanabiliriz ve biraz da Android ortamına iyi uyum sağlamak için alt gölgeler ve geometri kullanarak bu temel tasarımı kullanın.
Arka plan
Mavi bir gökyüzü ve ortasında sarı bir güneşten oluşacak arka planı kurmaya başlayalım. Tornalama Maske görünmez, seçiyorum ve görünür kılıyorum Arka plan katmanıtuvalin tamamını şununla doldurun: Dikdörtgenler ve kareler oluşturun aracını (F4) seçin ve dikdörtgenin dolgu rengini ayarlayın. Doldur ve Konturla uyarınca 64B5F6FF'ye (açık mavi) Malzeme renk paleti. Daha sonra şunu seçiyorum Daireler, elipsler ve yaylar oluşturma (F5) aracını kullanarak Shift ve Ctrl tuşlarını basılı tutarak ana çizginin ortasından ikinci en büyük daireye kadar bir daire çizin ve rengini FFEE58FF olarak ayarlayın, bu da bize sıcak küçük bir güneş verir. Her türlü tasarımda temel geometriye bağlı kalmak her zaman iyidir ve Android'in tasarım dili özellikle sadeliği teşvik eder. Malzeme yönergelerine uymak için ayrıca güneşe ince bir alt gölge veriyorum. Filtreler → Gölgeler ve Işımalar → Alt Gölge.
Ön plan
Geliyor ön plan, Diğer dairelerin çevrelerinden daireler çizerek güneşin etrafına bir grup bulut çiziyorum ve hepsine EEEEEEFF dolgu rengi veriyorum. Daha sonra birden fazla nesneye sağ tıklayıp seçerek daireleri uygun şekilde gruplandırıyorum. Grupve sonunda elde ettiğim son iki şekil üzerinde alt gölge oluşturucuyu çalıştırın. Tornalama Yönergeler görünmez ve geçiş Ön plan Ve Arka plan alternatif olarak hava durumu uygulamamızın simgesinin kurucu katmanları görülebilir. Uygulamanın simgesi bir ana ekranda sürüklenirse, bulutlar sabit bir güneşe doğru çağlayacak!
Sonuç
Maske artık görünür hale getirilebilir ve değiştirilebilir Yolları düğümlere göre düzenleyin (F2) farklı şekil maskelerini denemek ve simüle etmek için. Ayrıca, iki katman kullanılarak ayrı ayrı dışa aktarılabilir. PNG Görüntüsünü Dışa Aktar kullanım paneli Android Studio'dave bir süre birlikte Google Play simgesi.
Bir ürün simgesi oluştururken, bir uygulamanın amacını denemek, onu en soyut görsel biçimine ayrıştırmak ve bunu basit geometri kullanarak temsil etmek her zaman iyi bir uygulamadır. Tasarımdaki herhangi bir bileşen ne kadar basitse, genellikle o kadar iyi ve daha güvenilir çalışır ve bu, grafik tasarım için de geçerlidir. Çoğu amaç için, ön planda bir nesne şekli ve arka planda düz bir renk veya desen (veya tam tersi) gayet iyi çalışıyor, ancak örneğimizdeki gibi, eğer hissedilirse başka bir nesne katmanı da kullanılabilir gerekli; çok fazla istifleme veya alt gölge kullanımı yalnızca simgenin tasarımını karmaşıklaştıracaktır.
Simge tasarımı hakkında daha fazla bilgiyi resmi web sitesindeki Materyal arayüzlerinde okuyabilirsiniz. Malzeme web sitesive simge tasarımında kullanmak üzere ücretsiz sistem simgelerini edinin aynı web sitesi.