Buat fon ikon menggunakan Illustrator & Icomoon

Buat fon ikon tersuai: Buat sistem ikon eksklusif menggunakan Illustrator dan Icomoon

mata teras:

• Sistem ikon tersuai adalah elemen reka bentuk penting dalam projek web. Alat seperti Illustrator dan Icomoon dapat memudahkan proses ini.
• Buat font ikon, reka bentuk pertama ikon dalam Illustrator dan simpannya sebagai fail SVG. Sebelum anda mula melukis, pastikan anda menentukan sifat gaya glyph, seperti saiz strok dan skala mesh.
• Selepas ikon direka dan disimpan sebagai fail SVG, ia boleh dimuat naik ke icomoon untuk menghasilkan fon ikon. Aplikasi Icomoon membolehkan mengimport fail SVG, mengatur dan mengeditnya, dan kemudian menyusun fon.
• App ICOMoon menyediakan fail CSS Font CSS yang mengandungi pembetulan keserasian penyemak imbas yang diperlukan. Fail ini mengandungi peraturan @font-face dan semua pemilih simbol yang boleh dimasukkan ke dalam laman web HTML, dengan itu menambah fon ikon tersuai ke item laman web.

Gambar dari: Listenorason

Sistem ikon biasanya merupakan elemen reka bentuk teras dalam projek web. Terdapat banyak set ikon percuma atau komersial dalam talian, yang biasanya termasuk dalam kerangka CSS utama (Bootstrap 3 Glyphicons adalah contoh yang hebat).

Walau bagaimanapun, kadang -kadang anda mungkin memerlukan glyph yang lebih spesifik tidak termasuk dalam set umum. Atau anda mungkin hanya ingin menyelaraskan reka bentuk ikon dengan elemen reka bentuk lain dalam projek anda. Dalam kes ini, anda perlu menarik ikon baru yang ditetapkan dari awal.

Dua cara biasa untuk menambah set ikon ke projek anda:

Font Web

svg
2. Artikel ini akan memperkenalkan fon web. SVG akan diliputi dalam artikel lain.

Secara tradisinya, penciptaan fon telah menjadi tugas yang sukar dan menuntut, tetapi bersyukur, ia menjadi lebih mudah untuk membuat set fon ikon berkat kedatangan alat dalam talian yang mudah seperti icomoon, fontastic, atau fontello. Setiap alat membolehkan anda membina fon dengan "memilih" ikon pra-dibina dari perpustakaan awam atau memuat naik dan menyusun fail SVG yang disediakan sendiri.

Buat ikon anda sendiri

Untuk membina fon ikon anda sendiri, langkah pertama adalah untuk merancang ikon - kami akan menggunakan Illustrator untuk tugas ini - dan kemudian simpannya dalam format SVG.

Sahkan gaya reka bentuk

Sebelum anda mula melukis, anda perlu menentukan sifat gaya glyph, seperti saiz strok, skala grid, dll.

Pertama, lakukan beberapa ujian kebolehbacaan pada saiz yang berbeza dan bina templat untuk melukis semua glyphs. Ikon terperinci yang reka bentuk tidak berfungsi pada resolusi yang lebih rendah tidak berguna.

Ia juga berguna untuk melukis lakaran fon sebelum melukis, dan juga lakaran yang sangat kasar (ditunjukkan di bawah) dapat membantu anda mencari idea untuk semua simbol yang anda perlukan.

Anda kemudian boleh menentukan saiz mesh untuk glyph. Nasihat saya bukan untuk menarik secara langsung pada saiz sasaran (mis. 16x16px) atau saiz yang sangat besar. Sebaliknya, saya mendapati bahawa grid 60-80px biasanya baik untuk saya. Peningkatan atau ke bawah dari saiz ini biasanya berjaya.

Sudah tentu, ini bukan peraturan "berdiri": keperluan projek dan pengalaman mungkin berbeza dari keadaan ke situasi.

Dalam artikel ini, saya memilih untuk menggunakan strok 8px untuk menarik ikon, tidak mengisi, dan tetapkannya di dalam grid 64x64px.

Mula lukisan

