ゼロから始めるAffinity3　Affinity上級者講座その8　実効解像度について

ゼロから始めるAffinity3 Affinity上級者講座その7 細かい文字調整についての続き

さぁ、それでは下の方にショップの画像を配置してみましょう。
ＷＥＢ用の画像を作るときは気にしなくていいのに、印刷用のデータを作るときは気にしなきゃいけない「あること」があります。

とりあえずやってみましょう。

1.メニューの「ファイル」－「配置」で画像を選び、画像を配置する

ちょっと大きいので、サイズを小さくして上下を切りたいと思います。

2.画像を選択した状態で、「ベクター切り抜きツール」をクリックする

ベクタースタジオのとき、ツールの下の方にあります。

3.端を掴んでドラッグし、画像を切り抜く

青いハンドルを掴んでドラッグすると、画像の切り抜き範囲を変えることができます。
画像の位置を調整したいときは、真ん中らへんを掴んでドラッグすれば移動できます。

ベクター切り抜きツールを使うと、自動で長方形のクリッピングマスクを作成してくれます。
切り抜いた部分を復活させたいときは、クリッピングマスクを削除すればいいので便利です。

自分はよく使うので7のショートカットキー割り当ててます。イラレのクリッピングマスクがCtrl＋7なので(=・ω・=)

裁ち落とし部分も忘れずに設定して、いい感じに切り抜いてあげて下さい。

4.完成

さぁ、画像の配置ができました。
ＷＥＢ用の画像ならこれでいいんですが、印刷に出したいときは、画像の「解像度」を確認する必要があります。

ドキュメントの解像度ではなく、今回は「画像」の「解像度」です。

画像の解像度を確認する

メニューから「ドキュメント」－「リソースマネージャー」をクリックします。

すると、ドキュメントで使われているリソース（画像やテキスト）の一覧が表示されます。
左の一覧をクリックすると、右にその詳細が出てくる感じです。

ここの、「配置DPI」の数字が、大体350dpiを超えていればＯＫです。
（dpiって書いてあるけど、本当はppi。そこら辺の詳しい話は「ゼロから始めるAffinity3 Affinity上級者（？）講座その5 解像度について」にて）

こっから先は例によって難しくなるんで、「配置DPIの数値が350dpi以上になってればＯＫ」とだけ覚えて、飛ばしちゃってもＯＫです。それだけ覚えておけば何とかなる(=・ω・=)

「配置DPI」ってなんぞや？って方のためにこれから詳しく解説していきます。

ちょっとややこしくなるんで、今後、dpiと書いてあるんですが、ppiと呼ばせてください。
とりあえずdpi≒ppiってことで。
dpiと書いてあるのはppiなんだと脳内変換してください。d→pです。

(=・ω・=) ＜えっ、この画像WEB用だから、72ppiのハズだけど？？

元の画像は72ppiの画像を用意しました。右側の詳細にもちゃんと「元のPPI：72」と書いてあります。
なのに、なぜか配置PPIには「603ppi」と表示されています。

ここら辺の謎を解明するために、100px×100px、72ppiの画像を作成しました。
縦横に100個のピクセルを並べた画像です。
１インチ（2.54cm)に72ピクセルの解像度で作っています。100ピクセルだと約3.53cmぐらいの大きさです。

名刺に、約3.53cmの大きさで配置しました。ミリ表記だと35.3mm。

リソースマネージャーで見てみると、ちゃんと72ppiと表示されています。
右側の詳細と、配置サイズと。ピッタリ一致しています。

ちょっとこの画像、でかすぎるんで半分のサイズ（17.6mm）に縮小しました。

すると、配置PPIが「144ppi」になりました。
72ppiの2倍ですね。

(=・ω・=;) ＜？？？？？？？？？？

ここで、PPIの意味をおさらいしましょう。

ＰＰＩ＝Pixels Per Inch、1インチあたり何ピクセルあるか、です。
１インチは2.54cmです。

2.54cmの中にピクセルが4つあったら、4ppiになります。
ppiが多いほど、ピクセルの数が増えるので情報量が増え、高画質に見えます。

ppiが大きいほど滑らかに、キレイに見えます。少ないとピクセルが目立ち、ギザギザに。

今回用意した画像は、2.54cmの中にピクセルが72個並ぶ、解像度で作っています。
実際の画像は100pxなので、3.53cmほどあります。

新しく作った2.54cmのキャンバスに、先ほどの100px×100px、72ppiの画像を同じ解像度で配置してみましょう。

