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

    問い合わせフォームを追加しよう!Contact Form 7の使い方!

    おはようございます、最近はインスタグラムのおすすめ動画でひたすらポメラニアンの子犬の動画を見てひたすら癒されているふきちゃんです。韓国だけかはわか…

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

    WEBデザイン

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

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

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

    WEBデザイン

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

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

  4. WEBデザイン

    よく見る方眼紙のようなパターンの作り方

    おはようございます、ふきちゃんですふきちゃんです、と書いている時高確率で安田大サーカスのクロちゃんで再生されております、小春日和のうららかな季節で…

  5. WEBデザイン

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

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

  6. WEBデザイン

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

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

コメント

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

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

CAPTCHA


最近の記事

  1. WEB集客

    「いらすとや」について考察してみました
  2. レポート

    願い事が叶うと話題の鈴虫寺に行ってきました!
  3. お知らせ

    Webデザイナー募集中
  4. HTMLコーディング

    【PHP】ページ毎に表示を変えるサイドメニューの分岐の方法
  5. Photoshopで部分的にカラーにしたモノクロ画像を手軽に作る方法

    WEBデザイン

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