Alur kerja terbaik untuk desain ikon: Mulai besar, atau mulai kecil?

Saat mendesain ikon yang perlu disampaikan pada beberapa ukuran, apakah Anda mulai dari ukuran yang lebih kecil, kemudian meningkatkan ke ukuran yang lebih besar? Atau apakah Anda mulai besar dan menurunkan?

Ada beberapa keuntungan untuk keduanya. Saya mencoba untuk memperbaiki alur kerja saya, jadi masukan dari orang lain akan sangat membantu. Mari kita asumsikan kita sedang mendesain ikon Mac atau Windows, di mana ukurannya terkait - mereka kebanyakan berlipat ganda.

Untuk OS X, ukuran ikon aplikasi standar adalah:

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

Untuk Windows 7 ukuran ikon aplikasi standar adalah:

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

Untuk iOS ukuran ikon aplikasi standar adalah:

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

Untuk Android ukuran ikon aplikasi standar adalah:

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

Untuk iOS dan Android, ukuran ikon sedikit lebih serampangan dan skala tidak berhubungan juga, jadi menjadi pintar tentang desain grid kurang penting, karena Anda cenderung menemukan koordinat yang mengenai batas piksel untuk berbagai ukuran.

Metode 1: Menurunkan skala

1. Desain ikon pada ukuran terbesar (sering 1024 × 1024) menggunakan vektor dan efek yang dihasilkan, seperti gaya lapisan.

2. Gandakan dan skala dokumen ke bawah untuk membuat ukuran yang lebih kecil.

3. Buat tweak yang diperlukan dan simpan gambar akhir.

Itu bagus, tetapi melewatkan peluang elemen untuk menyelaraskan ke kisi yang berfungsi untuk berbagai ukuran. Menggunakan kisi kasar untuk membidik tampaknya sedikit membantu. Misalnya, dokumen 1024 × 1024 dengan kisi 16px berarti titik gertakan akan memberi Anda piksel yang terpotong hingga ke ukuran 64 × 64. Idenya adalah untuk mendesain dengan detail tetapi mengambil ke kisi-kisi ukuran yang lebih kecil, sehingga Anda menekan posisi penting tersebut.

Metode 2: Meningkatkan

1. Desain ikon pada ukuran terkecil, atau salah satu dari ukuran terkecil (sering 32 × 32 atau 64 × 64) menggunakan vektor dan efek yang dihasilkan, seperti gaya layer. Biasanya tidak ada detail yang cukup dalam 16 × 16 untuk menggunakannya sebagai titik awal.

2. Gandakan dan skala dokumen ke atas untuk membuat ukuran lebih besar, dan turun untuk ukuran kecil.

3. Buat tweak yang diperlukan dan simpan gambar akhir.

Ini cenderung mengarah ke ikon sederhana dengan tidak banyak detail, jadi saya tidak suka bekerja seperti ini.

Metode 3: Menaikkan skala lalu turun

1. Buat desain kasar pada ukuran yang lebih kecil (sering 32 × 32 atau 64 × 64) menggunakan vektor dan efek yang dihasilkan, seperti gaya layer.

2. Skala dokumen hingga ukuran terbesar dan tambahkan detail. Ini adalah titik di mana ikon dipoles dan sebagian besar detail ditambahkan.

3. Gandakan dan skala dokumen ke bawah untuk semua ukuran yang lebih kecil.

4. Buat tweak yang diperlukan dan simpan gambar akhir.

Ini tampaknya menjadi metode terbaik, dengan pro dan kontra dari metode lain. Sebagai titik yang sedikit terkait, itu juga berarti saya biasanya mendesain ikon iOS pada 912 × 912, karena itu persis 16 kali ukuran ikon non-Retina iPhone 57 × 57.

Apakah ada metode yang lebih baik untuk mendesain ikon yang perlu disampaikan dalam beberapa ukuran?

Tujuannya adalah untuk mencapai hasil terbaik, dengan sedikit usaha.

