アイキャッチ画像
HOME > ウェブデザイン > Affinity Photo > 画像の一部を切り抜き周囲をぼかしたイメージ画像の作り方【クリッピング or マスク】-Affinity Photo
記事公開日:2021.10.25
この記事は約6分で読めます。

画像の一部を切り抜き周囲をぼかしたイメージ画像の作り方【クリッピング 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で検証済】

【Volar】サイトイメージ画像

スポンサーリンク

記事はお役にたてましたか?

記事に興味をもっていただけたらソーシャルボタンでの共有お願いします^^

 ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓

コメントはお気軽にどうぞ

メールアドレスは公開されません。
* が付いている欄は必須項目です。

内容に問題なければ下記の「コメントを送信する」ボタンを押してください。

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)