사용자 정의 글꼴을 만드는 방법: 7단계 및 3가지 사례 연구

현실을 직시하자; 우리 디자이너들이 싫어하는 서체가 있습니다. 사실 '혐오'라는 단어는 그다지 강력하지 않을 수 있습니다. 채찍? 저주? 역병? 배설물? 나는 각각 우리가 아이디어를 전달하는 데 사용하는 무생물 문자, 숫자 및 기호를 모욕하는 것을 들었고 완전히 이해합니다. 나는 가장 기이한 사무실 게시판조차 창피할 정도로 나쁜 유형 범죄를 목격했습니다.

하지만 우리 세대에서 가장 비난받는 서체가 브랜드 디자이너의 가장 친한 친구가 될 수 있다고 말하면 어떨까요? 밋밋한 서체를 고객이 좋아할(돈을 많이 지불하는) 아름다운 로고로 바꾸는 방법을 보여 주면 어떨까요? 당신은 활자를 보는 방식을 근본적으로 바꾸고 무한하게 확장되는 창의적인 선택의 세계에 자신을 열 의향이 있습니까? 나만의 글꼴을 만들 준비가 되셨나요?

그렇다면 계속 읽으십시오. 글꼴을 더 잘 만들기 위해 모든 서체를 즉시 변환하는 데 사용할 수 있는 간단한 프로세스를 소개할 것이기 때문입니다. 그리고 이 프로세스가 얼마나 효과적인지 보여주기 위해 모든 곳에서 디자이너들이 열광적으로 경멸하는 세 가지 서체를 사용하여 각 단계를 시연하겠습니다.

먼저, 생일 배너와 "기발한" 명함에서 흔히 볼 수 있는 광대 같은 캐릭터의 괴상한 모음인 Jokerman 입니다.

다음으로 Tut 왕의 무덤 벽에서 공들여 복사한 Papyrus 와 선호하는 커피숍 메뉴, 진지한 예술가, James Cameron이 있습니다.

마지막으로 소개가 필요 없는 멋지고 흔들리지 않는 캐주얼 타이포그래피 무법자 - 유일한 Comic Sans .

이 의외의 그룹에서 다른 사람들이 "쓰레기!"라고 외치는 보물을 보는 법을 가르쳐 드리겠습니다. 최고 수준의 맞춤형 로고 타입을 생성합니다.

간단하고 신뢰할 수 있는 프로세스

무시무시한 서체에서 멋진 로고로의 여행을 떠나서 글꼴을 만드는 방법을 배워 봅시다. 우리는 나쁜 것으로 시작해서 좋은 것으로 끝내고 매번 똑같은 7단계를 따를 것입니다. 일곱 단계는 무엇입니까? 세부 사항에 대해서는 잠시 후에 논의하겠지만 먼저 이러한 종류의 작업에 필요한 도구에 대한 몇 가지 참고 사항입니다.

권장 설정

시각 디자이너는 새롭고 저렴한 디자인 도구를 많이 사용할 수 있습니다. 터치스크린 장치와 Apple Pencil과 같은 고급 스타일러스를 사용하면 그 어느 때보다 쉽게 ​​아이디어를 포착하고 디지털 워크플로로 이동할 수 있습니다. 자유롭게 실험하고 자신에게 맞는 것을 유지하십시오. 즉, Adobe 및 Wacom의 신뢰할 수 있는 도구를 사용하여 시도되고 진정한 접근 방식을 선호합니다.

• Photoshop — 서체를 조작하고 계층화된 미세 조정 스케치를 만드는 데 사용됩니다.
• Illustrator — 최종 미세 조정 스케치를 추적하고 색상, 그라디언트, 질감, 패턴 등과 같은 스타일 요소를 빠르게 추가하는 데 사용됩니다.
• Wacom Tablet — Photoshop 내에서 디지털 드로잉에 사용됩니다.

조커맨 — 고급스러움에서 고급스러움까지

Jokerman은 서체의 Jim Carrey입니다. 결코 미묘하지 않고 모든 각도에서 시끄럽지만 대중에게 이상하게 매력적입니다. 그것은 우스꽝스럽고 이 튜토리얼이 만들어진 것과 똑같은 종류의 서체입니다. Jokerman과 같은 엉뚱한 서체는 기발한 디자인 요소로 가득 차 있지만 세련된 로고에 필요한 구속력은 부족합니다. 디자이너로서 우리는 좋은 판단력을 발휘해야 하며, 이는 종종 보다 명확한 의사 소통을 위해 세부 사항을 생략하는 것을 의미합니다.

바람직하지 않은 서체에서 고급 로고로 바꾸는 간단한 7단계 프로세스입니다. 간단한 그림이 포함되어 있지만 이름을 쓰고 그림을 따라갈 수만 있다면 자신만의 글꼴을 만드는 방법을 배우는 데 필요한 모든 기술을 갖춘 것입니다. 의 시작하자.

1. 서체 검토

