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. photoshopで仕事をしたい人が身につけておきたい技術や使い方のまとめ。日本…
  3. WordPress日本語有料テーマの決定版っ!TCDシリーズのまとめ
  4. WordPressの使い方に迷ったらまずこの記事をチェック!すごく参考になる秀逸…
  5. 思わずクリックしてしまう画像でアクセスアップ!2番目に簡単なブログのアイキャッチ…

関連記事

  1. webデザイン

    Photoshopで自由に点線(直線・曲線・図形を囲む)を書きたいときの1番簡単な方法

    Photoshopで点線を書く方法はいくつかありますが、直線や曲線、図…

  2. 3分の話

    3分でわかる想像力(創造力)を鍛える方法

    想像力はクリエイティブ(創造的)な仕事をする上でとても重要な要素です、…

  3. webデザイン

    photoshopで普通のノイズを加えるだけじゃ満足できない人にはNoise Texture Gen…

    通常、画像にザラっとしたノイズを加える場合には ↓ のようにフィルター…

  4. フォトショップ

    photoshopで顔を明るく立体的な印象を付ける方法。

    photoshopで顔を明るくするにはトーンカーブやレベル補正などで簡…

  5. webデザイン

    【デザイナー必見】パクリと言われないために類似画像検索で確認しておこう

    作品を創り出す際、クライアント用のデザインや自身のアートに限らず、その…

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

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

最近の記事

  1. 「いつも締め切りに追われてしまう」そんな人がミッションを成し…
  2. Photoshop CCのメニュー文字やツールバーが異常に小…
  3. 思わずクリックしてしまう画像でアクセスアップ!2番目に簡単な…

思考系のおもろい記事

ブログラ
  1. SEO

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

    柔軟な思考を大切にしたいクリエイター必読の5冊。私の頭をグニャングニャンに柔らか…
  3. webデザイン

    photoshopで仕事をしたい人が身につけておきたい技術や使い方のまとめ。日本…
  4. コピーライティング

    「ブロガーがこんなの読んだら反則レベルでしょっ、、」と思うくらい文章力が上がりそ…
  5. キュレーション

    WordPress日本語有料テーマの決定版っ!TCDシリーズのまとめ
PAGE TOP