【Level2】ドット文字を応用して”ネオンサイン”を描いてみよう!【ドット絵講座】
ドット絵で描いた文字にひと手間加えるだけで最高の演出アイテムに様変わり。今回は街並みを彩るネオンサインの作り方を解説しながら、ハイライトの使い方で光沢や光加減を表現する方法をご紹介していきます。
文字を応用して看板にしてしまおう
以前の講座でドット文字の描き方を解説しましたが、今回はそのドット文字を応用してネオンサインを描いてみようという内容です。
最近は某サイバーパンクなゲームがブームですし、街並みを作ろうとすると看板なども作る事になりますので、その第一弾としてネオンサインを作ってみましょう。
この内容では光沢表現、光の表現を学ぶことができます。
ドット文字の描き方はコチラ
ネオンサインを描いてみよう
では実際に描いていきましょう。
ネオンサインは蛍光管の光沢と、文字回りのぼやけたような光源が特徴で、夜の街並みで都会っぽさを演出する看板の代名詞ともいえます。
繁華街やアジアの街並み、サイバーパンクなどはネオンを多用したような表現で独特の世界観を演出しています。
「別にファンタジーしか作らないからどうでもいい」という方もいると思いますが、UIなどのシステム回りや魔法陣などのエフェクト作りにも使える技術(同じ技術)なので覚えておくと良いでしょう。
では、そんな看板の1つであるネオンサインを描いてみましょう。
OPENサインを描いてみる
お店でよくあるようなOPENサインを描いてみましょう。
まずは2色選びます。今回はピンクで文字を、青で枠を描いてみます。
ネオンサインはピンク、青、黄緑などの蛍光色や派手な色を使ったものが多く、そういった色をチョイスします。
単色で良いので文字を描き(フォントで打ってもOK)、1pxほど空けて枠を描きます。
ネオンサインはネオン管・蛍光管の構造上、あまり角ばっておらず、丸味を帯びた感じで描いてあげるとそれっぽさが出ます。
描き終わったら選択範囲で囲みます。
選択範囲がないツールの場合は、次に進みます。
次に、画像のように中心に近い部分にハイライトカラーを入れます。
選択範囲を取ったのははみ出し防止の為です。
こうすることで光沢や光っているような表現できます。
次に、上で作ったレイヤーを複製して絵を分けます。
そうしたら一段階暗くなるように調整します。
最後に、エフェクトを重ねてぼやけた光を作ります。
別レイヤーを用意しブラシでハイライトを重ねます。
描画モードを「オーバーレイ、ソフトライト、ハードライト」のどれか好きなものを使い、透明度やぼかしを調整します。
エフェクトを重ねたら完成です。
ゲーム内で使う場合は、この2種類をアニメーションさせることでネオンサイン独特の微妙な点滅具合を表現できるわけですね。
実際に使った場合、このようになります。
余裕がある人はアニメーションgifを作ってみても良いかもしれませんね。
色々な文字で作る
次にフォントで打った文字を使ってネオンサインに仕上げてみましょう。
まずはアンチエイリアスを切った状態で、テキストで看板にしたい文字を打ちます。適当で構いません。
私はサイバーパンクや香港っぽさを出したかったので、アジアンテイストな感じにしてみました。
次にハイライトを中心部分に多めに入れます。ハイライトの所要面積が多い方が良いですね。
そしてネオン看板として使えるように加工します。
枠で囲んだり、矢印を描いたり、網目を作ったりと色々アレンジを加えて、街にあるような雰囲気にしてみましょう。
あとはOPEN看板でも行ったように、レイヤーを複製して暗いバージョンを作ります。
同じようにブラシでエフェクトを作って完成です!
実際に作中で使った場合はこのようになります。2コマのアニメーションですが、十分雰囲気は演出できています。
アニメーションgifは作れる人だけで構いません。(そのうち解説します)
街並みに落とし込んでみました。
近未来な雰囲気が演出できたかと思います。
以上です。
まとめ
文字にハイライトを足して、エフェクトを付け足すだけで繁華街や近未来で使えるネオンサインに様変わりしました。
ハイライトの使い方を覚えることでこのように光沢や光加減を表現できるので、魔法エフェクトやUI周りの演出にも使えるようになります。
今回はネオンサインというマップで使える看板作りの1つとして教えましたが、技法は様々に応用できます。
是非ともそれ以外の部分にも役立ててみてください。
では、次の講座でお会いしましょう。
ゲーム制作講座まとめはコチラ
参考価格:¥11,760 円/年(税別)(執筆時調べ)
本格派、筆者利用のソフト。Photoshopのみを利用する場合、フォトプランの利用が単体プランよりも安く使えます。年払い、月払いともに980円ですので、使用の状況に合わせて選んでください。
「ドット絵」の関連記事
- 簡単?難しい?ドット絵を描いてみたいと思うアナタに 26,273ビュー
- 誰でも描ける!ドット絵講座~まとめ~ 24,309ビュー
- 【Level3】岩や氷をドット絵で描くコツと手順【ドット絵講座】 18,868ビュー
- 【Level3】ドット絵の立体感を出す方法。色々な立体を描いてみよう【ドット絵講座】 18,679ビュー
- 【Level1】ドット絵で描くグラデーションの付け方【ドット絵講座】 14,809ビュー
- ドット絵が劇的に上手くなる5つの方法【ドット絵講座】 14,403ビュー
- 【Level1】アイコンやUI周りで活躍!ドット文字の描き方【ドット絵講座】 11,782ビュー
- 【Level1】綺麗に見える曲線の描き方【ドット絵講座】 11,303ビュー
- 【Level5】クォータービューマップで部屋を作ってみよう【ドット絵講座】 9,051ビュー
- ドット絵を描くのにオススメのソフト 8,291ビュー
- 【Level2】単色(1bit)で描いてデフォルメ力を鍛えよう!【ドット絵講座】 7,631ビュー
- 【Level2】ボタンをドット絵で色々な形にする方法【ドット絵講座】 7,587ビュー
- 【Level4】簡単!アクションゲームのマップをドットで作ろう!【ドット絵講座】 7,343ビュー
- 【Level4】ドット絵で2Dのマップタイルを作ろう【ドット絵講座】 7,209ビュー
- 【Level4】ドット絵で道を描こう!【ドット絵講座】 7,120ビュー
- 【Level1】ドット絵の線と図形の描き方~超基礎編~ 7,095ビュー
- 【Level4】クォータービューのマップタイルの描き方【ドット絵講座】 6,216ビュー
- 【Level2】ドット文字を応用して”ネオンサイン”を描いてみよう!【ドット絵講座】 5,516ビュー
- 資料写真は縮小して使え!【ドット絵講座】 5,130ビュー
- 【Level4】ボブおじさんから学ぶドット絵背景の描き方【ドット絵講座】 4,715ビュー
コメントを残す