Affinity Designer【グラデーションツール】の使い方

オブジェクトをグラデーションで塗り潰せる[グラデーションツール]についてまとめます。

[グラデーションツール]でできること

[グラデーションツール]を使うと、ベクターオブジェクトやテキストオブジェクトに適用された塗りつぶしと、境界線の色を調整できます。

2色以上の色を段階的に変化させるグラデーション効果。

グラデーションツールでは、ピクセルレイヤー、調整レイヤー、レイヤーマスクにグラデーションを適用することもできます。

オブジェクトにビットマップ塗りつぶしを適用して、外部ソース(パターンやテクスチャ、写真など)からビットマップ画像を追加できます。

追加したビットマップは、サイズや方向を変更できます。

グラデーションの種類

グラデーションツールで選択できるグラデーションの種類は、次の通りです。

• 線形
• 楕円形
• 放射状
• 円錐形
• ビットマップ

グラデーションツールの使い方

グラデーションの適用方法

グラデーションの変更

グラデーションを変更する方法は、

• オブジェクト上のグラデーションパスを使う方法
• [グラデーションツール]のコンテキストツールバーを使う方法

があります。それぞれに分けてご紹介します。

オブジェクト上のグラデーションパスを使って変更する方法

グラデーションパスは、グラデーションの種類によって形は変わりますが、基本的な使い方は同じです。

グラデーションの色や変化度合いは、分岐点を使って行います。

グラデーションパスを「0～100」の目盛りだと考えて、色の分配を考えてみましょう。

オブジェクトをグラデーションツールでクリックすると、グラデーションパスには2つの分岐点と、その中間地点にマーカーが表示されます。

分岐点と中間点の位置、分岐点の数や色を変えることで、グラデーションをコントロールします。

コンテキストツールバーを使って変更する方法

オプション画面で設定する間は、分岐点の選択はオプション画面内で行います。

ビットマップの適用方法

ビットマップグラデーションは、パターン、テクスチャ、背景、写真、イラストなど、様々な形式の画像から塗りつぶしを適用できます。

基本の設定

ビットマップの変更

コンテキストツールバー

基本のコンテキストツールバー

グラデーションを回転

塗りつぶしの方向が時計回りに90度ずつ変化します。

グラデーションを反転

カラー分岐点の始点と終点が入れ替わります。

それに合わせて、すべての中間ストップの位置も変更されます。

塗りつぶしの縦横比を維持

このオプションがOFFになっている場合(デフォルト)は、終点のサイズを個別に変更することができて、縦横比が変更されます。

ONにすると、終点は縦横比を維持するようにロックされます。

この設定は、グラデーションのタイプが「楕円形」と「ビットマップ」の塗りつぶしのみに影響します。

ビットマップ専用の設定

グラデーションの[コンテキスト]でビットマップを選択している時だけ表示されるオプションがあります。

拡張

[拡張]では、ビットマップ塗りつぶしのタイルの並べ方を調整します。

使用するビットマップ画像の特徴に合わせて設定を変えてみましょう。

下図は、長方形を４分割して、各マスごとに色を変えたものです。[拡張]タイプごとに、オブジェクト内でどのように並ぶかを見比べてみましょう。

デフォルトでは、元画像がオブジェクトの中央に置かれて、外に向かって展開します。下の比較図では元画像の位置が分かりやすいように、グレーの枠線で表示しています。

拡張タイプは、塗りつぶしに使うビットマップの特徴に合わせて使い分けます。

例えば、下の画像（A）のようなシームレス画像の場合は、[回り込み]にすることで継ぎ目を感じることなく、選択範囲内にタイルを並べることができます。

ですが、画像（B）を[回り込み]にした場合は継ぎ目が目立ってしまい、自然な塗りではありません。

そこで[拡張]を[ミラー]に変えてみると、次のようになります。

ところで[拡張]の[繰り返し]ですが、これの使い方には悩みました…

下の画像（C）を使って試しましたが、何が起きているのやら？

違う画像を使っても、ヘルプを読んでも、とにかくチンプンカンプン。どんな場面で使うのか、全く想像できません。

ある時、Affinityのフォーラムで参考になる動画を発見し、「ハッ！」としました。

拡張[繰り返し]の有効活用

例えば、下の画像(D)ですが、、、

画像(D)は、サイズいっぱいまで対象商品が映り込んだ、余白の無い画像です。

これを[回り込み]の塗りにすると、タイル状に並びます。

でも、実際には、下図のように余白を活かしたい、という場合があるかもしれません。

普通なら、少しだけ見えている余白の背景色に合わせて色を広げるっていうのは結構面倒だったりします。

ならば、必要な部分だけを切り抜いてしまう？

それも面倒です。

こんな時に使えるのが[繰り返し]です。

あらためて画像（C）に[繰り返し]を設定したサンプルを見直してみると、「四隅の1ピクセル」が繰り返し表示されているのがわかりますか？

中央の画像に影響なく、周囲を広げることができています。（縦横比は影響します）

そこで、画像（D）のような「余白の無い画像」でも、下図のように元の色と自然な状態で広げることができるというわけです。

あとは、グラデーションパスの中央ノードをドラッグして、お好みの位置に移動すれば、完成です。

最後に[拡張]の[ゼロ]ですが、ヘルプには、次のような補足文があります。

このオプションは、図形またはフレーム内に画像を配置する場合、つまり、繰り返しの拡張方法を決定する前に開始点を確立する場合に役立ちます。

最初は「何を言ってるの？」と、サッパリ理解できずにいましたが、[拡張]の[繰り返し]の使い方がわかると、[ゼロ]の意味合いもわかってきます。

[拡張]オプションの[繰り返し]に決定する前に、開始点を決めるのに役立つのが[ゼロ]ということのようです。

品質

オブジェクトをスケーリングするときの、塗りつぶしの品質をコントロールします。

[オブジェクトとともにスケーリング]

チェックを入れると、ビットマップ塗りつぶしは、再スケーリングされるオブジェクトに比例して拡大/縮小されます。

オフにすると、オブジェクトの再スケーリング中にビットマップ塗りつぶしが不必要に縮小または拡大されるのを回避できます。