Buat Font Anda Sendiri Menggunakan Inkscape dan Fontastic.me

Dalam tutorial ini, saya akan menunjukkan kepada anda bagaimana anda boleh membuat fon tulisan tangan anda sendiri menggunakan Inkscape dan fontastic.me.

Jika anda tidak kenal dengan ini, Inkscape adalah aplikasi lukisan garis vektor sumber percuma dan terbuka yang tersedia untuk Windows, OS X dan Linux. Fontastic.me adalah laman web yang menawarkan pelbagai font ikon, tetapi juga membolehkan anda memuat naik grafik SVG anda sendiri dan menukarnya ke font secara percuma.

Semasa merancang fon yang akan berfungsi dengan berkesan pada pelbagai saiz dengan kerning surat yang dibuat dengan teliti adalah kemahiran yang dapat bertahun-tahun untuk mengasah, ini adalah projek yang cepat dan menyenangkan yang akan memberi anda fon yang unik. Tujuan utama fontastic.me adalah untuk menghasilkan fon ikon untuk laman web, tetapi anda boleh membuat font huruf yang dapat anda gunakan untuk menghasilkan tajuk atau teks kecil.

Untuk tujuan tutorial ini, saya akan mengesan gambar beberapa huruf bertulis, tetapi anda boleh dengan mudah menyesuaikan teknik ini dan menarik huruf anda secara langsung di Inkscape. Ini mungkin berfungsi dengan baik bagi mereka yang menggunakan lukisan tablet .

Pada halaman seterusnya, kami akan bermula dengan membuat font kami sendiri.

01 dari 05

Import Gambar Font Ditulis Anda

Teks dan imej © Ian Pullen

Anda memerlukan gambar beberapa huruf yang disediakan jika anda mahu mengikuti dan jika anda tidak mahu membuat sendiri, anda boleh memuat turun dan menggunakan a-doodle-z.jpg yang mengandungi huruf besar AZ.

Sekiranya anda membuat sendiri, gunakan dakwat warna gelap dan kertas putih untuk kontras yang kuat dan gambarkan huruf yang lengkap dengan cahaya yang baik. Juga, cuba dan elakkan mana-mana ruang tertutup dalam huruf, seperti 'O' kerana ini akan menjadikan kehidupan lebih rumit apabila menyiapkan huruf yang dilacak.

Untuk mengimport foto, pergi ke Fail> Import dan kemudian navigasi ke foto dan klik butang Buka. Dalam dialog seterusnya, saya menasihati bahawa anda menggunakan pilihan Embed.

Sekiranya fail imej sangat besar, anda boleh zum dengan menggunakan pilihan dalam sub-menu Lihat> Zoom dan kemudian saiz semula dengan mengklik sekali padanya untuk memaparkan penanganan anak panah di setiap sudut. Klik dan seret pemegang, sambil memegang kekunci Ctrl atau Command dan ia akan menyimpan bahagian asalnya.

Seterusnya kita akan mengesan imej untuk membuat huruf garisan vektor.

02 dari 05

Melacak Foto untuk Membuat Surat Talian Vektor

Teks dan imej © Ian Pullen

Saya telah sebelum ini menerangkan grafik bitmap dalam Inkscape , tetapi akan menerangkan dengan cepat proses ini di sini lagi.

Klik pada foto untuk memastikan ia dipilih dan kemudian pergi ke Path> Trace Bitmap untuk membuka dialog Trace Bitmap. Dalam kes saya, saya meninggalkan semua tetapan pada lalai mereka dan menghasilkan hasil yang baik dan bersih. Anda mungkin perlu melaraskan tetapan jejak, tetapi anda mungkin mendapati lebih mudah untuk menangkap foto anda sekali lagi dengan pencahayaan yang lebih baik untuk menghasilkan imej dengan kontras yang lebih kuat.

