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

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

夏の日差しがだいぶやわらいできましたね。良い季節になってきました。 個人事業主としては2023年からはじまる「インボイス制度」という弱者をより苦…

2021.10.05.

think

一般の人でもデザインできるツールやサービスが増えてきて個人的に思うこと

ボク自身、すべてを把握しているわけではないのですが、webデザイナーでない方でもwebサイトを作成できるツールが増えてきましたね。 大きいところで…

2021.09.24.

design_thing

デザインも料理と同じで「工程」が重要。もし工程を間違うとどうなる?

自分自身も常に気をつけてはいるのですが、これはクライアントさまにとってもすごく大事なことなのでブログに書き残しておきます。 ボクは現在、いろ…

2021.09.17.

design_thing

意外と盲点。「改行のデザイン」でスマホサイトが大幅にレベルアップ!

今回はボクがスマホ用にwebページをデザインするときに気をつけていることを紹介します。 それは何かというと、「テキストの改行」です。 昨今のweb…

2021.09.08.

think

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

毎日毎日コロナコロナコロナ・・書くのもうんざりですね。 唯一救いなのがそんな世の中にもかかわらず、こちらからお断りしてしまうくらいいろんな制…

2021.09.05.

private

数年ぶりにあべのハルカスの展望台「ハルカス300」へ

前回のブログの続きになりますが・・すしセンター裏天王寺でランチをしたあと、少し買い物をしてからあべのハルカスの展望台「ハルカス300」に久しぶ…

2021.08.31.

blogをもっと見る

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

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

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

topトップページ

aboutブロキについて

designデザイン

voiceお客さまの声

blogブログ

films制作動画

cassetteカセットテープ

snsソーシャル