Webデザインセンスや多少知識が乏しくとも、プロっぽいデザインにできる方法があります。Web制作を助けてくれる便利なサイトの備忘録ブログ。

Photoshopのレイヤースタイルで作る窪んだようなテキストエフェクト

Photoshopのレイヤースタイルで作る窪んだようなテキストエフェクト

Photoshopのレイヤースタイルで作るテキストエフェクト

一見すごいなと思うテキストエフェクトでも、実はレイヤースタイルを駆使すればそれほど難しくない場合もあります。今回のチュートリアルそんなテキストエフェクトの作り方です。

こちらの英語サイトを参考に作成しました。http://www.photoshoplady.com/tutorial/design-a-nice-shining-text-effect/3698

Photoshopのレイヤースタイルで作る窪んだようなテキストエフェクト

テキストにレイヤースタイルを設定
HDRトーンを設定背景をグレーにし、黒で任意のテキストを入力していきます。(背景や、フォントは後からでも変更は可能ですのでまずは適当に入力します。)入力後、テキストレイヤーをダブルクリックし、レイヤースタイルを設定していきます。レイヤースタイルを以下の通り設定します。

ドロップシャドウを設定

シャドウ(内側)を設定

境界線を設定このときグラデーションはグレー→黒→白で設定しています。

パターンオーバレイを設定パターンオーバレイのパターンは下記の画像を7px×7pxに縮小して、上のメニューの「編集」「パターン定義」から予めパターンを設定しておきました。

パターンを拡大
背景にレイヤースタイルを設定
続いて背景にもレイヤースタイルを設定しておきます。背景レイヤーを選択し、ダブルクリックしてレイヤースタイルを設定します。
シャドウ(内側)を設定

グラデーションオーバレイを設定

現状現状このような状態です。
テキストの上段部分を明るくする。
テキストの選択範囲をとる。テキストレイヤーをCtrl+クリックしてテキストの選択範囲をとります。

グラデーションを設定新規レイヤーを作成し、グラデーションツールから白から透明のグラデーションをテキスト上段にかけます。

楕円形ツールをを設定選択範囲を一旦解除して、楕円家選択ツールよりテキスト上段を選択します。

選択範囲を反転上のメニューから「選択範囲」「選択範囲」をクリックし、選択範囲を反転させます。反転させたら、Deleteキーで下段を削除します。描画モードは、「オーバーレイ」にしておきます。このようにすることで、上段部分だけ明るくする事が出来ます。

現状
仕上げ
ブラシ選択新規レイヤーを作成します。ブラシツールよりソフト円ブラシを選択します。テキストの縁に沿って任意の位置に円ブラシを置いていきます。
描画モードは「オーバーレイ」不透明度は70%、塗りも70%にすれば完成です。

完成

楽してプロっぽいデザイン|Forty-N-Five Blog Trackbacks

このエントリーのトラックバックURL

コメントを投稿

Name:
Mail:
URL:
この情報を登録しますか?

Photoshopのレイヤースタイルで作る窪んだようなテキストエフェクトの前後の記事

前の記事は「またやってみた!わずか3分でプロっぽい写真にできるPhotoshopでHDR風

次の記事は「Photoshop(フォトショップ)で5分程度で満月を描く方法

関連する情報

              

楽してプロっぽいデザイン|Forty-n-FiveBlog ホームへ戻る

検索

最近のエントリー

カテゴリー

月別アーカイブ

タグクラウド

管理人紹介

ポートフォリオサイト|Forty-N-Five

フィードを取得

フィードを取得する

スポンサードリンク

運営SHOP

健康美人30代から始める美と健康は、MovableTypeを使用して制作した通販サイトです。

健康美人30代から始める美と健康 もてもてSHOP NOLOOKS 和彩

元気をくれた本

「夢をかなえるゾウ」この本に出会えて良かったとホントに良かった思います。Webには関係ないですが、これからの人生を楽しくしてくれる本です。ガネーシャどうもありがとう(笑)

Copyright Forty - N - Five. All rights reserved.