アイキャッチ画像
HOME > ウェブデザイン > Affinity Photo > 2種類のテキスト縁取り(境界線)の使い分け-Affinity Photo
記事公開日:2021.11.9
この記事は約6分で読めます。

2種類のテキスト縁取り(境界線)の使い分け-Affinity Photo

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

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

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

※Affinity Photo使い方記事一覧

テキスト(フォント)はフォントタイプ(種類)や色やサイズはもちろん変更可能ですが、縁取ふちどり(境界線)といった装飾をかますこともできます。

この縁取り、テキストを目立たせるには手っ取り早い機能の一つでもありますよね。

ただフォントタイプや色やサイズはコンテキストバーのオプション設定で簡単に設定可能なのに対し、縁取りは別の箇所から設定する必要があって最初はどこで設定していいのかわからない方もいらっしゃるのではないでしょうか。

ということで2つの縁取りのやり方そして各設定の違いもご紹介します。

スポンサーリンク

スポンサーリンク

基本調整

サンプルとして以下のようなテキストを用意してみました。

(”焼き鳥”画像はphotoACのフリー素材をお借りしました)

今回は「3割引!」というテキスト部分に縁取りを付けてみます。

キャプチャ画像

テキストツール(ショートカットなら[T])を選択するとコンテキストバーにテキスト専用のオプション設定が表示されます。

キャプチャ画像

そこで変更可能なのはフォントタイプやフォントサイズ、フォントカラーといったごく基本的なものだけです。

(実際にはもっとありますが、今回の話には関係ないので割愛してます)

別のツールに切り替えると当然ながら別のツール用オプション設定に切り替わってしまいます。

では縁取りはどこで設定するかというと…。

スポンサーリンク

スポンサーリンク

レイヤーエフェクトでの縁取り

こちらを先に紹介するのは邪道(?)かもしれませんが無視してこのまま進みます。

テキストの縁取りには2種類のやり方があります。

その一つがレイヤーエフェクト

”手っ取り早く縁取りを付けたい”というのであればこちらの方が楽で早いです。

 

やり方ですが、テキスト(レイヤー)を選択し、レイヤーパネル最下段の”fx”という部分をクリックするとレイヤーエフェクトのダイアログ(下の画像の赤枠部分)が出現します。

その中から”アウトライン”を選択してチェックを入れ、各項目を設定したのがこちら↓のキャプチャ画像です。

(アウトライン=縁取り)

キャプチャ画像

①描画モード:ここは若干高度な設定になり今回の縁取りにはあまり関係ないので(説明は)割愛します。

(気になる方はいろいろ変えてご自身で確認してみてください)

②不透明度縁取り部分だけを透過(透かし)処置させたい時はここで調整します。

(サンプルでは縁取りではなくテキストレイヤー全体の不透明度を80%に設定中)

③半径:ここで縁取りの太さを調整します。

(スライダーを右に動かすほど縁取り線が太くなる・数字の直接入力でもOK)

④整列縁取り効果をかける範囲で、外側・中央・内側の3種類があります。

(詳細は後述)

⑤塗りつぶしスタイル縁取りの色の付け方で、単色以外に輪郭やグラデーションがあります。

(詳細は後述)

⑥カラー縁取りの色指定です。

整列

縁取りの効果範囲ですが、元々のテキストと外側・中央・内側を選択した時の違いがこちら↓です。

※外側:テキストの外側に縁取りが付きます。これが一般的かな。

キャプチャ画像
キャプチャ画像

※中央:テキストの外側と内側に半々の割合で縁取りがかかります。

キャプチャ画像
キャプチャ画像

※内側:テキストの内側に縁取りがつきます。

縁取りが太すぎると元のテキストカラーが見えなくなります。

キャプチャ画像
キャプチャ画像

塗りつぶしスタイル

塗りつぶしスタイルには単色・輪郭・グラデーションがあります。

単色

シンプルに縁取りの色がべた塗りになります。

ごく普通の縁取りです。

輪郭

輪郭を言葉で説明してもわかりにくいので実際にサンプル画像をご覧ください。

こちら↓が輪郭を選択した状態のキャプチャ画像。