72ppiのとき、2.54cmの中に72ピクセルしか表示できないのだから、100ピクセルの画像は72ピクセルしか入らず、28ピクセル分はみ出てしまいます。
ここまではいいですよね？

では、この100px、72ppiの画像を、半分の大きさに縮小してみます。

半分にすると、2.54cmの中には144個のピクセルが並ぶ大きさになります。

2.54cmに72個ピクセルが並ぶ画像を半分に縮小したら、2倍のピクセルが2.54cmの間に並ぶことになります。
72個×2倍＝144個のピクセルが、2.54cmの中に並べられます。

ここまで大丈夫でしょうか？？(=・ω・=;) 逆にややこしいか？

わかりにくかったらこれまでの流れ忘れて下さい。説明ムズイ(´・ω・`)

要するに解像度というのは、2.54cmの中に「何ピクセル並べられるか」で決まります。

元のppiはあくまで参考値です。

拡大縮小して配置して、2.54cmの中に何個ピクセルが並んでいるかで、解像度が決まります。

この解像度のことを、「実効解像度（じっこうかいぞうど）」と呼んだりもします。

Web用に作った72ppiの画像でも、2.54cmの間に350px並ぶくらいの大きさに縮小すれば、十分印刷で使えます。

逆に、350ppiで作った画像も、拡大しすぎると解像度が足りなくなり、ピクセルのギザギザが目立ってしまいます。

同じ画像でも、配置する大きさによって解像度が変わってきます。

大事なのはppiの数字ではなく、ピクセルの数です。

「100px 72ppi」の画像と、
「100px 350ppi」の画像。

こちら、ぱっと見350ppiの画像の方が大きく感じられますが、実際は両方とも100pxなので同じです。
同じ大きさで配置すると、両方とも同じ解像度になります。

PPIは「1インチ（2.54cm）の間に何個ピクセルがあるか」なので、配置サイズを変えると変わってしまいます。
配置する前のppiって、あまり意味がないんですよね。

こちら、引っかけ問題としてよく使われるので覚えておきましょう(=・ω・=)
大事なのはピクセル（px）の大きさです。

(=・ω・=) ＜画像解像度はピクセルの数字が大事ってのは分かった。
じゃあ画像に設定されてるppiってなんなのさ？要らなくない？

これは、実際に二つの画像をクリックでデフォルト配置してみると違いが分かります。

72ppiの画像はデフォルトで35.3mmの大きさで配置され、
350ppiの画像はデフォルトで7.3mmの大きさで配置されます。

デフォルトで配置した際、元のppiを参考にした大きさで配置されます。
（AffinityやPSD形式の画像のとき。jpgなどはドキュメントの解像度に合わせて配置されます。多分親切機能）

100px72ppiの画像は、2.54cmにピクセルを72個並べる解像度なので、100pxで35.3mmです。

100px350ppiの画像は、2.54cmにピクセルを350個並べる解像度なので、100pxで7.3mmです。

ppiの数値は、「この画像、2.54cmに○ピクセルぐらいの解像度で配置するつもりだよー」という、予定の数値です。
配置するときに、デフォルトではそのサイズで配置してくれます。

(=・ω・=#) ＜ややこしくてわからーん！！

ですよねー！(笑)

ここらへん、分からなくても何とかなるんで大丈夫です！

とりあえず、画像を配置した際は「配置PPI」の数字が350ppi以上になっているか確認するようにして下さい。
ppiの数値が足りなかったら縮小してみたり、別のピクセル数が大きい画像を用意するようにして下さい。

だいたい300ppiぐらいあればまぁまぁキレイに出るので、そこらへんはどのくらいこだわるかに寄りますね。
多少ガビガビしてても気にならないなら、普通に低画質の画像でもＯＫです。200ppiでもイケるっちゃイケる。

(=・ω・=) ＜解像度足りないな……100pxの画像を200pxに拡大すればＯＫ？

単純に拡大するだけだと、1pxのものを4pxで表示するだけなので、クオリティ的には上がりません。

四角で囲った部分が、元の1pxです。4つのpxで元の1pxを作ってるだけです。

こちら、見栄え同じなのにファイルサイズだけでかいという、最悪なデータになります(´・ω・`)

細かく作りたくても、元の情報がないからこれ以上細かくは作れないんですよね。