Dalam pukulan skrin, anda dapat melihat huruf yang dilacak yang saya seret dari foto asal. Apabila pengesanan selesai, huruf akan diletakkan terus ke atas gambar, jadi mereka mungkin tidak begitu jelas. Sebelum beralih, anda boleh menutup dialog Bitmap Trace dan juga klik pada foto untuk memilihnya dan klik kekunci Padam pada papan kekunci anda untuk mengeluarkannya dari dokumen.

03 dari 05

Pecahkan Penjejakan ke dalam Surat Individu

Teks dan imej © Ian Pullen

Pada ketika ini, semua huruf disatukan, maka pergi ke Path> Break Apart untuk memecahnya menjadi huruf individu. Perhatikan bahawa jika anda mempunyai huruf yang terdiri daripada lebih daripada satu elemen, ini juga akan dibahagikan kepada elemen yang berasingan. Dalam kes saya, ini terpakai untuk setiap surat, jadi masuk akal untuk mengelompokkan setiap surat bersama pada tahap ini.

Untuk melakukan ini, cukup klik dan seret tetikus pilihan sekitar huruf dan kemudian pergi ke Objek> Kumpulan atau Tekan Ctrl + G atau Command + G bergantung pada papan kekunci anda.

Jelas sekali, anda hanya perlu melakukan ini dengan huruf yang mengandungi lebih daripada satu elemen.

Sebelum membuat fail surat, kami akan menyusun semula dokumen itu ke saiz yang sesuai.

04 dari 05

Tetapkan Saiz Dokumen

Teks dan imej © Ian Pullen

Kita perlu menetapkan dokumen ke saiz yang sesuai, jadi pergi ke Fail> Properties Dokumen dan dalam dialog, tetapkan Lebar dan Ketinggian yang diperlukan. Saya menetapkan tambang hingga 500px dengan 500px, walaupun idealnya anda akan menetapkan lebar secara berbeza untuk setiap huruf supaya huruf akhir sesuai dengan lebih kemas.

Seterusnya, kami akan membuat huruf SVG yang akan dimuat naik ke fontastic.me.

05 dari 05

Buat Fail SVG Individu untuk Setiap Surat

Teks dan imej © Ian Pullen

Fontastic.me memerlukan setiap huruf untuk menjadi fail SVG yang berasingan, jadi kami perlu menghasilkannya sebelum menekan.

Seret semua huruf anda supaya ia berada di luar tepi halaman. Fontastic.me mengabaikan sebarang elemen yang berada di luar kawasan halaman, jadi kami boleh meninggalkan surat-surat yang diletakkan di sini tanpa sebarang masalah.

Sekarang seret huruf pertama ke dalam halaman dan gunakan pemegang seret di sudut untuk saiz semula seperti yang diperlukan.

Kemudian pergi ke Fail> Simpan As dan beri nama fail yang bermakna. Saya panggil tambang a.svg - pastikan bahawa fail mempunyai akhiran .svg.

Anda kini boleh memindahkan atau memadam huruf pertama dan meletakkan huruf kedua ke halaman dan pergi lagi ke File> Save As. Anda perlu melakukan ini untuk setiap huruf. Sekiranya anda mempunyai kesabaran lebih banyak daripada saya, anda boleh melaraskan lebar halaman ketika anda pergi untuk menyesuaikan dengan lebih baik setiap huruf.

Akhirnya, anda mungkin ingin mempertimbangkan untuk menghasilkan tanda baca, walaupun anda pasti akan memerlukan watak ruang. Untuk ruang, simpan laman kosong sahaja. Juga, jika anda mahukan huruf besar dan huruf kecil, anda perlu menyimpan semua ini juga.

Sekarang anda boleh melawat fontastic.me dan buat font anda. Saya telah menjelaskan sedikit mengenai proses ini dalam artikel yang mengiringi yang menerangkan cara menggunakan laman web itu untuk membuat font anda: Buat Font Menggunakan Fontastic.me