【1pxにこだわる】ピクセルのエッジを立てる方法

最近、schooの授業で耳にした『ピクセルのエッジを立てる』というテクニック。

その考え方自体初めてで目からウロコだったので、自分で実際に試してみました。
（schoo授業のリンクは下部に記載）

『ピクセルのエッジを立てる』とは

視聴した授業はテキストの『ピクセルのエッジを立てる』という内容。
しかし、テキスト以外のものに関しても当てはまる事で、例えば、長方形ツールを使った例の方がピンとくるかもしれません。

長方形ツールで1pxの線を引くと、エッジがボケてぼんやりした線になっていることがあります。
『ピクセルのエッジを立てる』とはこういったボケを解消させることです。

これは最初の頃につまづいた経験があり、原因は長方形ツールの設定。

【ストロークオプション】の整列タイプが『中央』で、【エッジの整列】が未チェックだとこうなります。
なので整列タイプを『内側』か『外側』にするか、【エッジの整列】にチェックすると解消できます。

この辺の仕様は確かバージョンによって変わりますが（↑はCS６の話）、とりあえず『エッジ』の説明のための例なので、仕様の違いについては省略。

テキストの『ピクセルのエッジを立てる』方法

今までこの矩形ツールのボケに気づいていても、テキストのエッジまで意識することはありませんでした。

しかし、テキストでもエッジのぼやけ具合に違いがあり、特にフォントサイズが大きくなるほど、見栄えにも影響してきます。

一つ疑問なのは、これはここまで拡大するからボケて見えるのでは？というところ。
確かに普通に見れば、『ボケてるなー』と感じる人は少ないと思います。だから今まで気付かなかったんですが。

でも、実際比較すると見栄えや可読性が向上するのが実感できると思います。
そこでその違いを比較しながら、ボケを解消してテキストの『エッジを立てる』方法を挙げていきます。

（補足。これはビットマップのphotoshopならではのテクニックで、ベクターのillustratorでは使えません。イラレはどれだけ拡大してもなめらかな曲線なので。 ）

方法① アンチエイリアスの種類を変える

まず極端な話、このボケは曲線をなめらかにするアンチエイリアス処理の結果なので、『なし』にしてしまえば完璧に解消できます。

ただ、当然処理はしないといけません。そこで『シャープ / 鮮明 / 強く / なめらか』の中から、よりエッジが立って見えるものを選びます。

一番差を感じた２種類を並べてみます。こうして並べてみると、100%でも違いはわかるのではないでしょうか。

どの種類が一番よく見えるかは、『フォントによって変わってくるし、都度試してみるしかない』と授業でも言われてました。
今回は名前に反して『鮮明』が一番不鮮明、シャープが一番エッジが立っていました。

なんとなく選んでいたアンチエイリアスを選ぶ基準にもなると思います。

方法② カーニングを調整する

これも意外だったのですが、文字間の空き具合でもエッジの状態が変わってきます。
（教えてもらわなかったら一生気付かなかった）

調整の方法としては、

というものです。

ポイントは（当たり前ですが）テキストを左揃えなら左から、右揃えなら右から順に調整していくこと。
また、カーニングの数値を１ずつ増減する場合は、『option(alt)』押しながら文字パネルのカーニングのアイコン上をスクラブ（マウスで左右にこする？感じ）で調整すると楽です。

ただ、違いが出ない場合もあるようで、今回のテキストの例では違いが確認できませんでした。。

試しに30ptの小塚ゴシックでやったら、①つ目の方法と同様の違いを確認でき、これもケースバイケースで利用するといいと思います。

今のところ実感としては結構調整が難しく、また文字数が多いと手間だなという感じがありますね。
エッジの調整のために文字間隔が変わるというのもデメリットかもしれません。

方法③ 画像のように補正する

これが一番わかりやすく、効果的のように思います。
アンチエイリアス処理を残したい箇所はそのままで、エッジを立たせたい箇所は消しゴムで消したり、ブラシツールなどで塗りつぶしてスッキリさせる方法です。

手間的にも補正する範囲を選択ツールで選んで、サッと消すか塗り潰すだけなので楽です。

これはハッキリ違いが見て取れるのではないでしょうか。

上は先ほどの不鮮明な『鮮明』アンチエイリアスをかけたテキスト。
こうやって補正後と比較すると結構フチがぼけて感じます。

方法④ △テキストをシェイプに変換

これは授業では触れられてなかったのですが、試してみたら若干良くなった感じはします。
エッジが立った部分、ボケた部分があったので一応△で挙げておきます。

さらに【エッジを整列】にチェックしたらどうかと試したら、むしろボケました。

シェイプに変換してデータを渡す必要がある場合は、方法①、②で調整してからシェイプに変換するのがベターかもしれません。

まとめ

最後に３つ並べた画像を。

『ピクセルのエッジを立てる』というテクニックは今まで参考書などでも見かけたことありませんでした。

でも重箱の隅をつつくような知識ではなく、『1pxにこだわる』ためには必須の、色々な場面で力を発揮してくれそうなテクニックだと思います。

『ピクセルのエッジを立てる』を紹介していたschooの授業です。↓

エッジを立てる方法に関しては特にここで説明している以上の詳しい情報というのはないかと思います。
ただ、フォントにまつわる興味深いトピックを色々紹介しているのでオススメです。