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

ブログ一覧

think

もうすぐ5周年。フリーランスデザイナーになってから気をつけていることは?

まだもう少し先なのですが、2019年5月にBUROKI designを開業して、もうすぐ5周年を迎えます。 さすがにもうすっかり会社員時代の習性などは抜け切っ…

2024.03.16.

think

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

今年の冬は異常なほどの暖冬だったそうですね。 でも最近は夏になれば例年以上の異常な暑さといわれることが多いですし、この気候の異常さが通常にな…

2024.03.07.

design_thing

ペンタブが苦手な人向け。illustratorでイラストを制作する方法

デザイン制作でイラストが必要になることはよくありますよね。 僕の場合はイラストレーターさんに依頼することがほとんどなのですが、案件によっては…

2024.02.14.

think

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

もうすぐ確定申告はじまるなぁ・・とこの時期になると毎年思います。 しかも今年からは昨年10月より開始したインボイス制度により消費税を申告する必…

2024.02.06.

private

北新地にある「鮨 かうと」で42歳の誕生日を祝ってもらいました

先日のことですが、1月16日は僕の誕生日ということで・・ 今年も相方に祝ってもらいました。 実は年末に欲しがっていたカセットデッキを誕生日プレゼ…

2024.01.19.

private

豊中市民なので2024年から服部天神宮の豊中えびすにて商売繁盛祈願

年が明けて、1月9日から11日までの3日間は商売人にとって毎年恒例の十日戎ですよね。 今までは大阪市民だったので今宮戎神社の十日戎で毎年商売繁盛…

2024.01.13.

blogをもっと見る

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

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

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

topトップページ

aboutブロキについて

designデザイン

voiceお客さまの声

blogブログ

films制作動画

cassetteカセットテープ

snsソーシャル