Inkscape와 Fontastic.me를 사용하여 나만의 글꼴 만들기

이 튜토리얼에서는 Inkscape와 fontastic.me를 사용하여 자신의 필기체 글꼴을 만드는 방법을 보여 드리겠습니다.

Inkscape 는 Windows, OS X 및 Linux에서 사용할 수있는 무료 오픈 소스 벡터 선 그리기 응용 프로그램입니다. Fontastic.me는 다양한 아이콘 글꼴을 제공하는 웹 사이트이지만 자신의 SVG 그래픽을 업로드하고 무료로 글꼴로 변환 할 수도 있습니다.

신중하게 만들어진 글자 커닝으로 다양한 크기로 효과적으로 작동하는 글꼴을 디자인하는 동안 수년간 연마 할 수있는 기술입니다.이 글꼴은 빠르고 독특한 프로젝트로 재미있는 글꼴을 제공합니다. fontastic.me의 주요 목표는 웹 사이트 용 아이콘 글꼴을 만드는 것이지만 표제 또는 소량의 텍스트를 생성하는 데 사용할 수있는 글자 글꼴을 만들 수 있습니다.

이 튜토리얼의 목적을 위해 필자는 서면으로 작성된 글자의 사진을 추적 할 것이지만이 기술을 쉽게 적용하고 Inkscape에서 직접 글자를 그릴 수 있습니다. 이는 드로잉 태블릿 을 사용하는 사람들에게 특히 효과적 일 수 있습니다.

다음 페이지에서 우리는 우리 자신의 글꼴을 만드는 것으로 시작할 것입니다.

01 / 05

귀하가 작성한 서체의 사진 가져 오기

텍스트 및 이미지 © Ian Pullen

따라하기를 원한다면 그려진 글자의 사진이 필요하며, 직접 만들고 싶지 않다면 대문자 AZ를 포함하는 a-doodle-z.jpg를 다운로드하여 사용할 수 있습니다.

자신 만의 사진을 만들려면 짙은 색 잉크와 흰색 종이를 사용하여 대비가 강하고 완성 된 문자를 좋은 빛으로 찍으십시오. 또한 'O'와 같이 글자의 닫힌 공백을 피하십시오. 그러면 추적 문자를 준비 할 때 삶이 더 복잡해집니다.

사진을 가져 오려면 파일> 가져 오기로 이동 한 다음 사진을 탐색하고 열기 버튼을 클릭하십시오. 다음 대화 상자에서 Embed 옵션을 사용하는 것이 좋습니다.

이미지 파일이 매우 큰 경우보기> 확대 / 축소 하위 메뉴의 옵션을 사용하여 축소 한 다음 한 번 클릭하여 각 모서리에 화살표 핸들을 표시하여 다시 크기를 조정할 수 있습니다. Ctrl 또는 Command 키를 누른 상태에서 핸들을 클릭하여 드래그하면 원래 비율이 유지됩니다.

다음으로 벡터 선 문자를 만들기 위해 이미지를 추적합니다.

02 of 02

벡터 라인 문자를 만들기 위해 사진 추적

텍스트 및 이미지 © Ian Pullen

이전 에 Inkscape에서 비트 맵 그래픽을 추적 하는 방법을 설명했지만이 과정을 여기서 다시 신속하게 설명합니다.

사진이 선택되었는지 확인하려면 경로> 비트 맵 추적으로 이동하여 비트 맵 추적 대화 상자를 엽니 다. 필자의 경우 모든 설정을 기본값으로두고 좋은 결과를 얻을 수있었습니다. 추적 설정을 조정해야 할 수도 있지만 더 밝은 조명으로 사진을 다시 촬영하면 더 강한 대조를 통해 이미지를 더 쉽게 만들 수 있습니다.

스크린 샷에서 내가 원래 사진에서 끌어 낸 추적 문자를 볼 수 있습니다. 추적이 완료되면 문자가 사진 위에 직접 배치되므로 매우 분명하지 않을 수 있습니다. 계속 진행하기 전에 비트 맵 추적 대화 상자를 닫고 사진을 클릭하여 선택하고 키보드의 Delete 키를 클릭하여 문서에서 제거 할 수 있습니다.

03 of 05

추적을 개별 문자로 분할하십시오.

텍스트 및 이미지 © Ian Pullen

이 시점에서 모든 문자가 함께 결합되므로 개별 문자로 분할하려면 경로> 나누기로 이동하십시오. 두 개 이상의 요소로 구성된 문자가있는 경우이 요소는 별도의 요소로 분할됩니다. 필자의 경우 모든 편지에 적용되므로이 단계에서 각 편지를한데 모으는 것이 좋습니다.

이렇게하려면 글자를 둘러싼 선택 윤곽을 클릭 한 다음 오브젝트> 그룹으로 이동하거나 키보드에 따라 Ctrl + G 또는 Command + G를 누르십시오.

분명히, 하나 이상의 요소를 포함하는 글자로 이것을 할 필요가 있습니다.

편지 파일을 만들기 전에 문서의 크기를 적당한 크기로 바꿉니다.

04 / 05

문서 크기 설정

텍스트 및 이미지 © Ian Pullen

문서를 적절한 크기로 설정해야하므로 파일> 문서 속성으로 이동하고 대화 상자에서 필요에 따라 너비와 높이를 설정하십시오. 나는 500px로 500px로 광산을 설정했는데, 궁극적으로 각 문자에 대해 너비를 다르게 설정하여 최종 문자가 더 깔끔하게 정리되도록합니다.

다음으로 fontastic.me에 업로드 할 SVG 글자를 만듭니다.

05/05

각 문자에 대해 개별 SVG 파일 만들기

텍스트 및 이미지 © Ian Pullen

Fontastic.me는 각 문자를 별도의 SVG 파일로 요구하므로 입력하기 전에 이것을 생성해야합니다.

모든 글자를 페이지 가장자리 밖으로 드래그하십시오. Fontastic.me는 페이지 영역 밖에있는 요소를 무시하므로 여기에이 문자를 아무 문제없이 주차 할 수 있습니다.

이제 첫 번째 문자를 페이지로 드래그하고 모서리에있는 드래그 핸들을 사용하여 필요에 따라 크기를 조정하십시오.

그런 다음 파일> 다른 이름으로 저장으로 이동하여 파일에 의미있는 이름을 지정하십시오. 나는 a.svg라고 불렀다. 파일의 확장자가 .svg인지 확인했다.

이제 첫 번째 문자를 이동하거나 삭제 한 다음 두 번째 문자를 페이지에 놓고 파일> 다른 이름으로 저장으로 다시 이동할 수 있습니다. 각 편지에 대해이 작업을 수행해야합니다. 내게보다 인내심이 있다면 각 글자를 더 잘 매치 할 수 있도록 페이지의 너비를 조정할 수 있습니다.

마지막으로, 공백 문자를 확실히 원하지만 구두점을 만드는 것을 고려할 수도 있습니다. 공백은 빈 페이지 만 저장하십시오. 또한 대문자와 소문자를 원한다면이 모든 것을 저장해야합니다.

이제 fontastic.me를 방문하여 글꼴을 만들 수 있습니다. 이 사이트를 사용하여 글꼴을 만드는 방법을 설명하는 첨부 기사에서이 프로세스에 대해 설명했습니다. Fontastic.me를 사용하여 글꼴 만들기