【Level2】ドット文字を応用して”ネオンサイン”を描いてみよう！【ドット絵講座】

2021/01/07

J.Stone

ドット絵で描いた文字にひと手間加えるだけで最高の演出アイテムに様変わり。今回は街並みを彩るネオンサインの作り方を解説しながら、ハイライトの使い方で光沢や光加減を表現する方法をご紹介していきます。

文字を応用して看板にしてしまおう

以前の講座でドット文字の描き方を解説しましたが、今回はそのドット文字を応用してネオンサインを描いてみようという内容です。
最近は某サイバーパンクなゲームがブームですし、街並みを作ろうとすると看板なども作る事になりますので、その第一弾としてネオンサインを作ってみましょう。
この内容では光沢表現、光の表現を学ぶことができます。

ドット文字の描き方はコチラ

【Level1】アイコンやUI周りで活躍！ドット文字の描き方【ドット絵講座】

https://moshi-nara.com/18511/

今回はアイコンやUI製作に欠かせないドット絵文字作りについての講座です。ドット絵で数字や文字が描けると、ゲーム表現の幅がグンと広がるので、描き方のコツを覚えてマスターしましょう。また、あつ森の看板デザインにも使えるかもしれませんね。

ネオンサインを描いてみよう

では実際に描いていきましょう。
ネオンサインは蛍光管の光沢と、文字回りのぼやけたような光源が特徴で、夜の街並みで都会っぽさを演出する看板の代名詞ともいえます。
繁華街やアジアの街並み、サイバーパンクなどはネオンを多用したような表現で独特の世界観を演出しています。
「別にファンタジーしか作らないからどうでもいい」という方もいると思いますが、UIなどのシステム回りや魔法陣などのエフェクト作りにも使える技術(同じ技術)なので覚えておくと良いでしょう。
では、そんな看板の１つであるネオンサインを描いてみましょう。

OPENサインを描いてみる

お店でよくあるようなOPENサインを描いてみましょう。

まずは2色選びます。今回はピンクで文字を、青で枠を描いてみます。
ネオンサインはピンク、青、黄緑などの蛍光色や派手な色を使ったものが多く、そういった色をチョイスします。
単色で良いので文字を描き(フォントで打ってもOK)、1pxほど空けて枠を描きます。
ネオンサインはネオン管・蛍光管の構造上、あまり角ばっておらず、丸味を帯びた感じで描いてあげるとそれっぽさが出ます。

描き終わったら選択範囲で囲みます。
選択範囲がないツールの場合は、次に進みます。

次に、画像のように中心に近い部分にハイライトカラーを入れます。
選択範囲を取ったのははみ出し防止の為です。
こうすることで光沢や光っているような表現できます。

次に、上で作ったレイヤーを複製して絵を分けます。
そうしたら一段階暗くなるように調整します。

最後に、エフェクトを重ねてぼやけた光を作ります。
別レイヤーを用意しブラシでハイライトを重ねます。
描画モードを「オーバーレイ、ソフトライト、ハードライト」のどれか好きなものを使い、透明度やぼかしを調整します。

エフェクトを重ねたら完成です。
ゲーム内で使う場合は、この2種類をアニメーションさせることでネオンサイン独特の微妙な点滅具合を表現できるわけですね。

実際に使った場合、このようになります。
余裕がある人はアニメーションgifを作ってみても良いかもしれませんね。

色々な文字で作る

次にフォントで打った文字を使ってネオンサインに仕上げてみましょう。
まずはアンチエイリアスを切った状態で、テキストで看板にしたい文字を打ちます。適当で構いません。
私はサイバーパンクや香港っぽさを出したかったので、アジアンテイストな感じにしてみました。

次にハイライトを中心部分に多めに入れます。ハイライトの所要面積が多い方が良いですね。

そしてネオン看板として使えるように加工します。
枠で囲んだり、矢印を描いたり、網目を作ったりと色々アレンジを加えて、街にあるような雰囲気にしてみましょう。

あとはOPEN看板でも行ったように、レイヤーを複製して暗いバージョンを作ります。

同じようにブラシでエフェクトを作って完成です！

実際に作中で使った場合はこのようになります。2コマのアニメーションですが、十分雰囲気は演出できています。
アニメーションgifは作れる人だけで構いません。（そのうち解説します）

街並みに落とし込んでみました。
近未来な雰囲気が演出できたかと思います。

以上です。

まとめ

文字にハイライトを足して、エフェクトを付け足すだけで繁華街や近未来で使えるネオンサインに様変わりしました。
ハイライトの使い方を覚えることでこのように光沢や光加減を表現できるので、魔法エフェクトやUI周りの演出にも使えるようになります。
今回はネオンサインというマップで使える看板作りの１つとして教えましたが、技法は様々に応用できます。
是非ともそれ以外の部分にも役立ててみてください。

では、次の講座でお会いしましょう。