Papan seni ilustrator berfungsi sangat berguna: Anda boleh menarik setiap glyph dalam papan art yang berbeza dan simpan setiap glyph dalam satu fail. Artboard boleh disusun semula, dinamakan semula, dan dieksport sebagai fail SVG mandiri (ini adalah apa yang kita perlukan untuk Icomoon).

Setiap papan seni juga boleh mempunyai koordinat paksi bebas, yang sangat berharga untuk penjajaran objek, yang akan kita lihat kemudian.

Sekarang kita boleh mula membuat dokumen ilustrator 64x64px baru:

Perhatikan bahawa anda boleh mula membuat semua papan art yang anda inginkan dengan pilihan "Bilangan Artboards": Saya lebih suka menambah Artboards seperti yang diperlukan, tetapi tidak ada sebab mengapa anda tidak boleh membuat semua papan artoards terlebih dahulu.

Sekarang kita boleh menubuhkan grid. Kami mahu ia bermula dengan setiap artboard asal (sudut kiri atas) dan membahagikan papan arto ke grid 8x8 checkerboard. Sebelum itu, mari kita lihat dengan cepat bagaimana sistem koordinat ilustrator berfungsi.

ruang kerja ilustrator

ruang kerja ilustrator terdiri daripada kanvas yang mengandungi satu atau lebih papan art.

Artboard diletakkan di atas kanvas, bermula dengan titik yang disebut Asal Penguasa Global. Di samping itu, setiap artboard juga mempunyai asal dan penguasa asalnya sendiri.

Apabila anda menggunakan alat Artboard untuk mencari papan seni baru, anda akan sentiasa menggunakan penguasa global. Dalam hampir setiap kes lain, anda akan menggunakan penguasa artboard mengikut pandangan → penguasa → perubahan ke artboard (atau global) pilihan penguasa.

Jika anda menggunakan penguasa global, setiap objek yang ditarik di mana -mana artboard ditarik berbanding dengan asal -usul tunggal (iaitu

Global Ruler Asal

). Jika tidak, koordinat merujuk kepada asal -usul papan yang mengandunginya.

Singkatnya, gunakan sistem penguasa Artboard:

Artboard diletakkan di dalam kanvas mengikut

asal penguasa global

• objek yang kita lukis diletakkan di papan arten mengikut artboard penguasa asal (dalam imej di bawah, anda dapat melihat bahawa dua dataran mempunyai nilai koordinat yang sama, walaupun ia diletakkan dalam dua yang berbeza papan art).
Untuk kerja ini, kami akan menggunakan penguasa Artboard kerana ia lebih sesuai untuk penjajaran glyph.

Tetapkan grid

Grid Illustrator diletakkan di ruang kerja bermula dari asal penguasa global. Anda boleh memilih Keutamaan → Panduan dan Grid untuk menetapkan sifatnya. Oleh kerana kami ingin membahagikan kanvas 64x64px kami ke dalam 8 bahagian, satu di setiap sisi, kami akan menetapkan garis grid utama setiap 16px (ini akan menghasilkan artboard kami dibahagikan kepada bahagian 4x4) dan melakukan dua subdivisi:

Sekarang kita perlu memastikan grid kita betul -betul sepadan dengan papan artinya. Secara lalai, artboard pertama diletakkan di Global Ruler Origin, bagaimanapun, kerana artboard boleh dipindahkan dan ditetapkan semula: untuk melakukan ini, hanya klik dua kali penguasa asal menggunakan alat Artboard.

grid kami kini harus sejajar dengan papan arten kami:

Glyph pertama

mari kita mulakan dengan glyph pertama kami, tanda semak

mudah

di dalam bulatan:

Untuk melukis bulatan, kita mesti memilih alat Ellipse, klik titik di papan seni dan masukkan lebar dan ketinggian elips:

Seterusnya kita perlu mengeluarkan sebarang mengisi dan tetapkan strok hitam saiz 8px. Pada ketika ini, kita boleh menyelaraskan bulatan dengan papan arten (pastikan pilihan "Align to Artboard" dipilih):

tetapi hasilnya bukan apa yang kita harapkan: Illustrator menjajarkan jalan

tanpa mengira lebar strok. Syukurlah, ini dapat diselesaikan dengan mudah dengan menetapkan pilihan Preview Batas Pratonton dalam panel Keutamaan. Illustrator kini mengira lebar strok di dalam papan artil tanpa mengira penjajaran dan saiz, yang menjadikan lukisan lebih cepat dan lebih tepat.

