この業界に入って最初に教わったことを書きます。

それは「1px単位まで気を使ったデザインを心掛ける」です。

これ、WEBデザイナーさんにとっては基本中の基本だと思いますが、意外とその基本が出来てない人を見かけるので紹介します。

シェイプの端がぼやけて汚くなる

初期設定のPhotoshopで長方形などの図形を作成した場合、パッと見では問題無いように見えて、実はピクセル単位まで拡大すると端がぼやけていることがほとんどなんです。

グリッドに沿って描かれた場合はもちろんきれいに表示されますが、たいていの場合ぼやけてしまいます。
ここで「そんなの大したことないじゃん」と思ったアナタ。デザイナーとしてまだまだ未熟ですよ(笑)

これ、簡単な設定で綺麗に作成出来るようになるんです！

ぼやけないシェイプの描き方

ここで紹介する方法は3パターン。
どれか1つを押さえて置けばシェイプのぼやけは解消されます。3つ覚えてたら無敵☆

※環境はPhotoshop CS5です。cs6以降は設定が異なる可能性があります。

表示倍率を100%で描画

表示倍率を100%にしておけば、グリッド上に自動でアンカーポイントが作られるのでぼやけません。200%、300%など倍率で描くと、アンカーポイントの描画可能位置が変わってしまうのか何度やってもぼやけてしまいます。

パスをピクセルにスナップ

これオススメです。ピクセルにスナップ(くっつく）して描画してくれるのでぼやけなくなるんです。
長方形ツールオプションで「ピクセルにスナップ」にチェック入れておけば、表示倍率が変わってもグリッドに沿ったシェイプを一発で描くことができます。
デフォルトでチェックされてないことが不思議なくらいですよね。

拡大表示でパスを直接調整

これは上記の2つの方法でぼやけが解消されても、その後にシェイプのサイズを拡大縮小して変更してしまうと、結局はグリッド上からパスが外れて再度ぼやけてしまうので、
最後は手作業でグリッドに合わせて綺麗にしていかないといけません。
ってことで、基本この方法だけしっかり覚えておけばいいのかなとも思います。

拡大表示でグリッド線を目安にパスをぼやけない位置まで調整していきます。慣れてくると、グリッド線にピシッと合わさった時の気持ち良さがクセになります。

これらの方法で、適当に長方形を描いても境界線がぼやけることなく綺麗に描けるようになると思います。ぼやけ１つでデザインイメージが変わってくるので、今まで特に気にしていなかった方はぜひお試しください。スライスの際も綺麗に切れて気持ちいいですよー。

でわでわ