7セグフォントをIllustratorで超簡単につくる

Illustratorで自販機やエレベーター、デジタル時計などありとあらゆるところに使われている7セグフォントを超簡単に作成します。

フォントとしても多く配布されておりますが、いまいちフォルムが気に入らなかったり商用可能なのかを調べるのが億劫だったりするので自分で作成してしまうことが多いです。

CONTENTS

制作の流れ

主な工程としては、

となります。

7セグの［8］を作成すると0−9まですべてカバーできるため、まずは原型となる［8］を作成していきます。

［長方形ツール］で長方形を配置、［ダイレクト選択ツール］で四隅いずれかのライブコーナーを内側にドラッグして上下が丸い長方形を作成します。

［アンカーポイントツール］でアンカーポイントをクリックして角にします。

作成したオブジェクトを複製・移動・回転で8になるよう配置します。

調整後のイメージがこちらです。

7セグをそれっぽくするため傾けます。

［選択ツール］でオブジェクトを選択、［変形］パネルで［シアー：5°］とします。
こちらで［8］の完成です。

0-9までの7セグを作成していきます。
作成した8を10個並べます。

［選択ツール］でピンク部分をカットして他の数字を作成します。

調整後のイメージがこちらです。

背景を黒、［8］を並べて塗りをグレー［R／62　G／58　B／57］とします。

［8］を複製して塗りをオレンジ［R／234　G／85　B／20］とします。

メニューバーの［効果／スタイライズ／光彩（内側）］を選択、以下のように設定します。

描画モード：通常　［R／255　G／212　B／0］
不透明度：100％　ぼかし：9px　［中心］を選択

調整後のイメージがこちらです。

緑の7セグの参考値はこちらです。

塗り：［R／34　G／172　B／56］
光彩：［R／255　G／212　B／0］　不透明度：80％

青の7セグの参考値はこちらです。

塗り：［R／3　G／110　B／184］
光彩：［R／113　G／225　B／255］　不透明度：100％

後半はデジタル表示のオレンジ、緑、青での配色例をのせております。ネオンなどの光を使ったデザインを作成する際は以下の配色で作成します。

外側：赤→内側：白
にするのではなく、
赤→オレンジ→黄色→白（または白に近い黄）
と段階を追って配色した方がきれいに見えます。

リンク