DTP Transitでタグ「ピクセルグリッド」が付けられているもの

Illustratorでパターンを作成し、Photoshopにスマートオブジェクトとして配置したとき、パターンにスキマ(継ぎ目)が生じることがあります。

2015年7月4日(土)マイナビルーム2(新宿エルタワー19F)で「Webデザイナーのための仕事効率向上セミナー - 現場ですぐに役立つPhotoshop仕事術」が開催され、鷹野 雅弘(スイッチ)が講師を担当しました。

ご参考

セミナーの告知では、バージョンに関する情報が抜けており、失礼しました。

PhotoshopはCS6以降、CC/CC 2014/CC 2015と、特にWeb向けの不可欠な機能強化が行われています。最低でもCS6、なるべく新しいバージョンがオススメです。

三階ラボさんが#Illustrator と小数と私というコラムを執筆されていますが、ピクセルベースの作業を行うとき、小数点はどうにもやっかいな問題です。

そのときには[X]や[Y]、[W]や[H]などのフィールド(入力ボックス)にカーソルをおき、矢印キーを押します。

下向き矢印キーを押すと「切り捨て」、上向き矢印キーで「切り上げ」になります。

tabキーを押し、適用させながら次のフィールドに移動させながら作業するとスムーズです。

2015年3月21日(土)、マイナビセミナールームでマイナビクリエータースキルアップセミナー「“Illustratorの達人に聞く” Webデザイナーのための仕事効率向上セミナー」が開催され、鷹野 雅弘(スイッチ)が講師を担当しました。

IMGP2560.jpg

セミナーにご参加いただいた方は、独自アンケートへの回答をお願いします。デモデータや追加情報などをお送りします。

補足

デモで手間取ってしまった件はこちら。“何も選択しない状態で”発動します。

IllustratorをWeb制作に使い、ビットマップ書き出しするときのアレコレについて、これまでいろいろと取り上げてきましたが、現在、下記の制作方針が最強だと思われます(ツッコミ歓迎ですので、何かあればお気軽に)。

  • ドキュメントプロファイルは「Web」。[プレビューモード]を「ピクセル」に変更、[新規オブジェクトをピクセルグリッドに整合]はオフ
  • [線の位置]を「内側」にして作業
  • [アピアランス]パネルメニューの[新規アートに基本アピアランスを適用]のチェックをはずしておく
  • [新規オブジェクトをピクセルグリッドに整合]はオフに
  • [プレビュー境界を使用]にチェックを入れる
  • キー入力を「1ピクセル」に
  • アートボードの座標に注意
  • sRGBを基準に

これによって、次のような問題を回避できます。

  • プリントメディアの設定で制作されたドキュメントをWeb向けに利用しようとすると、エッジがにじむ。
  • [新規ピクセルグリッドを整合]をオンにしているとき、1ピクセルの線のオブジェクトを描くと、ピクセルグリッドでなく、ピクセルグリッドの中心に吸着する。そのため、実際の大きさは1ピクセル(=0.5+0.5)大きくなってしまう。
  • [線の位置]を内側(外側)にして作業しても、次に描くときには「中央」に戻ってしまう
  • せっかくいい感じに作業していても複数オブジェクトの整列を行うと、エッジがにじむ。または、見た目の通りに整列されない
  • [新規オブジェクトをピクセルグリッドに整合]がオンのまま描画すると、パスと描画のズレが生じる
  • アートボードごとに分けて制作しているとき、個別の書き出しでは問題ないのに、アートボード書き出しするとエッジがにじむことがある

Webで使うIllustrator(+SVG、+アイコンフォント) - NAVER まとめも併せてご覧ください。

ドキュメントプロファイル

後述する内容とダブりますが、新規にドキュメントを作成する場合には、ドキュメントプロファイルに「Web」を選択し、次の2点を修正しておくとよいでしょう。

  • [プレビューモード]を「デフォルト」から「ピクセル」に変更
  • [新規オブジェクトをピクセルグリッドに整合]のチェックをはずしておく

ドキュメントプロファイルについては、末尾にもふれています。

2014年2月6日(木)サンシャインシティコンベンションセンターで開催されているpage2014のメディアクリエイションゾーンセミナーにて、『Webで使うIllustrator、その基本とはまりポイント』を鷹野雅弘(スイッチ)が担当しました。

20140206_page2014_092.JPG

ご参加いただいた方は、ぜひ、アンケートへの回答をお願いします(スライドなどを共有します)。受付終了しました。

_DSC7108.jpg

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

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

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

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

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

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

aicc-pixelgrid-32.jpg

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

IllustratorをWeb向けに利用するときには、[表示]→[ピクセルプレビュー]をクリックして、ピクセルプレビューをオンにして使います。

