アイキャッチ画像
HOME > ウェブデザイン > Affinity Photo > 細かすぎるスナップ設定は自分好みにカスタマイズすべし-Affinity Photo
記事公開日:2021.7.12
この記事は約6分で読めます。

細かすぎるスナップ設定は自分好みにカスタマイズすべし-Affinity Photo

ここではAffinity Photoの数ある機能の中から主にブログサイトや商品・サービス紹介サイトでの利用を前提としたweb用画像の作成・加工についての使い方をご紹介します。

(記事中の画像もAffinity Photoで作成してます)

基本的な使い方はこの下にある「使い方記事一覧」をご覧ください。
それ以外の知ってればより効率アップのTips系記事はこちらにまとめてあります。

※Affinity Photo使い方記事一覧

スナップというのは文字通り何かにぴったりくっつける機能のことで、画像と画像をぴたっとくっつけたりシェイプ(図形)をキャンバスの下端にぴったりくっつけたりと使い方によってはとっても便利な機能の一つです。

ただAffinity Photoのスナップ機能はかなり細かい設定が可能な反面、ちょっと見ただけでは「ん?これどういうこと?」というものもけっこう多いんです。

そこでどういった場合にどのスナップ機能をONにすべきか、実践形式でご紹介してみます。

スナップはマウスでドラッグする際に吸着する機能ですが、設定をON(チェックを入れる)にしてても[Alt]キー画像キーを押しながらのドラッグ時一時的にスナップ機能をOFF状態にできます。

これを覚えておくと”この機能はONにしたいけど常時ONはきついな~”なんて時に大いに役立ちます。

スポンサーリンク

スポンサーリンク

スナップ機能の概要(前半部分)

スナップのツールバー右端の三角をクリックすると設定項目が表示されます。

(メニューの【表示】→【スナップマネージャー】クリックでも開きます)

キャプチャ画像

スナップを有効にする

スナップを効かせたい時にチェックを入れ(ON)ます。

でも単にONにするだけならスナップの磁石アイコンをクリックした方が早いかも。

(ショートカットキーの方がもっと早い?)

スクリーン許容範囲

ちょっとわかりにくい言葉ですが、どの程度オブジェクト(キャンバス上の画像やシェイプやテキストなど)を別のオブジェクトに近づけたらピタッとくっつくかの反応の度合いみたいなものです。

キャプチャ画像

プリセット

用途に応じて必要部分にチェックが入った設定が予めいくつか用意されてます。

キャプチャ画像

ちょっと早いですが、オリジナルのプリセットも登録できます。

スナップ機能のカスタマイズを終えたら上画像の”プリセット登録用アイコン”をクリックして「プリセットを作成」を選択するとダイアログが出ます。

適当な名前でプリセット登録しておきます。

キャプチャ画像

次からはプリセット欄にオリジナルプリセットが出てくるのでそれを選択するだけ。

キャプチャ画像

スナップ機能はとても親切なんですがおせっかいな部分も同時に持ち合わせているので、自分好みのオリジナルスナップ設定を作っておくと作業効率が一気に高まります。

候補

スナップさせたいレイヤーはどれにするかの候補選択なんですが、ここは「すべてのレイヤー」で問題ないでしょう。

”特定のレイヤーだけどうしてもスナップさせたくない”ってときは、該当レイヤー上で右クリック→【スナップから除外】を選択するとスナップON状態でもスナップされなくなります。

キャプチャ画像

解除は磁石アイコンをクリックするだけ。

キャプチャ画像

表示オブジェクトのみにスナップ

非表示にしてるレイヤーにまでスナップさせることはあまりないでしょうから、通常はチェックを入れたまま(表示レイヤーのみスナップ)でよいかと。

ピクセルへの整列を強制

これにチェックを入れると(上部アイコンクリックでもOK)オブジェクトをドラッグした時1ピクセル単位で動くようになります。

具体的にはx座標とy座標の値整数での移動になります。

管理人

この機能はスナップのON・OFFとは独立していてスナップがOFFでもONにすることができるちょっとややこしい設定になってます。

Affinity Photoではドラッグする際、デフォルトの設定だと小数での座標移動になるようなんですね。

(毎回そうとは限らず、整数ぴったりで止まることもマレにあります)

キャプチャ画像

この小数単位での移動は実は重大な問題をはらんでいたりします。

画像がボケるんです。

そのため(写真)画像を扱うことが多いならここはチェックを入れておく(※整数での座標移動)ことをおススメします。

管理人

ただしマウスではなく矢印キーでの移動だと小数は解消されないのでご注意を。

ピクセル単位で移動

※先ほどの「ピクセルへの整列を強制」がONになってると有効になります。

