Webデザイナーとして当然なんでしょうけど実は知らなかったWebディレクターがここにいます。

紙物とWeb物とのデザインの一番の違いはWeb物はビットマップでデザインしなければならないところ、
加えて色域がRGBとCMYKとで違うなどもありますがそこは置いておきます。 
で、Webデザインでイラストレーター(Illustrator)を使う元紙物デザイナーが時たまいますがこれはぶっちゃけいけません。
なぜいけないかというとイラストレーターのデータ(ベクターデータ)はWeb用のビットマップデータに変換した地点で細い線や細かいテクスチャが不規則なビットマップデータになってしまうから。
この違いが分かる人じゃないとWebデザイナーとしては失格です。
そこで、フォトショップ(Photoshop)等ビットマップデータで編集できるアプリでデザインするのですがここでも注意すべき点があります。
それは、シェイプ(ベクターデータを使った機能)を使う時です。


フォトショップ(Photoshop)に置いて唯一のベクターデータによる図形がシェイプです。
たとえば、これを使って適当に角丸長方形(角丸四角形)を書くと以下のようになります。

ピクセルにスナップなし

そう、これがまさにイラストレーター(Illustrator) でデザインした角丸長方形をフォトショップ(Photoshop)に持ってきた状態とほとんど一緒。
つまり、やってはいけないことです。
せっかくビットマップで直接編集できるフォトショップ(Photoshop)なのにこんなことやっていたら意味がありません。

で、これを回避するためには角丸長方形オプションの「ピクセルにスナップ」にチェックをいれます。

ピクセルにスナップ

こうすることでパスがビットマップ単位でスナップしてくれるようになり、結果としてシェイプを使ったビットマップ単位のデザイニングができるようになるのです。

これは角丸長方形(角丸四角形)だけではなく、当然ながら長方形(四角形)にも適応されます。
ボタンのデザインをするときなどに便利ですよ。