これを使わない場合、左のようにボケてしまいますが、ピクセルプレビューがオンになっていると、右のようになります。

Illustrator CS5以降は、次の方法でもOKです。

  • [変形]パネルのパネルメニュー内の[新規オブジェクトをピクセルグリッドに整合]にチェックをつける
  • 新規ドキュメントを作成時、ドキュメントプロファイルで「Web」のプロファイルを選択する
    →[新規オブジェクトをピクセルグリッドに整合]にチェックが入ります。

ぶっちゃけ、Illustratorはスライスなどが使いにくいので向き不向きでいうと、あまり向いていないと思うのですが、下記などの設定についてはおさえておくとよいと思います。

困った、といっても好き好きですが、古くからのユーザーが戸惑うベスト3です。

フリックパン

Photoshop CS4から、手のひらツールでドラッグするときに、慣性スクロールするようになりました。

オフにするには、環境設定の[一般]で[フリックパンを有効にする]のチェックをはずします。

flickpan-off-s2.jpg

[アニメーションズーム]も切っておくとよいかもしれません。

スクラブズーム

Photoshop CS5から、ズームツールを右に動かすとズームイン(画面が拡大)、左に動かすとズームアウト(画面が縮小)します。

従来のように、拡大したい領域をドラッグできるようにするには、[ズームツール]を選択時に、オプションバーで[スクラブズーム]のチェックをはずします。

scrub-zoom.jpg

ピクセルグリッド

ピクセル間に白い線が表示されるようになっています。 非表示にするには、[表示]メニューの[表示・非表示]→[ピクセルグリッド]のチェックをはずします。

px-grid-onoff.gif

実験る〜むさんにピクセルグリッドちゃん気をつけてというエントリーが上がっていました。

これまで「Illustratorといえばプリントメディアのもの」でしたが、Illustrator CS5での機能強化によって、Webにも使用する人が増えそうです。

Web用のドキュメントプロファイルでスタートしたAiファイルを、カラーモードや単位を変更してプリント用に使うというケースが出てきまので、あさうすさん(実験る〜む)が指摘されているような問題が起こる可能性は十分に出てきます。

「数値入力でオブジェクトサイズを設定しても、その数値通りになってくれない」というのがその理由。きっちりmmやptの整数値で作るような場合、ピクセルグリッド整合機能が有効になっていると、勝手に数値が変わる。

ドキュメントプロファイルは新規ドキュメント制作時のみでなく、後からも変更できるように仕様変更されることが一番の解決策です。

Illustratorのドキュメントプロファイル

Illustratorでは、新規ドキュメントを作成時に、ドキュメントプロファイルを選択することでスタートしますが、プリントとWebを選んだときにどのように変わるのかを押さえておき、今後、原稿が来たらチェックすべきですね。

 プリントWeb
サイズA4(210x297mm)800x600px
単位mmpx(ピクセル)
裁ち落とし3mm0px
カラーモードCMYKRGB
ラスタライズ効果高解像度(300dpi)スクリーン(72dpi)
プレビューモードデフォルトデフォルト
ピクセルを選択すべき
新規オブジェクトを
ピクセルグリッドに整合
(Illustrator CS5のみ)
オフオン

aics5-document-profile.gif

『10倍ラクするIllustrator仕事術』改訂版

『10倍ラクするIllustrator仕事術』(増強改訂版)は、2011年発売の『10倍ラクするIllustrator仕事術』の改訂版。

2014年に技術評論社から発売、現在6刷。2011年版と合わせて38,000部のロングセラーとなっています。

詳しくはサポートサイトにて。

画像:『10倍ラクするIllustrator仕事術』改訂版

Illustrator CC 2018(2017年10月リリース)への対応版準備中です。全ページ書き換えますので、2017年版を待たずに、2014年版を(も)ご購入ください。

お知らせメールへの登録はこちら

セミナー開催情報

セミナー開催情報をこちらにまとめています。

DTP Transitと無関係のものも掲載しています。お問い合わせは、それぞれのイベントの主催者までお願いします。

5つの「く」

画像:『10倍ラクするIllustrator仕事術』改訂版

DTP Transitのコアとなっている制作へ考え方「ムラなく、モレなく、直しに強く、手数を少なく、美しく」を5つの「く」としてまとめてみました。

オススメ外部リンク

Adobe Creative Stationで「知ってるようで、知らずに損してるAcrobatとPDFのアレコレ」と題して連載しています。

Adobe Creative Stationで「ベテランほど知らずに損してるIllustratorの新常識」と題して連載しました。

Adobe Creative Stationで「ベテランほど知らずに損してるPhotoshopの新常識」と題して連載しました。

オススメのスライド

お問い合わせ

リンク

このページの上部に戻る