すぐに使える!凹んだようなテキストを作って立体感を出す方法
ホームページをデザインしているとテキストをデザインすることも多いと思う。
タイトルのロゴなどにも使えるし、
キャンペーンバナーなどの目立つ文字を作りたいときにも
周りとちょと違った立体的なテキストを使えば見てもらいやすくなる。
ここでは簡単に凹んだテキストを作る方法を紹介する。
凹んだようなテキスト効果
凹んだようなテキスト効果を作るのは本当に簡単。
まずは下地とその上にテキストを書こう。
色は適当でよいが、凹んだ感じをより体感してもらうために同じような色を使ってみた。
別の色でも普通に凹んだ感じになるので大丈夫。

ここで、テキストに効果を与えてやる。
光の差す方向を考えて、凹んでいるというのはどういう状態になるかを考える。
ここでは左上から光が差していると考えると、
テキストが凹んでいるということは、その凹みの左上が陰になる。
レイヤーウィンドウよりテキストに効果をつけてやろう。
[シャドウ(内側)]を以下のように設定する。

これでも凹んでいるように見えるけれど、影が出来れば逆に光が多くあたる部分もある。
それは今影を作った部分と反対側の凸の部分。
そこに光を当てるような効果をつける。
[ベベルとエンボス]を以下のようにつける。

影と反対側に光沢が出来てより立体感が出たのがわかると思う。
最後に、光は左上から来ているので左上より右下の方が光がたくさん当たることを考えて凹みの内部にグラデーションを入れる。
図解したいがこのチュートリアルは手抜きチュートリアルなので図解は無しで許して欲しい。
[グラデーション]を以下のようにつける。
※説明では左上からの光を想定しているけれど、今はそこまで厳密ではないので縦にグラデーションをかけている

これで完成。
この手順を覚えておけばどんなテキストだって簡単に凹ませることが出来る。
まずは下地とその上にテキストを書こう。
色は適当でよいが、凹んだ感じをより体感してもらうために同じような色を使ってみた。
別の色でも普通に凹んだ感じになるので大丈夫。

ここで、テキストに効果を与えてやる。
光の差す方向を考えて、凹んでいるというのはどういう状態になるかを考える。
ここでは左上から光が差していると考えると、
テキストが凹んでいるということは、その凹みの左上が陰になる。
レイヤーウィンドウよりテキストに効果をつけてやろう。
[シャドウ(内側)]を以下のように設定する。

これでも凹んでいるように見えるけれど、影が出来れば逆に光が多くあたる部分もある。
それは今影を作った部分と反対側の凸の部分。
そこに光を当てるような効果をつける。
[ベベルとエンボス]を以下のようにつける。

影と反対側に光沢が出来てより立体感が出たのがわかると思う。
最後に、光は左上から来ているので左上より右下の方が光がたくさん当たることを考えて凹みの内部にグラデーションを入れる。
図解したいがこのチュートリアルは手抜きチュートリアルなので図解は無しで許して欲しい。
[グラデーション]を以下のようにつける。
※説明では左上からの光を想定しているけれど、今はそこまで厳密ではないので縦にグラデーションをかけている

これで完成。
この手順を覚えておけばどんなテキストだって簡単に凹ませることが出来る。
凹んだようなテキスト効果
ちょっとでも格好良くすることを忘れてはいけない。
背景も重要なデザインの要素。
中央に光が多く当たってる感じをだしてみる。

背景にパターンを設定してみたり。

テキストの色を変えてみたり。

いろいろと遊んでみよう。
背景も重要なデザインの要素。
中央に光が多く当たってる感じをだしてみる。

背景にパターンを設定してみたり。

テキストの色を変えてみたり。

いろいろと遊んでみよう。
同じようなものを作るチュートリアルサイトを紹介。
ここでは「ベベルとエンボス」の代わりに「ドロップシャドウ」を利用していますね。
Famous Letterpress Text Effect in Adobe Photoshop CS5
