ゼロから始めるAffinity3 Affinity中級者講座その20 鉛筆ツール

ゼロから始めるAffinity V3 中級者講座:鉛筆ツールとスタビライザーの使い方解説ブログサムネイル
ゼロから始めるAffinity3 Affinity中級者講座その19 境界線の幅ツール の続き

さて、それでは「ペンツール」とかいう難しい機能を使わずに、マウスでぐりぐりと自由に線を書いてみましょう!

1.鉛筆ツールを選択する

鉛筆ツールは、ベクターペルソナのここら辺の位置にあります。
ショートカットキーは「N」です。
Affinity Designerのツールパネルにおける鉛筆ツールの位置

2.画面上を左マウスボタンを押しながらぐりぐりなぞる

画面上をドラッグするだけで、自由自在にベクター線が書けます。便利ですね!!
鉛筆ツールを使用してキャンバス上にフリーハンドでベクター線を描画する様子
しかし、よく見ると線がガタガタしてキレイじゃありません。
手の震えがしっかり線に乗ってしまっています。
手振れによってガタガタになった鉛筆ツールの描画線のクローズアップ
そんなときは、「なめらかさ」の数値を上げたり、「スタビライザ」にチェックを入れたりしてみて下さい。
鉛筆ツール選択時のコンテキストツールバーにあるなめらかさ設定とスタビライザのオプション
「なめらかさ」は線を書いたとき、どのくらい線をなめらかにするか指定します。
コンテキストツールバーのなめらかさスライダーを調整する画面
0%だとノードの数が多く細かい線に。100%だとなめらかな線になります。
なめらかさの設定値の違いによるベクター線のノード数と形状の比較
デフォルトの50%ぐらいでいいかな。
破綻しないくらいまで数値を上げると、データが軽くなっていい感じです。

スタビライザにチェックを入れると、線を書くときの手の震えを軽減してくれます。
コンテキストツールバーでスタビライザを有効にし、ロープモードを選択した状態
ロープモードとウィンドウモードがありますが、角を折り返す時の挙動が違うだけなので、好きな方を選んでください。

どう違うかは長くなるので「鉛筆ツール/Affinity3」を参考にして下さい。
個人的オススメはロープモードかな。
スタビライザのロープモードで表示されるガイド線と、それを用いて描画される滑らかな曲線
右側のダイヤログで指定した長さのロープが表示され、それを引っ張って線を書いていきます。
最初は短めにしておくと書きやすいと思います。
髪とか、大きく手を動かして書きたいときは数値を大きめにするといいです。

動き方に癖はあるけれど、慣れるとこれが描きやすい!!
手振れがほとんどない、キレイな線を書くことができます。

ペンタブレットを持っている人は、コンテキストツールバーの右側にある歯車マークをクリックすると、筆圧感知を使うか否かを選べます。
コンテキストツールバーの鉛筆ツール設定ダイアログにおけるコントローラ(筆圧や速度)の設定画面
オススメは「ブラシのデフォルト設定」か、「筆圧」です。
マウスの人は「速度」を選ぶと、マウスカーソルを早く動かしたときに線が太くなります。
ここら辺の設定も「鉛筆ツール/Affinity3」で解説してます。

マウスカーソルを動かす速度で太さを調整するの難しいと思うので、だったら前に解説した「境界線の幅ツール」を使った方がいいと思います(=・ω・=)

鉛筆ツールで書く線はベクター線なので、「境界線の幅ツール」が使えます!
ノードツールで選択すれば、ハンドルを掴んで調整することも可能!
ノードツールを選択して鉛筆ツールで描いたベクター線のノードとハンドルを調整する画面
ペンツールが使えなくても、スタビライザーをONにした鉛筆ツールを使えば、キレイでなめらかな線が書けちゃいます。

ついでに解説しておくと、線を書いたとき。始点と終点が繋がってすき間がないカーブを「クローズパス」と言います。
逆に、間が空いているパスを「オープンパス」と呼びます。
ベクターイラストにおけるクローズパス(閉じた線)とオープンパス(開いた線)の構造の違いの視覚的解説
歯車マークをクリックすると、始点と終点が近づいたときに、自動でクローズパスにするか選ぶことができます。

こちら、設定しておくと便利なので是非「近く」に設定しておきましょう!
遠く」でもOKです。「近く」よりも離れた位置でもつないでくれます。
鉛筆ツールの詳細設定で「自動的に閉じる」オプション項目を表示した画面

うさぎを描いてみる

さて、それでは早速うさぎちゃんを描いてみましょう!!
用紙サイズなど適当でOKです。一応自分はA3横向きRGBにしてます。

そういえば解説忘れてましたが、新しいドキュメントを作るとき、右側にある「向き」で横向きのアイコンを押すと、紙を横向きに置いたドキュメントを作れます。
新規ドキュメント作成ダイアログの「ページ向き」セクションで横向きアイコンを選択する画面