Photoshop에서 서체(이 경우에는 Jokerman)를 선택하고 로고에 필요한 비즈니스 이름을 입력한 다음 각 글자를 빠르게 검토하여 크기, 비율, 글자 무게 등과 같은 디자인 가능성을 파악합니다.

2. 아이디어

Wacom 태블릿을 사용하여 로고를 느슨하게 스케치합니다. 여기에서 정확할 필요는 없습니다. 디자인의 골격으로 사용할 빠르고 쉬운 것을 스케치하십시오.

3. 서체 왜곡

선택한 서체를 사용하여 아이디어 스케치 상단에서 각 문자의 크기를 조정하고 늘리고 기울이고 찌그러뜨립니다. 이 단계에서 모든 것을 완벽하게 만들 필요는 없습니다. 나중에 다듬을 것이므로 계속 진행하십시오.

4. 수정 스케치

이제 왜곡된 글자 위에 빠르게 스케치를 합니다. 여기에서 원본 서체의 단점을 개선하고 자신의 디자인 세부 사항을 추가하기 시작합니다.

5. 미세 조정 스케치

이것은 Photoshop에서 스케치하고 다듬는 마지막 단계입니다. 작동하지 않는 모든 것을 정리하고 문자를 채우면 형식과 문자 사이의 공백 관계에 대한 더 나은 아이디어를 얻을 수 있습니다.

6. 벡터 추적

미세 조정 스케치를 Illustrator에 놓고 펜 도구를 분리한 다음 아름다운 베지어 곡선으로 가는 길을 조심스럽게 클릭합니다.

7. 마무리 터치

벡터 추적을 마치면 색상, 그림자, 하이라이트, 윤곽선 등과 같은 사려 깊은 세부 사항으로 시각적 효과를 추가하십시오.

파피루스 — 미묘한 변화

고백: 나는 파피루스를 좋아하고 누가 알든 상관없어요. 진지하게, 우리 디자이너들이 좋아하는 모든 서체가 실제로 그렇게 나쁜 것은 아닙니다. 남용? 아마도. 키치? 네. 그러나 서체가 그녀의 풋풋한 디자인 문서가 품위가 있다고 느끼게 한다고 해서 그것이 나쁘다는 것은 아닙니다. 그리고 그것이 내가 파피루스에 대해 느끼는 감정입니다. 올드 네이비에서 샀던 드레스 셔츠 같아요. 핏도 좋고 특별한 날에도 잘 어울리네요.

즉, 내 드레스 셔츠에는 의도적으로 닳은 가장자리가 없습니다. 그럼 전체적인 모양과 느낌을 좀 더 현대적으로 만들면서 Papyrus의 멋진 부분을 유지할 수 있는지 봅시다.

1. 서체 검토

다시 Photoshop에서 시작합니다. 서체(Papyrus)를 선택하고 로고타입 이름을 입력합니다. 각 편지를 살펴보고 잠재적인 디자인 세부 사항을 기록해 두십시오.

2. 아이디어

Wacom 태블릿을 꺼내 몇 가지 구성 아이디어를 빠르게 스케치합니다. 이 단계를 지나치게 생각하지 마십시오. 노트에 이름을 새기는 것과 같습니다.

3. 서체 왜곡

Jokerman에 대해 수행한 것처럼 생성한 아이디어 스케치 상단에서 각 문자의 크기를 조정하고 늘리고 기울이고 찌그러뜨립니다. 엉망이 되겠지만 걱정하지 마세요!

4. 수정 스케치

모든 단계 중에서 이것이 가장 벅차게 느껴질 수 있지만 스트레스를 받지는 마십시오.

당신은 처음부터 구축하지 않습니다. 원래 서체의 구조를 사용하면서 자신만의 개선 사항을 추가합니다.

이 스케치는 매우 끔찍하고 추악할 수 있습니다. Photoshop에서 레이어의 장점은 여러 패스를 사용할 수 있다는 것입니다. 각 패스는 실제 디자인 의도에 더 가깝습니다.

5. 미세 조정 스케치

이것은 Photoshop의 마지막 단계입니다. 작동하지 않는 디자인 부분에 대해 스스로에게 정직하세요. 또한 글자를 색칠하여 글자가 서로 어떻게 보이는지 확인하고 형태의 불규칙성을 찾아낼 수 있습니다.

6. 벡터 추적

Illustrator 내부에 미세 조정 스케치를 배치하고 펜 도구로 벡터 추적을 시작합니다.

7. 마무리 터치

벡터 추적이 완료되면 색상, 그림자, 하이라이트 및 윤곽선과 같은 세부 정보를 추가하여 로고에 생기를 불어넣습니다.

Comic Sans — 주름진 셔츠 다림질처럼

나는 Comic Sans를 조롱하는 것을 거부합니다. 물론, 부적절한 시간에 나타나 방금 낮잠에서 깨어난 것처럼 약간 흐트러진 것처럼 보입니다. 그러나 그것은 디자인 브리프를 충족했고 아마도 세계에서 가장 잘 알려진 서체일 것입니다.

