webデザイン

Photoshopでネオン管が光っているような文字の作り方を解説

歓楽街を歩いているとBARやライブハウスなどのネオン看板が夜の街を彩っています。ここでは10分程度の工程でPhotoshopでネオン管が光っているような文字の作り方を解説します

背景を複製し、新規レイヤーに任意のテキストを入力(OPEN)。

neon-tube01

複製した背景にレイヤーマスクを追加し、描画モードを通常から乗算に変更。

neon-tube02

レイヤーマスク部分に不透明度や流量を調整した黒色のブラシでテキストの周辺をなぞるように塗ります。

neon-tube03

テキストレイヤーにレイヤー⇒レイヤースタイル⇒境界線を選択しサイズを調整。(色はテキストと同色)

neon-tube04

テキストの塗りを0にして境界線だけを表示させます。

neon-tube05

テキストを複製して非表示にし、複製元のテキストを右クリックでレイヤースタイルをラスタライズ

neon-tube06

テキストを複製して非表示にし、複製元のテキストを右クリックでレイヤースタイルをラスタライズ

neon-tube07

ぼかしたレイヤーの描画モードをオーバーレイに変更し、非表示にしていた最前面のレイヤーを表示させて確認します。

neon-tube08

オーバーレイに変更したレイヤーを2つ複製し、コピー3のレイヤーの描画モードをオーバーレイからスクリーンに変更。

neon-tube09

最前面のレイヤーを右クリックしレイヤースタイルをラスタライズ

neon-tube10

レイヤー⇒レイヤースタイル⇒ベベルとエンボス&シャドウ(内側)&ドロップシャドウを適用し、立体感のあるネオン管の表現に近づけます。

neon-tube11

ネオン管の表現に近づけた最前面のレイヤーを複製し、ドロップシャドウのチェックをはずしてベベル(内側)の数値をMAXに、その他の数値も画面を見ながら調整。

neon-tube12

再びレイヤースタイルをラスタライズして描画モードをソフトライトに変更。

neon-tube13

ソフトライトに変更したレイヤーを複製し、コピー5の描画モードをスクリーンに変更し、選択ツールでボカしながら、適当に切り抜く(切り抜かず残った部分が少し明るく表現されます)。

neon-tube14

ネオン管が光っているような文字の完成

neon-tube15

クリックすると拡大して見れます↑
スリームデザインの無料メールマガジン

ピックアップ記事

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

関連記事

  1. キュレーション

    インスピレーションを掻き乱されるほどのPhotoshop超絶テクニック!Youtube動画12選。

    デザイナーやクリエイターなら誰しも、自分の想像を超えるような作品を生み…

  2. webデザイン

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

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

  3. webデザイン

    細部(ディティール)へのこだわりがWEBデザインに差をつける。Photoshop編

    魅せる伝えるヘッダーデザインを作成する5つの工程の5番目、ここでは⑤ …

  4. webデザイン

    photoshopで仕事をしたい人が身につけておきたい技術や使い方のまとめ。日本語のチュートリアルで…

    ここではスリームデザインが実際に仕事をする際に使っているほぼ全ての技術…

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

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

最近の記事

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

思考系のおもろい記事

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

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

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

    思わずクリックしてしまう画像でアクセスアップ!2番目に簡単なブログのアイキャッチ…
  4. フォトショップ

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

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