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. 思わずクリックしてしまう画像でアクセスアップ!2番目に簡単なブログのアイキャッチ…
  2. 柔軟な思考を大切にしたいクリエイター必読の5冊。私の頭をグニャングニャンに柔らか…
  3. 「特訓Photoshopプロのテクニック教えます!」という本のWEB版を『無料』…
  4. 必読!安易に起業ブームに乗っかる前に…絶対に読んでおきたい【おすすめのビジネス書…
  5. photoshopで仕事をしたい人が身につけておきたい技術や使い方のまとめ。日本…

関連記事

  1. フォトショップ

    photoshopでしわ取りするのは案外簡単だよ。

    しわ取りするのは案外簡単、というより最近のphotoshopはすごい!…

  2. webデザイン

    ブロガー必見!パソコン画面のはめ込み画像がわずか10秒で作れるMockDropが便利すぎた。

    ブログを書いているとパソコン画面の"はめ込み画像"を作りたい場合があり…

  3. webデザイン

    ブクマ必須!見ているだけでPhotoshopスキルが磨かれる感性豊かなテクニック動画のまとめ

    テクニックとは、単なる技術のことを指すのではありません。頭の中…

  4. webデザイン

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

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

  5. webデザイン

    photoshopで立体を回転させるのはめちゃめちゃ簡単だった、、垂直方向が1分で完成!

    以前、こちらの記事で ⇒ これで解決っ!photoshopで壁から浮き…

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

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

最近の記事

  1. 画像スライダーだけじゃない!WordPressのブログ記事が…
  2. 「特訓Photoshopプロのテクニック教えます!」という本…
  3. 「いつも締め切りに追われてしまう」そんな人がミッションを成し…

思考系のおもろい記事

ブログラ
  1. SEO

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

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

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

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

    「特訓Photoshopプロのテクニック教えます!」という本のWEB版を『無料』…
PAGE TOP