Webデザインでレタープレス(型押し)エフェクトを作るときのTips

Posted under - Web Design

3

レタープレスエフェクト大好きなんです ...。レタープレスエフェクトを使った Webデザインを観察していて気付いたことをまとめながら、Photoshop を使ったレタープレスの作り方をおさらいしてみました。

Sweetie sweetie girls love♡

最近いろんな Webサイトを見ていると、レタープレス(型押し)を表現したデザインを、たくさん見かけるようになりました。私もきれいなレタープレスが大好きなので、このブログでもたくさん使いたいんですけど、なかなかきれいに表現できません …。レタープレスエフェクトは、黒や白の背景ではあまりきれいにならないし、色やテクスチャによって見え方がかなり変わってきます。レタープレスエフェクトを使った Webサイトを観察していて、こうしたらキレイにできるかも … という視点でまとめてみました。

レタープレスエフェクト

型押しされたようなレターリングのエフェクト。

1. 光の向きと色を意識する

レタープレスは Webデザインに擬似的な質感を与えて、少し立体的に見せてくれるデザイン。なので光の向きを意識しなくてはいけません。レタープレスの凹み感を出すためには、光が当たってる部分は明るく、光が当たらない部分には影を付けますよね!

光の向き

光がページ上部から当たってると過程すると、凹んだ部分には影をつけて、出っ張った部分にはハイライトをあてます。

文字の内側には影をつけて、文字の外側(上記の場合はテキストの下部)にはうっすらと明るい部分を作ります。明るい部分 … ハイライトの部分は、背景より気持ち明るいくらいで丁度いい感じです。

2. レタープレスにむかない文字、背景ってあるの?

レタープレスエフェクトは、擬似的な質感や立体感を出して表現しています。そして光の向きを意識して、ハイライトとシャドウをつけて表現しています。ということは … 背景色が限りなく黒や白に近いと、レタープレスを表現するのが難しくなってきます。

黒より濃い影は付けられませんし、白より明るいハイライトの部分は付けられません。その結果、黒背景での影はただ輪郭をぼんやりさせるだけですし、白背景でのハイライトは背景にとけ込んでしまってく別がつきません …。

背景が真っ白な場合

背景が真っ白

背景が真っ白だと、ハイライトの部分がまったく分からなくなってしまいます。

上の図は、背景色が真っ白です。 Photoshop 上では、テキストに白いドロップシャドウをつけてハイライトの部分を表現しているのですが、全く見えませんよねー …。なのでテキスト内のシャドウや質感などで、上手に光の加減を表現してあげないとならないです。

白い背景に細いフォントや線

白い背景に細いフォントや線

細い線のフォントとや線と、白背景の組み合わせでは、レタープレスエフェクトは表現できませんよね。光と影を表現できるスペースが、まったくと言っていい程ないからです。レタープレスエフェクトは、光と影で表現するので、色の濃淡で影やハイライトをつけていきます。ですから前述した通り、黒背景や白背景では表現が難しい …。

そしてその光や影を表現するスペースの少ない、細いラインのフォントなども、レタープレスエフェクトにはあんまり向かないかも。やっぱり太めのフォントの方がきれいに仕上がりますよね!

色の濃淡:4つの色の関係

ちょと微妙だった ... 一応レタープレスエフェクトです

一般的な … というか、オーソドックスなレタープレスのデザインをちょっと観察してみます。“I Love Design” という部分をよく見ると、色の濃淡で凹んだ立体感を表現しているのがよく分かります。

何色使われているのかを数えてみると、以下のように 4色を使って表現していますねー。

カラーパレッt

左から “背景色”“テキストの色”“テキストの内側の影の色”、そして最後が “光の当たっているハイライト部分の色” です。当然影の部分はテキストの色より暗く、ハイライトの部分は背景色より明るくなっています。

こんな風な色の関係を保つのが、キレイなレタープレスエフェクトを作る基本ですね!背景色が白や黒の場合は、この4色の関係を作るのが難しいので、キレイなレタープレスエフェクトが難しいんですね!

テクスチャやグラデーションと相性がいいレタープレス

テクスチャとグラデーションと組み合わせ

レタープレスエフェクトは、現実の世界での質感や立体感を、平面の Webサイト … ディスプレイ上で擬似的に表現したものです。現実世界では、布や木、そしてもちろん紙などによく使われるレタープレス。なので Webデザインでも、擬似的な質感をもたせたテクスチャと組み合わせると、いい感じになるような気がします。

また、光の加減を表現するので、当然グラデーションとの組み合わせも相性がいいです。上記ではテクスチャとグラデーション、両方を使ってみました。

また、立体的に見せる表現なので、エンボスエフェクトと組み合わせてもいい感じですね!

色の濃淡を観察してばかりだと、ワンパターンな表現になりがち …。でも工夫したいでいろんなレタープレスエフェクトが楽しめますねー。

2012

3. Photoshop でレタープレスエフェクトを作ってみる

このページで使っている図版のレタープレスは、Photoshop や Illustrator を使ってつくりました。ここでは Photoshop を使った、レタープレスエフェクトの作り方をおさらいしてみますね!

完成図

Photoshop を使って、「Graphic」の部分を作ります。… STYLE のゴールドがわざとらしかったかも … X(

3.1. 文字を書く

タイポグラフィーを書く

まずはレタープレスエフェクトをかける文字を書きます。少し太めのフォントにするのがポイントです。今回は Lobster というフォントを使ってみました。

3.2. グラデーションを加える

グラデーションを加える

“メニュー → レイヤー → レイヤースタイル → グラデーションオーバレイ” で、フォントにグラデーションをかけます。グラデーションの角度は 90度。もちろんこれはお好みで調整してください。上部が濃く、下へいく程薄くなるように調整します。

3.3. 内側のシャドウを加える

ベベルを加える

細かい部分なので、画像は拡大しています。テキストの内側上部にシャドウを加えていきます。

次にテキストの中に、シャドウを加えていきます。”シャドウ(内側)” を使ってもいいのですが、今回は “ベベルとエンボス” を使ってみました。各値の設定は上記の通りです。“ベベル(内側)” にして、方向は “下へ” に設定します。また、“ハイライトの不透明度” は 0%にして、表示されないようにします。ハイライトの部分は、次のステップの “ドロップシャドウ” で作るので、ここでは消しておきましょう。

3.4. ハイライトを加える

ハイライトを加える

最後にテキストの下に、ハイライトを加えます。“ドロップシャドウ” を使って、白い 1px のハイライトを加えました。

完成

完成

こんな感じに完成しました!

4. CSS3でレタープレスを作る

ついで … と言ってはなんですけど、CSS3 からは text-shadow が使えますよね!これを使ってレタープレスエフェクトを表現するサイトも増えています。実際は 1px 程度のシャドウを上か下につけるだけですが、たった1行で表現できるので、私もとってもよく使っています。

CSS3

.shadow {
    text-shadow: 
    	/* 上部のシャドウ */
    	0 -1px 1px rgba(0, 0, 0, .4), 
    	/* 下部のハイライト */
    	0 1px 1px rgba(255, 255, 255, .75);
}

text-shadow は複数指定できるので、大きいサイズならシャドウとハイライトを両方していするとキレイです。でも、小さいサイズの場合は、シャドウはつけないでハイライトの部分だけにしたほうが、仕上がりがキレイですねー。下記リンク先では、たくさんの CSS3 で作ったレタープレスエフェクトのサンプルがあるので、ぜひ覗いてみてください!

Comments

Thank you for the comment.