縁取り部分だけにグラデーション効果が及ぶ感じですね。

(色合いの変化の度合いは調整可)

キャプチャ画像

グラデーション

グラデーションはテキスト全体を1個のグラデーションエリアと位置付けての効果のようです。

(グラデの角度や色合いの変化の度合いは調整可)

キャプチャ画像

レイヤーエフェクトの「アウトライン」ですが、テキストだけでなくシェイプや画像への縁取りにも使えます。

というか本来はそっちがメインの使い方なんでしょうね、きっと。

※シェイプに縁取りの例

キャプチャ画像

スポンサーリンク

スポンサーリンク

文字”装飾”での縁取り

もう一つのやり方が文字パネル(スタジオ)で設定するやり方。

どちらかというとこっちの方が”正統な”縁取り設定(?)とでも言えるんでしょうか。

 

テキストを選択したら文字パネルを開いて「装飾」を展開しておきます。

(メニューの【テキスト】→【文字を表示】で開きます)

肝心の縁取り設定の場所ですが、初めての方は”え、どこ?”ってとまどうかもしれませんね。

(私がそうでした)

わかりにくいですが設定箇所は下の画像の赤枠部分になります。

キャプチャ画像

赤枠部分をクリックすると下(左側)のような設定項目がびょーんと出てきます。

(文字パネルでのサンプルの実際の設定値は右側)

キャプチャ画像

①スタイル:4つのアイコンがありますが、左から「スタイルなし」「実線スタイル」「破線スタイル」「テクスチャ風スタイル」。

普段使うのは2番目の「実線スタイル」かと思います。

「破線スタイル」は点線っぽい線、「テクスチャ風スタイル」は…よくわかりません。(ブラシっぽい線?)

②幅縁取りの太さ(幅)です。(レイヤーエフェクトのアウトラインの”半径”と同じ)

(スライダーを右に動かすほど縁取り線が太くなる・数字の直接入力でもOK)

③線端:縁取りの見た目に違いが出るのは次の「結合」と「配置」なのでここは無視します。

④結合縁取りの角の処理具合です。

(詳細は後述)

⑤整列縁取りをかける範囲で、外側・中央・内側の3種類があります。(レイヤーエフェクトのアウトラインの”整列”と同じ)

(詳細は後述)

※上記以外の項目は縁取りの設定には関係ないので割愛します。

結合

キャプチャ画像

ラウンド結合は縁取りの角が丸くなります。

(レイヤーエフェクトのアウトラインはこの設定のみ)

キャプチャ画像

キャプチャ画像

ベベル結合は縁取りの角が斜めにカットした感じになります。

キャプチャ画像

キャプチャ画像

マイター結合は縁取りの角がシャープ(とんがり)になります。

キャプチャ画像

整列

整列に関してはレイヤーエフェクトのアウトラインの”整列”と全く同じです。

キャプチャ画像

縁取り(境界線)を中央に(揃えます)→レイヤーエフェクトのアウトライン(中央)

キャプチャ画像

縁取りを内側に(揃えます)→レイヤーエフェクトのアウトライン(内側)

キャプチャ画像

縁取りを外側に(揃えます)→レイヤーエフェクトのアウトライン(外側)

文字パネルを開くのが面倒という方はノードルーツを選べばコンテキストバーに出てくるオプション画面からも開けます。

赤枠内をクリックすればこれまでと同じダイアログが出るのでそこで調節してもOK。

キャプチャ画像

両者の違い

レイヤーエフェクトと文字パネルでの設定をご紹介してきましたが、両者には大きな違いがいくつかあります。

縁取りの角の処理

レイヤーエフェクトのアウトラインの場合、角の処理は文字パネルでのラウンド結合に該当する処理のみ(角が丸い)となり、角をシャープにしたり斜めカットにすることは不可です。

角の処理をシャープにしたいなら、必然的に文字パネルでの処理になってきます。

グラデーション

文字パネルでは縁取りにグラデーションはかけられません

といっても縁取りのグラデーションの需要ってどこまであるもんなんでしょうかね。

【Affinity Photo ver.1.10.4で検証済】

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

スポンサーリンク

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

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

 ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓

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

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

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

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