Koreksi sedikit ke asumsi Anda: Meskipun Windows dan Mac menggunakan kelipatan 16, mereka tidak skala pada tingkat yang sama. Ukuran standar Vista / 7 adalah 16 ² , 32 ² , 48 ² , 256 ² . OS X adalah 16 ² , 32 ² , 128 ² , 512 ² (+ versi HiDPI). Untuk lebih menyulitkan, tingkat pembesaran standar Windows Vista / 7 tampaknya 16 ² , 48 ² , 96 ² , 256 ² dan akan dengan senang hati meningkatkan skala sekecil 2px. Ini seharusnya tidak membuat perbedaan besar pada alur kerja Anda kecuali bahwa itu menghilangkan kebutuhan untuk peduli dengan grid piksel tertentu di semua level zoom.

Alur kerja saya berbeda dari milik Anda karena saya tidak terlalu banyak mengubah ukuran. Gambar baru akan dibuat untuk setiap level ukuran dan saya tidak mencoba untuk mendaur ulang tata letak yang sama persis.

Ukuran yang saya mulai ditentukan oleh platform. Jika mendesain untuk Windows, saya mulai dari 48x48. (Saya tidak memiliki dasar ilmiah untuk ini, tetapi tingkat zoom Windows 7 default adalah "Medium" yaitu 48x48. Vista, OS X, iPhone, iPad, dan Ikon Android juga jatuh cukup dekat dengan ukuran ini sehingga nyaman dan nyaman.)

Ikon yang sudah jadi selesai pada ukuran ini dan merupakan referensi untuk ikon lain dalam keluarga. Jika melakukan aplikasi desktop, saya akan membuat versi lain pada 16x, 96x, dan 256x agar sesuai dengan level standar Windows (kecuali untuk Mac, tentu saja). 96x biasanya sangat mirip dengan 48x.

Versi 256x akan menjadi ciptaan yang sepenuhnya baru. Jauh lebih detail (bahkan jika itu hal-hal kecil seperti tekstur elemen latar belakang). Semua detail yang tidak dapat saya muat di versi yang lebih kecil akan ditambahkan. Jika seseorang memutar layar mereka untuk ikon raksasa, mereka harus puas dengan apa yang mereka lihat.

Versi 16x juga merupakan ciptaan baru. Detail yang sangat sedikit. Mengidentifikasi logo atau ikonografi yang sangat sederhana dengan palet warna yang sama dengan versi yang lebih besar. Pada ukuran ini saya tidak berusaha membuat sesuatu yang indah - langsung dikenali.

Jadi, setidaknya bagi saya, ini bukan masalah meningkatkan atau menurunkan dengan harapan memiliki gambar yang sama atau menggunakan tata letak dasar yang sama di semua ukuran. Saya menganggapnya seperti berkendara ke kota - di kejauhan hanya langit kecil, namun dapat diidentifikasi. Anda semakin dekat dan mulai memilih bangunan. Kemudian Anda berada di dalamnya dan merasakan semua detail dan dimensi. Dari setiap jarak itu terlihat berbeda, tetapi ada transisi yang mulus dari ukuran ke ukuran sehingga seluruh keluarga tidak pernah merasa terputus-putus.

Pasti mulai besar dan turunkan. Setiap kali saya memiliki desainer mendesain ikon untuk perangkat lunak saya, saya lebih suka melihat seperti apa ikon itu pada ukuran yang lebih besar dan kemudian saya dapat memutuskan fitur apa yang harus dihapus atau ditekankan dalam ukuran yang lebih kecil. Anda perlu tahu apa yang ada di ikon sebelum Anda menghapus elemen di kecil. ikon glyfx memiliki beberapa contoh yang baik tentang bagaimana menafsirkan ikon besar dan kecil dengan desain yang sama.

Yah, saya lebih suka membuat segalanya untuk kepadatan terkecil dan meningkatkannya. Jika Anda mendesain seluruh tata letak untuk suatu aplikasi, pekerjaan dengan grid jauh lebih mudah dan menghemat banyak sakit kepala, karena Anda memindahkan objek dalam grid yang lebih kecil.

Jadi alur kerja saya terlihat seperti: 1. Saya membuat tata letak dalam skala dpi terkecil di Photoshop dan terus membuat ikon di Illustrator, karena gambar vektor tidak memiliki masalah dengan peningkatan skala. 2. Ketika saya membuat setiap ikon / objek dll. Saya membuat semua versi yang ditingkatkan dalam waktu yang sama (ketika saya memutuskan itu terlihat bagus dalam tata letak tentu saja) dan menyerahkan pngs terakhir kepada programmer.

Saya harus perhatikan bahwa saya mulai dengan iOS terlebih dahulu.