1.うさぎの輪郭を鉛筆ツールで描く

線の太さや色、スタビライザの設定とかは自分が描きやすい設定にしてあげて下さい。
参考として、自分はこんな感じの設定で描いてみました。

長い耳を書き、顔部分を柔らかな丸で書いてあげます。
鉛筆ツールを使ってキャンバスに描かれたうさぎの耳と顔の輪郭線
一筆書きするの難しい! ってときは、コンテクストツールバーにある「スカルプトモードを切り替え」にチェックを入れると、線の途中から続けて描くことができます。
コンテキストツールバーの「スカルプトモードを切り替え」ボタンのクローズアップ
スカルプトモードを有効にして、すでにあるベクター線の端から続きの線を描き足す様子
線を続きから、ひとつのレイヤー内に書くことができます。
スカルプトモードで描画した線の形状を途中からなぞって書き直す操作のデモ
また、描き終わった線の途中からつなげて書き直せば、前の線を消して新しい線で書き直すことができます。
自動で閉じる機能が働き、始点と終点の結合部に赤いマーカーが表示される瞬間
一筆書きで描いたときは、「自動で閉じる」-「近く」に設定しておくと、始点と終点が近づいたときに、こんな感じに赤いマークが出て、自動でつないでくれます。
自動結合により完全に閉じられた、うさぎの顔のベクターパスの輪郭
カーブの塗りに色を付けるときは、できるだけ「クローズパス」にして下さい。
オープンパスに塗りをつけると、印刷入稿時にエラーになるので、今のうちに習慣づけておくといいです。
ストックイラスト素材として登録するときも、ほとんどのサイトでエラーとしてはじかれるので。

「スカルプモードに切り替え」を使ったらうまく繋げられなかった! って場合も、
ノードツールに切り替えて、コンテキストツールバーにある「カーブを閉じる」をクリックすれば、クローズパスにしてくれます。
ノードツール使用時のコンテキストツールバーにある「アクション:カーブを閉じる」ボタンの位置
後でこまごま探して修正するの結構面倒くさいので、最初のうちから「オープンパスには塗りをつけない」と習慣づけておきましょう。
Web用の自分が使うイラストしか描かないって方も、もしかしたら将来人にデータを渡す機会があるかもしれないので。

書いた線はベクター線なので、ノードツールでいい感じに整えてあげましょう。
後から好きなだけ微調整できるのが、ベクター線の良い所です。
ノードツールでハンドルを操作して、うさぎの輪郭線のカーブを美しく整える作業画面

2.目を図形ツールを使って描く

お目々は手で書くより図形を使った方が楽なので、楕円ツールでサクッと書きます。
楕円ツールを使って、うさぎの顔レイヤーの内部に黒い楕円の目を描画した様子
移動ツールでCtrlキーを押しながら目をドラッグし、反対側へコピーします。
その時、Shiftを押すと、真横へ平行移動できます。便利。
移動ツールとショートカットキーを使い、目を水平に複製・配置して両目にする操作

3.バッテンの口を描く

×マークも図形ツールの「直角星形ツール」を使えば作れるのですが、手書きの方が可愛いと思うので、また鉛筆ツールで×マークを書いてあげましょう。
鉛筆ツールを用いて、うさぎの顔の中央にバッテン(×)形の口を描き足す画面
移動ツールやノードツールで微調整して、いい感じのうさちゃんに仕上げてあげて下さい。
目と口の配置が完了した、うさぎのベクターイラストの線画全体像

4.輪郭に色を付ける

色も塗ってあげましょう。
自分は薄い黄色で塗りましたが、お好きな色で塗ってあげて下さい。

目や口が消えちゃった! って場合は、輪郭のレイヤーが一番下になっているか確認してあげて下さい。
レイヤーパネル上でドラッグ&ドロップ、または輪郭レイヤーを選択した状態でショートカットキー「Ctrl+Shift+[(Enterの隣にあるかっこ)」で最背面に送れます。
輪郭カーブの塗りつぶし色を設定し、レイヤーの重なり順を最背面に調整して目と口を前面に出した状態
今回はちゃんとクローズパスになるように線を書いたから大丈夫ですが、たまーに線が繋がってるように見えて繋がっていないときもあるので、色を塗る前にノードツールのコンテクストツールバーから「カーブを閉じる」を一度クリックしておくと安心です。
色塗りの前にノードツールのコンテキストツールバーで「カーブを閉じる」を実行する確認画面

5.完成

おめでとうございます!
かわいいうさちゃんが描けましたね!!
鉛筆ツールと図形ツールだけで完成させた、薄黄色の可愛いうさぎのベクターイラスト
次回はもうちょっと描き足して、いろいろな色で塗ってみたいと思います。

ゼロから始めるAffinity3 Affinity中級者講座その21 に続く

このブログの人気の投稿

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