アイキャッチ画像
HOME > ウェブデザイン > Affinity Photo > 棒線の作り方(少数点の扱いが面倒)-Affinity Photo
記事公開日:2021.7.26
この記事は約3分で読めます。

棒線の作り方(少数点の扱いが面倒)-Affinity Photo

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

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

このページは知ってればより効率アップTips系記事になります。

Affinity Photoの基本的な使い方こちらにまとめてあります。

横線・縦線といった棒線はよく使うかと思います。

その作り方は一つではなくいろんなやり方があります。

しかしながら使うツールによっては挙動がちょっとおかしくなる場面もあるので、今回はその対処方法も含めて棒線の作り方をご紹介します。

スポンサーリンク

スポンサーリンク

シェイプ(長方形)を使った棒線

最初は長方形のシェイプを使ったやり方で、1pxの横棒線を作ってみます。

キャプチャ画像

まずは普通に長方形を作ります。

(色や線種や大きさなどは適当でOK)

キャプチャ画像

「塗りつぶし」で色を指定(今回は黒)、「境界線(のスタイル)」は”なし”に、高さ(H)は1pxにします。

これで1pxの横棒線ができます。

キャプチャ画像

同じように高さ(太さ)を2px、3pxにしてみたものも作ってみます。

念のため500%に拡大してチェックもしてみましたが問題ないですね。

キャプチャ画像

ところがです。

これにはちょっとした見落としがあったんです。

実は先ほどのシェイプ(長方形)を使った棒線の作成時は、スナップ機能の「ピクセルへの整列を強制」がONの状態だったんです。

だからこのあと起きるトラブルも最初はわからなかったんです。

キャプチャ画像

「ピクセルへの整列を強制」がONだと画像の配置や移動時はx座標やy座標が整数での配置になります。

管理人

平たくいうと”画像がボケなくなる”ってことです。

※「ピクセルへの整列を強制」についてはコチラ↓が詳しいです。

もっと詳しく!

スナップ設定は自分好みにカスタマイズ…詳細はコチラ

問題は「ピクセルへの整列を強制」をOFFにしていた場合です。

その場合、下の画像のように座標が画像の配置や移動時に少数表示になってしまい、画像がボケてしまいます。

(毎回そうとは限りませんがほぼそうなります)

キャプチャ画像

実際に2つの棒線を比較してみます。

キャプチャ画像

ちょっとわかりにくかったですかね。

それでは拡大したものをご覧ください。

キャプチャ画像

今度は違いがわかったでしょうか。

OFF状態時は棒線ににじみが出るというかアンチエイリアスがかかった状態になるというか…。

もしもこういった違いが気になるのであればシェイプ(長方形)を使った棒線の作成時は「ピクセルへの整列を強制」をONにしておくか、OFFの場合は「変形」スタジオを見て少数表示になってたら小数点以下をカットして整数にするなどのひと手間が必要になってきます。

管理人

もちろん「多少ボケてても構わないよ」って方は何も気にする必要はないです。

スポンサーリンク

スポンサーリンク

ペンツールを使った棒線

続いてはペンツールを使って棒線を作ってみます。

キャプチャ画像

「ピクセルへの整列を強制」がONでの作成事例です。

ペンツールを選択後、適当なところでクリック、続いて[Shift]キー画像キーを押しながら適当な場所でもう一度クリックします。

([shift]キーを押しながらだと水平線が引けます)

これでとりあえずの横棒線ができました。

キャプチャ画像

ここで「塗りつぶし」は”なし”、「境界線」は”黒”、「スタイル」は”実線スタイル”、幅(太さ)は”1px”、「先端」は”バット先端”にしてちゃんとした棒線に仕上げます。

キャプチャ画像

そのまま棒線をコピー&ペーストして境界線の幅を2pxに変更したもの、3pxに変更したもの都合3つの棒線を作ってみます。

結果、こちらのようになりました。

キャプチャ画像

ん?なんか線の太さや濃さに違いがあるようなないような。

確認のために500%に拡大してみます。

すると…1pxと2pxの線幅が同じだったり1pxと3pxのみアンチエイリアスがかかったようなにじんだ状態になってます。

キャプチャ画像

これ、最初は原因が全くわかりませんでした。

ところがいろいろやっていくうちに、どうもY座標の数値を小数点以下で変更していくと挙動が変わるようなんです。

結果としてはy座標の小数点以下を「.5」にすることでクリアな線になります。

ただそれが必要なのは奇数幅(1px or 3px)の時だけで偶数幅(2px)の時は何の変化もなし。

キャプチャ画像

「ピクセルへの整列を強制」をONにしたら今度は少数にしないとクリアにならないって…。

それにせっかく「.5」に直したところで「ピクセルへの整列を強制」がONの状態だと、移動時は移動先のy座標が強制的に整数になってしまうため再びにじみ線になってしまいます。

ということで画像がボケるのがイヤな方はシェイプ(長方形)での棒線作成をおススメします。

なお毎回毎回イチから棒線を作るのが面倒な方はとりあえずシェイプ(長方形)で適当な棒線を1個作ってカスタマイズ後にアセットに登録しておくと、その後は一発でカスタマイズ済みの棒線を呼び出すことができます。

もっと詳しく!

アセットの使い方…詳細はコチラ

【Affinity Photo ver.1.9.2で検証済】

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

スポンサーリンク

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

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

 ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓

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

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

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

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