Simge tasarımı için en iyi iş akışı: Büyük mü yoksa küçük mü?

Birkaç boyutta sunulması gereken simgeler tasarlarken, daha küçük boyuttan başlayıp daha büyük boyutlara ölçeklendirir misiniz? Yoksa büyük mü başlayıp ölçeklendiriyor musunuz?

Her ikisinin de birkaç avantajı vardır. İş akışımı hassaslaştırmaya çalışıyorum, bu yüzden başkalarından gelen girdi yardımcı olacaktır. Diyelim ki boyutların ilgili olduğu bir Mac veya Windows simgesi tasarlıyoruz - bunlar çoğunlukla tam katlar.

OS X için standart uygulama simgesi boyutları :

• 16 × 16, 32 × 32, 128 × 128, 256 × 256, 512 × 512 ve 1024 × 1024.

Windows 7 için standart uygulama simgesi boyutları :

• 16x16, 32x32, 48x48, 64x64 ve 256x256.

İOS için standart uygulama simgesi boyutları :

• 29x29, 48x48, 57x57, 58x58, 72x72, 96x96, 114x114, 144x144, 512x512 ve 1024x1024.

Android için standart uygulama simgesi boyutları :

• 36x36, 48x48, 72x72, 96x96 ve 512x512.

İOS ve Android için simge boyutları biraz daha gelişigüzeldir ve ölçekler de birbiriyle ilişkili değildir, bu nedenle tasarım ızgarası hakkında akıllı olmak daha az önemlidir, çünkü birden çok boyut için piksel sınırlarına ulaşan koordinatları bulma olasılığınız daha düşüktür.

Yöntem 1: Ölçeklendirme

1. Vektörleri ve katman stilleri gibi oluşturulan efektleri kullanarak simgeyi en büyük boyutta (genellikle 1024 × 1024) tasarlayın.

2. Daha küçük boyutlar oluşturmak için belgeyi çoğaltın ve ölçeklendirin.

3. Gerekli ince ayarları yapın ve son görüntüyü kaydedin.

Bu harika, ancak öğelerin birden çok boyut için çalışan bir ızgaraya hizalanma fırsatlarını kaçırıyor. Tutturmak için kaba bir ızgara kullanmak biraz yardımcı oluyor gibi görünüyor. Örneğin, 16 piksel ızgaralı 1024 × 1024 belge, yapıştırma noktalarının size piksel yakalanan kenarları 64 × 64 boyutuna kadar vereceği anlamına gelir. Fikir ayrıntılı olarak tasarlamak, ancak daha küçük boyutlu ızgaralara yaslanmaktır, bu nedenle bu önemli pozisyonlara ulaşırsınız.

Yöntem 2: Ölçeklendirme

1. Simgeleri, katman stilleri gibi vektörler ve oluşturulan efektler kullanarak en küçük veya en küçük boyutlardan (genellikle 32 × 32 veya 64 × 64) birini tasarlayın. Genellikle 16 × 16'da başlangıç ​​noktası olarak kullanmak için yeterli ayrıntı yoktur.

2. Daha büyük boyutlar oluşturmak için belgeyi çoğaltın ve ölçeklendirin, daha küçük boyutlar için aşağı indirin.

3. Gerekli ince ayarları yapın ve son görüntüyü kaydedin.

Bu, çok fazla ayrıntı içermeyen basit simgelere yol açma eğilimindedir, bu yüzden böyle çalışmayı sevmiyorum.

Yöntem 3: Ölçeklendirme sonra aşağı ölçeklendirme

1. Vektörleri ve katman stilleri gibi oluşturulan efektleri kullanarak daha küçük boyutta (genellikle 32 × 32 veya 64 × 64) kaba bir tasarım oluşturun.

2. Belgeyi en büyük boyuta ölçeklendirin ve ayrıntı ekleyin. Bu, simgenin parlatıldığı ve ayrıntıların çoğunun eklendiği noktadır.

3. Belgeyi tüm küçük boyutlar için çoğaltın ve ölçeklendirin.

4. Gerekli ince ayarları yapın ve son görüntüyü kaydedin.

Bu, diğer yöntemlerin artıları ve eksileri ile en iyi yöntem gibi görünüyor. Biraz ilgili bir nokta olarak, iOS simgelerini genellikle 912 × 912'de tasarladığım anlamına geliyor, çünkü bu, iPhone'un Retina olmayan simge boyutunun 57 × 57 tam olarak 16 katı.

Çeşitli boyutlarda teslim edilmesi gereken simgeleri tasarlamak için daha iyi bir yöntem var mı?

Amaç, en az çabayla mümkün olan en iyi sonucu elde etmektir.

