DESIGN IT YOURSELF.

BUROKI


top

blog

  • top
  • blog
  • どんなフォントにも対応できるステンシル風加工のやり方と考え方

どんなフォントにも対応できるステンシル風加工のやり方と考え方

design_thing

  • top
  • blog
  • どんなフォントにも対応できるステンシル風加工のやり方と考え方

どんなフォントにも対応できるステンシル風加工のやり方と考え方

2021.03.14.

スポンサーリンク

スポンサーリンク

先日twitterであるデザイナーさんから「TOPページのメインビジュアルに使っているフォントを教えてください!」というDMをいただきました。

メインビジュアルのフォント
こちらのフォントですね

しかしこのフォントは既存のフォントをそのまま使っているわけではなく、既存のフォント「Rokkitt」をステンシル風に加工したものなんです。

以前DIYの会社に勤めていたので、思えばボクはよくいろんなフォントをステンシル風に加工してきました。

けっこう需要がありそうなので今回のブログでは、グラフィックソフトの「illustrator(イラストレーター)」を使ってフォントをステンシル風にする加工のやり方と加工するときの考え方を紹介しようと思います。

BUROKIアイコン

ステンシル加工はお手のものです!

そもそもステンシルとは?

まずは「ステンシル」というものを説明します。
ステンシルとは型をつかって文字やイラストをいろんなものにプリントするための技法のことです。主にDIYでよく用いられます。

プレートを使ってフォントやイラストの「型」をつくり、その型にスプレーやインクを吹きかけてプリントします。なのでプレートをフォントのディティールでくり抜いた型をまずはつくらなければいけません。そうなってくると、フォントをそのまま使ってしまうとどうしても型がつくれない(くり抜けない)部分が出てきます。それが「空洞」の部分です。

英字の場合は「O」や「Q」のような輪になっている文字や「D」、「P」、「B」、「A」、「R」といった文字に空間があるものはそのままくり抜くとこのような表現になります。

空洞のある文字のステンシル方法 その1
空洞があるのでこうなります

こうならないために空洞のある文字はステンシル用に加工しなければいけません。

どこを切り抜くのか?を考える

まずは先ほど挙げた空洞のある文字(この表現が正しいのかはわかりませんが 笑)をステンシル加工していきましょう。illustratorを開き、ステンシルしたいフォントを選びます。今回は例としてゴシック体の「FUTURA(フーツラ)」というフォントを選び、空洞のある文字「O」「P」「A」を打ちます。

空洞のある文字のステンシル方法 その2
OとPとAをピックアップします

たまたまピックアップしただけですが、商業モール「OPA(オーパ)」になってますね・・気にせずいきましょう(笑)。

文字の上に線を引く

文字をアウトライン化してテキストからベクターデータに変換したあと、ステンシル加工するために文字の上に線を引きます。引くラインのコツとしては文字のディティールに沿って引くとやりやすいです。

空洞のある文字のステンシル方法 その3
文字の上にラインを引く

切り抜く線の太さは好みでいいと思います。ボクの場合はよくフォントの太さに合わせることが多いです。

線もアウトライン化して文字と一緒に分割

この線も文字と同じくアウトライン化し、文字を一緒に選択してパスファインダで分割します。

空洞のある文字のステンシル方法 その4
パスファインダで分割

パスファインダでの分割方法は、分割したい複数のオブジェクトを選択後、パスファインダパネルの左下のアイコンをクリックすると分割できます。

分割後はくり抜く部分以外を削除して完成

分割後、不要な部分は削除してステンシル風フォントの完成です。

空洞のある文字のステンシル方法 その5
これで完成。簡単ですね

この流れで「O」「P」「A」以外の空洞のある文字をステンシル風に加工していきます。

すべての文字をステンシル化して統一感を出す

プレートにフォントの型をつくるためにやることがメインなので、ステンシルをする目的だけならこれで特に問題はないのですが、グラフィックとして使用する場合、空洞のある文字だけではちょっと物足りないですね。

「A」から「Z」までのすべてのアルファベットをステンシル加工したほうがよりフォントに統一感を出すことができ、全体的なクオリティの向上にもつながります。

すべての文字をステンシル化して統一感を出す
こんな感じですべてのフォントを加工します

ゴシック体フォントの場合、「I」や「J」といった加工のしようがない文字は加工せずそのままで問題なしです。英字を使うときは数字も一緒に使うことがよくあるので、「0」から「9」までの数字もやっておくと後々便利です。

