affinity designer WEBデザイン

Affinity Designerのベジェ曲線『ペンツール』『ノードツール』の使い方

Affinity Designerのペンツールの使い方を日本語で詳しく教えて欲しい!

本記事ではこのような悩みを解決します。

本記事はこんな方におすすめ

  • Affinity Designer初心者向け
  • Affinity Designerのペンツールの使い方を知りたい人向け
  • Affinity Designerでどんな事が出来るのか知りたい人向け

 

この記事を書いたのはこんな人

元企業のネットショップ総合責任者。

EC事業で独立し、現在は月商2000万のネットショップオーナー。

日本一のLINEマーケティンググループへ所属し、Lステップ運用を学んだLINE公式マーケティングのプロ。

 

⇩顧客行動を分析して売上を倍増させる方法⇩

岡山県 Lステップ 構築代行
Lステップで顧客育成!公式LINEを自動化させて売上を爆上げする方法

客離れが起こってるのか最近売上がよくないんだ、、、。どうにかして売上を上げたいんだけど何か方法が無いかな? 結論!Lステップを公式LINEに導入してファン化させましょう! なぜLステップを導入すると売 ...

続きを見る

 

ベジェ曲線とは?

ベジェ曲線って言うのは、『計算して表示された線』の事です。

『計算して表示された線』だけだと分かりにくいと思うので、実物を見てもらいましょう。

 

Affinity Designer ペンツールの使い方 ベジェ曲線

上の画像で書いた線がベジェ曲線です。

ベジェ曲線で書かれた線は計算式によって表示されてるので、アップにしてもキレイな状態で表示されます。

 

Affinity Designer ペンツールの使い方 ベジェ曲線

上の画像が実際にベジェ曲線で書いた線をアップにした物です。

アップにしても黒一色でキレイに表示されてますね。

 

Affinity Designer ペンツールの使い方 ベジェ曲線

上の画像はドットで作られた線です。

ベジェ曲線とどう違うのか分かりにくいと思うので、アップにしますね。

 

Affinity Designer ペンツールの使い方 ベジェ曲線

線の上下が少し薄くなってるのが分かるでしょうか。

ドットで作られた線は作られた状態を維持してしまうのでアップにすると端がギザギザになったり薄くぼやけた表示になります。

 

どういう時にベジェ曲線とドット線を使うのかと言うと、

  • ベジェ曲線・・・ロゴやプリントなどデザインの大きさを後から変更する必要がある物。
  • ドット線・・・写真など色々な色が複数存在していて、なじませる必要がある物。

だいたい上のような解釈でOK。

 

Affinity Designerはイラストツールなので、ロゴやプリントに使うデザインを使う時に多用されます。

そのため、Affinity Designerではベジェ曲線がデフォルトとなっています。

 

ちなみに、Affinity Photoは写真加工を得意としてるのでドット線しか使えない仕様になっています。

 

Affinity Designerのペンツールの使い方

Affinity Designerのペンツールの使い方を紹介しますね。

 

ペンモードについて

Affinity Designer ペンツールの使い方 ベジェ曲線

サイドバーにある『ペンツール』をクリックすると、上のバーのモードアイコンがデフォルトで『ペンモード』なっています。

ペンモード』の時には、直線や曲線を自由に設定しながら線を引く事が出来ます。

特に理由がなければ『ペンモード』から変更する事は無いでしょう。

 

スマートモード

Affinity Designer ペンツールの使い方 ベジェ曲線

スマートモード』のアイコンをクリックする事で『曲線』だけのモードに変更できます。

直線がいらない曲線だけを書きたい時に使います。

 

ポリゴンモード

Affinity Designer ペンツールの使い方 ベジェ曲線vvvvvvvvvvvvvvvvv

ポリゴンモード』のアイコンをクリックする事で『直線』だけのモードに変更できます。

曲線がいらない直線だけの時に使います。

 

線モード

Affinity Designer ペンツールの使い方 ベジェ曲線

線モード』のアイコンをクリックする事で2点を繋げた線を書く事が出来ます。

単発の線はデザインでもロゴやアイコン作りでも使う事があるので、覚えていて損は無い機能ですね。

 