Varsayımlarınızda hafif bir düzeltme: Windows ve Mac 16'nın katlarını kullanırken, aynı oranda ölçeklenmezler. Vista / 7 standart boyutları 16 ² , 32 ² , 48 ² , 256 ^2'dir . OS X, 16 ² , 32 ² , 128 ² , 512 ^2'dir (+ HiDPI sürümleri). İşleri daha da karmaşık hale getirmek için, Windows Vista / 7 varsayılan zum düzeyleri 16 ² , 48 ² , 96 ² , 256 ^{2 gibi görünüyor} ve mutlulukla ² piksel kadar küçük artışlarla ölçekleniyor. Bu, tüm yakınlaştırma düzeylerinde belirli piksel ızgaralarıyla ilgilenme ihtiyacını ortadan kaldırması dışında iş akışınızda büyük bir fark yaratmamalıdır.

Çok fazla yeniden boyutlandırma yapmadığım için iş akışım sizinkinden farklı. Her boyut seviyesi için yeni bir görüntü oluşturulur ve tam olarak aynı düzeni geri dönüştürmeye çalışmaz.

Başladığım boyut platform tarafından belirlenir. Windows için tasarım yapıyorsanız, 48x48'den başlıyorum. (Bunun için herhangi bir bilimsel temelim yok, ancak varsayılan Windows 7 zoom seviyesi 48x48 olan "Orta" dır. Vista, OS X, iPhone, iPad ve Android Simgeleri de bu boyuta yeterince yakındır, bu yüzden kullanışlı ve rahat.)

Tamamen bitmiş simge bu boyutta yapılır ve ailedeki diğer simgeler için referanstır. Bir masaüstü uygulaması yapıyorsanız, 16x, 96x ve 256x'te diğer sürümleri Windows'un varsayılan düzeylerine uyacak şekilde yapacağım (Mac için değilse, doğal olarak). 96x genellikle 48x'e çok benzer.

256x sürümü tamamen yeni bir yaratım olacak. Çok daha fazla ayrıntı (arka plan öğelerini tekstüre etmek gibi küçük şeyler olsa bile). Küçük sürümlere sığamayacağım tüm detaylar eklendi. Birisi ekranını dev simgeler için çevirmişse, gördüklerinden memnun olmalıdır.

16x sürümü de yeni bir yaratımdır. Çok az detay. Büyük versiyonlarla aynı renk paletiyle logo veya çok basit ikonografiyi tanımlamak. Bu boyutta güzel bir şey yapmaya çalışmıyorum - sadece anında tanınabilir.

Yani, en azından benim için, aynı görüntüye sahip olma veya her boyutta aynı temel düzeni kullanma umuduyla yukarı veya aşağı ölçeklendirme meselesi değil. Sanırım bir şehre gitmek gibi - uzaktan sadece küçük ama tanımlanabilir bir ufuk çizgisi. Yaklaşıyorsunuz ve binaları seçmeye başlıyorsunuz. Sonra içinde ve tüm detay ve boyut hissediyorsun. Her mesafeden farklı görünüyor, ancak tüm ailenin asla ayrık hissetmemesi için boyuttan boyuta yumuşak bir geçiş var.

Kesinlikle büyük başlayın ve ölçeklendirin. Tasarımcılar yazılımım için simgeler tasarladığında, simgenin daha büyük bir boyutta nasıl görüneceğini görmeyi tercih ederim ve sonra daha küçük boyutlarda hangi özelliklerin kaldırılacağını veya vurgulanacağına karar verebilirim. Küçük öğedeki öğeleri kaldırmadan önce simgede neler olduğunu bilmeniz gerekir. glyfx simgeleri , aynı tasarımın büyük ve küçük simgelerinin nasıl yorumlanacağına dair bazı iyi örneklere sahiptir.

Her şeyi en küçük yoğunluk için yapmayı ve ölçeklendirmeyi tercih ediyorum. Bir uygulama için tüm düzeni tasarlıyorsanız, ızgara ile çalışmak çok daha kolaydır ve nesneleri daha küçük bir ağrıda kurtarır, çünkü nesneleri daha küçük bir ızgarada hareket ettirirsiniz.

Bu yüzden iş akışım şöyle: 1. Photoshop'taki en küçük dpi ölçeğinde bir düzen oluşturuyorum ve Illustrator'da simgeleri yapmaya devam ediyorum, çünkü vektör görüntülerin ölçeklendirilmesinde sorun yok. 2. Ben her simge / nesne vb yaparken Ben aynı zamanda (elbette düzeni iyi görünüyor karar verdiğimde) tüm ölçekli sürümleri oluşturmak ve son pngs programcıya teslim.

Öncelikle iOS ile başladığımı belirtmeliyim.