webデザイン

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

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

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

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

を解説していきます。

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

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

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

drop-shadow01

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

drop-shadow022

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

drop-shadow03.

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

文字に影が付きました

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

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

drop-shadow557

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

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

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

ピックアップ記事

  1. photoshopで仕事をしたい人が身につけておきたい技術や使い方のまとめ。日本…
  2. 「ブロガーがこんなの読んだら反則レベルでしょっ、、」と思うくらい文章力が上がりそ…
  3. 柔軟な思考を大切にしたいクリエイター必読の5冊。私の頭をグニャングニャンに柔らか…
  4. 見ているだけで「Photoshopの実践的な使い方が学べる」日本語解説付き動画の…
  5. フリーランスや起業家になる前にこれだけは理解しておきたい5つのマトリックス&チャ…

関連記事

  1. webデザイン

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

    Photoshopで文字の輪郭(境界線)に影を付けようと思っても、「外…

  2. webデザイン

    デザインのレイアウトが苦手なひとが今日から得意になってしまう、たった3つの方程式!

    ポスターやホームページのバナー、アイキャッチ画像など人目を引き付けるデ…

  3. webデザイン

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

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

  4. webデザイン

    フォトショップでアメコミ風に加工する所要時間たった3分のフィルター活用テクニック。

    フォトショップのフィルターを活用すると、画像を印象をガラっと変えること…

  5. フォトショップ

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

    Photoshopには写真を補正するだけではなく、デザインに必要とされ…

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

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

最近の記事

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

思考系のおもろい記事

ブログラ
  1. キュレーション

    必読!安易に起業ブームに乗っかる前に…絶対に読んでおきたい【おすすめのビジネス書…
  2. キュレーション

    WordPress日本語有料テーマの決定版っ!TCDシリーズのまとめ
  3. 3分の話

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

    見ているだけで「Photoshopの実践的な使い方が学べる」日本語解説付き動画の…
  5. コピーライティング

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