WEBデザイン

Photoshopでオシャレなネオンサインのような文字を作る方法

おはようございます、新入社員のふきちゃんです!

私はライブハウスに行くのが好きなのですが、バーカウンターに飾られてるレッドブルやハイネケンのネオンサインを見ては「可愛いな~欲しいわ~」と思っています。いらないけど。
なので、今回はライブハウスやバー、クラブなどにあるようなネオンサイン風の画像をPhotoshopで作ってみたいと思います!

discoooooooooooooo

こんな感じのやつです。

使用フォントはこちら
レンガの画像はこちら

1_v2

まず、ネオンサインが映えるのはやっぱり夜なので背景を暗くします。
イメージ>色調補正>色相・彩度 をクリック
明度と彩度を下げ、お好みの暗さに調整してください。

1_v2
次に、テキストツールで適当なフォントで適当な文字を入れます。

2

DISCOにしました。
文字を縁取りしたいと思いますので、文字レイヤーを選択してレイヤー>レイヤースタイル>境界線を選択。

3

このように選択し、OKを押します。
レイヤーパレットでテキストレイヤーの塗りを「0%」にすると縁取り文字になります。そのまま右クリックをして「テキストをラスタライズ」。

縁取り文字にしたレイヤーを複製し、元のテキストのレイヤーを右クリックで「レイヤーをラスタライズ」、
フィルター>ぼかし>ぼかし(ガウス)を選択し、半径の数値を調整。
今回は10pxに設定してます。

3_5

(わかりやすいように一番上のレイヤーは非表示にしてます)
設定したらぼかしたレイヤーの描画モードをオーバーレイに変更し、2つ複製します。
コピー3のレイヤーの描画モードをオーバーレイからスクリーンに変更します。

4

(非表示にしていたレイヤーを表示にしました)
文字が発光しましたね

次に、最前面のレイヤーを選択し、レイヤー>べベルとエンボス、シャドウ(内側)、ドロップシャドウを設定します。
c

以上のように設定すると

8

この時点でだいぶそれっぽくなります。
このレイヤーをさらに複製し、ドロップシャドウのチェックを外してヘベルとエンボスのレイヤースタイルを変更します。

9v2

深さを1000%にします。
ここでさらにそれっぽくなるように他の効果も調整します。

10

だいぶはっきりしました。これで完成ですが、もっと発光させようと思います。
ですが、もっと発光させようと思います。

背景レイヤー(レンガ)の上に新規レイヤーを作成します。
そのレイヤーを選択し、フィルター>描画>雲模様1を選択

11

楕円形選択ツールで文字の周りを囲みます

12

選択範囲>選択範囲を変更>選択範囲をぼかすで60pxと設定し、選択範囲>選択範囲を反転します。
そのままデリートキーを押し、雲模様のレイヤーの描画モードを「覆い焼きカラーに変更」します

discoooooooooooooo

ピックアップ記事

  1. 【お客様インタビュー】サンキョウプラテック株式会社様

関連記事

  1. WEBデザイン

    色相環でグラデーションを描いてみよう

    最近めっきり寒くなりまして熱燗のおいしい季節になってきました、こんにちはともさんです。今回は色相環を使ってグラデーションを描いてみましょう、という…

  2. WEBデザイン

    投稿記事を複製しよう!Duplicate Postの使い方

    おはようございます、気圧にずっとやられています、ふきちゃんです。気象病を紛らわすために薬を飲むと今度は眠くなって寝てしまうし、Dead or De…

  3. WEBデザイン

    Photoshopで付箋風のデザインを作る方法!!

    おはようございます、ふきちゃんです。私は未経験での入社でして、前職ではイラストレーターを使っていたのですが、Photoshopに未だに慣れず、…

  4. WEBデザイン

    【illustrator】簡単トレース方法

    こんにちは!ゆかちんです(^^)/あっという間に寒くなってきましたね。コーヒーが美味しい季節です。グランフロントの中にあるDOWNSTAIRS…

  5. 【Photoshop】レイヤーを上手く使い回そう Vol.1スマートオブジェクト編

    WEBデザイン

    【Photoshop】レイヤーを上手く使い回そう Vo.1スマートオブジェクト編

    どうも僕です、テイクフォー谷口です。季節もいよいよ秋到来ですね。ただこの時期はまだ昼と夜の寒暖差があるので、体調管理には注意したいものですね。…

  6. WEBデザイン

    Photoshopで空模様の画像を作る方法

    はじめまして、テイクフォーの谷口です。今回初めて記事を書きます。さてその初回は、Photoshopで空模様の画像を作る方法をご紹介しま…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

CAPTCHA


最近の記事

  1. WEBデザイン

    ブログ内のリンク切れをチェックしよう!Broken Link Checkerの使…
  2. コピーライティング

    キャッチコピーに役立つキュレーションメディア5選!
  3. HTMLコーディング

    【WordPressでGO!】管理画面の左メニューをカスタマイズしてみよう
  4. HTMLコーディング

    社内勉強会を行いました。
  5. WEBデザイン

    Photoshopでオシャレなネオンサインのような文字を作る方法
PAGE TOP