blog

top > 學展blog

2014.9.25 (Thu)

制作

[フォトショップチュートリアル]リアルなネオン管ロゴを作ろう!

學展ブログ [フォトショップチュートリアル]リアルなネオン管ロゴを作ろう!

みなさんこんにちは。さめちゃんです。

今回は、個人的にとても大好きなネオン管をフォトショップを使って作ろうじゃないかという企画です。

実際にやってみると特に難しいステップもなく、お手軽なテクニックです。
きっと、ぱぁっと華やかになるネオン管をどこかで使いたくなるはず!

ではチュートリアルスタートです!

ステップ1 まずは雰囲気出し

まず、雰囲気を作っていくために今回は
「レンガの壁に付けられたネオン管」のイメージでいきたいと思います。

レンガのテクスチャは、以前このブログのこんなの欲しかった!商用無料可のテクスチャ素材でご紹介した、8 Brick Wall Texturesの中から使っていきたいと思います。

該当記事はこちら:http://www.gakuten.jp/create/textures_matome

まずは、ファイル > 新規を選択し、ドキュメントを開きます。
今回は、キャンバスの大きさを1600x1000pxの72px/inchとします。

學展ブログ [フォトショップチュートリアル]リアルなネオン管ロゴを作ろう!

さきほどのレンガのテクスチャ素材をカンバスに配置していきます。
テクスチャがかなりでかいのでいい塩梅にリサイズしてください。

ここで、メインメニューのイメージ > 色調補正 > 色相・彩度 を選択し、以下のように適用しましょう。

學展ブログ [フォトショップチュートリアル]リアルなネオン管ロゴを作ろう!

色相:0 彩度:0 明度:-75ですね。

ようはネオンが映えるように暗い色調に調整していきます。

ステップ2 背景を作り込む

続いてさらに背景を作り込んでいきます。

