2008年 03月 14日
ものつごくマニアックというか職人技的なイラレのハナシ。
アタシはウェブページを制作する時、デザインからスライス書き出しまでのすべての行程をイラレでやります。 なぜかってベクターデータのほうが扱いやすく、使い回しが効いてかつ大量のレイヤーに迷わなくてすむから。 ホトショもだいぶ便利になりましたけど、文字やパスを扱うにゃイラレなのですョ。 ですが、世の中意外に最後までイラレって人はすくないのね。どうもGoogleで軽く検索かけてみたら、一度Photoshopに書き出してからImageReadyかFireworksでスライスをする人が多いみたい。でなければ、ウェブページは最初からPhotoshopで作るとかとか。 しかしですよ。一度書き出してからスライスするとなると、修正や追加があったとき面倒ですよな。ボタンの名称変えるとか商品名と変えるとか普通にあるじゃないスか。そんな時モトになるファイルはレイアウトとスライスの2つではなくて、できればイラレから一発のほうがらくちんです。 ところでイラレのスライスはズレるとのもっぱらの噂ですが、そんな時ズレてるのはスライスだけではなくてオブジェクトの全てです。 ウェブページというのは72dpiの世界であり粗いドットなのであり1インチあたり72ピクセルな訳です。そのいっこいっこのピクセルの境目つまりXYの座標の整数にキッチリとパスを乗せてやればズレません。が、イラレの一番上にあるコントロールボックスに表示されているX:□ Y:□の数値はありゃウソなんです。 たとえば、あそこにX:100 Y:100 と表示されていても、オブジェクトはその位置にありません。コンマ以下の数値でズレてます。ホントは100.23334とかそんな位置にあるんですね、プレビュー表示の場合。 CSまではそんな数字が出てたんですがCS2からコンマ以下切り捨てになりました。表示だけ。 ズレっぷりは定規を表示して6400%にしてみれば一目瞭然。 じゃあどうすりゃイイかといえば、まず表示を「ピクセルプレビュー」にします。そして、表示メニューから「ピクセルにスナップ」をチェックです。これで問題は解決。プレビューで作ったコンマ以下ズレたオブジェクトにいかに半端なアンチエイリアスがかかってるかが解ります。 最初っからこの設定で、オブジェクトを書けばイイわけです。 XとYの座標値、それからオブジェクトそのもののサイズをピクセルマップにあわせます。 右の画像。左がピクセルに対してオブジェクトの位置がズレちゃってる長方形。右がジャストフィットな長方形。両方ともまったく同じ20x30pxで同じアピアランスを適応してます。あらピッタリ。 座標でオブジェクトを扱うようになると、カラム分けやCSS+HTMLのコーディングと連携したレイアウト+切り出し が、すごく楽になります。 ウェブデザイン屋さんにはお勧めしたいやりかたです。
by suzu_na
| 2008-03-14 17:28
| WORKS
|
ファン申請 |
||