TerraTechロゴ風フォントを作ってみた

f:id:hal-nico:20180622225129p:plain
フォントリスト

概要

DiscordのWelcomeチャンネルを作る際に使ったフォントです(修正した文字もあります)。

f:id:hal-nico:20180622230520p:plainf:id:hal-nico:20180622230524p:plain
こんな感じの奴
とりあえず大文字を作ってみたら思いのほか楽しかったので、勢いで記号と数字と小文字も作ってみました。

フォントファイル&透過PNG画像配布

Googleドライブにフォントファイル(.ttf)と全文字分の透過PNG画像(計158 MB)を置いておくので、ロゴでも動画のサムネでも何でもご自由にお使いください。
6/30追記:一部日本語環境でスペースを押すと四角が表示されていたので、ttfファイルを修正しました。再ダウンロードお願いします。
TerraTechロゴ風フォント - Google ドライブ

使用上の注意

フォントファイルの方はカラーフォントとかではないので、各自で色付けや縁取りをしてください。
ちなみに、透過PNG画像で使っている縁の色は16進数で#2d4660、10進数でR:45 G:70 B:96にしてあります。

公式(ロゴ、Wikiなど)で提示してる文字はほとんどそのままのはずですが、その他の文字は私の妄想となってます。
数字と記号はそこそこの出来だと自負してますが、小文字に関しては全然イメージがないのと、ソフトの関係で等幅フォントしか作れない(作れる知識がない)ので、かなり微妙です。おまけ的な?


以下本フォント完成までの流れ(フォント作りたい方が見たら参考になるかもしれないし、ならないかもしれない)

ガバガバ制作過程

  1. 公式の文字("TERRATECH","WIKI"に含まれる計9字)を参考にKeynote(Mac版PowerPoint)で図形を並べて全文字(95字)デザイン
  2. GIMPで背景を抜いて透過PNGに変換
  3. Inkscape(Ver.0.91)で画像を開き、SGVフォントエディター機能を使って文字と画像を紐づけ→SVGファイルで出力
  4. Online font converterでSVGファイルをTTFファイルに変換
  5. 完成!

補足

突っ込み所満載ですが、このフォントが四角形の集合体だというのに加え、個人的にKeynoteの揃え機能が使いやすいと思っているのでこういう遠回りをしてます。1から直接3の作業できるはずなんだよなぁ...何でGIMP使ったのか自分でも謎。

Inkscapeのバージョンが最新版(Ver.0.92)じゃないのは、最新版だと紐づけした画像が極端に小さくなってしまうという不具合があるようで、調整が難しかったためです。
このバージョンもこのバージョンで位置が狂ってましたが、幸い左右の位置は狂ってないのでガイドを引いて無理やり解決。

f:id:hal-nico:20180623000449p:plain
欧文フォントだったので、こんな感じでライン引いて合わせてました

まとめ

今回学んだのは、手書きのフォントを作るならCalligraphr - Draw your own fonts.の方が(75文字制限にさえ引っ掛からないなら)良い。
ただ、今回みたいにデジタル環境オンリーで作るときは、変換の過程で汚くなるから上記のInkscape(Ver.0.91)か、FontForgeを使ったほうが良い。ってことですね。

あと、日本語フォント作ってる人すごい(小並感)

では!