ノードツール02/Affinity3


Affinity Designer 3のノードツールとコンテクストツールバーの解説ブログアイキャッチ画像
ノードツール01/Affinity3 の続き

コンテクストツールバーの内容を解説していきます。
ノードツール選択時のコンテクストツールバーのカラー設定と境界線パネル
塗りなどの色や境界線パネルなどは他のツールと同じなので、赤枠部分から解説していきます。

ノードを変換

選択したノードを、以下のモードに変換します。
コンテクストツールバーの「ノードを変換」セクション(シャープ、スムーズ、スマート)
それぞれ、効果は以下のような感じです。

シャープはカクッと急に折れ曲がる線。左右のハンドルが違う線。
スムーズはなだらかに変化する線。
スマートは周りに合わせていい感じに調整してくれるカーブ線です。

詳しくは「ペンツールとカーブについて01/Affinity3」にて。
ノード変換機能によるシャープ・スムーズ・スマートの描画特性の比較

カーブを分割

選択したノードと、終点側にあるノードの中間に、ノードを追加します。
コンテクストツールバーの「カーブを分割」アイコンボタン
カーブを分割した際の中間位置へのノード追加の様子
始点終点の見分け方は、ノードの近くに赤い線がある方が終点です。
ノード自体も赤くなってます。
赤いインジケーターで示されたカーブの終点ノードの拡大
ノードを増やしたいときによく使います。
カーブを分割機能を使用して複数ノードを均等に追加した例

カーブを切断

選択したノードで切断します。
コンテクストツールバーの「カーブを切断」アイコンボタン
一つのノードを選択してカーブを切断しオープンパスにした状態

カーブを閉じる

オープンパスの端と端をつないで、クローズドパス(シェイプ)にします。
コンテクストツールバーの「カーブを閉じる」アイコンボタン
開いたカーブの両端が直線で結ばれてクローズドパスに変換された例
いちいち先端のノードを選択しなくても、アクティブになってれば使えるので、
図形に色を付けるときなど、オープンパスの塗りを防ぐために、とりあえずクリックしておくのをオススメします。

図形に塗りを指定するときは「カーブを閉じる」をクリックする、を習慣づけておくと安心です。
単純な図形ならブール演算の「追加」でもカーブが閉じられるのでオススメ。

先端がこんな感じでつながってない!って図形も、「カーブを閉じる」を押しておけば自動でつながってくれるので安心です。
先端が離れているオープンパスのイラストサンプル
イラスト作成時に、どうしても主線をオープンパスにしたい! って時は、とりあえずオープンパスで作っておいて、描き終わったら、オープンパスになっているレイヤーを複製。
レイヤーパネル内のオープンパスを含むピクセルレイヤーおよびカーブレイヤーの複製操作
複製したカーブレイヤーの一方を境界線のみ、もう一方を塗りのみに設定変更する手順
上のレイヤーの塗りを無くして境界線のみのレイヤーにし、
下のレイヤーは線を無くして塗りのみのレイヤーにして、クローズパスにして下さい。
オープンパスとクローズドパスを組み合わせたイラストレイヤーの完成状態
オープンパスがあるかないかを調べたいときは、メニューの「レイヤー」-「選択」-「レイヤー」-「開いたカーブ」で探すことができます。
アプリケーションメニューから「開いたカーブ」を選択する操作画面
Webでしか使わないイラストだったら、この作業はやらないでいいです。
印刷する可能性があるなら、この作業をしておかないと塗りが変になったりします。
(この例題みたいに距離が近い場合は大体大丈夫だけど、距離が離れていたりすると塗りが消えたり逆側を繋いだ塗りになったり、間にある別の図形が消えたりします。そもそも印刷確認の段階でエラーが出て、確認が必要になったり再入稿を求められたりいいことないです(´・ω・`))

Web用のストックイラストでも、オープンパスがあると登録できないところが多いので、日ごろから作るときには気をつけてみて下さい。

ちなみに、メニューの「ベクター」-「境界線を展開」を使って、線と塗りを分けられますが……
メニューバーから「レイヤー」内にある「境界線を展開」を実行する画面
境界線を展開した結果、線が塗りつぶされたシェイプに変換された様子
線部分が、境界線ではなく塗りつぶしで作られてしまうので、それでもかまわない、という時はこっちの機能も使ってみて下さい。
塗り部分はオープンパスのままなので、閉じるのを忘れずに。
境界線展開後のパス構造とレイヤーの処理状態一覧

カーブを滑らかにする

コンテクストツールバーの「カーブを滑らかにする」アイコンボタン
例えば、以下のようなへたくそな丸があったとします。
多数の不揃いなノードで構成されたガタガタした円のベクターパス
「カーブを滑らかにする」を押すことで、ノードを追加したり削除したりして、なめらかな線になるよう調整してくれます。
カーブを滑らかにする機能を1回適用した後の少し補正されたパス状態
1回だとあんまり効果ないので、何回も連打するといい感じになります。
ボタンを複数回クリックしてノード数が大幅に削減され滑らかになった円
ガタガタの線をある程度滑らかにして、ノード数を減らせます。
1、2回だと図形によっては逆に増えることも有。
カーブを滑らかにする機能適用前後でのパス形状の比較
最後の方は自分で微調整しちゃった方が早い気がします(=・ω・=)

カーブを結合

選択した2つのノードを繋ぎます。
コンテクストツールバーの「カーブを結合」アイコンボタン
独立した2本のカーブの近接するノード同士が繋がって結合された状態
個別のノードを選択しないときは、近くにあるノードが繋がります。
「カーブを閉じる」とは違い、独立した複数の線を繋ぎたいときに使う機能です。

カーブを反転

カーブの向きを反転します。
コンテクストツールバーの「カーブを反転」アイコンボタン
始点終点の見分け方は、さっき解説した通り、ノードの近くに赤い線がある方が終点です。
カーブを反転機能により始点と終点の位置が入れ替わったノードの表示
「カーブを分割」以外にも、矢印の向きを変えたい時とかに使えます。
普通に境界線パネルに「線の向きを反転する」メニューあるけど。

ノードツール03/Affinity3 に続く

このブログの人気の投稿

イラレにないPANTONEカラーを使う方法/Pantone Connectの使い方