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デザイン

    【Photoshop】ボタントレース方法

    こんにちは。ゆかちんです!すっかり寒くなってきましたね。ローソンのMACHIcafeで買ったココアがカップかわいくってほっこりします。入社…

  2. WEBデザイン

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

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

  3. WEBデザイン

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

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

  4. WEBデザイン

    邦楽バンドのオシャレなWEBサイト10選(+α)

    おはようございます、私です。8月半ばから胃の不調に悩まされ続け、一時は胃潰瘍かとも思われておりましたが、先日とうとうお茶漬けを前にして一口…

  5. Photoshopで部分的にカラーにしたモノクロ画像を手軽に作る方法

    WEBデザイン

    Photoshopで部分的にカラーにしたモノクロ画像を手軽に作る方法

    どうも、テイクフォー谷口です。先日の3連休は地元の地車祭を観に行ったり、心斎橋一帯のライブハウスを巡るイベントに行ってきました^^さて…

  6. WEBデザイン

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

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

コメント

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

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

CAPTCHA


最近の記事

  1. HTMLコーディング

    【SVGことはじめ その1】SVG形式の画像ファイルを作って表示させてみよう
  2. コピーライティング

    コピーライティング心理学 そのいち ~バンドワゴン効果~
  3. コピーライティング

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

    さくさく進める勉強会準備
  5. HTMLコーディング

    EC-CUBE3でテンプレート適用後にパスが通らなくなってしまったときの対処法
PAGE TOP