Cara Membuat Ikon Webfont Anda Sendiri – Dalam artikel ini, saya akan memeriksa ilmu di balik pembuatan ikon UI yang sukses sebelum mengajari Anda cara membuat font ikon yang dapat disematkan sendiri.
Cara Membuat Ikon Webfont Anda Sendiri
monofonts – Dari mendesain ikon individu hingga mengonversinya untuk font face disematkan, dan bahkan melisensikannya untuk distribusi, kami hanya akan menggunakan perangkat lunak gratis dan layanan online. Bagaimana tentang itu? Anda tidak perlu bergantung pada pengetahuan esoterik yang diperlukan untuk membuat tipografi alfanumerik yang sukses; hanya mata untuk merancang hal-hal yang mungkin tampak sangat, sangat kecil.
Pada akhirnya, Anda harus pergi dengan proses untuk membuat elemen desain yang jauh melampaui pembuatan ikon sederhana.
Sebelum kita melanjutkan, sesuatu harus dikatakan tentang apa yang sebenarnya kita coba achievedengan menggunakan ikon dalam desain kita sejak awal, dan apa yang membuat satu ikon lebih sukses daripada yang berikutnya. Teori sebelum aplikasi. Untuk melakukan ini, kita harus mempertimbangkan peran ikon sebagai bagian dari semiologi.
Baca Juga : 8 Tip Tipografi Untuk Desainer: Cara Membuat Font Berbicara
Apa yang Membuat Ikon Bagus?
Semiologi, dalam arti luas, adalah studi tentang sistem tanda, bagaimana kita berkontribusi pada pembentukan dan pemeliharaannya, dan dampaknya terhadap pemahaman kita tentang dunia di dalam dan di luar kita.
Kapan pun Anda mempertimbangkan bagian dari karya desain Anda dari perspektif maknanya apa yang dikatakannya kepada audiens Anda atau konsep apa yang diingatnya untuk mereka, Anda sedang mempertimbangkan desain Anda sebagai ahli semiotika. Meskipun semiologi, seperti linguistik, mencakup bahasa, ada lebih banyak hal di situs web yang “mengatakan” sesuatu tanpa kata-kata, seperti warna, tipografi, dan bentuk yang kita sebut ikon. Kita harus waspada bahwa apa yang dikatakan hal-hal ini memiliki dimensi budaya yang kuat. Di Cina, warna merah dapat menandakan keberuntungan sedangkan, di banyak negara Barat, digunakan untuk menunjukkan bahaya.
Istilah “ikon” memiliki arti khusus dalam bidang semiologi. Ikon adalah artefak yang menandakan sesuatu dengan menyerupai itu. Ambil, misalnya, ikon pin peta. Sebagai bentuk yang menyerupai pin peta “nyata”, ia dapat menandakannya. Pada gilirannya, pin peta yang sebenarnya mengingatkan segala macam konsep yang bermakna. Di antaranya adalah konsep abstrak seperti lokasi serta konsep yang kurang abstrak, seperti peta tempat pin mungkin berada.
Beberapa yang disebut ikon tidak benar-benar ikonik. Ikon RSS di mana-mana, dengan titik dan dua segmen lingkaran konsentris, tidak lebih menyerupai sindikasi daripada kata-kata “Sindikasi Sangat Sederhana” yang menyerupai itu. Konfigurasi bentuk yang membentuk ikon RSS menandakan RSS berdasarkan konvensi saja; kami telah sepakat bahwa ini adalah tujuan mereka. Ikon RSS lebih tepat disebut simbol RSS.
Sekarang, saya harap kita telah menetapkan bahwa ikon web yang sukses harus memenuhi salah satu atau kedua dari dua kriteria berikut:
Kemiripan yang kuat dengan hal yang nyata, misalnya ikon cetak yang menyerupai printer yang sebenarnya
Pembentukan dan, oleh karena itu, keakraban sebagai simbol yang dapat dikenali dalam sistem tanda
Font Ikon mendapatkan Popularitas
Ikon telah lama dianggap sebagai cara yang baik untuk menyempurnakan desain UI karena ikon menyediakan steno visual yang membantu pemahaman pesan tekstual murni. Lembaran gambar ikon diedarkan ke seluruh komunitas desain web seperti selundupan, setiap set menjanjikan untuk membuat desain Anda lebih bersinar, lebih menarik, dan lebih dapat diklik daripada yang terakhir.
Dibandingkan dengan gambar, ide menggunakan font yang disematkan untuk ikon adalah ide yang relatif baru. Namun, ini adalah salah satu yang mendapatkan daya tarik yang cukup besar karena banyak keunggulan yang melekat pada metode gambar atau background image. Saya menulis tentang beberapa keuntungan ini di blog kecil saya pada awal September. Chris Coyier jelas memiliki ide yang sama, memperkenalkan ide tersebut ke audiens yang lebih besar beberapa minggu kemudian. Menggambar pada dua posting dan lainnya, saya telah menyusun daftar fitur lengkap ini:
- Mereka mudah diubah ukurannya tanpa degradasi karena pada dasarnya adalah vektor
- Mewarnai ulang ikon sama sepelenya dengan mewarnai ulang teks. Misalnya, color: orangeuntuk ikon RSS
- Banyak ikon dikelompokkan ke dalam satu file, hanya memerlukan satu permintaan http
- Seperti yang ditunjukkan Chris, mereka adalah bentuk yang memiliki “KO” transparan yang berfungsi di browser sedini IE6 tidak seperti alfa PNG
- Untuk ikon yang seharusnya muncul berdekatan dengan teks, perataan dan pembungkusan tidak menjadi masalah karena itu adalah teks
- Anda dapat menerapkan efek CSS3 melalui text shadowdan background clip:textyang menghormati bentuk mesin terbang
- Tidak seperti SVG, dukungan lintas browser mudah dicapai
Membuat Ikon yang lebih Kompleks
Anda sekarang telah membuat mesin terbang font SVG skalabel pertama Anda. Dengan menggunakan opsi dari panel Fill and Stroke, mengedit node jalur dan menggabungkan objek dan goresan, Anda akan dapat membuat desain ikon yang jauh lebih ambisius. Saya tidak ingin masuk ke tutorial Inkscape lengkap karena kami memiliki lebih banyak untuk dibahas, tetapi mengikuti aturan sederhana ini akan membantu Anda:
- Tetap gunakan goresan hitam dan isian, jika hanya untuk mengingatkan Anda bahwa ikon hanyalah bentuk, bukan grafik vektor yang rumit. Mewarnai ikon dimungkinkan dalam produk akhir menggunakan CSS.
- Semua objek dan goresan garis harus dikonversi ke jalur menggunakan PATH OBJECT TO PATH atau PATH STROKE TO PATH
- Beberapa objek atau goresan yang digunakan untuk membentuk satu ikon glyph harus digabungkan bersama menggunakan PATH
- Untuk memotong bentuk dari bentuk seperti menggunakan pemotong kue tempatkan bentuk yang akan membuat “KO” di atas bentuk utama, pilih keduanya dan pilih PATH ? DIFFERENCE. Area putih di atas hitam yang terlihat seperti “KO” tidak akan cukup, karena Anda akan menemukan saat Anda menekan Dapatkan kurva dari pilihan Lihat aturan 1.
Mendistribusikan Font Anda
Jika Anda tertarik untuk merilis font Anda, itu dianggap praktik yang baik untuk memberikan lisensi. Banyak situs web font tidak akan membawa font Anda tanpanya. Karena kami menggunakan perangkat lunak open source gratis untuk membuat ikon, sudah sepantasnya kami mendistribusikannya seperti itu.
Ada banyak opsi lisensi yang tersedia dan menyelidikinya terkadang membingungkan. Lisensi Publik Umum GNU sangat dapat diterima, tetapi Anda mungkin ingin mempertimbangkan Lisensi Font Terbuka SIL. Keuntungan utama dengan lisensi ini adalah penyediaan nama font yang dicadangkan : Desainer lain diizinkan untuk memodifikasi font Anda, asalkan mereka menamainya secara berbeda. Dalam praktiknya, ini berarti bahwa kejahatan terhadap desain ikon tidak dapat dilakukan “atas nama Anda”.
Dalam hal lisensi mana pun, Anda harus menyertakan versi dalam file teks, serta memasukkan pemberitahuan hak cipta dan tautan ke URL lisensi lengkap di meta font.
Akhir dari Spriting CSS
Mengapa berhenti membuat ikon generik menggunakan font SVG? Dengan kemampuan membuat ikon, hadir pula kemampuan untuk membuat bentuk, elemen pencitraan merek, dan dekorasi yang lebih spesifik untuk situs. Seperti sprite CSS, semua elemen visual ini dapat disimpan dalam satu file, mengurangi panggilan server menjadi permintaan http tunggal. Tidak seperti sprite CSS, elemen keduanya dapat diubah ukurannya dan tidak bergantung pada koordinat posisi background position nilai untuk ditampilkan dengan benar. Hal ini membuat mereka sangat cocok untuk desain responsif.
Webfont Ikon Kolaboratif
Seperti yang ditunjukkan oleh mentor JavaScript saya, Rupert kepada saya tempo hari, menggunakan font SVG untuk membuat kumpulan ikon menawarkan peluang yang menarik untuk berkolaborasi. Anda lihat, kode SVG yang merupakan bentuk XML sangat terstandarisasi dan mudah dibaca manusia. Ini adalah jenis kode sumber yang cocok untuk pengembangan menggunakan layanan “pengkodean sosial” seperti GitHub.
Gagasan itu bergema dengan saya karena implikasi semiotiknya: Jika keterjangkauan ikon ditentukan oleh konsensus, maka tentu konsensus juga harus berperan dalam pembentukannya. Dengan berkolaborasi dalam “sistem tanda” ikon kami, hanya desain ikon paling pola dasar yang akan muncul. Kita harus bisa membuat kosakata ikon yang benar-benar milik komunitas yang seharusnya memiliki arti.
Saya telah membuat repositori GitHub publik untuk membantu mengembangkan ide ini. Disebut Font Ikon Komunitas, basis kode repositori tidak rumit: Pemeriksaan dekat dari tutorial Inkscape sebelumnya dan membaca cepat halaman proyek akan memberi Anda semua yang Anda butuhkan untuk terlibat. Jika Anda baru mengenal GitHub, coba lihat halaman bantuan mereka atau tanyakan teknisi lingkungan Anda.
