Pocket

こんにちは。Webデザイナーの斧山です。今回は、海外デザインブログ「Abduzeedo」で紹介されていた、Photoshopでリアルな活版を再現するチュートリアル「Realistic Letterpress Effect in Photoshop」をご紹介したいと思います。Photoshopのレイヤースタイルを駆使したテクニックが満載なので参考になりそうです。それでは早速いってみましょう!

STEP1

Photoshopを開き、新規ドキュメントを作成し、背景を黒(#000000)で塗りつぶします。
かっこいい活版効果を作成するためのポイントは、一文字ごとに違う書体とフォントサイズにすることです。一文字づつテキストレイヤーを分けて文字を入力し、その下に長方形をレイヤーをつくります。書体の形によって長方形のレイヤーを調整します。文字を少し不規則に配置すると雰囲気が出ます。今回はホームタウンの笹塚の文字を活版化していきたいと思います。

sasazuka-type-step1

STEP2

長方形レイヤーを選択し、[レイヤースタイルから「ドロップシャドウ」を選択。色は黒(#000000)、描画モード:乗算、角度:120 、距離:3px、サイズ:10pxを指定します。
sasazuka-type-step2

STEP3

引き続きレイヤースタイルで「ベベルとエンボス」を選択し、 構造は[スタイル:ベベル(内側)、テクニック:シゼルハード​​、深さ:1000%、サイズ:1px]を指定。
陰影は[角度:90、高度:5、ハイライトのモード:白(#FFFFFF)の覆い焼きカラー、不透明度:58%、シャドウのモード:黒(#000000)のカラー比較(暗)、不透明度:75%]を指定します。

sasazuka-type-step3

STEP4

続きまして「カラーオーバーレイ」を選択し、[描画モード:ソフトライト]を設定し、濃い灰色を指定します。よりリアルなディディールにするコツとして、各長方形は異なった色を使用すると色のばらつきがでてよりリアルになります。

sasazuka-type-step4

STEP5

パターンオーバーレイ」を選択します。
活版のリアルな雰囲気を再現するために錆びた鉄のようなテクスチャを選択します。このテクスチャののクオリティが出来映えを左右するのでいろいろ試してみるとよいと思います。

sasazuka-type-step5

STEP6

ここでひとまず四角形のスタイルは完成。続いて、フォントのレイヤースタイルを設定していきます。

sasazuka-type-step6

STEP7

SASAZUKAのふたつ目の「A」を選択し、レイヤー>レイヤースタイル>ドロップシャドウを選択。描画モード:黒(#000000)カラー比較(暗)、不透明度:25%、角度:90度、距離:3px、サイズ:3pxと設定します。

sasazuka-type-step7

STEP8

続いて、「ベベルとエンボス」を選択します。構造を[スタイル:エンボス、テクニック:シゼルハード、深さ:625%、方向:上へ、サイズ:2px]に設定。
陰影は[角度:90度、高度:50度、光沢輪郭:円錐、ハイライトのモード:白(#ffffff)スクリーンで不透明度40%、シャドウのモード:白(#ffffff)カラー比較(暗)で不透明度74%]を設定します。

sasazuka-type-step8

STEP9

パターンオーバーレイは長方形とは別のテクスチャを使用します。四角形に使用したテクスチャより、明るめのものを使用します。

sasazuka-type-step9

STEP10

これで一連のレイヤースタイルの設定は完了です!

sasazuka-type-step10

STEP11

他の文字にもレイヤースタイルを適用します。
STEP4でも触れましたが、四角形のカラーオーバーレイの色味をそれぞれ変化をつけておくとよりリアリティが出ます。

sasazuka-type-step11

STEP12

さらにリアルな雰囲気にするため、ブラシを使って長方形に汚し(グランジ加工)を入れていきます。
任意の四角形を選択し、[レイヤー> >レイヤーマスク> >全ての領域を表示]を選択しレイヤーマスクをつくります。続いて「ブラシツール(B)」を選択、[color:黒(#000000)、直径:3px、硬さ:0%]を設定し、グランジ加工を加えていきます。フリーハンドで描くだけでもエンボスが効いているので何となくいい感じになるのでガシガシ描いていきます。下の画像もご参考ください。

sasazuka-type-step12

STEP13

他の長方形にも同様の作業を行います。

sasazuka-type-step13

STEP14

背景レイヤーを濃いグレーの放射状グラデーションを変更します。

sasazuka-type-step14

STEP15

最期にテキストに使用しているテクスチャーを先ほど製作した背景グラデーションに「パターンオーバーレイ」で貼りつけて完成です!設定は[描画モード:乗算、不透明度:100%、比較:50%]

sasazuka-type-step15

まとめ

以上となります!最終的に凄みのある活版のグラフィックが出来上がりました。個人的にはエンボスの使い方とグランジ加工がためになりました。よく見るデザインでも実際に手を動かすことで気づくこともたくさんあると思いますので息抜きにチュートリアルをしてみるのもよいと思います。みなさんも是非試してみてください!

 

スタッフ募集のお知らせ

株式会社それからデザインでは現在、エンジニア・プログラマー、デザイナー、ディレクターを募集しています。自社サービスやクライアント企業のブランディングに関わるモノづくりの現場であなたの経験を活かしてみませんか?
ご興味のある方は、下記より募集要項をご覧ください。

生きるように働く人の仕事探しサイト「日本仕事百貨」に、当社のSE・プログラマー募集の記事が掲載されました。是非ご覧ください。