新規レイヤーを一番上に作って、描画色「黒」(#000000)、背景色「白」(#ffffff)とします。
この新規レイヤーに フィルタ > 描画 > 雲模様1を適用します。

わあ!ってなるかもしれませんが、続行して頂いて結構です。

學展ブログ [フォトショップチュートリアル]リアルなネオン管ロゴを作ろう!

続けて レイヤー > レイヤーマスク > すべての領域を表示 を選択し、レイヤーマスクを適用します。
ツールボックスのブラシツール使い、描画色「黒」(#000000)のソフトブラシで、中心部以外をマスクしていきます。

學展ブログ [フォトショップチュートリアル]リアルなネオン管ロゴを作ろう!

実はこのガスみたいなのがネオンの光が壁に反射してますよ。みたいな雰囲気を出してくれるんですね。
※この段階で雲模様1のフィルタを適用させたレイヤーを「雲」という名称にします。

そして、「雲」レイヤーの描画モードを「覆い焼きカラー」に変更します。

さらに、新規レイヤーを「雲」の下に作成し、ツールボックスより描画色「黒」(#000000)、不透明度20%くらいのブラシツールでカンバスの周りを少しずつなでるようにペイントしていきましょう。大きなソフトブラシがいいですね。

これでより背景に奥行きが生まれました。

學展ブログ [フォトショップチュートリアル]リアルなネオン管ロゴを作ろう!

ステップ3 ネオンを作ってみる

このステップでいよいよネオンを作っていきます。

ます、ツールボックスの 文字ツール を選択し、描画色「薄い黄色、ほぼ白」(#fefcef)で適当な文字を入力します。
※色はネオンなので暗い色でなければお好きな色で結構です。あお、ネオン管をイメージしているのでフォントはあまり太いものでないほうがよろしいかと思います。

テキスト入力後、このテキストレイヤーを複製しておきます。

學展ブログ [フォトショップチュートリアル]リアルなネオン管ロゴを作ろう!

元とコピーしたテキストレイヤーがあると思いますが、元(下のレイヤー)を選択し、レイヤー > ラスタライズ > テキスト を適用します。
そしてさらに フィルタ > ぼかし > ぼかし(ガウス)を適用します。

學展ブログ [フォトショップチュートリアル]リアルなネオン管ロゴを作ろう!

ガウスは10%〜20%の間くらいがちょうど良いかと思います。

ちょっとそれっぽくなってきましたね!

ステップ4 ネオンを作り込む

まず、ステップ3で複製したテキストレイヤー(まだ何もいじっていないはず)に レイヤー > レイヤースタイル を選択し、以下のスタイルを順番に適用していきます。
※レイヤーパレット内で複製したテキストレイヤーをダブルクリックしても同じ作業が行えます。

・レイヤー効果 : カスタム

學展ブログ [フォトショップチュートリアル]リアルなネオン管ロゴを作ろう!

塗りの不透明度を0%にします。


・レイヤー効果 : ドロップシャドウ

角度を90°にし、距離14px、スプレッド0%、サイズ32pxにします。


・レイヤー効果 : シャドウ(内側)

學展ブログ [フォトショップチュートリアル]リアルなネオン管ロゴを作ろう!

描画モードを焼き込みカラー不透明度100%角度-90°距離5pxチョーク0&サイズ24pxにします。


・レイヤー効果 : 光彩(外側)

學展ブログ [フォトショップチュートリアル]リアルなネオン管ロゴを作ろう!

描画モードを覆い焼きカラー不透明度100%、色を白(#ffffff)、サイズ250pxにします。


・レイヤー効果 : ベベルとエンボス

深さ50%サイズ5pxソフト15px陰影の角度120°ハイライトのモードを焼き込みカラーシャドウのモードを乗算、> シャドウの不透明度80%にします。


・レイヤー効果 : カラーオーバレイ

學展ブログ [フォトショップチュートリアル]リアルなネオン管ロゴを作ろう!

描画モードを覆い焼きカラー(リニア)-加算不透明度45%にします


で、この何重にもスタイルを重ねたレイヤーをさらに複製します。
そしてこの複製したレイヤーの不透明度を65%にします。
光り輝いてますね!

學展ブログ [フォトショップチュートリアル]リアルなネオン管ロゴを作ろう!

さらに輝かせるために、もう一回スタイルを重ねたレイヤーを複製し、一番上のレイヤーとします。
※不透明度を65%にしたレイヤーを複製してもかまいません。

このレイヤーのスタイルをすべて削除して、不透明度を100%に戻します。
そして、フィルタ > ぼかし > ぼかし(ガウス)を適用します。
※半径は100pixelぐらいで適応させてください。

スクリーンショット 2014-09-24 19.38.06

以上でネオン管の作り込みは終了です!
この段階でも十分ネオン管に見えますが、次のステップでより本物に近づけていきます。

ステップ5 ネオンを作り込む

新しいレイヤー(留め具レイヤーとします)を一番上に作成し、ツールボックスより「ブラシツール」を選択します。

描画色「黒」(#000000)とし、3〜6px程のブラシを使い下のように書いていきます。

學展ブログ [フォトショップチュートリアル]リアルなネオン管ロゴを作ろう!

これをネオン管の留め具として加工していきます。

留め具レイヤーに、レイヤー > レイヤースタイル で、レイヤー効果 : カスタムベベルとエンボスを順番に適用していきます。

・レイヤー効果 : カスタム

學展ブログ [フォトショップチュートリアル]リアルなネオン管ロゴを作ろう!

塗りの不透明度 gazou50%にします。

・ベベルとエンボス

學展ブログ [フォトショップチュートリアル]リアルなネオン管ロゴを作ろう!

ハイライトモードの色はネオンの色に近いものにしてください。

メインメニューよりレイヤー > レイヤーマスク > すべての領域を表示を選択します。
そして、ソフトブラシを使い、文字に重なる部分を少しずつマスク(消す)していきます。

學展ブログ [フォトショップチュートリアル]リアルなネオン管ロゴを作ろう!

さらに留め具レイヤーの下に新しいレイヤー作成し、ブラシツール:ソフトブラシ、描画色「黒」(#000000)、不透明度40%で少しずつ濃淡を付けていきます。
これによって留め具に立体感が出ます!
※留め具が壁についているイメージなので、留め具の下の方を黒くしていく感じです。

學展ブログ [フォトショップチュートリアル]リアルなネオン管ロゴを作ろう!5

そして、最終的に所々調整していきます。
※ここでは留め具レイヤーの不透明度を下げたり、雲レイヤーのマスクを調整するなどしました。

はい、お疲れさまでした!完成でございます。

學展ブログ [フォトショップチュートリアル]リアルなネオン管ロゴを作ろう!

〆(まとめ)

駆け足の解説でしたがいかがでしたでしょうか。

チュートリアルの反省としては、ネオンなのでもう少し細いフォントかつまるっこいフォントを使うべきでした汗
※今回使ったのFutura Mediumです。
留め具のクオリティもちょっと低いっすね…

ネオン管なので、背景を暗くして、最初に作ったテキストレイヤーをどんどん複製していけば、それなりに雰囲気が出ます。

學展ブログ [フォトショップチュートリアル]リアルなネオン管ロゴを作ろう!

やってることは一見複雑そうですが、仕組みは簡単です。

フォトショップなどのレイヤー機能を持った画像修正ソフトであれば、かなり凝った表現を実現することが可能です!

今後もチュートリアル記事をあげていくのでお楽しみに〜

學展の開催概要はこちらから >