「画像解像度」の理屈がわからない人にどこまでわかってもらえるかわかるためのテスト(1)

さいしょに

画像解像度の概念だの理屈だのって、自分はPhotoshopをいじってるうちに自然に理解できたクチだったんですが、わからなかった人にどう説明したらわかるのか、というのを考えてみたテストです。
わからなかった時期が自分にもあれば、こうしたらわかりやすかった、とかあったのかも。
うちの現場の古参の中にも案外わかっていない人がいる気がしてて。

まあこれですね。

そんなわけで、じわじわやっていきましょう。
ここではPhotoshopを使います。
これを機に、わかりたいという方はゼヒ読んでいただき、奇譚のない美辞麗句をください。

解像度とは

最近は画像以外のことでも、知見や掘り下げが深いと思ったものに対して「解像度が高い」なんて言い方をするようになってますね。
要は、「細かさ」ってことですね。画像でいえば解像度は「ピクセルの細かさ」であり、「ピクセルの大きさ」です。
「ほそかさ」って読んだ子はあとで話があるので残ってなさい。

画像解像度の単位

気軽に「ppi」とか言われてますが、pixel / inch の略です。スラッシュは per(パー)と読むです。
これは、画像1インチあたりに何ピクセルある、という意味です。
ここでこまかい数字なんか出すと難しい印象を与えてしまうので、やりません。

ちょっとやってみよう

では実際に手を動かして確認してみます。
Photoshopで「新規」。
実務に悪影響があるといけないので、「新規ドキュメント」画面では何もいじらずOKボタンでいいです。

新規ドキュメントを開いたら、メニュー「イメージ」から「画像解像度」を出して、
さあいじりましょういじりましょう。
※カンバスが真っ白だった場合、別の色で塗りつぶしておくとあとでわかりやすいです

スクショを参照して、以下の手順。

  1. 「再サンプル」にチェックを入れる
  2. 「解像度」の単位を「pixel/cm」に変更。これで「1cmあたり何ピクセル」となる
  3. 「解像度」の値を 1 に
  4. 幅・高さの単位を「pixel」に
  5. 幅・高さの値を 10 に
  6. 最後に「OK」ボタン

これでいったん保存。場所や名前、ファイル形式はてきとうで。
各界隈ではpixel/inchが一般的ですが、うちらはメートル法で育ったので、
わかりやすさ優先でpixel/cmで画像をいじり回して理解を深めましょう。

ちょっと配置してみよう

次に、画像を配置してみるテスト。
シェアや認知度の問題で、例ではIllustratorを使います(すまんっ俺のInDesignちゃん、すまんっ)。
環境設定 > 単位 > 一般 を「ミリメートル」にしておいてください。
(「センチメートル」もありますが、あまりにも小学生じみているのでミリがいいです(個人の感想です))。

Illustratorで「新規」。これも、何もいじらずOKボタンで作成していいです。
ここに、保存しておいた画像を配置してみます。情報を残したいので「埋め込み」ではなく「リンク」での配置がのぞましいです。
配置したら、画像が選択されたままで各種パネルで寸法(W:幅、H:高さ)を確認してみてください。
どでしょ。100×100mmになりましたか。なっていなかったら操作をどこかで間違えています。

ここまでの解説

作成した「10×10pixel で、画像解像度:1pixel/cm の画像」について、
1cmあたりのピクセル数が1、つまり1ピクセルの大きさがぴったり1cmである、ということになります。
寸法は指定しませんでしたが、幅と高さをそれぞれ10ピクセルにしたので、
「1cmが10個」と指定したことになり、寸法はおのずと「10cm」に決まります。
まだ深く考えなくて大丈夫です。大丈夫ですよ。

解像度を変えてみる

最初に作成した画像を開いて、「画像解像度」で解像度をいじってみましょう。

  1. 「再サンプル」にチェックが入っているのを確認
  2. 「解像度」の単位を「pixel/cm」から「pixel/inch」に変更。
  3. 「解像度」の値が「2.54」に変わるので、「1」を入力
  4. 幅・高さの値が「4 pixel」に変わるので、「10」を入力
  5. 最後に「OK」ボタン

これを別名で保存。以下「画像2」とします。
またIllustratorに画像2を配置してみましょう。
今度は1インチあたりが1pixelです。1インチは25.4mmです。つまり1ピクセルが25.4mmの大きさ。
なので幅・高さとも 25.4mm × 10 = 254mm になりました。でかいですね。A4サイズのアートボードにおさまりません。

配置寸法を変えてみる

次に、「ドキュメント情報」パネルを開き、フライアウトメニュー(右上の ≡ )から「リンクされた画像」を選択。

