ツメる技術

デキるデザイナーとビギナーデザイナーとの違いは、「ツメの作業」に表れるとよく言われます。Illustratorならまだしも、Photoshopにはその「ツメ」のひと工程の差が歴然と表れてしまう特性が有ります。


上の画像と左の画像は、似ているようで少し違うことはお分かりでしょうか？そう、下の画像に関してはデザイン用語を使うと「あまい」状態にあります。
「あまい」というのは、たとえば写真ならピンボケ状態、ただのベタ色の画像でも2つ目の画像のようになんだかぼんやりした状態が「あまい」という状態です。
画像に関して、「ツメ」が出来ているものを作るのがデキるデザイナー、「ツメがあまい」ものを作るのがビギナーデザイナーだと大抵言われます。デザイン初心者が最初に先輩から指摘されるのもこの部分でしょう。

この「あまい」状態は1ピクセルに満たない場所に不安定に画像が有る場合に起こってしまう現象です。Illustratorなど、画像を数値でモニタに表現するベクトル画像（ベクターデータ）では数値であるということから「曖昧さ」がそもそも存在しないのでこんな事は起こらないのですが、写真などを主に使うPhotoshopの描画法のビットマップ画像（ビットマップデータ）は色をピクセルに分割しているため、1ピクセル未満の場所に弱いわけです。

なんとなくピンと来ない方も居ると思うので、上の2枚の画像を拡大してみましょう。

左の画像をクリックしていただくと、大きい画像をご覧いただけます。
「ツメ」られた画像はピクセルの縦横に垂直/水平に四角が配置されているのでボケていないことが、大きくすることで更に鮮明に分かることでしょう。


一方左の画像をクリックしてご覧いただけるのは、「ツメ」られていない四角ですが、1ピクセル以下で不安定に画像が配置されているのがお分かりだと思います。


この状態を修正するには、「選択範囲」を使って四辺を削ったり追加したりして行く方法と、あるいは、（そもそもこの四角はシェイプレイヤーを使ってパスで出来ているので、それであれば）拡大した状態で1ピクセル未満にある不安定なパスを鮮明になる所まで上下左右にカーソルで動かして調整しいくという方法があります。どちらにせよ、1ピクセルとの戦いなので、地道な作業にはなります。

ならば！
そもそもこんな「ぶれ」のないものを最初から作れば良いではないか！
という話になるわけです。
いかに効率よく作業を進めていくかというところにも、デキるデザイナーと一歩遅れるデザイナーの差が表れるように思いますが、簡単にサイズ調整のきく四角を作成するにはやはりパスを使った「シェイプレイヤー」での制作がWebデザインには向いているように私は思います。しかし現行バージョンのPhotoshopの特性上、適当にシェイプレイヤーを作成すると100%「不安定な四角」が出来てしまうのですが、それを回避するのが「ガイド」です。ガイドは素材をそろえたりする場合に目安として使いますが、シェイプレイヤーで四角を作る時にも大いに活用してください。
ガイドは1ピクセル未満には引かれないし垂直/水平以外にはならないのでガイド自体を適当に引っ張っても出来上がる四角は1ピクセル未満であることは有り得ません。サイズの調整は四角を作ってからでも1ピクセル単位で移動させて行います。

ただご注意いただきたいのは、100%表示以外ではPhotoshop上でパスを1ピクセル単位では操作出来ません。100%表示をした上で白矢印の「パス選択ツール」にてパスを選択して、カーソルで1ピクセルずつ操作をしてください。
先日「ネットのサラダボウル」の両見さんとも、次期Photoshopでこの不都合さが直るといいなと愚痴交じりに話していたのですが、そうは思いつつも、たまたま今Webデザイン制作にPhotoshopを使用しているだけであって、そもそもは写真加工のソフトなので、1ピクセル未満の色も大いに使うアプリケーションなんだろうな、と、半ばあきらめ気味の私です。

わたしはデキるデザイナーじゃないですが…こだわってますf^^;
DTPやってた時代、すべて0.25mm単位だったのが身にしみてるのかも…

webのこと私にいろいろ教えてくれたデキるデザイナーは
イラレ→Photoshopにコピペで画像を作るやり方だったので
端がぼやけまくってて、いつもストレスに感じてました（- -;）
こだわれるかどうかは…性格も結構関係あるのかもしれないですね。

motsu さん：
DTP 出の方ほどシビアにこだわってらっしゃいますよね！
そうそう、1/4mm どころかそれが基準だからさらに細かくて……
Web 畑に慣れてしまった私には、たまに来る紙のお仕事が怖くてたまりません！！

イラレ→フォトショって
CS が出てからあれでもかなり緩和されたと思っていたんですけど
そうか、結局駄目だったんですね。。。
結局アプリケーションもツールなので「使いよう」って事ですね。
身にしみます。