Affinity Designer'da iOS Simge Boyutlarını Dışa Aktarma

Affinity Designer son derece kullanışlı @ 1x, @ 2x ve @ 3x dışa aktarma özelliğine sahip olsa da, bir iOS simgesi için gereken çeşitli boyutlarda dışa aktarmanın bir yolu olup olmadığını merak ediyorum?

Liste biçiminde çoğaltacağım burada gerekli boyutlarda özlü bir ızgara buldum :

• 1024x1024
• 180x180
• 152x152
• 120x120
• 87x87
• 80x80
• 76x76
• 58x58
• 57x57
• 40x40
• 29X29

Bu 11 farklı simge boyutu!

Dilim yapılandırma konseptine sahip tüm Export Persona'yı mükemmel buldum, özellikle dilimleri tek tek katmanlara uygulayabildiğiniz için (örneğin, bir düğmenin normal ve basılı sürümleri için). Aynı aracı, belirli boyutlarda ihracat yapmak için kullanmanın bir yolu var mı?

Gereksinimler zaman zaman değiştiğinden, Apple'ın yönergelerine başvurmak her zaman iyi bir fikirdir. Web sitemde geliştirdiğim, şu anda evrensel uygulamalar için gerekli olan 18 boyutu dışa aktaran bir Affinity Designer şablonu var .

Büyük, karmaşık bir listeye benziyor, ancak oluşturmanız gereken sadece 5 boyut var:

• 29pt
• 49pt
• 60pt
• 76pt
• 1024px

İlk dört boyut (noktalarda listelenmiştir) 1 ×, 2 × ve 3 × sürümlerine ihtiyaç duyar (gelecekteki kanıtlarınız varsa ve iPhone 6 Plus'ı da kapsıyorsanız).

İnternette ve Apple'ın sitesinde listelenen boyutlardan bazıları iOS 6 ve altı (57 × 57 vb.) İçindir. İOS 7 ve üstünü hedefliyorsanız bunlara gerek yoktur.

İşte oluşturduğum Photoshop şablonu:

Her simgeyi ve yeniden boyutlandırmak ve yeniden ihraç etmek için bir eylem vermek için ayarlanmış dilimleri var, bu yüzden ile bitirmek:

• ikon-29.png
• icon-29@2x.png
• icon-29@3x.png
• ikon-40.png
• icon-40@2x.png
• icon-40@3x.png
• ikon-60.png
• icon-60@2x.png
• icon-60@3x.png
• ikon-76.png
• icon-76@2x.png
• icon-76@3x.png

Henüz tüm bu boyutlara ihtiyaç yoktur, ancak gelecekte olması muhtemeldir. 4 taban boyutundan başlamak, simgeleri oluşturmayı çok daha kolay hale getirir.

Her simge için gereken farklı bölgeleri dışa aktarmak için Photoshop'ta Dilimler kullanıyorum. Lütfen sağladığınız simgelerin saydam alanlara sahip olmaması gerektiğini unutmayın - renk köşelere kadar uzanmalıdır. iOS simgeyi maskeleyecek, bu yüzden endişelenmenize gerek yok.

Affinity'nin dilim özelliğini kullanarak da aynısını yapabilir misiniz?

Güncelleme: Affinity Designer, Sketch, Photoshop ve Illustrator için bazı açık kaynaklı uygulama simgesi şablonları oluşturdum . Dikkate değer olabilirler.

Affinity Designer'da yapabilirsiniz, dilimler çıktıları, sonekleri kullanarak ölçekleyebilir, işte 'w' sonekini kullanarak iOS simgeleri dışa aktarma:

Affinity Designer'da bunu yapmanın iyi bir yolunu buldum. Yine de tam otomatik değil. İPhone için şu anda gerekli olan üç simge boyutunun (29pt, 40pt, 60pt) nasıl elde edileceğini açıklayacağım, her biri 2x ve 3x çözünürlüğe sahip:

1. Yeni bir Belge oluşturun, birimi "Noktalar", sayfa boyutunu 29x29 olarak ayarlayın ve iletişim kutusunda "Çalışma Yüzeyi Oluştur" seçeneğini işaretleyin
2. Resminizi çalışma yüzeyine yapıştırma ve yerleştirme
3. Çalışma yüzeyini Katmanlar panelinde "29pt" olarak yeniden adlandırın (isteğe bağlı)
4. Çalışma yüzeyini sağ tıklayın ve "Çoğalt" ı seçin
5. Yeni çalışma yüzeyini sürükleyin (böylece her ikisini yan yana görebilirsiniz) ve ardından yeniden "40pt" olarak yeniden adlandırın (yine bu adım isteğe bağlıdır)
6. Dönüştür panelini kullanarak yeni katmanı 40x40pt olarak yeniden boyutlandırın - resminiz otomatik olarak ölçeklendirilir
7. 60pt çalışma yüzeyi oluşturmak için 4-6. Adımları tekrarlayın (gerekirse iPad için 76pt ve 83.5pt)
8. Persona Aktar'a gidin, Dilimler paneline geçin ve 2x ve 3x çözünürlükleri seçin (artı iPad için 1x)
9. Listedeki tüm çalışma yüzeyi katmanlarını seçin ("29pt", "40pt" vb.) Ve panelin altındaki "Seçilenleri dışa aktar" ı tıklayın.

Yakın ilgi alanı, seçilen her çözünürlükte tüm simge boyutlarını oluşturur, böylece gerçekte ihtiyacınız olandan daha fazla simge elde edebilirsiniz. Ancak düzgün bir şekilde "29pt@2x.png" vb. Olarak adlandırılırlar, bu nedenle bunları Xcode Varlık Kataloğunuza atamak gerçekten kolaydır.

Bir uyarı: Dışa Aktar Persona'ya gittiğinizde, Affinity her çalışma yüzeyi için otomatik olarak bir dışa aktarma dilimi oluşturur (bu, üzerinde etiket bulunan mavi çerçevedir). Bazen bu dilimlerin boyutunun birkaç piksel kapalı olduğunu fark ettim. AD'de bir hata gibi görünüyor. Yine de dilimlerin köşelerini sürükleyerek kolayca düzeltebilirsiniz.

Marc Edwards'ın hangi boyutta ikonların oluşturulması gerektiği, bunu yapmak için dilimlerin kullanılması ve bunu yapmak için Photoshop kaynaklarına iyi bağlantılar açısından harika bir cevabı vardı. Ancak, yine de özellikle Affinity Designer'da birden çok boyutta dışa aktarma için bir çözüm arıyorum .

Sonunda, bunun Görüntü Yerleştir aracı kullanılarak mümkün olacağını fark ettim. Simgenizi bir dosyada yapın ve ardından başka bir "şablon" dosyasında, simge dosyanızı çeken birden çok katman oluşturmak için Resim Yerleştir aracını kullanabilirsiniz. Bu katmanların her biri adlandırılmış bir dilime dönüştürülebilir.

Buradaki dezavantaj, her katmanın simge dosyanıza oluşturulması ve işaret edilmesi gerektiğidir, bu yüzden sıkıcı olurdu. Yerleştikten sonra, temel dosyanızdaki herhangi bir düzenlemeden sonra her şeyi kolayca yeniden dışa aktarabilirsiniz.