画像の情報が出たら、じろじろ観察してみましょう。
何も出てなかったら画像2を選択してみてください。

寸法や解像度が確認できますね。Photoshopで見た設定どおりです。
各単位は環境設定に関係なく決まった単位で表示される仕様なので注意。
とくに「寸法」は単位がpointですね。ほっときましょう。

この画像2を、10%(10分の1)に縮小してみましょう(やり方わかりますね?)

それでドキュメント情報パネルを再びじろじろ…
・pixel数は変化なし
・寸法は10分の1
・解像度は10倍
になりました。

ここまでの解説

配置先で画像2の寸法を縮小したことで、解像度が上がりました。
寸法を半分にすれば解像度は2倍に、10分の1にすれば10倍になります。
反対に、寸法を拡大していくと解像度は下がっていきます。

いったんまとめ

配置先で画像の寸法を拡大・縮小すると、画像を構成しているピクセルも同時に拡大縮小されます。
つまりpixel/inchの「1インチあたり何ピクセルある」が変動します。
冒頭の画像を再掲しときます。

絵柄の寸法の大きい小さいに惑わされず、ピクセルが大きいか小さいか、だけを見ましょう。

次回に続きますっ

ExtendScript:Document.saved って

Photoshop, Illustrator, InDesign どれも共通した
Document.saved(bool) というプロパティがあるので見てみた。

結果、期待通りの結果が出たのはInDesignだけ。
むしろ、InDesignだけが異色の挙動といえるのか。
PhotoshopとIllustratorは同じ結果だった。

PhotoshopIllustratorInDesign
(日)新規ドキュメント作成直後truetruefalse
(月)既存ドキュメントを開いた直後
およびドキュメント保存直後
truetruetrue
(火)上記(日)のとき、少し作業した状態falsefalsefalse
(水)上記(月)のとき、少し作業した状態falsefalsetrue

まとめると、
InDesignはファイルパスが存在する、つまり一度でも保存されたことがあれば true、
Photoshop/Illustratorは最後の保存以降に作業履歴がある、つまり閉じる時に「保存しますか」と聞かれる状態が true、というわけ。

これ、たとえばPhotoshop/IllustratorならPDF、InDesignならIDMLなどを変換して開いたときに(日)の挙動を起こす。


というわけなので、ついでに検証。
IllustratorとかInDesignって、開いた直後、まだ何もしていないのにタイトルバーのファイル名末尾に*がついて、そのまま閉じようとすると「…保存しないんですか?」って訊かれる場合があるじゃんすか。
Illustratorでこのとき、Document.savedはどうなるのか。どうなるの…

あ、こうなるの…
ちょっと使いにくいねー…

Photoshop:パスが反転する件(2017版)

2008年の当ブログ開設以来、「Photoshop:パス切り抜き中、いつの間にか反転してる件」という記事が、便利なスクリプト群そっちのけでぶっちぎりのアクセス数でありまして。今でも150pv/週を下らない感じです。
どんだけ使われてるんだよPhotoshop、ってことなんですが。

それにしても、記事中のスクショも今では見かけないぐらい古いバージョンの物だったりするし、そろそろリニューアルしておこうと思いまして。仕組みや解決策は当時の記事内容で今でもぜんぜん通用するんですが。スクショもCC2017で作り直しました。
※すでにCC2018がリリースされていますが、現場の事情というやつでウチには職場にも自宅にもまだお目見えしておりません。


パスの反転現象とは

ここでは、ペンツールで作成した領域(選択ハニー、ベクトルマスク、クリッピングパスなど)が、目的と正反対の領域に適用されてしまうことを指します。

いちおう検索結果トップヒットはウチのところなんですが、ヨソのページではきちんとした理解に及んでおらず解決した気になっている所がわりと多いです。今回そのあたりまできっちり解説しますので、興味があれば最後まで目を通していってくださいまし。

 

パスが反転する原因

ペンツール使用時、オプションバーに出てくる「シェイプ範囲」というのがあります。わざわざ公式用語を調べました。

コンポーネント同士が重なり合ったとき、前面のシェイプがこの設定に応じて混ざったりひっくり返ったりします。
過去バージョンのPhotoshopでは名称が違っていたりしますが効果は同様です。
コンポーネントとは:パスコンポーネント選択ツールでクリック選択できるパスの最小単位をコンポーネントといいます。ひと囲みの図形、始点と終点が重なっていないオープンパス、これらはすべてコンポーネントです。スクリプトを書く人にはサブパスと言ったほうが通じるかも)

パスアイテムの全ての内容がこの上から2つめ「前面シェイプを削除」に設定された場合に、パスの領域が反転する現象が起こります。
※厳密には「最背面のコンポーネントのシェイプ範囲がコレのとき」なんですが、覚えててもしょうがないのでざっくりの知識でいいと思います。