最近はＡＩでその細かい情報を補間して、作ってくれたりします。
ただ、あくまで「想像して作り出す」ので、たまーに「なんじゃこりゃ？」ってものが作られちゃったりします(´・ω・`)
なんかやたらコントラストが強かったりとか。エッジが強調され過ぎてたりとか。

便利ではあるんですが、使うときはちょっと注意してあげて下さい。

一応、Affinityでも有料プランを申し込めば、ＡＩを使った解像度ＵＰが使えるみたいです。

一応無料でも、メニューの「ドキュメント」－「設定」－「サイズ変更」－「ドキュメント」から……

画像のサイズを変更するついでに、「リサンプル」で拡大するときのピクセルの補間方法を選べます。

ニアレストネイバー…1pxをそのまま拡大。ギザギザが目立つ。見本でやった感じ。線画とかコントラストが高い画像を拡大するときはこれを使わないとボケる。
バイリニア…周囲4pxの平均を取る。ニアレストネイバーよりなめらかだが、ややぼやける。グラデーションがある写真などを拡大するときに。
バイキュービック…周囲16pxを参照し、バイリニアより高品質。
Lanczos3分離可能…周囲36pxを参照し、バイキュービックより高品質。計算を最適化する。
Lanczos3分離不可…周囲36pxを参照し、最適化しないためめっちゃ重いが、一番高品質。

下に行くほど高品質だけど、処理が重くなる感じ。
一番下から使っていって、うまく行かなかったらだんだん上の方使っていく感じでいいと思います。

一番下のを使うと、こんな感じで、ピクセルの間を滑らかにしてくれるのはいいんですけど……

こんな感じで、ちょっと画像周りにゴーストが出ちゃったりします。
おそらく、参照範囲が大きすぎるせいかな。

バイキュービックだと、ゴーストも出ずになめらかな感じに。
元画像の大きさやコントラスト具合によって結果が変わってくるので、いろいろと試してみて下さい。

ただ、多少ギザギザが見えにくく滑らかになったとしても、画像が不鮮明なことに変わりはないので、できるだけ元から高画質な画像を用意するようにして下さい。

200pxはガタガタは抑えられたが、まだ不鮮明。
高画質画像

100pxの画像をどんなに頑張って加工しても、ここまではキレイにはならない。

個人的には、ファイルサイズのわりに画質があまり上がらないので、無理に拡大しないでいいかなーと思ってます(´・ω・`)
0.1％でも良くしたい！って時は拡大して、アンシャープマスクかけたり小細工する感じ。
AIがもっと進化したら、AI拡大は使ってみたいかなぁ。
低画質のものを高画質にするのは、難しいと思います。

写真を撮るときは、できるだけ高画質で。
イラストを描くときは、できるだけ大きめのピクセルで描いてあげると安心ですね。

(=・ω・=) ＜イラストを描くときのサイズはどのくらいにしたらいいの？350ppiにするには2.54cmに350ピクセルだから、掛け算して……何ピクセルだ？？

最初っから、大体印刷するぐらいのサイズで、350ppiでキャンバスサイズを決めてあげるといいです。

ドキュメントを作るときに、ピクセルではなくミリメートルを指定して、DPI（PPI）を350に。印刷するとしたらどのくらいの大きさで印刷するか……大体Ａ４ぐらいか、大きくてもＡ３ぐらいだなーと思ったら、その大きさでドキュメントを作成すればＯＫです。

ドキュメント単位をピクセルに切り替えるとこんな感じ。大体4093px×5787pxで、A3サイズ350dpiのデータが作れます。ちょっと端数でちゃってるけど。
わざわざドキュメント単位をピクセルに直さず、ミリメートルのままドキュメント作成しちゃってＯＫです。

計算式的には、
印刷したいサイズ○mm÷25.4（インチ）×350（PPI）＝必要ピクセル
です。

297mm÷25.4×350＝4092.5 端数四捨五入で、4093pxで作ればＯＫ。

端数問題あるし、計算するの面倒臭いんで、最初からpxでなくmmでドキュメント作成するの、オススメです。

ちなみに、
「100mm 75ppi」と
「100mm 350ppi」は

「100mm350ppi」の方がサイズが大きいので間違えないように。

100mm 75ppi ＝ 295px
100mm350ppi ＝1378px です。
（100÷25.4×75＝295）
（100÷25.4×350＝1378）

mmをインチに変換するせいでわかりにくくなってますが、ppiは「１インチに何個ピクセルがあるか」なので。
mmが同じ場合、ppiが大きい方が、サイズが大きいです。