質感や温度を表現するフォントとPhotoshopのレイヤースタイルをご紹介します!

質感や温度を表現するフォントとPhotoshopのレイヤースタイルをご紹介します!

Saki Hanazawa

Saki Hanazawa

こんにちは、デザイナーの花ちゃんです!

前回、文字装飾デザインの基本パターンについて記事を書いてみました。文字装飾の引き出しが足りない……という方はぜひ一度見てみてください!

 
今回も文字装飾についての記事を書こうと思います!

突然ですが、この画像の ab 、どちらにより 夏っぽさ を感じますか?




おそらく b を選んだ方が多いのではないでしょうか。

このようにフォントや色が言葉の持つイメージと一致していると、第一印象で雰囲気が伝わり、見た人がすばやく内容を理解することができます。

色はその言葉を連想させるキーワードから選ぶと良いと思います。

夏を連想させるキーワード
太陽、海、お祭り、向日葵、花火 など

ということで、今回は物の質量や温度・言葉の持つイメージからフォントを選び、それに合ったPhotoshopのレイヤースタイルで文字を装飾してみたいと思います。

効果の種類

ドロップシャドウ レイヤーの内容のエッジの内側にシャドウを追加し、窪んでいるように見せることができます。
シャドウ(内側) レイヤーの内容の背後にシャドウを追加します。
光彩(外側)と光彩(内側) レイヤーの内容のエッジの外側または内側から光を放射したような効果を追加します。
ベベルとエンボス ハイライトとシャドウの様々な組み合わせをレイヤーに追加します。
サテン レイヤーの形状に応じた陰影(特につや出し仕上げのような効果)をレイヤー内に適用します。
カラーオーバーレイ、グラデーションオーバーレイ、パターンオーバーレイ レイヤーの内容をカラー、グラデーションまたはパターンで塗りつぶします。
境界線 カラー、グラデーションまたはパターンを使用して、現在のレイヤー上のオブジェクトにアウトラインを作成します。これは、文字のように硬いエッジを持つシェイプを描画するのに特に便利です。

Adobe Photoshop マニュアルより引用】

質量を表現する

重い

フォント G2サンセリフ、DFひびゴシック体

ウエイトが太いほど男性的で力強いイメージとなり、重量感が出ます。金属や土のような加工をしてもはっきりと読みやすいフォントです。

軽い

フォント 筑紫Aオールド明朝

伸びやかなハネとハライが特徴的なフォントで、文字を傾けたりするとリズムがついてさらに軽やかな印象を与えることができます。軽さを表現したい場合、あまり効果をつけすぎないのが良いと思います。

硬さを表現する

固い

フォント ハルクラフト

尖っている部分が多いほど、固いイメージになります。線幅に変化があり、両端が鋭くカットされているので、力強さと勢いがあります。表面にパターンを入れるとさらに質感が出せますよ!

柔らかい

フォント ヒラギノ丸ゴシック体、DFUD丸ゴシック体、スーラ

丸みが多いほど柔らかいイメージとなり、女性的で暖かい印象になります。明度が高く彩度が低い暖色系のパステルカラーと合わせると、より優しい雰囲気が出せます。

温度を表現する

暑い

フォント フォーク

ゴシックの大胆さと明朝のやわらかさがあります。グラデーションで炎や太陽の光を表現して、明度と彩度の高いビビットな色と合わせると良いと思います。

寒い

フォント 解ミン 月

流れるようなハライがあり、上品で柔らかなフォントです。雪の日を思わせるような、明るい灰色が少し入った色と合わせると良いです。外側の光彩に少しノイズを加えると、粉雪のようになるのでおすすめです。

熱い

フォント 陽炎

ゆらゆらと地を這う陽炎をイメージして作られたフォントです。炎の揺らぎがありますが、視認性が高く使いやすいです。

冷たい

フォント A1明朝、ライラ

雫が滴るような水々しさがあるフォントです。外側光彩ドロップシャドウで効果をつけると、冷気のような表現ができます。

番外編

つるつる

フォント UD新丸ゴシック体、ハミング

角がないフォントの方がなめらかなイメージとよく合います。ベベルエンボスで表面に光を加えると、つるっと感が増します。ドロップシャドウを少しつけて立体的にするのも良いです。

ぷるぷる

フォント 装甲明朝

横画が極細のフォントで、線画の強弱が弾力を感じさせます。表面の光は控えめにすると、明朝体でも視認性が確保できます。

ふわふわ

フォント ふんわりラウンド

手描き風のフォントで線の長辺がふくらんでいるので、雲のような軽く柔らかい印象になります。内側と外側に光彩を入れることで、ふわっと感が増します。

ピカピカ

フォント TBゴシック

飾り気のないシンプルなフォントなので、カタカナと相性が良いです。角度をつけたグラデーションで鏡面のような表現ができます。

まとめ

一度作ったレイヤースタイルは、新規スタイルとして追加しておくと、次に使用するときにすばやく効果をつけられて便利です。



今回ご紹介した装飾は、一瞬で興味を惹きつけることが重要なアイキャッチやバナーに使用するとより効果的だと思います。

フォントの種類を変えると、見る人に与える印象も大きく変わってきます。また上記でご紹介している組み合わせも、色やウエイトを変えるだけで、真逆のイメージで使えたりもします。組み合わせは無限なので、ぜひ自分だけのパターンを見つけてください。

ほんの一例ですが、なにかの参考になればとっても嬉しいです。

それでは、花ちゃんでした!

もっとデザインを学びたい方は……

LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。

Webサイト制作の実績・料金を見る

この記事のシェア数

大学院修了後、ゲーム制作会社に新卒入社し、IPものを扱ったゲームや新規開発チームでゼロベースからのUI設計・デザインを経験。LIGにジョイン後はLIGブログや外部メディアのアイキャッチ・記事内画像の作成を担当。現在は企業やサービスだけでなく、地方創生に関わるロゴ制作やサイト制作を積極的に行う。

このメンバーの記事をもっと読む
デザイナーズコラム | 78 articles