まとめ:ユーザーが知らずに「前面シェイプを削除」に設定してしまっているのです。

 

パスが反転する原因の原因

実は4つのシェイプ範囲のうち「シェイプを結合」と「前面シェイプを削除」の2つにだけキーボードショートカットが割り当てられています。
近年バージョンではどこを探してもそれがわからないようになってしまってます。ひどい。
古いバージョンではツールチップにしっかり出ていました。

プラスマイナスですね。ペンツール使用時だけ反応します。
過去にいろいろとほじくったんですが、この設定は切れませんでした。修行が足りない。

まとめ:ユーザーが知らずにペンツール使用中にマイナス(-)を押してしまっているのです。

 

パスが反転する原因の原因の原因

Photoshopを使っていて、マイナスを押す瞬間。
それはズームアウトのショートカット[command -]です。
Windowsでは[ctrl -]。
このとき修飾キーから指が外れてマイナスだけ押してしまった、というのが原因の大半と思われます。
だってほかにマイナス押す用事なんかろくにないでしょう。

まとめ:キーボードショートカットの入力ミスが発生している

 

パスが反転する原因に気付かない原因

前述の「マイナス押しちゃった罠」は、過去バージョンでは押してすぐには発動しませんでした
CS5.1以前では、シェイプ範囲の表示変更はマイナスを押した瞬間ではなく、作成中のコンポーネントがアクティブでなくなった瞬間に行われていました。これは作成中のアクティブなコンポーネントには適用されません。
そして、次回に作成される新規のコンポーネントに初めて影響を及ぼします。
なので、例え作業中に「あ、パスが反転してる」と気付いたとしても、それはマイナスを押してしまってからずーっと後だったりします。保存した画像を配置してみて気付いたなんてのは論外です。

CS6〜CC2014の場合、
パスの作成中にマイナスを押すと、オプションバー上のシェイプ範囲は即時「前面シェイプを削除」に変わりますが、CS5.1以前同様、作成中のコンポーネントには適用されません。

ここまでで、
CC2014以前は、キーボードショートカット「マイナス」はペンツールのデフォルト設定を変更する役割にとどまる、といえます。

 

しかし時代は変わった

ではCC2015以降はどうなのかというと。
マイナスを押した瞬間、作成中のコンポーネントのシェイプ範囲は即時「前面シェイプを削除」に変わります。しかし同様にシェイプ範囲を「シェイプが重なる領域を中マド」に戻してしまうことも可能です。
ただし、途中ではなく最初から「前面シェイプを削除」でパスを作成し始めた場合は変更不可です(「シェイプを結合」には変更できるのですが、「だから何」と言いたい。これについては後述)。

CC2015以降におけるキーボードショートカット「マイナス」はCS6以前の役割も有しつつ、選択中のパスがあればそのシェイプ範囲は変更されます。

ちなみにCC2015以降では、コンポーネントごとの正確なシェイプ範囲を確認するにはパスコンポーネント選択ツールでのみ行ってください。白矢印のパス選択ツールでは正しく確認できません

まとめ:CC2014以前の場合は、パスの反転はユーザーが「やらかした」と気付く瞬間のずっと前の時点で仕込みが完了している可能性がある。CC2015以降では万全とは言えないが、それでもずんとマシになっている(ウチも知らなかった)。

表にしてみると、こんなところです。

以上が現象および原因の考察となります。
自分でやっちゃった時は苦笑いで済むんですが、外注した切り抜きが全部コレやられてたりすると、
もうギョエーとか。ウギャーとか。

この反転しちゃったパスの直し方がわからずにやむなく最初から作り直してしまう方もいるんですが、
シェイプ範囲を理解していないと根幹が直らないもので、何度やっても反転してしまいます。
そのたんびに環境設定をクリアしてた人もいたらしいです。お疲れ様です。

余談なのですが、配置して初めて気付くのはある程度しょうがないんですけど、パスパネルのサムネイルで判断つきますので把握しておきましょう。

 

反転したパスの直しかた

いよいよですが、その前に。
シェイプやパスを何も選択していない状態でペンツールを持ち、シェイプ範囲が「シェイプが重なる領域を中マド」になっているか確認しましょう。なっていなかったら、今のうちに直しましょう。経験上、早めの段階でやらないと後でほぼ忘れます。

えーでは、反転したパスの直しかた。
パスを選択して「前面シェイプを削除」のパスを「シェイプが重なる領域を中マド」に変える。
文字にするとたったこれだけなんですが、しかし簡単にはいかない場合があるのです。
とにかく、まずはやってみましょう。

