楽してアーケードゲーム風キャプション

Tweet about this on TwitterShare on FacebookShare on Google+

概要

簡易的な方法で、アーケードゲームっぽい文字を作る。

※サンプルはPhotoshopではあるが、同様の機能があれば別のソフトでも可。

サンプル

x1
150729_ac_font_sample_1

x2
150729_ac_font_sample_2

作り方

小さめのフォントで文章を作る

150729_ac_font_sample_3
12~18pxぐらいでとりあえず。

150729_ac_font_sample_4
フォントはお好きなものを。
アンチエイリアスはなしにしておいて、必要なら後で調整。

レイヤー効果を追加

150729_ac_font_sample_5
150729_ac_font_sample_6
150729_ac_font_sample_7
上記を参考に、境界線、グラデーションオーバーレイ、光彩(外側)のレイヤー効果を追加。
境界線の色が白色の場合、グラデーションの色は濃いほうがヨイ。
もちろんグラデーションではなく、カラーオーバーレイでも可。
光彩はこの場合外側のアウトラインとして使うので描画モードは通常、不透明なし。

150729_ac_font_sample_7.5
レイヤーはこんな見た目になる。

拡大する

150729_ac_font_sample_8
ちょっと飾りっけが出た!
あとはレイヤーをラスタライズしてニアレストネイバーで200%に拡大すると…


150729_ac_font_sample_9
ちょっとアーケードっぽさが出る。これはイマイチですね。

調整

150729_ac_font_sample_2

フォントやレイヤー効果を自分の好みに調整するとこんなかんじに!

まとめ

楽して作る方法

全部手で描かない。フォントや、 レイヤー効果を使う

ドットっぽさを出すポイント

  • 文字のアウトライン(外側)のアンチエイリアス(半透明)は無くす
  • 文字の中のアンチエイリアスは控えめに
  • 小さめに作って、ニアレストネイバーで2倍にする。
  • 細かいところは手でドットを直す
    • 時間と予算があれば…!
    • 使用色を制限する。
      • グラデーションはパターンディザ等にする
    • 画像8*8ピクセルのブロック単位で収める

アーケードの文字から学べる事

  • 目立つ
    • どの背景に出しても、どのキャラがいても認識できる
    • アウトラインを引いて強調。2重あると尚目立つ
    • アウトラインと文字の色合いはパッキリ明暗を別ける
    • アウトラインが無くても下に何か色の差分が出るものがある。
      • ウィンドウやベタ塗りのテキストバックなど
    • 重要な情報は、視点をそこへ釘付けにさせる出し方をする
      • リザルト画面など文字が多い時は、アウトラインがあると逆に読みにくい事も
  • 読みやすい
    • プレイ中は長い単語や文章をあまり出さない
    • 意味が分かるなら、略して文字数を減らす
      • 単語が長くて意味が伝わりそうに無いなら、
        文字ではなくアイコンやエフェクトでなんとか…

注意

一つ一つの文字をバラして表示で並べる場合は、アウトラインが重なり読みにくくなることも。
実装担当とデザイナーがちゃんと相談して、うまく落とし込もう。

150729_ac_font_sample_10
スコアの数字など、0~9を作る場合におこる。

Sponsored Link
Tweet about this on TwitterShare on FacebookShare on Google+