Podczas projektowania czcionek, które będą działać skutecznie w różnych rozmiarach dzięki starannie przygotowanemu kerningowi literowemu, umiejętność, która może trwać latami, to szybki i zabawny projekt pokaże Ci, jak możesz tworzyć własne czcionki pisma ręcznego za pomocą Inkscape i fontastic.me, podając masz własną unikalną czcionkę. Głównym celem fontastic.me jest tworzenie czcionek ikon dla witryn internetowych, ale można utworzyć czcionkę liter, której można użyć do tworzenia nagłówków lub niewielkich ilości tekstu.
Jeśli nie jesteś obeznany z tym, Inkscape to darmowa i otwarta aplikacja do rysowania linii wektorowej dostępna dla systemów Windows, OS X i Linux. Fontastic.me to strona internetowa oferująca wiele czcionek ikon, ale również pozwala przesłać własną grafikę SVG i przekonwertować je na czcionkę za darmo.
Na potrzeby tego samouczka prześledzimy zdjęcie niektórych napisanych liter, ale możesz łatwo zaadaptować tę technikę i narysować litery bezpośrednio w Inkscape. Może to działać szczególnie dobrze dla tych, którzy używają tabletów rysunkowych.
Zaimportuj zdjęcie swojej czcionki pisanej
Będziesz potrzebował zdjęcia niektórych narysowanych liter, jeśli chcesz je śledzić, a jeśli nie chcesz tworzyć własnych, możesz pobrać i użyć pliku a-doodle-z.jpg, który zawiera wielkie litery A-Z.
Jeśli masz zamiar stworzyć własną, użyj ciemnego atramentu i białego papieru dla silnego kontrastu i sfotografuj ukończone litery w dobrym świetle. Spróbuj także unikać zamkniętych spacji w literach, takich jak "O", ponieważ spowoduje to, że życie będzie bardziej skomplikowane podczas przygotowywania odrysowanych liter.
Aby zaimportować zdjęcie, przejdź do Plik> Importuj, a następnie przejdź do zdjęcia i kliknij przycisk Otwórz. W następnym oknie dialogowym zaleca się użycie opcji Osadź.
Jeśli plik obrazu jest bardzo duży, możesz go pomniejszyć, korzystając z opcji w podmenu Widok> Powiększenie, a następnie zmień jego rozmiar, klikając go, aby wyświetlić strzałki w rogach. Kliknij i przeciągnij uchwyt, przytrzymując klawisz Ctrl lub Command i zachowa swoje oryginalne proporcje.
Następnie prześledzimy obraz, aby utworzyć wektorowe liniowe litery.
02 z 05Śledź zdjęcie, aby utworzyć listy linii wektorowych
Przed rozpoczęciem warto przejrzeć proces śledzenia grafiki bitmapowej.
Kliknij zdjęcie, aby upewnić się, że jest zaznaczone, a następnie przejdź do Ścieżka> Mapa bitowa śladu, aby otworzyć okno dialogowe Trace Bitmap. Tutaj pozostawiliśmy wszystkie ustawienia domyślne i uzyskaliśmy dobry, czysty wynik. Może być konieczne dostosowanie ustawień śledzenia, ale może być łatwiejsze zrobienie zdjęcia z jeszcze lepszym oświetleniem w celu uzyskania obrazu o silniejszym kontraście.
Na zrzucie ekranu widać wyśledzone litery, które odłączyliśmy od oryginalnego zdjęcia. Po zakończeniu śledzenia litery zostaną umieszczone bezpośrednio nad zdjęciem, więc mogą nie być zbyt oczywiste. Przed przejściem dalej możesz zamknąć okno dialogowe Trace Bitmap, a także kliknąć zdjęcie, aby je zaznaczyć i kliknąć przycisk Delete na klawiaturze, aby usunąć go z dokumentu.
03 z 05Podziel śledzenie na pojedyncze listy
W tym miejscu wszystkie litery są ze sobą połączone, więc przejdź do opcji Ścieżka> Rozłącz, aby podzielić je na pojedyncze litery. Zauważ, że jeśli masz litery składające się z więcej niż jednego elementu, zostaną one również podzielone na osobne elementy. W przypadku naszego przykładu odnosi się to do każdej litery, więc warto zgrupować każdą literę na tym etapie.
Aby to zrobić, po prostu kliknij i przeciągnij ramkę zaznaczenia wokół litery, a następnie przejdź do Object> Group lub naciśnij Ctrl + G lub Command + G w zależności od klawiatury.
Oczywiście, musisz to zrobić tylko z literami zawierającymi więcej niż jeden element. Przed utworzeniem plików z literą, dostosujemy rozmiar dokumentu do odpowiedniego rozmiaru.
04 z 05Ustaw rozmiar dokumentu
Musisz ustawić dokument na odpowiedni rozmiar, przejdź do Plik> Właściwości dokumentu iw oknie dialogowym ustaw odpowiednio szerokość i wysokość. Ustawiliśmy nasze na 500px na 500px, ale najlepiej byłoby ustawić szerokość inaczej dla każdej litery, aby końcowe litery pasowały do siebie bardziej starannie.
Następnie utworzymy litery SVG, które zostaną przesłane do fontastic.me.
05 z 05Twórz pojedyncze pliki SVG dla każdej litery
Fontastic.me wymaga, aby każda litera była oddzielnym plikiem SVG, więc musisz je utworzyć przed naciśnięciem.
Przeciągnij wszystkie litery tak, aby znajdowały się poza krawędziami strony. Fontastic.me ignoruje wszystkie elementy znajdujące się poza obszarem strony, więc możesz pozostawić te litery zaparkowane tutaj bez żadnych problemów.
Teraz przeciągnij pierwszą literę na stronę i użyj uchwytów przeciągania w rogu, aby zmienić jej rozmiar w razie potrzeby.
Następnie przejdź do Plik> Zapisz jako i nadaj plikowi sensowną nazwę. Nazwaliśmy mój a.svg - upewnij się, że plik ma sufiks .svg.
Możesz teraz przenieść lub usunąć pierwszą literę i umieścić drugą literę na stronie, a następnie ponownie wybrać Plik> Zapisz jako. Musisz to zrobić dla każdej litery. Jeśli jesteś cierpliwy, możesz dostosować szerokość strony, aby lepiej dopasować każdą literę.
Na koniec możesz rozważyć tworzenie znaków interpunkcyjnych, ale na pewno chcesz mieć znak spacji. W przypadku spacji zapisz pustą stronę. Ponadto, jeśli chcesz mieć wielkie i małe litery, musisz je również zapisać.
Teraz możesz odwiedzić stronę fontastic.me i utworzyć swoją czcionkę. Możesz dowiedzieć się trochę o tym procesie w towarzyszącym artykule wyjaśniającym, jak używać fontastic.me do tworzenia czcionki.