순전히 미학적인 관점에서 Comic Sans는 그다지 좋아하지 않습니다. 투박하고 투박하고 편지의 작은 꼬임과 손잡이가 상당히 산만합니다. 그래도 로고에 잘 어울리는 몇 가지 흥미로운 단점이 있으며, 역사상 최악의 서체라는 일반적인 인식으로 인해 7단계 개선 기술에 대한 완벽한 도전이 되었습니다.

이번에는 역학에 덜 집중하고 각 단계에서 내 창의적 사고 과정에 대해 좀 더 자세히 알려 드리겠습니다.

1. 서체 검토

이 단계에서 자신을 어색한 사춘기 소년의 부모라고 생각하십시오. 그가 깡패처럼 보이는 바보라는 사실은 부인할 수 없지만, 당신은 그가 끈끈하고 다재다능한 젊은이가 될 날까지 그 모든 것을 볼 수 있습니다.

2. 아이디어

관념화는 위험을 감수하는 예술적 측면을 공개할 때입니다. 나중에 무자비하게 자신을 수정할 수 있지만 지금은 기회를 잡으십시오.

Comic Sans를 검토할 때 아이디어 스케치에 통합하려고 했던 일종의 탄력 있는 장난기를 발견했습니다.

3. 서체 왜곡

아마도 당신은 저와 같을 것입니다. Photoshop에서 레이어를 구성하고 비파괴적인 편집 기술을 활용하는 데 다소 집착합니다. 이 단계에서는 그렇게 하지 마십시오!

단어를 입력하고, 글꼴을 래스터화하고, 그 글자를 왜곡하십시오.

4. 수정 스케치

내가 말했듯이 Comic Sans의 작은 불규칙성은 미치광이이므로 이 단계에서는 선을 곧게 펴고 곡선을 부드럽게 만드는 데 중점을 두었습니다.

5. 미세 조정 스케치

가장 오랜 시간 동안 저는 Photoshop의 Correction Sketch 단계에서 Illustrator의 Vector Trace 로 바로 이동했습니다. 그러나 처음으로 채워진 벡터 문자를 보면 항상 약간 이상해 보였습니다.

이 수정 단계는 글자의 간격을 잘 맞추는 좋은 방법입니다. 결국, 문자 사이에 형성되는 모양은 문자 자체만큼이나 중요합니다.

6. 벡터 추적

펜 도구를 사용할 때 두뇌를 쉬게 할 수 있습니다. 핸들을 가리키고, 클릭하고, 끌기 시작하고 디자인을 개선할 방법을 찾지 않습니다.

그러지 마! 손으로 스케치할 때 끊임없이 찰나의 결정과 수정을 하게 됩니다. 비슷한 방식으로 펜 도구를 사용해야 합니다.

7. 마무리 터치

나는 벡터 트레이스가 밝혀진 방식에 만족했기 때문에 간단한 블록 그림자와 몇 개의 내부 액센트 라인을 사용하기로 결정했습니다.

이상적으로는 서체를 꾸밈 없이 단독으로 사용할 수 있습니다. 마무리 손질 은 디자인을 돋보이게 하기 위한 것이지만 너무 많은 특수 효과를 추가하지 않도록 주의해야 합니다.

원치 않는 일의 기회

우리 디자이너는 우리 직업에 존재하는 트렌드, 도구 및 사고 방식에 계속 집착하는 것이 현명합니다. 우리는 커뮤니티로 배우고 성장하며, 우리 현장의 많은 부분이 무언가를 잘못 보는 경우 그 이유를 이해하려고 노력해야 합니다.

그러나 우리는 특히 대중의 의견에 따라 디자인 관행을 완전히 거부하려는 충동에 저항해야 합니다. Jokerman을 사용하는 것과 같이 좋지 않은 것으로 간주되는 것과 마주쳤을 때 다른 디자이너가 왜 그렇게 느끼는지 알아보는 것은 좋지만 잠재적으로 가치 있는 리소스를 쓰레기 더미에 버리는 것은 근시안적입니다.

대신, 마음에 파일에 가능한 한 많이 보관하십시오. 메모하고, 관찰하고, 좋아하는 것과 싫어하는 것을 분류하고, 다른 디자이너의 다양한 의견을 저장합니다.

언젠가는 Comic sans를 클라이언트의 아름다운 새 로고 유형의 기초로 사용하여 상상할 수 없고 위험한 디자인 커뮤니티의 조롱을 당할 수 있습니다.

• • •

Toptal Design 블로그에 대한 추가 정보:

• 전자 상거래 UX – 모범 사례 개요(인포그래픽 포함)
• 제품 디자인에서 인간 중심 디자인의 중요성
• 최고의 UX 디자이너 포트폴리오 – 영감을 주는 사례 연구 및 사례
• 모바일 인터페이스에 대한 경험적 원리
• 예측적 디자인: 마법 같은 사용자 경험을 만드는 방법