Ikon7 mnt baca

Set ikon yang konsisten dengan AI: satu ikon master, sebelas saudara, satu gaya

Dua belas ikon aplikasi dalam satu keluarga: tulis aturannya, buat ikon master, turunkan saudaranya, uji dalam ukuran kecil, lalu gambar ulang sebagai vektor.

Di atas latar warna arang, sebuah panel berisi dua belas ubin bersudut bulat, masing-masing memuat ikon garis warna krem seperti rumah, kaca pembesar, lonceng, dan gembok, yang pertama berwarna amber di atas grid keyline tipis dengan tanda sudut amber; di sampingnya lonceng dalam tiga ukuran yang mengecil, kedua belas ikon diulang dalam ukuran sangat kecil, dan empat contoh warna palet

Minta model gambar membuat ikon lonceng dan Anda akan mendapat lonceng yang bagus. Minta lagi ikon gembok dan Anda akan mendapat gembok yang bagus, digambar seolah oleh tangan yang lain: garis lebih tebal, sudut lebih tajam, sedikit miring, dan sentuhan bayangan yang tidak pernah dimiliki lonceng tadi. Letakkan keduanya berdampingan di bilah tab, dan aplikasinya terlihat seperti dirakit dari tiga paket gratis. Set ikon dinilai sebagai satu set, dan orang menyadari ikon yang janggal jauh sebelum menyadari ikon yang bagus.

Panduan ini membuat dua belas ikon untuk aplikasi catatan rekaan bernama Quillbox: beranda, cari, notifikasi, kalender, pesan, kamera, favorit, filter, kunci, surel, folder, dan hapus. Metodenya sama untuk daftar apa pun. Tetapkan aturannya, buat satu ikon master yang mematuhinya, turunkan setiap ikon lain dari master itu, periksa semuanya dalam ukuran yang benar-benar akan dilihat orang, lalu akhiri dengan menggambar ulang dalam vektor.

Tulis aturannya sebelum prompt pertama

Konsistensi hanyalah segelintir angka yang dimiliki bersama oleh setiap ikon. Tulis semuanya di satu kartu dan biarkan terbuka sepanjang waktu:

  1. Grid. Kanvas persegi, misalnya 24 kali 24 unit, dengan padding 2 unit yang tidak dilewati apa pun kecuali disengaja. Setiap ikon dirancang di grid ini dan baru diskalakan di akhir.
  2. Garis. Satu ketebalan, misalnya 2 unit, dengan ujung bulat dan sambungan bulat. Ikon garis luar dan ikon berisi tidak dicampur dalam satu set; pilih salah satu.
  3. Radius sudut. Satu radius untuk setiap persegi panjang, misalnya 3 unit di sudut luar. Kalender bersudut lembut di samping ikon surel bersudut tajam adalah tanda yang paling sering ketahuan.
  4. Bentuk keyline. Lingkaran, persegi, dan persegi panjang lebar yang mengisi area kurang lebih sama, sehingga ikon bulat dan ikon persegi tampak sama besar di mata.
  5. Palet. Satu warna garis untuk seluruh set, ditambah paling banyak satu aksen untuk status aktif. Tanpa gradien, tanpa bayangan, tanpa warna garis kedua sebagai hiasan.
  6. Perspektif. Datar dan lurus dari depan. Tanpa tampilan tiga perempat, tanpa kemiringan isometrik.

Buat satu ikon master, dan hanya satu

Pilih master dengan cermat: ikon sederhana yang memakai sebagian besar aturan sekaligus. Rumah cocok sekali, karena punya garis lurus, sudut, sambungan, dan bentuk kecil di dalamnya. Tuliskan isi kartu ke dalam prompt dengan kata-kata sederhana dan minta satu ikon di atas latar polos, tidak lebih.

prompt
A single flat line icon of a house, outline only, uniform medium stroke with rounded line ends and rounded corners, centred on a plain white square background with generous empty space around it, one colour only, dark charcoal lines, no fill, no shading, no gradient, no shadow, no text, no mock-up
Ulangi kata-kata untuk garis, sudut, dan warna persis seperti yang tertulis di kartu Anda. Kalimat ini akan Anda tempel ke setiap prompt ikon saudara.

