【CS6】カテゴリの記事

_DSC7108.jpg

2010年にリリースされたIllustrator CS5でのWeb向けの機能強化以降、Web向けにIllustratorを使う上では、次のアプローチが基本とされてきました。

  • ドキュメントプロファイルに「Web」を選択し、[新規オブジェクトをピクセルグリッドに整合]にチェックを付ける
  • [ピクセルプレビュー]をオンにする

先週末に行われたdot-ai, Vol.2において、黒葛原 道さん(eater)が、次のアプローチを発表され、「なるほど!」と思ったのでご紹介します。

  • [新規オブジェクトをピクセルグリッドに整合]はオフにする
  • グリッドを1ピクセルに設定し、[グリッドにスナップ]をオンにする
  • [線の位置]は外側に設定する

次の図は、左が従来のもの。右側が黒葛原さん方式です。

Illustratorの「ピクセルグリッドに整合」は、3px x 3px、線幅1pxの図形を描画する際、ピクセルグリッドの中央に吸着します。これを「ピクセルグリッドに整合」を使わずに、ピクセルグリッドに正確に吸着すればいいじゃん、ということですね。

aicc-pixelgrid-32.jpg

なるほど、このアプローチなら、パスの位置とピクセルグリッドがずれる問題にも対処できます。

icn_Creative_Cloud_512.png

自分メモ的に。

Adobe Creative Cloudのコントロールセンター(っていうんでしょうか?正式な名称がわからず...)では、CC版しかインストールできません。CS6版をインストールするには、次の手順を踏みます。

Web用にIllustratorを使う、つまり、ピクセルプレビューをオンにする場合、1ピクセルの線幅を持つ四角形を作成する場合、四角形の大きさが小さいと、[線の位置]が「中央」または「内側」だとつぶれてしまいます。

[線の位置]は外側にするのがベターです。

(クリックすると、拡大します)

Fireworksの機能拡張として開発されていた「Specctr」(スペクター)が、なんとIllustrator CC対応になっています。

SpecctrPreview.png

Specctrを使うことで次のことが可能になります(単位は選択している単位の種類に依存します)。

  • 選択したオブジェクトの幅、高さを計測して寸法線として描画する
  • 2つのオブジェクトの間隔を計測して寸法線として描画する
  • オブジェクトを1つだけ選択しているときには、アートボードの上と左からの距離を計測して描画
  • 選択したオブジェクトの塗りや線、不透明度などの情報を描画する
  • 選択したテキストのフォント、フォントサイズ、塗りなどの情報を描画する

Web制作を行われている方なら説明不要だと思いますが、カンプなどを作成するとき、ビジュアルデザイナーからコーダーへの申し送りの際に、むちゃくちゃ重宝します。

2013年7月18日(木)、ベルサール神保町3Fで第148回 バンフーセミナーが開催され、130名ほどの方が参加されました。

IMG_1174.jpg

参照リンク(ツールなど)

ダウンロードデータ

データをご希望の方は、お手数ですが、こちらのフォームにお答えください。

YouTube

DTP TransitのYouTubeチャンネルです。1分前後のクイックTipsを投稿しています。

チャンネル登録

Twitter

本サイトの記事以外に、小ネタやタイムリーな話題などをツイートしています。

マンスリーでまとめています。

このページの上部に戻る