フォトショップ（Photoshop）でWebデザイン、角丸シェイプを使うときは「ピクセルにスナップ」にチェック！

1年以上前の記事です。内容が古い可能性があります。

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

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

新版 プロとして恥ずかしくないWEBデザインの大原則 (インプレスムック エムディエヌ・ムック)

posted with ヨメレバ

MdN編集部 MdN 2009-11-13

Amazon

楽天ブックス

7net

bk1

ブックオフ

e-hon

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

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

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

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