ここをONにすると元の位置を基準に1ピクセルずつ動くようになります。

ん?「ピクセルへの整列を強制」も”1ピクセル単位で動く”機能でした。

ややこしいですね。

「ピクセルへの整列を強制」は元の画像の位置が小数点を含む場合、ドラッグしたら整数での座標位置に変えてくれます。

これに対し「ピクセル単位で移動」は、小数点を含む位置にある画像はその位置を起点に1ピクセルずつの移動になるので移動後も小数点付きでの座標位置になるということです。

ゆえに画像がボケるのを防ぎたいなら「ピクセルへの整列を強制」はONにして「ピクセル単位で移動」はOFFにしておくといいでしょう。

グリッドにスナップ

グリッドを表示した時にグリッドにスナップさせたいならONです。

グリッドはメニューの【表示】→【グリッドおよび軸マネージャー】で表示ONにできます。(グリッドの幅や線色の変更も可能)

(ショートカットキーでもいけます)

ただしグリッドは目に見える線だけにスナップするわけではなく、拡大すると表示されるサブグリッドにも吸いつきます。

よってこの機能をONにしておくと常にカクカクした動きのドラッグになります。

キャプチャ画像

ベースライングリッドにスナップ

ベースラインと言えばフォントですね。

ということでここにチェックを入れるとフォントの下端が接する直線(基準線)にぴったりくっつく(揃う)ようになります。

ただしこれが効果を発揮するのはアルファベットだけで日本語の場合はあまり意味がありません。

実際にやってみた結果がこちら↓。

日本語は微妙にずれます。

キャプチャ画像

スポンサーリンク

スポンサーリンク

スナップ機能の概要(後半部分)

キャプチャ画像

ガイドにスナップ

ガイドを表示した時にガイドの線にスナップさせたいならONです。

キャプチャ画像

もっと詳しく!

ガイドの賢い使い方…詳細はコチラ

スプレッドにスナップ

”スプレッド”って何?

ハイ、これは平たく言うとキャンバスの端っこへのスナップです。

余白を作りたくない時には便利です。

キャプチャ画像

[スプレッドの中間点を含める]

キャンバスの中心点にもスナップさせたいならONです。

(レイアウトを測ったようにきっちり取りたい時なんかに使うんでしょうか)

マージンにスナップ

キャンバス作成時にマージンを取った場合に有効で、キャンバスの端っこではなくマージンラインにスナップさせたいならONです。

(Affinity Photoの機能というよりはDesignerで使う機能をPhotoでも搭載しちゃえ、みたいな機能でしょうか。それとも印刷を意識した設定?)

キャプチャ画像

[マージンの中間点を含める]

マージンの中心点にもスナップさせたいならONです。

マージンはメニューの【ドキュメント】→【マージン】から設定可。

オブジェクトの境界ボックスにスナップ

ここをONにするとオブジェクトを動かすたびに他のオブジェクトの境界線にぴょこぴょこくっつきます。

ウザい方はチェックをOFFにしておきましょう。

[ギャップとサイズにスナップ]

こちらはとても便利な機能で、ONにすると各オブジェクト間を一定の距離で自動配置してくれます。

たとえば2つのレイヤー同士の間隔を20px取って配置したとします。

キャプチャ画像

そこにもう1枚レイヤーを同じ余白で追加したい場合、近づけるだけで自動で20pxあけてピタッと配置してくれます。

キャプチャ画像

ただしこれを有効化するには親の「オブジェクトの境界ボックスにスナップ」もONにする必要があります。

(そうするとオブジェクト同士がすぐくっついちゃうし…どっちを優先するか)

シェイプのキーポイントにスナップ

スナップ機能で最後までよくわからなかったのがこの機能。

(今でも合ってるかどうか不安)

この機能をONにした場合、一方のシェイプの四隅のポイントをドラッグ移動してもう一方のシェイプの”中心”に近づけるとスナップします。

キャプチャ画像

シェイプ(図形)を多用する方には便利な機能なんでしょうか。

シェイプを使っての作業をほとんどすることのない私にとっては未知の領域です。

オブジェクトジオメトリにスナップ

この機能をONにした場合、一方のシェイプの四隅のポイントをドラッグ移動してもう一方のシェイプの”輪郭”に近づけるとスナップします。

これもどういう時に使うんでしょう。

キャプチャ画像

ピクセル選択範囲境界にスナップ

選択範囲にスナップだそうで、ここまでくるとどういった場面で使うのか全く見当もつきません。

キャプチャ画像

【Affinity Photo ver.1.9.2で検証済】

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

スポンサーリンク

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

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

 ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓

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

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

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

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