Lengkapkan Glyph Lukisan

Sekarang kita perlu menarik setiap glyph, menambah papan seni baru pada satu masa. Anda boleh menggunakan Alat Artboard dan Pilihan /Alt untuk menyeret papan arten yang sedia ada atau klik ikon Artboard baru di panel Artboard untuk menambah papan art.

Anda kemudian boleh menyusun semula papan arto dengan memilih Object → Artboard → Reseprange (atau perintah Artboard Recrange dalam menu Panel Artboard) dan dalam susunan di panel Artboard.

Perhatikan bahawa glyphs sentiasa dimuat naik abjad, jadi jika anda mahu perintah artboard di Illustrator untuk memadankan glyphs dalam fon, ingatlah ini.

Namakan setiap papan artak (tanpa ruang): Ini akan menjadi nama glyph dan nama kelas CSS yang dihasilkan, jadi sangat penting untuk menggunakan kata -kata yang bermakna.

Walaupun kita sering menggunakan strok untuk menarik simbol, terdapat beberapa keperluan khas untuk penciptaan fon. Kita mesti ingat:

setiap strok mesti ditukar untuk mengisi
pengisian mesti digabungkan untuk membuat laluan komposit (jika perlu) (tiada bentuk bertindih)
Mana -mana warna akan diabaikan: Glyph akan sentiasa ditafsirkan sebagai hitam. Anda tidak boleh menggunakan putih sebagai latar belakang sama ada: anda hanya boleh menggunakan latar belakang telus
Sebarang imej tertanam dalam SVG akan diabaikan

Anda boleh menggunakan perintah Extend untuk menukar laluan untuk mengisi bentuk dan menggunakan panel pencari jalan untuk dengan cepat menggabungkan bentuk bertindih ke dalam elemen tunggal.

Apabila glyph sudah siap, kita dapat menyimpan setiap glyph sebagai fail SVG yang berasingan dalam kotak dialog Simpan sebagai menggunakan pilihan Artboard Penggunaan.

Illustrator menyimpan fail SVG dengan mengutamakan nama dokumen .ai (Icons_). Oleh kerana Icomoon menggunakan nama fail sebagai glyphs, saya lebih suka mengeluarkan awalan ini (terdapat banyak aplikasi kecil yang dapat dengan mudah menamakan semula semua fail) untuk mengurangkan sebarang kekeliruan. 3

Laman web iComoon menyediakan aplikasi dalam talian untuk membina fon ikon. Aplikasi ini bermula dengan

item yang tidak dinamakan

dan menawarkan akses kepada beberapa perpustakaan ikon percuma yang boleh anda pilih simbol.

Oleh kerana kita akan memuat naik glyph kita sendiri, kita boleh memadam semua perpustakaan yang dimuatkan menggunakan menu kecil di sebelah kanan setiap perpustakaan (perhatikan bahawa ini tidak wajib, kerana hanya simbol yang dipilih akan ditambah ke tengah fon anda). Ia hanya membuat projek anda mudah.

Anda kemudian boleh mengklik ikon Urus Projek di sebelah kanan bar menu Aplikasi untuk menyimpan projek anda. Perhatikan bahawa dengan akaun percuma ICOMOON, projek anda akan disimpan dalam penyemak imbas anda, jadi sebelum anda memuat turun data projek (fail JSON) atau naik taraf ke akaun premium (membolehkan anda menyimpan projek di awan), anda tidak boleh diakses di tempat lain .

Anda kini boleh memuat naik fail SVG anda menggunakan butang Ikon Import: Glyph anda akan muncul dalam aplikasi sebagai koleksi. Setiap glyph boleh disusun semula, dipadam, atau diedit dengan mudah menggunakan alat yang disediakan oleh aplikasi pada peringkat ini. Anda juga boleh mengedit metadata koleksi (nama koleksi dan beberapa maklumat pengarang) atau melakukan tugas lain menggunakan menu kecil di sebelah kanan koleksi.

Ikon boleh diedit dalam aplikasi menggunakan alat penyuntingan. Anda tidak boleh menukar data vektor dengan cara ini, tetapi anda boleh mengubah saiz atau memindahkan glyph, memuat turun fail SVG, atau menggantikannya.

