webデザイン

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

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

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

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

を解説していきます。

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

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

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

drop-shadow01

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

drop-shadow022

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

drop-shadow03.

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

文字に影が付きました

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

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

drop-shadow557

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

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

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

ピックアップ記事

  1. 見ているだけで「Photoshopの実践的な使い方が学べる」日本語解説付き動画の…
  2. WordPressの使い方に迷ったらまずこの記事をチェック!すごく参考になる秀逸…
  3. 「ブロガーがこんなの読んだら反則レベルでしょっ、、」と思うくらい文章力が上がりそ…
  4. 必読!安易に起業ブームに乗っかる前に…絶対に読んでおきたい【おすすめのビジネス書…
  5. 「特訓Photoshopプロのテクニック教えます!」という本のWEB版を『無料』…

関連記事

  1. webデザイン

    【保存版】Photoshopの技術を一気に飛躍させるための日本語で学べる実践テクニック7連発

    Photoshopの基本的な使い方の解説はたくさんありますが、デザイン…

  2. 3D

    Photoshopで立体的なGOLD(金色)の文字を作る方法【スキルアップ動画解説付】

    Photoshopで立体的なGOLD(金色)の文字を作る方法はいくつか…

  3. webデザイン

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

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

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

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

最近の記事

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

思考系のおもろい記事

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

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

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

    WordPress日本語有料テーマの決定版っ!TCDシリーズのまとめ
  4. フォトショップ

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

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