Ada dua jenis model di katalog yang cocok untuk ini. Recraft 20B SVG dijelaskan sebagai pembuat gambar vektor SVG untuk grafis dan ikon yang dapat diskalakan, dan Recraft V4.1 Text to Vector sebagai pembuat gambar bergaya vektor yang dapat diedit dari sebuah prompt. Jika Anda lebih suka mulai dari gambar raster dengan potongan yang bersih, Ideogram V3 Generate Transparent menghasilkan gambar dengan latar transparan. Jalankan prompt berkali-kali dan nilai hasilnya berdasarkan kartu, bukan selera. Master yang Anda simpan adalah yang paling mematuhi aturan, meskipun ada draf lain yang lebih cantik.

Turunkan ikon saudara dari master

Di sinilah sebagian besar set berantakan: sebelas prompt baru menghasilkan sebelas tafsiran baru. Sebagai gantinya, jadikan master sebagai acuan untuk semua yang berikutnya. Katalog punya jalur langsung untuk ini. Recraft V4 Create Style mengubah gambar referensi menjadi ID gaya yang dapat dipakai ulang, dan Recraft V4 Style Text to Vector menggambar grafis vektor dari prompt beserta ID gaya itu atau langsung dari gambar referensinya. Berikan master Anda, dan begitu Anda punya dua atau tiga ikon saudara yang bagus, tambahkan juga sebagai referensi, agar gayanya dipelajari dari sebuah keluarga kecil, bukan dari satu gambar saja.

Buat setiap prompt ikon saudara membosankan. Kalimatnya sama dengan master, hanya objeknya yang berubah: lonceng, kaca pembesar, gembok. Hindari kata sifat yang menarik gaya menjauh, seperti imut, detail, atau realistis. Jelaskan objek lewat bentuk paling sederhananya: gembok adalah persegi panjang bersudut bulat di bawah lengkungan setengah lingkaran, dengan garis pendek sebagai lubang kunci.

  • Objek sulit dulu. Kamera, filter, dan kalender punya bagian paling banyak dan paling mudah melenceng. Kalau ketiganya bertahan, sisanya juga akan bertahan.
  • Metafora tetap sederhana. Notifikasi adalah lonceng, favorit adalah hati, hapus adalah tempat sampah. Metafora yang cerdik adalah keputusan desain tersendiri, bukan eksperimen prompt.
  • Satu objek per ikon. Folder dengan bintang di atasnya adalah dua ikon. Tambahkan lencananya nanti dalam vektor, dengan cara yang sama untuk setiap ikon yang memerlukannya.
  • Perbaikan kecil, bukan generasi baru. Jika ikon saudara yang bagus punya satu detail yang salah, misalnya sudut tajam pada kamera yang selebihnya sudah benar, Ideogram V4.5 Edit menerima mask, sehingga Anda bisa mengubah bagian itu saja.

Mengunci gaya mempersempit variasi; tidak menghilangkannya. Bersiaplah untuk beberapa putaran sampai kedua belas ikon serasi, dan bersiaplah memperbaiki sisanya secara manual di langkah berikutnya.

Jajarkan dan periksa dalam ukuran kecil

Letakkan kedua belas ikon di satu lembar dalam grid 4 kali 3, di latar yang sama, dengan ukuran yang sama. Lalu perkecil lembar itu sampai setiap ikon kira-kira seukuran tampilannya di aplikasi: 24 piksel untuk bilah alat, 16 untuk menu atau daftar yang padat. Lihat di ponsel sungguhan, bukan hanya di monitor besar. Telusuri daftarnya:

  • Uji menyipit. Sipitkan mata Anda. Kedua belas ikon harus punya bobot abu-abu yang sama. Ikon yang tampak lebih gelap punya garis lebih tebal atau terlalu banyak garis.
  • Uji ukuran. Ikon bulat dan ikon persegi harus tampak sama besar. Jika ikon cari tampak lebih kecil dari ikon surel, perbesar sampai menyentuh keyline lingkaran.
  • Uji detail. Pada 16 piksel, celah apa pun yang lebih sempit dari satu garis akan tertutup. Lubang kunci pada gembok dan cincin lensa kamera adalah korban yang biasa; hapus atau lebarkan.
  • Uji tebak. Tunjukkan lembar kecil itu kepada orang yang belum pernah melihatnya dan tanyakan arti setiap ikon. Ikon yang membuatnya ragu perlu bentuk yang lebih sederhana atau label di sebelahnya di aplikasi.
  • Uji status. Coba setiap ikon dalam warna aksen di tab aktif. Jika versi berisi menjadi bagian dari sistem Anda, kedua belas ikon harus diisi dengan cara yang sama.

