オブジェクトをグラデーションで塗り潰せる[グラデーションツール]についてまとめます。
グラデーションツールでできること
[グラデーションツール]を使うと、ベクターオブジェクトやテキストオブジェクトに適用された塗りつぶしと、境界線の色を調整できます。
2色以上の色を段階的に変化させるグラデーション効果。
グラデーションツールでは、ピクセルレイヤー、調整レイヤー、レイヤーマスクにグラデーションを適用することもできます。
オブジェクトにビットマップ塗りつぶしを適用して、外部ソース(パターンやテクスチャ、写真など)からビットマップ画像を追加できます。
追加したビットマップは、サイズや方向を変更できます。
グラデーションの種類
グラデーションツールで選択できるグラデーションの種類は、次の通りです。
- 線形
- 楕円形
- 放射状
- 円錐形
- ビットマップ
グラデーションツールの使い方
グラデーションの適用方法
[移動ツール]を使って、オブジェクトを選択します。
[グラデーションツール]を選択します。- コンテキストツールバーの[コンテキスト]で、[境界線]または[塗りつぶし]を選択します。
- コンテキストツールバーの[タイプ]で、塗りつぶしタイプを選択します。
- ソリッド（単色） / 線形 / 楕円形 / 放射状 / 円錐状
- 手順❸～❹で選択した内容にあわせて、オブジェクトの境界線、または、塗りの上でカーソルをドラッグします。
グラデーションの変更
グラデーションを変更する方法は、
- オブジェクト上のグラデーションパスを使う方法
- [グラデーションツール]のコンテキストツールバーを使う方法
があります。それぞれに分けてご紹介します。
オブジェクト上のグラデーションパスを使って変更する方法
- [グラデーションツール]を選択します。
- グラデーション塗りつぶしが適用されているオブジェクトをクリックして選択します。
- グラデーションパスを使って、グラデーションを変更します。
グラデーションパスは、グラデーションの種類によって形は変わりますが、基本的な使い方は同じです。
パスの上にある「〇」が、色の分岐点です。
クリックして選択すると、他より大きくなります。
2つの分岐点の間にあるマーカーで
グラデーションの配分を調整します。
- 分岐点の追加
グラデーションパスをクリックすると、色の分岐点を追加できます。
- 分岐点の位置変更
選択した分岐点を、ドラッグで移動できます。
- 長さ＆角度の変更
終点の分岐点をドラッグして、グラデーションの長さを伸縮できます。
また、角度もドラッグで変更できます。- 色の変化を調整
中間点マーカーをドラッグして、分岐点間の色の広がりを調整できます。
- 色の変更
選択した分岐点の色を、[カラー]パネルで変更できます。
- 分岐点の削除
選択した分岐点は、Backspaceで削除できます。（Delでも可）
パスの上でクリックした位置に、分岐点を追加できます。
中間点マーカーを左右にドラッグして、色の変化度合いを調整できます。
コンテキストツールバーを使って変更する方法
- [グラデーションツール]を選択します。
- グラデーション塗りつぶしが適用されているオブジェクトをクリックして選択します。
- カラー分岐点が選択されている場合は、全て選択解除しておきます。
- コンテキストツールバーから、色見本をクリックします。
- [グラデーション]タブ内のオプションを編集して、グラデーションを変更します。
オプション画面で設定する間は、分岐点の選択はオプション画面内で行います。
- タイプ
グラデーションのタイプを変更できます。
（線形、楕円形、放射状、円錐形、ビットマップ）- 位置
「値」で分岐点の位置を調整できます。
左（0%）から右（100%）まで調整します。50%が中心点を表します。- 中間点
選択した分岐点と、その右隣の分岐点間の色の広がりを「値」で調整します。
- 不透明度
選択した分岐点の透明度を調整します。
100%は完全に不透明、0%は完全に透明です。- 挿入
選択した分岐点と、その右隣の分岐点の間に、新しい分岐点を追加します。
分岐点は、新しい位置の色を採用します。- コピー
選択した分岐点を複製し、選択した分岐点とその右隣の分岐点の間に配置します。
- 削除
選択した分岐点を削除します。
- 反転
グラデーションを反転します。
ビットマップの適用方法
ビットマップグラデーションは、パターン、背景、写真、イラストなど、様々な形式の画像からパターン塗りつぶしを適用できます。
基本の設定
- [移動ツール]を使って、オブジェクトを選択します。
- [グラデーションツール]を選択します。
- コンテキストツールバーの[コンテキスト]で、[境界線]または[塗りつぶし]を選択します。
- コンテキストツールバーの[タイプ]で、[ビットマップ]を選択します。
- [開く]ダイアログで、ファイルの保存場所からビットマップ画像を選択して開きます。
- グラデーションパスのノードをドラッグして、パターンのサイズや向きを変更します。
オブジェクトを選択し、[グラデーションツール]を有効にしていると、以下の方法でもビットマップを適用することができます。
- Windowsのエクスプローラ画面から、選択したファイルをドラッグして、次のいずれかでドロップします。
- [カラー]パネル、[スウォッチ]パネル、前景/背景カラーセレクター
- [アセット]パネルで、テクスチャ、シェイプなどのアセットをクリックします。
- [ストック]パネルで、検索結果から写真の1つをクリックします。
ビットマップの変更
- [グラデーションツール]を選択します。
- 変更したいオブジェクトを選択します。
- ビットマップ上に表示されたノード、またはコンテキストツールバーで変更します。
- ノードをドラッグして、ビットマップのサイズと角度を変更できます。
- コンテキストツールバーでの設定は、次の項目でご紹介します。
コンテキストツールバー
基本のコンテキストツールバー
グラデーションを回転
塗りつぶしの方向が時計回りに90度ずつ変化します。
グラデーションを反転
カラー分岐点の始点と終点が入れ替わります。
それに合わせて、すべての中間ストップの位置も変更されます。
塗りつぶしの縦横比を維持
この設定は、楕円形とビットマップの塗りつぶしにのみ影響します。
このオプションがOFFになっている場合(デフォルト)は、終点のサイズを個別に変更することができ、縦横比が変更されます。
ONにすると、終点は縦横比を維持するようにロックされます。
ビットマップ専用の設定
グラデーションの[コンテキスト]でビットマップを選択している時だけ表示されるオプションがあります。
- 拡張
- 品質
- オブジェクトとともにスケーリング
拡張
[拡張]では、ビットマップ塗りつぶしのタイルの並べ方を調整します。
使用するビットマップ画像の特徴に合わせて設定を変えてみましょう。
- 回り込み
- ミラー
- 繰り返し
- ゼロ
- 回り込み
中央に設定されたノードから外側に向かってビットマップを繰り返します。
塗りつぶしている形状よりも小さい場合は、タイル状に並べて塗りつぶします。
塗りつぶし用に作成されたシームレス画像に最適です。
- ミラー
ビットマップはミラー配置されます。
シームレス化されてない画像を使う時に使うと便利です。
- 繰り返し
対称的でシームレスなパターンを実現するために使用され、無限に積み重ねることができます。
- ゼロ
ビットマップを繰り返さずに、中央に配置します。
下図は、長方形を４分割して、各マスごとに色を変えたものです。このビットマップが[拡張]タイプの違いによって、オブジェクト内でどのように並ぶかを見比べてみましょう。
例えば、下の画像（A）のようなシームレス画像の場合は、[回り込み]でも継ぎ目を感じることなく、自然な状態で選択範囲内にタイルを並べることができます。
「シームレス画像」は、画像を並べた時に
継ぎ目がないように作られた画像のことです
ですが、画像（B）は継ぎ目が目立ってしまい、自然な塗りではありません。
そこで[拡張]を[ミラー]に変えてみると、次のようになります。
ところで[拡張]の[繰り返し]ですが、これの使い方には悩みました…
ヘルプを読んでもチンプンカンプン。どんな場面で使うのか、全く想像できません。
ナニコレ…
ある時、Affinityのフォーラムで参考になる動画を発見し、「ハッ！」としました。
拡張[繰り返し]の有効活用
例えば、下の画像(D)ですが、、、
画像(D)は、サイズいっぱいまで対象商品が映り込んだ、余白の無い画像です。
これを[回り込み]の塗りにすると、タイル状に並びます。
でも、実際には、下図のように余白を活かしたい、という場合があるかもしれません。
普通なら、少しだけ見えている余白の背景色に合わせて、自然な形で外回りを広げるっていうのは結構面倒だったりします。
こんな時に使えるのが[繰り返し]だったんです。
読み込んだ画像の四隅だけを繰り返してるみたいで、中央の画像に影響なく、周囲を広げることができています。
あとは、グラデーションパスの中央ノードをドラッグして、お好みの位置に移動すれば、完成です。
余白の無い画像から
余白を作り出してくれるってわけね！
最後に[拡張]の[ゼロ]ですが、ヘルプには、次のような補足文があります。
このオプションは、図形またはフレーム内に画像を配置する場合、つまり、繰り返しの拡張方法を決定する前に開始点を確立する場合に役立ちます。
最初は「何を言ってるの？」と、サッパリ理解できずにいましたが、[拡張]の[繰り返し]の使い方がわかると、[ゼロ]の意味合いもわかってきます。
[拡張]オプションの[繰り返し]に決定する前に、開始点を決めるのに役立つのが[ゼロ]ということのようです。
品質
オブジェクトをスケーリングするときの、塗りつぶしの品質をコントロールします。
- ニアレストネイバー
画像の拡大縮小を行う際に最も速い方法です。画質は多少低下しますが、処理速度は向上します。この方法ではピクセル補間を行わないため、より鮮明（シャープ）でギザギザの画像になります。
- バイリニア
[ニアレストネイバー] に似ていますが、空のピクセルを埋めるのに高度な補間技術を使用します。
ここでは、最も近いピクセルをコピーするのではなく、隣接するピクセルを使用するため、よりスムーズなスケーリングになります。
- Lanczos3
サンプル値をシームレスに補間するために、あるいはローパスフィルターとして使用することで、ピクセルの遷移がさらにスムーズになります。また、バイキュービック法による補間とほぼ同様です。
[オブジェクトとともにスケーリング]
チェックを入れると、ビットマップ塗りつぶしは、再スケーリングされるオブジェクトに比例して拡大/縮小されます。
オフにすると、オブジェクトの再スケーリング中にビットマップ塗りつぶしが不必要に縮小または拡大されるのを回避できます。
