CareerPhotoshopで簡単にペンキで描いた風の文字を描く方法モモコ2014.04.15Web制作デザインShareこんにちは、デザイナーのモモコです。今回は木の板にペンキで描いたようなテキストを表現するチュートリアルをご紹介します。CCを使用しますが、バージョンがCS3以上であれば十分に制作可能です。Textureから以下の素材をダウンロードします。(ダウンロードにはユーザ登録が必要です)BrickMedievalBlocks0022(1600×1158)WoodPlanksClean0027(1600×1200)フォントは好みのものを用意しましょう。背景レイヤーの上に素材を配置するまず、1000×718pxの新規PSDを作ります。先ほどダウンロードした素材の「BrickMedievalBlocks0022」を背景レイヤーの上に配置します。ドキュメント内に収まるように適宜サイズを調整してください。続いて「BrickMedievalBlocks0022」にレイヤー効果(グラデーションオーバーレイ)をつけていきます。文字を配置するお好きなフォントを使い、テキストレイヤーに白文字を打ち込みます。サイズ等を決めたら、テキストレイヤーを複製して下の階層に置きます。このレイヤーを使って、文字の層(厚み)を作っていきます。複製レイヤーを編集→自由変形(ctrl/cmd+T)して下・右に1pxずつずらし変更を完了させます。続いてAlt+ctrl+Shift+TもしくはOption+cmd+Shift+Tを押して複製レイヤーを更にコピーしていきます。お好みでコピーの数は変更して大丈夫です、今回は18枚分のレイヤーをコピーしました。コピーしたレイヤーを全て選択し、レイヤー→レイヤーの結合を行います。結合したレイヤーにレイヤー効果(境界線)をつけていきます。色:#ffffff効果をつけたレイヤーの塗りを0%にします。これで文字の装飾が完成です!元のテキストレイヤーと複製レイヤーを結合しておきましょう。土台を置くダウンロードした素材「WoodPlanksClean0027」をテキストの下に配置します。この素材もドキュメント内に収まるように適宜サイズを調整してください。素材に合わせてテキストレイヤーも縮小させます。:+2彩度:-15更にイメージ→色調補正→レベル補正を選択します。土台に立体感を出すctrl/cmdを押しながら「WoodPlanksClean0027」レイヤーをクリックして選択範囲を取ります。そのまま新規レイヤーを「WoodPlanksClean0027」の下に追加し、塗りつぶしツールを使って#362f2dで塗りつぶします。塗りつぶしたら選択は解除してください。文字の装飾を作った時と同じような要領で板の厚みを作ります。今回は2枚分のレイヤーをコピーしました。これも同じように結合しましょう。続いて結合したレイヤーにレイヤー効果をつけていきます。ドロップシャドウ距離:15pxサイズ:27pxこれで木のパネル部分は完成です。テキストに素材感を加える現実的なゆがみをつけるため、背景レイヤーを除いたレイヤーをすべて選択します。そのまま編集→変形→遠近を選びましょう。枠が表示されたら左上の角をクリックし下方向へ-0.2ほどずらします。続いてツールの前景色を#b6a187、背景色を#ffffffに設定してからテキストレイヤーを選択します。フィルター→(フィルターギャラリー)→スケッチ→クレヨンのコンテ画を選択。描画レベル:11背景レベル:7テクスチャ:カンバスフィルター→ノイズ→ノイズを加えるを選択。ノイズを加える量:5%グレースケールノイズこれでテキストに素材感が加わりました。木目に沿った溝を入れるツールから消しゴムツールを選択し、ブラシのパネルを開きます。ブラシは「chalk11pixels」を選び直径を7pxに変更します。シェイプの項目ではサイズのジッターを3%にしておきます。滑らかさの項目にチェックを入れておきましょう。ここで、作ったブラシで木のパネルにへこみを追加していきます。ペンキで塗れない部分を作る事により更に現実的な描写に近づいていきます。木目の流れに沿って左側の始点を一度クリックし、Shiftを押したまま右側の終点を決めます。グラデーションマップを加える最後にレイヤー→新規調整レイヤー→グラデーションマップを追加します。レイヤーを乗算に変更し、不透明度を70%に落とします。グラデーションは左側を#d7d7d7、右側を#ffffffに変更します。これで完成です!まとめ今回は下記サイトを参考にこの記事を制作させていただきました。立体感のあるパネルの作り方やフォントの装飾、色味の変更など1つのチュートリアルにもたくさんのテクニックが使われており、とても勉強になりました。Effecthttps://textuts.com/painted-on-wood-text-effect/LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。このメンバーの記事をもっと読むデザイナーのモモコです。ジャンプは単行本派です、よろしくお願い致します。PopularPR連載一覧イベント情報Web制作デザインTechnologyAIオウンドメディアSEO対策アプリ開発システム。