webデザイン

Photoshopで文字に影を付ける”3つの方法”を知っておくだけで表現の幅がグィ~ンっと広がるって本当ぉ!?

Photoshopで文字に影を付けるには、レイヤースタイルのドロップシャドウを適用すればいいだけなのですごく簡単です。しかし、毎度毎度ただ影を付けているだけだと単調な表現しかできません

カッコ良いロゴをデザインしたり、文字を加工して立体的なタイポグラフィーなどを作りたい場合には、影の付け方をしっかりマスターしておく必要があるので、ここでは・・

  • ① ドロップシャドウの基本的な適用の仕方
  • ② 文字の境界線に影を付ける方法
  • ③ 文字を切り抜いて影を付ける方法

を解説していきます。

1つ、2つバリエーションを増やしただけで一気に表現の幅が広がり、自由に組み合わせて応用することができるようになるので、まずは基本的なドロップシャドウの適用の仕方を覚えましょう。(背景素材は unsplash から探しました)

ドロップシャドウの基本的な適用の仕方

任意のテキストを入力します(テキストを中央に配置したい場合は ⇒ こちら

drop-shadow01

入力したテキストにレイヤースタイルのドロップシャドウを適用します。

drop-shadow022

影の濃さや角度、大きさなどを任意で調節

drop-shadow03.

以上!10秒くらいで文字に影を付けることができました。

文字に影が付きました

drop-shadow1↑ クリックすると拡大します

ちなみに、影を付けたテキストレイヤーを右クリックしてレイヤースタイルを消去で元の状態に戻せます

drop-shadow557

続いて、影を付けるバリエーションをマスターしましょう↓

文字に影を付けるバリエーション

Photoshopで文字の輪郭だけに影を付ける方法topへ戻るPhotoshopで文字を切り抜いて影を付ける方法
スリームデザインの無料メールマガジン

ピックアップ記事

  1. 思わずクリックしてしまう画像でアクセスアップ!2番目に簡単なブログのアイキャッチ…
  2. 柔軟な思考を大切にしたいクリエイター必読の5冊。私の頭をグニャングニャンに柔らか…
  3. 見ているだけで「Photoshopの実践的な使い方が学べる」日本語解説付き動画の…
  4. 「特訓Photoshopプロのテクニック教えます!」という本のWEB版を『無料』…
  5. フリーランスや起業家になる前にこれだけは理解しておきたい5つのマトリックス&チャ…

関連記事

  1. フォトショップ

    photoshopで肌の赤みをとる方法ならこれだっ!

    顔や肌の赤みを修正したい場合、1ヶ所1ヶ所修正していくと非常に時間がか…

  2. webデザイン

    photoshopで写真をセピア調にする一番簡単な方法!

    写真をセピア調にしたい場合photoshopを使えば超簡単!ものの30…

  3. webデザイン

    ちょっとした裏技!?Photoshopで文字を切り抜いて影を付けるレイヤーマスクの活用方法

    前面に紙や壁があることを想定し、文字の形に切り抜いて影を付けたい場合に…

  4. webデザイン

    photoshopでまるで本物の油絵タッチに仕上げるためのフィルター&塗り方講座。

    photoshopで油絵タッチに仕上げるために、まず ↓ のように風景…

  5. webデザイン

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

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

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

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

最近の記事

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

思考系のおもろい記事

ブログラ
  1. 3分の話

    フリーランスや起業家になる前にこれだけは理解しておきたい5つのマトリックス&チャ…
  2. 3分の話

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

    WordPress日本語有料テーマの決定版っ!TCDシリーズのまとめ
  4. webデザイン

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

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