webデザイン

意外と知らないっ、、Photoshopで文字の輪郭(境界線)だけに影を付ける方法

Photoshopで文字の輪郭(境界線)に影を付けようと思っても、「外側だけしか影が付かないっ、、」なんて経験があると思います。

デザインの現場では当然、輪郭の内側にも影を付けたいケースは多々あるので、ここでは塗りを0%にして、レイヤースタイルをラスタライズしてから影を付けるというポイントを解説していきます

Photoshopで文字の輪郭(境界線)だけに影を付ける方法

任意のテキストを入力します。ここでは1946(特に意味はありません)

drop-shadow04

入力したテキストレイヤーを新規レイヤー作成ボタンにドラッグして、レイヤーを複製します。続いて、複製元のレイヤーの目のマークを外して非表示にしておきます。(複製する理由は後でわかります)

drop-shadow05

複製したテキストレイヤーにレイヤースタイルの境界線を適用します。

drop-shadow077

境界線のサイズ、カラーなどを調整

drop-shadow08

icon-bullhorn 境界線を適用したテキストレイヤーの塗りを0%にすると、境界線のみが残ります。(不透明度を下げると境界線も一緒に下がってしまいます。)

drop-shadow09

この状態でドロップシャドウをかけてみると、文字の外側には影ができますが、内側には影ができませんっ、、

drop-shadow10

icon-bullhorn こういった場合には、境界線のみが表示されている状態で一旦、右クリックしてレイヤースタイルをラスタライズします。(※ラスタライズしてからサイズ変更すると画質が下がったりするので、複製しておくクセをつけておきましょう)

drop-shadow111

ラスタライズしてからドロップシャドウを適用すれば、外側にも内側にも影を付けることができます

drop-shadow12

他のスタイルも適用可能なので、ちょっと立体感を出すためにべベルとエンボスをかけてみます。(もちろんグラデーションなども可能)

drop-shadow13

ここで非表示にしていた複製元のテキストレイヤーを表示して、塗りを下げて半透明にしてみます

drop-shadow014

文字の輪郭(境界線)だけに影が付きました

Photoshopで文字の輪郭線に影を付ける

スリームデザインの無料メールマガジン

ピックアップ記事

  1. photoshopで仕事をしたい人が身につけておきたい技術や使い方のまとめ。日本…
  2. WordPressの使い方に迷ったらまずこの記事をチェック!すごく参考になる秀逸…
  3. 「特訓Photoshopプロのテクニック教えます!」という本のWEB版を『無料』…
  4. 「ブロガーがこんなの読んだら反則レベルでしょっ、、」と思うくらい文章力が上がりそ…
  5. フリーランスや起業家になる前にこれだけは理解しておきたい5つのマトリックス&チャ…

関連記事

  1. webデザイン

    芸能人のアメーバブログのようなヘッダーを作成・依頼する前に知っておいたほうが良いこと。

    《芸能人のブログヘッダ画像まとめ【モデル偏】【アイドル偏】》などを見る…

  2. webデザイン

    photoshopで背景を透明なままPNGで保存するのは簡単だよ!

    WEBサイトでアイコンやイラストなどを使用する場合、背景を透明なままで…

  3. webデザイン

    photoshopで映画タイトルロゴのようなメタリックでカッコ良い文字を作るチュートリアル!

    スパイダーマンやアイアンマンなどいかにもMARVELの映画で出てきそう…

  4. webデザイン

    photoshopで雰囲気のあるセピア調に仕上げるプロの技術。

    photoshopで写真をセピア調にするのはすごく簡単。 ⇒ phot…

Wordpress日本語テーマのまとめ
photoshop日本語チュートリアル

よく読まれている人気の記事

最近の記事

  1. 「特訓Photoshopプロのテクニック教えます!」という本…
  2. 「いつも締め切りに追われてしまう」そんな人がミッションを成し…
  3. Photoshop CCのメニュー文字やツールバーが異常に小…

思考系のおもろい記事

ブログラ
  1. SNS

    思わずクリックしてしまう画像でアクセスアップ!2番目に簡単なブログのアイキャッチ…
  2. SEO

    WordPressの使い方に迷ったらまずこの記事をチェック!すごく参考になる秀逸…
  3. webデザイン

    photoshopで仕事をしたい人が身につけておきたい技術や使い方のまとめ。日本…
  4. 3分の話

    柔軟な思考を大切にしたいクリエイター必読の5冊。私の頭をグニャングニャンに柔らか…
  5. フォトショップ

    見ているだけで「Photoshopの実践的な使い方が学べる」日本語解説付き動画の…
PAGE TOP