画像の一部を切り抜き周囲をぼかしたイメージ画像の作り方【クリッピング or マスク】-Affinity Photo
も・く・じ
ここではAffinity Photoの数ある機能の中から主にブログサイトや商品・サービス紹介サイトでの利用を前提としたweb用画像の作成・加工についての使い方をご紹介します。
（記事中の画像もAffinity Photoで作成してます）
このページは知ってればより効率アップのTips系記事になります。
Affinity Photoの基本的な使い方はこちらにまとめてあります。
商品画像やヘッダー画像などは特に意図がない限りは矩形（長方形）画像をそのまま表示するのが一般的です。
しかしながら四角い画像の縁を少し切り取ってその縁をぼかしたり丸形に切り抜いたりすることでイメージ画像っぽい見せ方をすることもできます。
このやり方をクリッピングとマスクという（仕上がりはそっくりな）機能を使ってそれぞれの使い勝手の違いをご紹介していきます。
実は微妙に異なるクリッピングとマスク
サンプルとしてぱくたその企画コラボ・世界遺産【富山県南砺市の菅沼集落】から1枚借用しました。
オリジナル画像がこちら↓です。
この画像の”集落部分”だけを切り取りなおかつ周囲（縁）をぼかすやり方をクリッピングとマスクという2つの機能を使って仕上げてみます。
先にそれぞれの完成形をご覧ください。
見た目はほぼ一緒ですね。
じゃあ何が違うのでしょうか。
クリッピングでの作業工程
まずは制作工程の違いです。
クリッピングは切り抜くエリアをシェイプ（図形）ツール（今回は長方形ツール）を使って描きます。
丸く切り抜きたい場合は楕円ツール、星の形で切り抜くなら星形ツールといろいろできます。
続いて境界線（縁）をぼかすためフィルターをかけるんですが、シェイプ（図形）のままではかけられないのでラスタライズしてピクセル化します。
画像の取り込みとラスタライズ化…詳細はコチラ
ピクセル化したらメニューの【フィルター】→【ぼかし】→【ガウスぼかし】を選択します。
適当な（半径）サイズでぼかしを入れていきます。
後になってこのぼかし幅を修正するのはかなり面倒なのでこの時点で決め打ちするつもりでいた方がいいです。
といってもぼかし幅を大きくするなら重ね掛けでできないこともないです。
小さくするのはものすごく大変です。（早い話が最初からやり直し）
このあとぼかしを入れたシェイプで切り抜いていくんですが、やり方は2つあります。
1つ目ですが、まずはシェイプ（レイヤー）を画像（レイヤー）の下に移動します。
続いて画像（レイヤー）をクリックして選択状態にしてからメニューの【重ね順】→【内側に移動】をクリックします。
これで切り抜きが完了します。
2つ目は（こちらは慣れた方用とでも言いましょうか）画像（レイヤー）を下のような位置にドラッグするだけです。
マウスを離したら直前のキャプチャ画像と同じレイヤー階層になります。
（うまくいかない方は下のリンクのページ内の『クリッピングマスク化』をご参照ください）
ここに注目すればレイヤー移動は自由自在…詳細はコチラ
マスクでの作業工程
クリッピング同様、マスクも切り抜くエリアをシェイプ（図形）ツールの長方形ツールを使って描きます。
続いて境界線（縁）をぼかすためこちらもクリッピング同様シェイプ（図形）をラスタイズ後、メニューの【フィルター】→【ぼかし】→【ガウスぼかし】を選択します。
ここからがクリッピングと異なる工程になります。
まずシェイプ（レイヤー）は画像（レイヤー）の下に移動せずそのままの状態でOK。
続いてシェイプ（レイヤー）を下のような位置にドラッグします。
これだけで先ほどのクリッピングと同じ切り抜きが完成します。
レイヤー階層は下のようになります。
クリッピングとマスクの挙動の違い
こんな感じでクリッピングとマスクは作業工程に多少の差はあるものの見た目の結果はほぼ同じです。
ただこういったものは必ずといっていいほど修正作業が生じるもの。
使い勝手に大きな差が出るのはその修正時です。
レイヤー構造
修正に当たってそれぞれのレイヤー構造を眺めてみましょう。
これがしっくりこないとあとあとの修正作業でこんがらがってしまいますので。
クリッピングのレイヤー構造は切り抜きレイヤーが上で画像レイヤーが下。
一方、マスクのレイヤー構造は切り抜きレイヤーが下で画像が上になります。
個人的には切り抜くマスクが画像の上にあるクリッピングのレイヤー構造がどうにも馴染めないんですね。
その原因の一つとも言えるのが切り抜きレイヤーのサムネイル画像。
クリッピングの方はぱっと見、通常の”画像”レイヤーにしか見えないので一瞬「あれ？」ってなっちゃうんですよ。
その点、マスクの切り抜きレイヤーは”殺風景”。
でもこちらの方が一瞬でエフェクト系の補助レイヤーだというのがわかるので個人的にはこっちの方が使いやすい。
このあたりは切り抜きをどのように活かすのかとか好みによるところもあるので、一概にどちらがいいとは言えません。
切り抜きエリアの位置やサイズの変更
切り抜きエリアをもうちょっと別の位置に移動したいとかもっと範囲を狭めたい（広げたい）といった時のやり方です。
【クリッピング】
こちらはやや面倒です。
1.画像をいったんクリッピング状態から解除して外に出します。
2.下のキャプチャ画像のようなレイヤー階層になったら（移動ツールに持ち替えて）切り抜きレイヤーを移動 or 縮小（拡大）します。
切り抜きレイヤーの不透明度を落としてやると背景の画像が見えるようになるので調整しやすくなります。
ただし調整後は必ず100%に戻しておくことを忘れずに。
なお切り抜きレイヤーを外に出さずに移動しようとすると画像も一緒に付いてきてしまいます。
3.再度クリッピング状態のレイヤー階層に戻せば修正完了です。
【マスク】
マスクの修正はとても簡単です。
シェイプ（レイヤー）をクリックし移動ツールに切り替えた時点で、マスクがかかった状態のまま移動や拡大・縮小ができちゃいます。
（背景の画像は固定されたまま）
背景画像の移動・拡大 or 縮小
今度は切り抜きエリアは固定したまま背景の画像だけを移動（or 拡大・縮小）したい場合のやり方です。
【クリッピング】
こちらは画像（レイヤー）をクリックして選択状態にして移動ツールに持ち替えた時点で自由に移動（or 拡大・縮小）ができます。
【マスク】
こちらはやや面倒です。
1.シェイプをいったんマスク状態から解除して外に出します。
（画像の上に配置）
シェイプレイヤー上で右クリック→マスクの解除をクリックしても同様の結果になります。
こちらの方が簡単ですかね。
2.マスクの不透明度を少し落として（背景の）画像が見える状態になったら画像（レイヤー）を選択して画像を移動（or 拡大・縮小）します。
（修正後はシェイプの不透明度を必ず100%に戻しておきます）
3.再度マスク状態のレイヤー階層に戻せば修正完了です。
ご覧になってわかるように切り抜きエリアの操作と背景画像の操作はクリッピングとマスクで正反対の操作になります。
切り抜きエリアの境界線
今回は切り抜きエリアの境界をぼかしましたが、クリッピングであればクリアな境界線を付けることもできます。
ただ切り抜く形が四角形の場合はわざわざクリッピングを使う必要はないかもですね。
というのも切り抜いた画像の大きさよりも一回り大きめのシェイプを作って画像（レイヤー）の下にシェイプ（レイヤー）を配置すれば、シェイプの”はみ出た部分”が自動的に境界線の役割となってくれますから。
しかしながらハート形とか星形ともなるとそうもいきません。
その場合はクリッピングに頼った方が早くて正確です。
たとえばハート形の場合、やり方としてはシェイプを（ぼかしを入れた時のような）ラスタライズをせずにコンテキストバーのオプション設定で境界線の色やサイズを設定するだけです。
あとは前述の手順でクリッピングすればOK。
※マスクの場合はたとえ境界線の設定を施してもマスクにした段階で無視（設定無効）されてしまいます。
切り抜きの取り消し（削除） or 一時非表示
【クリッピング】
クリッピング状態の画像をいったん解除（外に出）してからシェイプを削除もしくは非表示にします。
【マスク】
マスクレイヤーを削除もしくは非表示にするだけ。
こんな感じでクリッピングとマスクには修正時の挙動に大きな違いが出てきます。
通常の切り抜きでもできないことはないが...
クリッピングやマスク機能を使わなくとも、矩形マーキーツールを使えば四角形や丸形でしかも境界線をぼかした状態で切り抜くことはできます。
たとえば長方形ツールで画像を範囲指定します。
コンテキストバーのオプション設定から調整をクリック→ぼかしなどを設定後、マスクとして出力します。
ハイ、出来上がり
実はこれが一番シンプルで簡単かもしれません。（笑）
マスク（レイヤー）が画像（レイヤー）の入れ子になってますが、場合によっては画像（レイヤー）の上に配置されることもあるかも。
（環境設定？ or アシスタントマネージャーの設定次第？）
ただし修正するときにちょっと困ったことが。
切り抜きレイヤーの位置をずらそうとすると…見切れちゃうみたいで。
これではその後の修正がより面倒なモノになりそうですね。
ということで四角形や丸形で修正なしの”決め打ち”で行くならこちらのやり方の方がいいかもです。
テキストで画像を切り抜き
たまに見かけるテキストの中に画像が見えてるヤツ。
Affinity Photoでもクリッピングやマスクを使ってできますよ。
下のサンプルはマスクを使ったやり方になります。
（シェイプがテキストに置き換わっただけでやり方はこれまでと同じ）
テキストによるマスクだとサムネイル画像はどちらも同じになるってことに今気がつきました！
統一仕様じゃないんですね。
【Affinity Photo ver.1.10.1で検証済】
スポンサーリンク
記事はお役にたてましたか?
記事に興味をもっていただけたらソーシャルボタンでの共有お願いします^^
↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