これができれば応用でオリジナリティを出せる

ここまでが従来のステンシル加工のやり方です。
これができるようになればよりオリジナリティのある表現ができます。

例えば文字によって引く線をアレンジします。
「O」のラインを横に引いてみたり、「P」の片方だけに引いてみたり、2本線を引いてみたり・・。ボクのメインビジュアルに使っているフォントもステンシルを少しアレンジして遊び心を加えています。

フォントのステンシル加工をアレンジする
ランダムに線を引いてアレンジ

アレンジすることで従来のステンシルフォントよりアーティスティックな印象を与えることができますね。いろんな方法を試して自分なりのオリジナリティを出してみてもいいと思います。自由に楽しんでみてください。

ひらがなや漢字でもできます

今までは英字でのステンシル加工のやり方を紹介しましたが、もちろんひらがなや漢字といった日本語でも可能です。

漢字のステンシル加工
「黒木」をステンシルにした場合はこんな感じ

特に漢字は空洞の部分が多いのでステンシルのしがいがあると思います。日本語の場合は英字よりも複雑になりがちなので、タイトルの文字だけにするとかでいいと思います。それだけでも通常の文字とは違う印象を与えることができます。

ということで、いろんなフォントをステンシル加工できる方法と考え方を紹介しました。
ステンシル風フォントを使いたい人は、ぜひチャレンジしてみてください。

BUROKIアイコン

文字の加工はやりはじめると楽しいですよ。
スポンサーリンク

BUROKI写真

BUROKI写真

はじめましてBUROKIです。

ベンチャー企業にて11年間webやグラフィックデザインとブランディング経験を経て、2019年5月よりフリーランスデザイナーになりました。完全独学でフリーランスになった異色の経歴の持ち主だと思います(笑)

制作実績やインハウスデザイナーのことなど日々更新しています。デザイン制作のご依頼やお問い合わせなども受け付けてますので、なんでもお気軽にご相談ください。

ベンチャー企業でマスターデザイナーとして働いた後、フリーランスになりました。制作実績やインハウスデザイナーのことなど日々更新しています。制作のご依頼なども受け付けてますので、なんでもお気軽にご相談ください。

ご依頼・お問い合わせ

ご依頼・お問い合わせ

related contents

関連コンテンツ一覧
スポンサーリンク

文鳥とデザイナー

スポンサーリンク

blog list

ブログ一覧

private

初めての広島旅行・後編。濃霧のなかフェリーに乗って宮島へ向かう

広島旅行ブログの後編です。 二日目も朝から雨が降っていて、宮島へ向かうフェリー運行してるかな?と不安になる天候だったのですが、なんとか出かけ…

2022.06.22.

private

初めての広島旅行・前編。梅雨入り当日に2泊3日で広島へ行ってきました

少し前の6月14日から16日までの三日間、去年の京都旅行以来の旅行へいってきました。 今回はあまり日数がとれなかったので比較的近くで、かつボクが…

2022.06.19.

think

【うれしい話】デザインの可能性を改めて感じる出来事がありました

つい先日のことなのですが、ある方からご連絡をいただきました。 その方は約5年ほど前、ボクがまだフリーランスになる前にロゴ制作を担当させていた…

2022.06.11.

think

2022年5月の活動報告。5月はこんなデザイン制作をしていました

5月はプライベートでどこにも外出しなかったので、サムネイルにする写真がなく、活動報告のサムネイルとしては初めてフリー写真を使用しました(笑)…

2022.06.07.

think

AirPods Proを使っているボクが買う前に気になるところを解説してみた

今年になってようやく新しいiPhoneに変更したのですが、いざスマホで音楽を聴こうとしたところ、iPhoneの本体にイヤホンジャックがついていないこと…

2022.06.01.

private

ブロキの日本ダービー予想2022。今年の1着はあの馬で間違いなし!?

毎年5月末になると、ある一大イベントに向けて自然と準備モードに入ってしまいます。そんな一大イベントとは・・そうです。「日本ダービー」ですね。…

2022.05.29.

blogをもっと見る

制作のご相談・お問い合わせはフォームから

デザインのご依頼や予算のご相談、お問い合わせなどお気軽にお問い合わせください。
また、書いてほしいブログのリクエストやファンレター(笑)もお待ちしております。

問い合わせフォームはこちら

topトップページ

aboutブロキについて

designデザイン

voiceお客さまの声

blogブログ

films制作動画

cassetteカセットテープ

snsソーシャル