Rapikan menjadi vektor

Bahkan ketika model menghasilkan SVG, buka dulu sebelum Anda memercayainya. Path hasil generasi sering kali tidak rata: puluhan titik di tempat yang cukup dengan tiga, garis disimpan sebagai outline berisi dengan lebar yang sedikit berbeda, sudut yang hampir tetapi tidak persis sama radiusnya. Untuk sebuah set, cara paling bersih adalah menggambar ulang setiap ikon di grid Anda dengan garis sungguhan, memakai file hasil generasi hanya sebagai panduan di bawahnya. Panduan kami dari konsep logo AI ke vektor membahas penjiplakan manual dan penyederhanaan bentuk, dan kebiasaan yang sama berlaku di sini.

Yang khas pada ikon adalah konstruksi bersamanya. Tetapkan ketebalan garis dan radius sudut sekali sebagai gaya di editor Anda dan terapkan ke kedua belas ikon, sehingga perubahan garis di kemudian hari mengubah seluruh set. Sejajarkan titik ke grid agar garis jatuh tepat di piksel utuh pada ukuran utama. Simpan file master dengan setiap ikon di artboard sendiri, dinamai sesuai artinya, misalnya icon-search, bukan magnifier, lalu ekspor dari sana dalam format yang diminta developer Anda.

Jika ikon perlu hidup berdampingan dengan identitas yang lebih luas, palet dan ID gaya bisa berasal dari sumber yang sama dengan bagian merek lainnya, seperti pada papan identitas merek untuk roastery rekaan. Gagasan membekukan satu master lalu membangun semua yang lain di sekitarnya adalah gagasan yang sama yang menyatukan satu set alat tulis.

Yang tetap menjadi tugas Anda

Model memberi Anda draf dan arah. Set akhirnya adalah hasil gambar ulang: garis yang konsisten, grid sungguhan, diuji pada ukuran sungguhan. Pastikan tidak ada ikon yang nyaris menjiplak simbol terkenal milik perusahaan lain, dan ikuti pedoman platform jika toko aplikasi atau sistem operasi punya aturan sendiri untuk ikon aplikasi. Begitu kedua belas ikon serasi, menambah yang ketiga belas jadi mudah: kartu, master, dan ID gayanya sudah ada. Jelajahi model vektor dan desain di /models dan mulai master Anda di studio.

Pertanyaan

Bisakah AI membuat seluruh set ikon sekaligus?

AI bisa menggambar ikonnya, tetapi konsistensinya datang dari aturan yang Anda tetapkan lebih dulu dan dari menurunkan setiap ikon dari satu master. Gunakan gaya yang dibangun dari master itu, lalu gambar ulang set dalam vektor agar garis dan sudutnya benar-benar cocok.

Apakah model vektor memberi saya ikon SVG yang sudah jadi?

Model itu memberi titik awal dalam vektor. Buka filenya, periksa path dan ketebalan garisnya, dan bersiaplah menggambar ulang di grid Anda, karena path hasil generasi jarang sebersih dan seseragam ikon yang dibuat dengan tangan.

Seberapa kecil saya harus menguji ikon?

Pada ukuran yang akan dilihat orang, biasanya 24 piksel di bilah alat dan 16 di daftar yang padat, di layar sungguhan. Ulangi uji setelah digambar ulang dalam vektor, karena versi itulah yang diterima pengguna.

#Ikon#Desain UI#Vektor