WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

投稿者： もの
カテゴリー： デザイン >Photoshop

フラットでシンプルなデザインがまだまだ流行していますが、最近では少しずつ、昔っぽい表現が復活しつつあるようです。
Webに限らずですが、レトロでアナログなものが若い人を中心に注目されています。

そこで、今回はフラットデザインの中に置いても映える、かすれた文字の作り方をご紹介したいと思います！
フラットの中にアクセントとして使用すると、個性が出せますよ～。

作り方は意外と簡単

作り方ですが、それ自体は簡単です。マスクとブラシを使います。

普通にテキストを打つ

まずは、普通にテキストを打ちます。文字サイズやフォントを後で変えると調整がちょっと大変なので、この段階で決めておきましょう。

テキストレイヤーにマスクをかける

次に、テキストレイヤーを選択した状態で、レイヤーウィンドウの下部にある、日の丸の逆転したようなアイコンをクリックします。
そうすると、レイヤーにマスクがかかります。

今の段階では文字はすべて見えている状態ですが、ここから、一部を見えない状態にしていきます。

マスクを編集し、非表示部分を作る

レイヤー名の左のアイコンが、「T」ではなく、マスク（右側の逆日の丸マーク）のほうを選択している状態で、ブラシ機能を選択します。
ブラシの形を選択しますが、一番左上の「ファイル」の下くらいに、数字と▼が表示されていますよね。この、▼をクリックします。

すると、ブラシの形の候補が出てきます。今回は、デフォルトで入っているもので充分です。点々（ザラザラ？）した形のものを選びましょう。太さは調整できるので、お好みで。
あまり細すぎないほうが良いです。

これで、マスクを塗ってみましょう！キャンバス上の文字で、消してみたいところをクリックしてください。
ここで注意したいのが、マウスの動きです。

普通にブラシで色を塗るときのように、ドラッグするのはおすすめしません！
せっかくのザラザラのブラシを生かすために、ポチポチとクリックしながら少しずつ文字を消していってください。
ただ、ものによってはドラッグしても良い味が出るものもあるので、試してみても良いかもしれません。

何ヶ所か、文字を消してみました。アナログ感が出たでしょうか？これで完成です！

消しすぎ注意！

上記のように、やり方自体は単純なのですが、どこまで消すかという加減にはご注意ください。
あまり消しすぎると、読めなくなってしまいます（苦笑）

わざと読みづらくする演出なら良いのですが、目立たせる、印象づけるための効果であれば、読みにくくなってしまっては逆効果です。

消しすぎてしまった場合は、「X」キーを押すとマスクが逆になり、ブラシをクリックした箇所が表示になりますので、それで調整しましょう。
消して、見せて、の繰り返しで調整です。

実は、マスクを使わなくても、消しゴムツールを使えばほぼ同じことができるのですが、マスク＋ブラシを使う理由はここだったりします。
消しゴムで消してしまったら、あとで修正が効かないので…。

フォントを変えると雰囲気が変わる！

同じかすれ表現でも、フォントが違えば雰囲気も変わります。
そのため、結構いろいろなジャンルで使えるのではないかと思います。

太めゴシックだとクール

ゴツいフォントにかすれ表現を加えると、より男らしくクールな雰囲気になります。
製造系だったり、元気な男性社員の入社を希望する企業さんのサイトには合うのではないでしょうか。

筆文字だと気迫を感じる？

筆文字系フォントにかすれ表現を加えると、男らしさを超えてちょっと泥臭い雰囲気になります。
採用系や何かの募集系サイトで「求ム！」という感情を強く表現するのに良いかもしれません。
かっこいいというより、ユーモア系ですね。

手書き風だとレトロかわいい

今度は逆に、女性らしい雰囲気です。布や紙っぽさを出すと、おしゃれなカフェ感が出て、インスタ風写真にも合うかもしれません。
飲食系サイトで使えそうです。

明朝系だと厳粛な感じに

最後、これまでどちらかというとカジュアルっぽくなっていたのですが、高級感を出すためのかすれです。
古くからの観光地や、歴史の長い企業さんの沿革ページなどに使えそうです。

よーく見るとお分かりかもしれませんが、雰囲気によって消し方を少し変えています。
作るデザインに合わせてどんな消し方をすると良いか、いろいろな事例を見て研究してみてください！

かすれ文字を使ったサイト

実際にかすれ文字を取り入れているデザインのサイトをご紹介します。

消防ユニフォームの株式会社イマジョー

消防士さんのかっこよさと気迫が、かすれ文字から伝わります。
他の要素がフラットなので、引き立ちますね。

KOBE CHOCO 神戸旧居留地30番地

グルメ系のサイトにかすれ文字を取り入れると、手作り感やあたたかみが出て、美味しそうに見えます。
荒削りにかすれさせているのも、アナログ感がありますね。

いろいろ試してみましょう！

このように、かすれ文字といってもいろいろな使い方があります。
やり方自体は簡単ですが、なかなか奥深いところもあるので、ぜひ挑戦してみてくださいね。