creatersnest

光彩の機能を使って文字をネオン風に仕上げよう!


タイトルや看板画像をネオン風にするとお洒落ですね。
Photoshopで文字は描けるけど、光らせるにはどうしたらいいんだろ?
コツを掴めば簡単にフォントをネオン風に表現できます。
今回は二通りの手順を紹介します。

文字をネオン風に仕上げよう

まずはネオンの風景を思い浮かべてください。
夜の街の中に明るく浮かび上がるネオンの文字。
周りは暗く、光るネオン管は蛍光灯のように丸い…このイメージを押さえていればネオン風に仕上がります。

 

簡単に作成してみよう

最初に簡単に作成する方法を説明します。
新規作成:500*500px 解像度72 カンバスカラー透明

 

フォントはソフトに入っている「HG丸ゴシックM-PRO」を使用。
または好きなフォントをダウンロードしてもOKです。
選ぶ基準はネオン管の様に丸みがあるフォントが合います。

 

新規レイヤーを作成→黒に塗りつぶし
001

 

ツールパネル→文字ツール→カンバス上でクリックし文字入力
002

 

文字は好きな色を選択。
今回は青(#00ccff)にします。
003

 

 

文字レイヤーに対して処理を行います。

 

文字レイヤーをダブルクリックしてレイヤースタイルを開く。
光彩(外側)にチェック→光彩のカラーを設定(文字色より明るめの水色)→不透明度50%、スプレッド5%、サイズ25px、輪郭 半円、アンチエイリアスにチェック
輪郭を半円で丸みを出し、アンチエイリアスで滑らかさを出します。
004

光彩をフィルタリングしただけで、ネオン風になりました。
これよりは更にネオン管の雰囲気を出す作業です。

 

ベベルとエンボスにチェック→光沢輪郭 半円、アンチエイリアスにチェック、シャドウの色を暗い青、シャドウの不透明度50%005

 

より光っているようにします。
カラーオーバーレイにチェック→描写モードのカラーを明るい水色→不透明度80%006

 

文字がネオンのように光って見えます。
test1

 

リアルに仕上げてみよう

それでは手をいれて、よりリアルに近づけてみましょう。
素材にする壁紙をダウンロードします。

KONICA MINOLTA DIGITAL CAMERA

http://goodtextures.deviantart.com/art/Red-Brick-Texture-01-156689363

ページを開く→右側Downloadボタンをクリックして保存

 

 

新規作成:500*500px 解像度72 カンバスカラー透明
新規レイヤー→ダウンロードした壁紙を配置
007

 

壁紙を暗く設定します。
イメージ→色調補正→色相・彩度
008

 

色相・彩度パネルが表示されます。
明度を壁紙に合わせて調整します。
明度-80
009

 

このようになりました。
renga

 

ツールパネル→文字ツール→カンバス上でクリックし文字入力
002

 

文字は好きな色を選択。
今回はピンク(#ff00cc)にします。
010

 

文字レイヤーをラスタライズに変換します。
文字レイヤーを右クリック→テキストをラスタライズ

この作業はPhotoshop上で線である文字をドットの文字に処理し、他レイヤーから描写モードの影響を受けさせるためです。
000

 

文字レイヤーをコピーします。
OPENレイヤーとOPENのコピーのレイヤーの二枚で
ネオン風に立体を出していきます。
011

 

OPENレイヤーに対して処理をしていきます。
こちらはネオンのバックライトを表現します。
012

 

レイヤーをダブルクリックし、レイヤースタイルを開きます。
光彩(外側)にチェック→光彩(外側)/構造/カラーを暗いピンクにする→構造/不透明度100%
エレメント→スレッド5%/サイズ85px
画質→輪郭:半円→アンチエイリアスにチェック
以上を設定しOK
013

 

この段階です。
次に文字に光彩を当てます。
014

 

 

OPENのコピーレイヤーを選択。
レイヤーをダブルクリックし、レイヤースタイルを展開。
光彩(内側)→光彩(内側)/構造/不透明度100% カラーは明るいピンク
エレメント→チョーク8%/サイズ5px
画質→アンチエイリアスにチェック
016017

 

凹凸を出すためにベベルとエンボスを設定します。
ベベルとエンボスにチェック。
ベベルとエンボス→構造/深さ80%
陰影→角度90℃→ハイライトのモード/不透明度100%→シャドウのモード/暗いピンク/不透明度100%
018019

 

もう少し明るさを足したくなれば、カラーオーバーレイを追加。
カラーオーバーレイにチェック。
表示色→色 白(#ffffff)/不透明度50%
020021

 

レイヤーの描写モードを覆い焼きカラーにします。
022 023

 

 

最後に背景の陰影をつけます。
壁紙レイヤーの上にレイヤー1を配置し直し、黒で塗りつぶします。
024

 

次に消しゴムツールを選択→ソフト円ブラシを選択/直径200px
025

 

 

フォント周辺部を消し、壁紙が覗くようにします。
レイヤーの不透明度50
026

 

 

これで完成です。
027

 

 

 

まとめ

この手法を用いて、文字だけでなく絵を作成しネオン風にすることも出来ます。
もっと作りこめばよりネオン風が際立ちます。
1つの文字レイヤーに効果を与えるより、複数の文字レイヤーで多種なレイヤースタイルや描写を重ねた方がよりネオンに見えます。
まずは「簡単に作成してみよう」よりコツを掴んでください。

本サイトが運営するWebデザインのオンラインスクールが公開中!
以下のリンクからお申込みで、特別料金の70%OFF!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
・全422レッスン & 42時間! 通学スクール80万円相当の内容
・授業×チャレンジ課題で実践的なスキルが身につく!
・過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
Sketch3未経験からプロレベルを目指す、充実したコースです。
Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


shirodomi

ライター初心者

Next ArticleHTMLの文法をチェックしてくれるサービス・ツール5選