Създайте свои собствени шрифтове, като използвате Inkscape и Fontastic.me

В този урок ще ви покажа как можете да създадете свои собствени шрифтове с помощта на Inkscape и fontastic.me.

Ако не сте запознати с тях, Inkscape е безплатна и отворена програма за извличане на векторни линии, която е достъпна за Windows, OS X и Linux. Fontastic.me е уеб сайт, който предлага разнообразие от шрифтове за икони, но също така ви позволява да качвате свои SVG графики и да ги конвертирате в шрифт безплатно.

Докато проектирате шрифт, който ще работи ефективно на различни размери, с внимателно изработено писмено оформяне е умение, което може да отнеме години, за да усъвършенствате, това е бърз и забавен проект, който ще ви даде уникален шрифт. Главната цел на fontastic.me е да създава икона за шрифтове за уеб сайтове, но можете да създадете шрифт от букви, които бихте могли да използвате, за да създадете заглавия или малки количества текст.

За целите на този урок, ще проследя снимка на някои писмени писма, но лесно можете да адаптирате тази техника и да рисувате писмата си директно в Inkscape. Това може да работи особено добре за тези, които използват таблетки за рисуване .

На следващата страница ще започнем да създаваме собствен шрифт.

01 от 05

Импортирайте снимка на вашия писмен шрифт

Текст и изображения © Ian Pullen

Ще ви е необходима снимка на някои изтеглени букви, ако искате да ги следвате и ако не искате да направите свой собствен, можете да изтеглите и използвате a-doodle-z.jpg, който съдържа главните букви AZ.

Ако искате да създадете свой собствен, използвайте тъмно цветно мастило и бяла хартия за силен контраст и фотографирайте завършените букви в добра светлина. Също така, опитайте да избегнете затворени интервали с букви, като "O", тъй като това ще направи живота по-сложен при подготовката на проследените ви писма.

За да импортирате снимката, отворете Файл> Импортиране, след което отидете до снимката и кликнете върху бутона Отвори. В следващия диалог препоръчвам да използвате опцията Вграждане.

Ако файлът с изображения е много голям, можете да намалите мащаба, като използвате опциите в подменюто Изглед> Увеличение и след това го променете отново, като кликнете веднъж върху него, за да покажете дръжките на стрелките във всеки ъгъл. Кликнете и изтеглете дръжката, като задържите клавиша Ctrl или Command и ще запазите оригиналните си размери.

След това ще проследим изображението, за да създадем векторни линейни букви.

02 от 05

Проследяване на снимката за създаване на векторни линии

Текст и изображения © Ian Pullen

По-рано описах bitmap графики в Inkscape , но скоро ще опиша процеса отново тук.

Кликнете върху снимката, за да се уверите, че е избрана, и след това отидете в Path> Trace Bitmap, за да отворите диалоговия прозорец Trace Bitmap. В моя случай оставих всички настройки по подразбиране и имаше добър, чист резултат. Може да се наложи да настроите настройките за следене, но може да ви е по-лесно да направите снимката отново с по-добро осветление, за да създадете изображение с по-силен контраст.

При заснемането на екрана можете да видите проследените букви, които съм изтеглил от оригиналната снимка. Когато проследяването приключи, буквите ще бъдат поставени директно върху снимката, така че може да не са много очевидни. Преди да продължите, можете да затворите диалоговия прозорец за проследяване на Bitmap и да кликнете върху снимката, за да го изберете, и да кликнете върху клавиша Изтриване на клавиатурата, за да го премахнете от документа.

03 от 05

Разделете проследяването в отделни букви

Текст и изображения © Ian Pullen

В този момент всички букви се обединяват, така че отидете на Path> Break Apart, за да ги разделите на отделни букви. Имайте предвид, че ако имате писма, които са съставени от повече от един елемент, те също ще бъдат разделени на отделни елементи. В моя случай това важи за всяко писмо, така че има смисъл да групирате всяко писмо заедно на този етап.

За да направите това, трябва само да кликнете и плъзнете маркировка за избор около буква и след това да отидете на Object> Group или Ctrl + G или Command + G в зависимост от вашата клавиатура.

Очевидно е, че трябва да направите това само с букви, които съдържат повече от един елемент.

Преди да създадем файловете с букви, ще пренастроим документа до подходящ размер.

04 от 05

Задайте размера на документа

Текст и изображения © Ian Pullen

Трябва да зададем документа на подходящ размер, така че отидете на File> Document Properties и в диалоговия прозорец, задайте Width and Height според нуждите. Зададох моя до 500px на 500px, макар че в идеалния случай бихте определили ширината по различен начин за всяка буква, така че последните букви да се поберат заедно по-добре.

След това ще създадем буквите SVG, които ще бъдат качени в fontastic.me.

05 от 05

Създайте отделни файлове във формат SVG за всяко писмо

Текст и изображения © Ian Pullen

Fontastic.me изисква всяка буква да бъде отделен SVG файл, така че ще трябва да ги произведем, преди да ги натиснем.

Преместете всичките си букви, така че те да са извън ръбовете на страницата. Fontastic.me игнорира всички елементи, които са извън областта на страницата, така че можем да оставим тези писма паркирани тук без проблеми.

Сега плъзнете първата буква в страницата и използвайте дръжките за плъзгане в ъгъла, за да я промените отново, ако е необходимо.

След това отидете на File> Save As и дадете на файла смислено име. Обадих се на моя a.svg - уверете се, че файлът има приставката .svg.

Вече можете да преместите или изтриете първата буква и да поставите втората буква върху страницата и отново да отидете на File> Save As. Трябва да направите това за всяко писмо. Ако имате повече търпение от мен, можете да коригирате ширината на страницата, докато вървите, за да съответства по-добре на всяка буква.

И накрая, може да искате да обмислите създаването на пунктуация, въпреки че определено ще искате пространство. За място просто запишете празна страница. Също така, ако искате малки и малки букви, трябва да запазите и всички тези.

Сега можете да посетите fontash.bg и да създадете своя шрифт. Обясних малко за този процес в придружаващата го статия, която обяснява как да използвате този сайт, за да направите своя шрифт: Създаване на шрифт с помощта на Fontastic.me