Affinity Designerのノードツールの使い方

Affinity Designer ペンツールの使い方 ベジェ曲線

ノードツールはサイドバーにある白い矢印アイコンで、ペンツールで書いた点を移動させる事が出来ます。

 

Affinity Designer ペンツールの使い方 ベジェ曲線

ペンツールで書いた線や図形を編集したり、調整したりするのに便利な機能ですね。

文字なども『カーブに変更』する事で形を変えたりする事も出来ますよ。

 

ノードの変換機能

ノードでは指定した点を『シャープ』『スムーズ』『スマート』の3種類に変更する事が出来ます。

 

Affinity Designer ペンツールの使い方 ベジェ曲線

シャープの場合にはポリゴンのようなカクカクした形状に変更。

シャープモードがデフォルトモードです。

 

Affinity Designer ペンツールの使い方 ベジェ曲線

スムーズモードでは始点と終点以外が曲線に変更されます。

 

Affinity Designer ペンツールの使い方 ベジェ曲線

スマートモードでは始点と終点含めて全て曲線に変更されます。

 

ノードのアクション機能

ノードのアクション機能には『カーブの切断』『カーブを閉じる』『カーブを滑らかにする』『カーブの結合』『カーブの反転』の5つがあります。

 

Affinity Designer ペンツールの使い方 ベジェ曲線

指定した点に『カーブの切断』を使うと点を切り離す事が出来ます。

ペンツールで作った線を切り離して大きく形を変える時に使います。

 

Affinity Designer ペンツールの使い方 ベジェ曲線

『カーブを結合』では、『カーブの切断』などで切り離された点同士をくっつける事が出来ます。

くっつけたい点同士を2点指定するだけで簡単につなげる事が出来ます。

 

Affinity Designer ペンツールの使い方 ベジェ曲線

『カーブを閉じる』では、始点と終点をくっつける事が出来ます。

線を面にしたい時に便利ですね。

 

Affinity Designer ペンツールの使い方 ベジェ曲線

『カーブを滑らかにする』では、指定した点を丸みのある曲線に変更できます。

滑らかな曲線を作る時に便利ですね。

 

最後に『カーブの反転』は指定したカーブの位置を反転させる事が出来ます。

ミラーとか左右対称とか作る時に使えますね。

 

Affinity Designerのペンツールを使って矢印を作る方法

図解や解説などによく使う『矢印』もAffinity Designerのペンツールを使うと簡単に作る事が出来ます。

 

Affinity Designer ペンツールの使い方 ベジェ曲線

まずはペンツールを使って線を作ります。

 

Affinity Designer ペンツールの使い方 ベジェ曲線

左上にある『線のスタイル』から『幅』『線端』『終了位置』を好みの矢印の形になるように変更。

丸みのある矢印にしたい場合にはノードツールを使って曲線にすると動きのある矢印を作る事が出来ます。

 

Affinity Designerのペンツールを使ってブラシで書いたような線を引く方法

Affinity Designerのペンツールを使えば線をブラシ線に変更する事が出来ます。

 

Affinity Designer ペンツールの使い方 ベジェ曲線

ペンツールで線を作った後に右サイドバーにある『ブラシ』を選択。

色々なブラシの形があるので、好きなブラシを選ぶと簡単にブラシ線が出来上がります。

 

Affinity Designer ペンツールの使い方 ベジェ曲線

完成したブラシ線をノードツールで変更すると曲線など動きのあるブラシにする事も出来ますよ。

 

今回紹介したペンツールとノードツールの使い方を動画でも解説しています。

文章や画像だけだと分かりにくいなって時にはこちらも参考にしてみてください。

 

 

 

画像加工に使えるデザイン用の素材サイト

デザイン用の素材サイト一覧

  • この記事を書いた人
  • 最新記事

井川 裕輝

ネットショップ総合管理職3年の経験を経て独立、現在は法人代表。小規模低予算少人数でのネットショップ立ち上げ経験が最も多い。

-affinity designer, WEBデザイン

© 2022 ネットショップ運営情報ブログ『WellMaga』