Untuk membina fon, anda perlu menggunakan alat pemilihan terlebih dahulu untuk memilih semua ikon yang diperlukan (jika sesuai, anda juga boleh menggunakan perintah "Pilih Semua/Tidak Pilih Semua" dalam menu

). Anda boleh mengenal pasti glyph terpilih melalui sempadan kuning mereka. Anda kemudian perlu mengklik butang Font di bahagian bawah halaman.

Aplikasi ini akan memuatkan tetingkap penolong dengan semua simbol yang dipilih, menunjukkan setiap simbol glyph, nama, dan titik unicode yang diberikan kepadanya oleh icomoon dalam julat PUA. Menggunakan julat PUA dianggap sebagai kawasan Unicode yang paling selamat untuk menjadi tuan rumah ikon dalam julat PUA, walaupun ICOMOON membolehkan anda menggunakan julat Latin asas standard dengan mengklik butang "Kod" di bahagian atas jika anda lebih suka.

anda juga boleh menetapkan kod julat yang berbeza kepada setiap watak dengan memasukkan kod atau watak baru secara manual:

Sebelum memuat turun font, tambahkan nama font (ini akan digunakan untuk peraturan

), serta awalan kelas dan/atau akhiran (ini akan digunakan sebagai pemilih dalam CSS yang dihasilkan).

Anda boleh menetapkan banyak parameter lain: Dari maklumat metadata ke nilai metrik, saya cadangkan dengan teliti membaca dokumentasi pendek dan jelas untuk menetapkan semua parameter dengan betul.

@font-face

set ikon anda selesai! Muat turun fon anda (atau, jika anda mempunyai akaun premium, hanya pautan ke CSS) dan tambahkannya ke projek anda.

Fail zip yang dimuat turun mengandungi fon dalam pelbagai format, fail demo yang boleh anda gunakan sebagai rujukan, fail .json yang boleh dimuat semula untuk memulihkan projek (contohnya, melihatnya di komputer lain), dan Kursus, terdapat juga ikon pengekodan fail .css.

CSS (anda boleh melihat contoh di bawah) mengandungi peraturan

dan semua pemilih simbol.

