Apa yang membuat sekumpulan ikon terlihat sebagai satu set?
Ikon terasa satu keluarga kalau grid, ketebalan garis, bentuk sudut, tingkat detail, dan paletnya sama. Mencampur ikon dari paket yang berbeda, atau membuatnya satu per satu dengan prompt terpisah, biasanya merusak setidaknya salah satu dari hal-hal itu. Pembuat set ikon menggambar semua ikon dalam satu set di satu lembar, dari satu deskripsi gaya, jadi keputusan gambarnya dibuat sekali untuk semuanya. Setiap ikon lalu dipotong dan di-tracing jadi SVG tersendiri.
Tiga contoh set kami, masing-masing dari satu daftar: aplikasi kafe dengan gaya Garis, aplikasi kebugaran dengan gaya Terisi bersudut tajam, dan aplikasi travel dengan Warna datar tiga warna.
Bagaimana cara membuat set?
Buka pembuat logo AI dan pilih Ikon. Judul di studio berubah jadi pembuat set ikon.
- Tulis daftar ikonnya. Ketik benda-benda yang kamu butuhkan, dipisahkan koma atau satu per baris:
cangkir kopi, croissant, pin peta, kartu member. Masing-masing jadi chip. Satu set berisi hingga 25 ikon. - Pilih cara menggambarnya. Garis berupa outline dengan satu ketebalan, Terisi berupa bentuk solid satu warna, Warna datar berupa bentuk solid hingga tiga warna, dan Seperti gambar ini mengikuti tampilan gambar yang kamu unggah (setelah masuk) atau logo maupun set ikon yang sudah pernah kamu buat.
- Pilih sudutnya. Membulat atau tajam.
- Jelaskan gayanya dengan kata-kata, kalau mau. Hingga 300 karakter, misalnya "ramah dan minimalis, ujung garis membulat, sedikit sentuhan hangat buatan tangan". Kalimat ini dipakai saat menggambar setiap ikon di set.
- Kirim. Setiap kotak menampilkan ikonnya saat di-tracing, lalu SVG yang sudah jadi.
Harga set baru sudah tertera di tombol sebelum kamu mengirimnya; set yang gagal tidak dikenai biaya.
Bagaimana memperbaiki satu ikon tanpa menggambar ulang yang lain?
Pakai putaran. Dalam satu putaran, kamu bisa mengulang ikon dengan catatan ("matras gulung polos, tanpa tekstur") dan menambah ikon baru, hingga sembilan perubahan sekaligus. Ikon yang diulang dan ditambahkan digambar dengan gaya set itu, jadi tetap serasi. Beberapa putaran pertama dalam satu set sudah termasuk; kalau sebuah putaran memakai kredit, tombolnya menyebutkannya sebelum kamu memulai.
Kalau hanya satu detail yang kurang pas dan menggambar ulang terasa berlebihan, buka ikonnya di editor SVG lalu ubah path atau warnanya langsung.
Apa isi unduhannya?
ZIP-nya berisi tiga bagian:
| Folder | Isinya |
|---|---|
svg/ |
satu SVG per ikon, viewBox="0 0 24 24" dengan padding 2 px |
png/ |
setiap ikon sebagai PNG transparan di 16, 24, 32, 48, 64, 128, 256, dan 512 px |
sprite.svg |
setiap ikon sebagai <symbol> dengan id icon-NAMA |
PNG kecil (hingga 48 px) digambar di ukurannya sendiri, jadi garisnya pas di piksel utuh, bukan hasil pengecilan dari gambar besar. Ukuran yang lebih besar diskalakan dari 512 px.
Bagaimana memakai ikonnya di situs web?
Untuk set Garis atau Terisi, SVG-nya digambar dengan currentColor, jadi ikon mengikuti warna teks di sekitarnya. Kamu cukup mengganti warnanya dengan CSS, tanpa mengedit file:
<button class="icon-button">
<svg width="24" height="24" aria-hidden="true"><use href="sprite.svg#icon-cangkir-kopi"/></svg>
Pesan
</button>
.icon-button { color: #6b3f24; }
.icon-button:hover { color: #1f2937; }
Pilih Sesuai desain di dialog unduhan kalau kamu lebih suka warnanya tertulis langsung di setiap file. Set Warna datar selalu mempertahankan warnanya sendiri. Tandai ikon dekoratif dengan aria-hidden="true", dan beri nama yang aksesibel untuk ikon yang berdiri sendiri sebagai tombol.
Daftar seperti apa yang paling bagus hasilnya?
Kata benda yang konkret dan bisa digambar paling bagus: "sepeda", "stopwatch", "kunci pintu". Kata abstrak ("pertumbuhan", "kepercayaan") tidak memberi generator sesuatu yang spesifik untuk digambar, jadi ubah dulu jadi benda ("tunas", "jabat tangan"). Jaga tingkat detail yang sama di seluruh daftar. Set yang mencampur "titik" dengan "siluet gedung kota" akan terlihat tidak seimbang, bagaimanapun cara menggambarnya.
Sebelum dipakai, cek setiap ikon di 16 dan 24 px di samping teks, cek kontrasnya terhadap latarmu, dan pastikan ikon yang mirip tetap bisa dibedakan. Generator tidak mengecek apakah sebuah ikon mirip tanda milik pihak lain, jadi periksa lagi ikon mana pun yang ingin kamu daftarkan sebagai merek dagang.