DESIGN IT YOURSELF.

BUROKI


top

blog

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

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

design_thing

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

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

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

6年目突入。会社員からフリーランスになってはじめたことを一挙公開

BUROKI designも開業6年目に突入。 さすがに個人事業主としての働き方も板についてきました。 誰も守ってくれない、すべて自己責任のフリーランスと…

2024.10.05.

design_thing

細部にこだわり数値化する。自分のロゴマークをマイナーチェンジしました

現在のBUROKI designのロゴマークですが、2014年ごろに制作してから現在まで特に手を加えることもなく、長年いろんな画像やアイコンとして使用してき…

2024.09.05.

private

ハワイ屈指のイタリアン「アランチーノ OSAKA」で相方の誕生日を祝う

8月末は毎年恒例の相方の誕生日祝い。 誕生日当日は家族旅行へ行っていたので、誕生日から少し経った26日に家から徒歩約10分くらいのところにある「a…

2024.08.30.

think

こんな人はフリーランスになるのはまだ早い!その理由も説明します

僕は最近、facebookやinstagramを運営するmeta社が新しく立ち上げた「threads(スレッズ)」というテキスト共有アプリを閲覧・投稿することが多いで…

2024.08.20.

private

8月からはじめる、麺とパンを食べないグルテンフリー生活

8月になりましたね。 7月からですが、とんでもない暑さですねぇ・・。 記録的な猛暑といわれていますが、これから毎年更新していくんじゃないかと思…

2024.08.03.

think

SEO小話vol.06 クライアントが気づかないURLぐちゃぐちゃ問題を事前に回...

今年の4月より不定期に更新している「SEO小話」シリーズ。 少し間隔が空いてしまいましたが(いつもですねすいません)、これからももちろん更新して…

2024.07.24.

blogをもっと見る

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

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

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

topトップページ

aboutブロキについて

designデザイン

voiceお客さまの声

blogブログ

films制作動画

cassetteカセットテープ

snsソーシャル