・反転したパスアイテムの内容を全て選択
ペンツール、パス選択ツール、パスコンポーネント選択ツール のいずれかを持ち、パスパネルのサムネイル部分をoption+クリック(Windowsではalt+クリック)。
過去のバージョンではサムネイルに限らず名前部分のクリックでもいけたのだが…

・シェイプ範囲を「シェイプが重なる領域を中マド」に変更

ここで反転が直ればぶじ終了。
しかしこの通りにはいかない場合が多いのです。

 

うまくいかなかった場合

少々めんどうです。パスアイテムをコピペで作り直す必要があります。

・前述にならい、パスアイテムの内容を全て選択、それをcommand+Cなどでコピー

・何も選択していない状態でオプションバーのシェイプ範囲が「シェイプが重なる領域を中マド」になっているのを確認して、新規パスを作成
※厳密には「前面シェイプを削除」以外になっていればOKです

・ペースト(すべてのシェイプが選択された状態に)

・シェイプ範囲を「シェイプが重なる領域を中マド」に変更

これで完了。
終わったら、元のダメなパスはパスアイテムごと削除しましょう。最寄りのゴミ箱などに。

このあと、元のダメなパスがクリッピングパスだった場合は、作り直したパスを改めてクリッピングパスに設定する必要があり、
ベクトルマスク(シェイプレイヤーも)のパスだった場合はレイヤーのベクトルマスクに適用し直す必要があります。とてもめんどうです。

まとめ:めんどう。

うまくいかなかった原因

パスアイテムを作り直したりせず、シェイプ範囲を変更するだけで簡単に済んだのはなぜか、
逆に、それができなくてパスアイテムを作り直す羽目になったのはなぜなのか。

ペンツールでカンバス上にパスを打ち始めた場合(作業用パスが自動生成された場合)が、簡単には直らなかったパターンです。
バグだと思うんですが、不具合報告をすっかり忘れていました。わーい。

対して、パスパネル上で新規パスを作成してからパスを打ち始めた場合が、簡単に直るパターンです。
特に事前説明がない場合、こんなおしとやかな手順で作業する人なんかまずいないと思うんですが。。

なので、今後もパスの反転をやらかす自信のある方は、カンバス上にパスを打ち始めたい気持ちを抑えて、まずパスパネルから「新規パス」を心がけるとよいのかも知れません。

まとめ:「作業用パス」は手軽な半面、なんかちょっとだめなところがある。

 

よそのサイトの情報への不信感について

ここまで、口がすっぱくなるほど「シェイプが重なる領域を中マド」を提唱してきました。
パスの反転現象が解決できた、と書かれてあるよそのサイトのいくつかには、シェイプ範囲を「シェイプを結合」にすればいい、という結論で終わっている所がいくつかありました。
でもそれはだめ。

まとめ:それはぜんぜんだめ

 

「シェイプを結合」ではだめな理由

「シェイプを結合」ではドーナツの穴っぽこが抜けません。
穴のあいていない絵柄なら別にいいじゃん、とも思われるでしょうが、穴のあるなしでいちいち使い分けるほうが面倒でしょう。

【重要】クリッピングパスに複数のシェイプ範囲が混在していると出力処理がものすごく重たくなります。
かつて自分でも運用してみていた時期がありましたが、ほんとにおすすめしません。出力にめちゃくちゃ時間がかかります。
クリッピングパス以外のパスでは構わないのでしょうけど…

それはおいといても、Photoshop5.5Jまではシェイプ範囲は今のように4つではなく、この中マドひとつしかありませんでした。
現在においても万能なのはこれひとつです。あくまでも中マドを基本にするべきです。
うしろむきな理由として、シェイプ範囲を理解していない人にデータを引き継ぐ事も考えないといけない場合もあります…

しかしシェイプ範囲を駆使してシェイプを作成し、「シェイプコンポーネントを結合」でパスを整形するのは大いにアリです。
Illustrator使いの方にはおなじみのパスファインダー的なやつです。活用していきましょう。

まとめ:「シェイプが重なる領域を中マド」が基本です。超基本です。「シェイプコンポーネントを結合」をしない場合は他のシェイプ範囲はあとに残る形で使うべきではありません。

 

最後に

ここまで我慢強く読んだ人だけに、簡単に反転パスが直るスクリプトを用意しました(よくある展開)。
…となってればよかったんですが。いろいろ残念なのですが今回はありません。
ESTKの限界を見た気がします。たった一点解決できればちゃんとしたのが書けるので、これはいずれ改めて。

ではでは。

 

過去記事(いちおう残してありますが、もう見なくて大丈夫です)
パス切り抜き中、いつの間にか反転してる件
パスが反転して困っちゃわないために(未決)
パス反転の件まとめ