カスタムフォントの作成方法：7つのステップと3つのケーススタディ
公開: 2022-03-11それに直面しよう; 私たちデザイナーが嫌う書体があります。 実際、「憎しみ」という言葉は十分に強くないかもしれません。 スカージ？ 呪い？ 疫病？ 排泄物？ それぞれがアイデアを伝えるために使用する無生物の文字、数字、記号を侮辱するのに使用されていると聞きましたが、私はそれを完全に理解しています。 私は、最も風変わりなオフィス速報でさえ恥ずかしいほどひどいタイプの犯罪を見た（そして犯した）。
しかし、私たちの世代で最も罵倒されている書体は、実際にはブランドデザイナーの親友である可能性があると言ったらどうでしょうか。 光沢のない文字の形を、クライアントが気に入る（そしてかなりのお金を払う）魅力的なロゴタイプに変える方法を教えたらどうでしょうか？ タイプの見方を根本的に変えて、無限に広がる創造的な選択肢の世界に自分自身を開いてくれませんか？ 独自のフォントを作成する準備はできましたか？
もしそうなら、読み続けてください。これから、フォントをより適切に作成するために、任意の書体をすぐに変換するために使用できる簡単なプロセスを紹介します。 そして、このプロセスがどれほど効果的であるかを示すために、世界中のデザイナーから熱心に軽蔑されている3つの書体を使用して各ステップを示します。
まず、ジョーカーマンは、誕生日のバナーや「気まぐれな」名刺に通常見られるピエロのようなキャラクターの奇抜なコレクションです。
次に、ツタンカーメン王の墓の壁から丹念にコピーされたパピルスと、コーヒーショップのメニュー、真面目な芸術家、ジェームズキャメロンの好みの選択肢があります。
最後に、紹介を必要としない、クールで揺るぎないカジュアルな活版印刷の無法者、唯一のComicSans 。
このありそうもないグループから、他の人が「ゴミ」と叫ぶ宝物を見るように教えます。 最高の口径のカスタムロゴタイプを作成します。
シンプルで信頼性の高いプロセス
恐ろしい書体から見事なロゴタイプへの旅に出て、フォントの作り方を学びましょう。 悪いことから始めて、良いことで終わり、毎回同じ7つのステップを実行します。 7つのステップは何ですか？ 詳細については少し説明しますが、最初に、この種の作業に必要なツールに関するいくつかのメモを示します。
推奨されるセットアップ
ビジュアルデザイナーは、多数の新しく手頃なデザインツールにアクセスできます。 タッチスクリーンデバイスとApplePencilのような高度なスタイラスペンにより、アイデアのキャプチャとデジタルワークフローへの移行がこれまでになく簡単になります。 自由に実験して、あなたのために働くものは何でも握ってください。 そうは言っても、私はAdobeとWacomの信頼できるツールを使った実証済みの真のアプローチを好みます。
- Photoshop —書体を操作し、レイヤー化された洗練されたスケッチを作成するために使用されます。
- Illustrator —トレースの最終的な改良スケッチをベクトル化し、色、グラデーション、テクスチャ、パターンなどのスタイルの要素をすばやく追加するために使用されます。
- Wacom Tablet —Photoshop内のデジタル描画に使用されます。
Jokerman —クラスからクラッシーまで
ジョーカーマンは書体のジム・キャリーです。決して微妙ではなく、あらゆる角度で大音量でありながら、不思議なことに大衆にアピールしています。 それはばかげていて、何よりも、まさにこのチュートリアルが作成された種類の書体です。 Jokermanのような風変わりな書体には、好奇心旺盛なデザイン要素が詰まっていますが、上品なロゴタイプに必要な制約がありません。 デザイナーとして、私たちは適切な判断を下す必要があります。それは、より明確なコミュニケーションのために詳細を控えることを意味することがよくあります。
これは、望ましくない書体からハイエンドのロゴタイプに移行する単純な7ステップのプロセスです。 簡単な描画もありますが、名前を書いて絵を描くことができれば、自分のフォントを作る方法を学ぶために必要なすべてのスキルを身に付けることができます。 さぁ、始めよう。
1.書体を確認します
Photoshopで、書体（この場合はJokerman）を選択し、ロゴタイプに必要な商号を入力し、各文字をすばやく調べて、縮尺、比率、文字の太さなどのデザインの可能性を感じ取ってください。
2.アイデアを出す
Wacomタブレットを使用して、ロゴタイプの大まかなスケッチを作成します。 ここで正確である必要はありません。 デザインの骨組みとして役立つものをすばやく簡単にスケッチするだけです。
3.歪んだ書体
選択した書体を使用して、アイデアスケッチの上に各文字を拡大縮小、拡大縮小、傾斜、および押しつぶします。 このステップで物事を完璧にする必要はありません。 後で改良するので、続けてください。
4.修正スケッチ
次に、歪んだ文字の上に簡単なスケッチを作成します。 ここから、元の書体の欠点を改善し、独自のデザインの詳細を追加し始めます。
5.リファインメントスケッチ
これは、Photoshopでのスケッチと改良の最後のフェーズです。 動作していないものをすべてクリーンアップし、文字を入力して、フォームと文字間のスペースの関係をよりよく理解できるようにします。
6.ベクトルトレース
洗練されたスケッチをIllustratorにドロップし、ペンツールを分割して、美しいベジェ曲線への道を慎重にクリックします。
7.最後の仕上げ
ベクトルトレースが終了したら、色、影、ハイライト、アウトラインなどの思慮深い詳細で視覚的なインパクトを追加します。
パピルス—微妙な変化
告白：私はパピルスが好きで、誰が知っているかは気にしません。 真剣に、私たちデザイナーがバッシングを楽しむすべての書体が実際にそれほど悪いわけではありません。 使いすぎ？ 多分。 キッチュ？ はい、そうです。 しかし、書体が誰かに彼女のアマチュアなデザインドキュメントが尊厳を持っているように感じさせるからといって、それが悪いことを意味するわけではありません。 そして、それが私がパピルスについてどのように感じているかです。 オールドネイビーで購入したドレスシャツのようなものです。ぴったりとフィットし、特別な機会に見栄えがします。
とはいえ、私のドレスシャツには意図的に擦り切れたエッジはありません。 それでは、全体的なルックアンドフィールをもう少し現代的にしながら、パピルスのレターフォームの素晴らしい部分を維持できるかどうかを見てみましょう。
1.書体を確認します
ここでも、Photoshopから始めます。 書体（パピルス）を選択し、ロゴタイプ名を入力します。 それぞれの文字を見て、潜在的なデザインの詳細をメモします。
2.アイデアを出す
Wacomタブレットを分解して、構図のアイデアをすばやくスケッチします。 このステップを考えすぎないでください。 それはノートにあなたの名前を落書きするようなものです。
3.歪んだ書体
Jokermanの場合と同じように、作成したアイデアスケッチの上に各文字を拡大縮小、拡大、傾斜、および押しつぶします。 乱雑になりますが、心配しないでください！
4.修正スケッチ
すべてのステップの中で、これは最も困難なように感じるかもしれませんが、それを強調しないでください。
ゼロから構築しているのではありません。 元の書体の構造を使用しながら、独自の改善を加えています。
このスケッチは非常にひどく醜いことがあります。 Photoshopのレイヤーの美しさは、複数のパスを取得できることです。各パスは、実際のデザイン意図に近づきます。
5.リファインメントスケッチ
これがPhotoshopの最後のステップです。 デザインの機能していない部分については、正直に言ってください。 また、文字に色を付けて、文字が隣り合ってどのように見えるかを確認し、形の不規則性を明らかにするのにも役立ちます。
6.ベクトルトレース
Illustrator内にリファインメントスケッチを配置し、ペンツールを使用してベクタートレースを開始します。
7.最後の仕上げ
ベクタートレースが完了したら、色、影、ハイライト、アウトラインなどの詳細を追加して、ロゴタイプに命を吹き込みます。
Comic Sans —しわの寄ったシャツにアイロンをかけるような
ComicSansを嘲笑することを拒否します。 確かに、それは不適切な時間に現れ、昼寝から目が覚めたように少し乱れたように見えます。 しかし、それはデザインブリーフに適合し、世界で最もよく知られている書体かもしれません。
純粋に審美的な観点から、ComicSansについて好きなことはあまりありません。 それはだらしない、不機嫌で、手紙の小さなねじれやつまみはかなり気が散ります。 それでも、ロゴタイプに適した興味深い癖がいくつかあり、史上最悪の書体としての一般的な認識により、7ステップの洗練されたテクニックにとって完璧な挑戦となっています。
今回は、力学に焦点を当てず、各ステップでの私の創造的思考プロセスについてもう少し洞察を与えます。
1.書体を確認します
このステップでは、自分を厄介な思春期の少年の親と考えてください。 彼が乱暴に見えるグーフボールであることは否定できませんが、彼が縛り付けられた、バランスの取れた若い男になる日まで、そのすべてを過ぎて見ることができます。
2.アイデアを出す
アイデアは、リスクを冒す芸術的な側面を解放するときです。 後で冷酷に自分自身を編集することができますが、今のところ、チャンスをつかんでください。
Comic Sansをレビューしているときに、アイデアのスケッチに取り入れようとした、ある種の弾むような遊び心に気づきました。
3.歪んだ書体
たぶんあなたは私のようです…Photoshopでレイヤーを整理し、非破壊的な編集技術を利用することにやや執着しています。 このステップではそのようにしないでください！
単語を入力し、フォントをラスタライズして、それらの文字を歪めます。
4.修正スケッチ
私が言ったように、Comic Sansの小さな不規則性は気が狂っているので、このステップでは、直線をまっすぐにし、曲線を滑らかにすることに焦点を当てました。
5.リファインメントスケッチ
長い間、私はPhotoshopのCorrectionSketchステップからIllustratorのVectorTraceに直接移行しました。 しかし、初めてベクター文字が入力されるのを見ると、いつも少し奇妙に見えました。
この洗練されたステップは、文字の間隔を空けるための優れた方法です。 結局のところ、文字の間に形成される形は、文字自体と同じくらい重要です。
6.ベクトルトレース
ペンツールを使用すると、脳を簡単に遮断できます。 ハンドルをポイント、クリック、ドラッグし始め、デザインを改善する方法を探すのをやめます。
そうしないでください！ 手作業でスケッチするときは、常に一瞬の決定と修正を行っています。 同様の方法でペンツールを使用する必要があります。
7.最後の仕上げ
ベクトルトレースの結果に満足したので、単純なブロックシャドウといくつかの内部アクセントラインを使用することにしました。
理想的には、あなたのレターフォームは装飾なしで自立することができます。 仕上げはデザインをポップにすることを目的としていますが、あまりにも多くの特殊効果を追加しないように注意する必要があります。
不要なものの機会
私たちのデザイナーは、私たちの職業に存在するトレンド、ツール、思考様式に常に精通していることが賢明です。 私たちはコミュニティとして学び、成長します。私たちの分野の大部分が何かをうまく見ていなければ、その理由を理解しようと努める必要があります。
しかし、特に世論の気まぐれで、設計慣行を完全に拒否したいという衝動にも抵抗する必要があります。 Jokermanを使用するなど、悪いと見なされるものに遭遇した場合、他の設計者がこのように感じる理由を学ぶのは良いことですが、潜在的に価値のあるリソースをゴミの山に投げ込むのは近視眼的です。
代わりに、できるだけ多くのことを心に留めておいてください。 メンタルノートを取り、観察し、好きなものと嫌いなものを分類し、他のデザイナーからの多様な意見を保存します。
いつの日か、Comic sansをクライアントの美しい新しいロゴタイプの基盤として使用することで、考えられないリスクのあるデザインコミュニティの嘲笑を行うかもしれません。
•••
Toptal Designブログでさらに読む：
- eコマースUX–ベストプラクティスの概要（インフォグラフィック付き）
- 製品設計における人間中心の設計の重要性
- 最高のUXデザイナーポートフォリオ–刺激的なケーススタディと例
- モバイルインターフェースのヒューリスティック原則
- 予測的デザイン：魔法のユーザーエクスペリエンスを作成する方法