@font-face {
    font-family: 'icomoon';
    src:url('fonts/icomoon.eot?-88cxph');
    src:url('fonts/icomoon.eot?#iefix-88cxph') format('embedded-opentype'),
        url('fonts/icomoon.woff?-88cxph') format('woff'),
        url('fonts/icomoon.ttf?-88cxph') format('truetype'),
        url('fonts/icomoon.svg?-88cxph#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}

[class^="myicon-"], [class*=" myicon-"] {
    font-family: 'icomoon';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.myicon-alert:before {
    content: "\e600";
}
.myicon-arrow-down:before {
    content: "";
}

/* etc */

Dapatkan untuk mencubanya!

Saya dapati ini menjadi cara yang sangat cepat untuk membina fon ikon, tetapi ia memerlukan masa untuk mencari aliran kerja yang sempurna dan menguji semua pilihan yang dapat ditawarkan oleh Illustrator dan Icomoon.

Saya doakan anda gembira!

(Berikut adalah bahagian FAQ, yang telah ditulis semula dan diintegrasikan mengikut teks asal dan telah diselaraskan dalam format)

FAQs (FAQ) untuk membuat fon ikon dengan ilustrator dan icomoon

Q: Apakah kelebihan membuat fon ikon dengan icomoon?

A: Icomoon adalah alat yang berkuasa yang membolehkan anda membina dan menguruskan set ikon anda sendiri. Ia menawarkan pelbagai ikon untuk dipilih, dan anda juga boleh mengimport SVG anda sendiri untuk membuat fon ikon tersuai. Kelebihan menggunakan icomoon adalah bahawa ia memudahkan proses membuat fon ikon, yang boleh digunakan dengan mudah oleh pemula walaupun. Ia juga membolehkan anda mengawal saiz, warna, dan sifat CSS yang lain, memberikan kelonggaran yang lebih besar dalam reka bentuk.

Q: Bagaimana untuk mengimport SVG saya sendiri ke Icomoon?

A: Untuk mengimport SVG anda sendiri ke Icomoon, mula -mula pastikan SVG anda dioptimumkan dengan betul. Kemudian, pergi ke aplikasi Icomoon dan klik butang "Ikort Ikor". Di sana anda boleh memilih dan memuat naik fail SVG anda. Sebaik sahaja dimuat naik, ikon anda akan muncul di bahagian "Ikon tersuai anda", bersedia untuk ditambah ke set ikon anda.

Q: Bolehkah saya membuat svgs untuk icomoon menggunakan adobe ilustrator?

A: Ya, anda boleh membuat SVGs untuk icomoon menggunakan Adobe Illustrator. Illustrator adalah editor grafik vektor yang kuat yang membolehkan anda membuat dan mengedit fail SVG. Selepas anda membuat ikon dalam Illustrator, anda boleh mengeksportnya sebagai fail SVG dan kemudian mengimportnya ke Icomoon untuk membuat fon ikon.

Q: Bagaimana untuk mengawal saiz dan warna ikon di Icomoon?

A: Di Icomoon, anda boleh menggunakan CSS untuk mengawal saiz dan warna ikon. Apabila menjana fon ikon, Icomoon menyediakan fail CSS yang mengandungi kelas untuk setiap ikon. Anda boleh mengedit fail CSS ini untuk menukar saiz, warna, dan sifat lain ikon.

Q: Apakah amalan terbaik untuk membuat fon ikon di Icomoon?

A: Apabila membuat fon ikon di Icomoon, pastikan anda menyimpan beberapa amalan terbaik dalam fikiran. Pertama, pastikan SVG dioptimumkan dengan betul sebelum mengimportnya ke Icomoon. Kedua, cuba buat ikon yang ditetapkan sekecil mungkin untuk mengurangkan masa pemuatan laman web. Akhirnya, ingatlah untuk menguji fon ikon anda dalam pelayar yang berbeza untuk memastikan ia muncul dengan betul.

Q: Bolehkah saya membuat fon ikon untuk projek perniagaan menggunakan icomoon?

A: Ya, anda boleh menggunakan Icomoon untuk membuat fon ikon untuk projek perniagaan. Walau bagaimanapun, anda harus tahu bahawa beberapa ikon yang disediakan oleh Icomoon adalah tertakluk kepada sekatan pelesenan. Sentiasa periksa lesen ikon sebelum menggunakannya dalam projek komersial.

Q: Bagaimana untuk menambah fon ikon saya ke laman web saya?

A: Selepas membuat font ikon di Icomoon, anda boleh menambahkannya ke laman web anda dengan memasukkan fail CSS yang disediakan oleh Icomoon di HTML laman web. Anda kemudian boleh menambah ikon ke laman web anda menggunakan kelas yang ditakrifkan dalam fail CSS.

Q: Selepas membuat ikon yang ditetapkan di Icomoon, bolehkah saya mengeditnya?

A: Ya, selepas membuat ikon yang ditetapkan di Icomoon, anda boleh mengeditnya. Untuk melakukan ini, pergi ke bahagian Urus Projek dalam aplikasi Icomoon. Di sana anda boleh memilih projek anda dan membuat sebarang perubahan yang diperlukan pada set ikon.

Q: Bagaimana anda memastikan fon ikon saya dipaparkan dengan betul dalam semua pelayar?

A: Untuk memastikan fon ikon anda dipaparkan dengan betul dalam semua pelayar, pastikan untuk menguji mereka dalam pelayar yang berbeza semasa pembangunan. Di samping itu, ICOMOON akan menyediakan fail CSS ICON FONT dengan pembetulan keserasian penyemak imbas yang diperlukan.

Q: Apa yang harus saya lakukan jika saya menghadapi masalah membuat fon ikon di Icomoon?

A: Jika anda mempunyai masalah untuk membuat fon ikon di Icomoon, anda boleh merujuk kepada dokumentasi Icomoon atau hubungi pasukan sokongan Icomoon untuk mendapatkan bantuan. Di samping itu, terdapat banyak komuniti dan forum dalam talian di mana anda boleh mendapatkan bantuan dan nasihat.

Atas ialah kandungan terperinci Buat fon ikon menggunakan Illustrator & Icomoon. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!