インクスケープ

インクスケープで矢印を描く方法!グラデーションで色つけたいときにも使えます

ブログを作っていて、説明用に矢印を使う機会があったんですけど、
インクスケープには「四角」や「星型」等はあるけど「矢印」ってないんですね。

無いなら自作しよー!
ってことで、インクスケープで矢印を作ってみました。

ベジェ曲線や直線を使って描く方法は楽なんですが、線(ストローク)のためグラデーションとかつけることができないです。
今回はグラデーションもつけたかったので、四角を使って描きました。
(私が知らないだけで、ベジェ曲線でもグラデーション付けられるかもしれません。)

スポンサーリンク

※ 当サイトではアフィリエイト広告を利用しています

矢印を描く方法

インクスケープを起動します。
インクスケープのインストールの仕方はこちらでご紹介しています。
Inkscapeの使い方。ダウンロードからインストールまで

それではさっそく描いていきましょう。

四角を描きます


図の赤四角で囲まれた、「矩形ツール」を選択し、任意の大きさの四角を描きます。
ちなみに「矩形」は「くけい」と読みます。四角のことです。

オブジェクトをパスに変更します


このままでは四角を変形できないので、パス化します。

四角を選択した状態で、
パス→オブジェクトをパスへ
を選択。

すると、ノードツールでパスを編集できるようになります。

ノードを追加します


図左側の赤枠で囲ったところにある「ノードツール」を選択します。

四角の四隅も編集用のドット(ノードと呼びます)がついています。
 が、
ノードが四隅の4つしかないので、追加していきます。

四角の左側のノード2つ(赤丸で囲ったノード)を選択します。
2つ同時に選択する方法は、1か所を選択した後、キーボードのShiftを押しながらもう一か所を選択すればOKです。

左上の赤枠の、「新規ノードを選択セグメントに挿入」ボタンをクリックします。

すると、選択していたノードの間に新しくノードが1つ追加されました(赤丸で囲ったノード)。

矢印の先端を作ります


左右上隅のどちらかのノードを選択します。
(図では右上隅のノードを選択しています。)
次に、キーボードのCtrlを押しながら、選択したノードを左にスライドさせていきます。
Ctrlを押しながら動かすことで、平行移動ができます

反対側のノードも同様に動かして、重ねます。
このとき、画面右にある
スナップを有効にしていると、
ノード同士を近づけたときに自動的に重なってくれるので便利です。

矢印の線の部分を作ります


先ほどと同様の手順で、ノードを追加します(赤丸で囲ったノード)。

スポンサーリンク


次に、赤丸で囲ったノード2つを選択し、Ctrlを押しながらスライドさせていきます。
反対側も同様に移動します。

これで線の部分の完成です。

形を整えて完成!


最後に、赤丸で囲ったノード2つを選択し、Ctrlを押しながら矢印の形になるように上側に移動します。

ノードを少し上までもっていけば、矢じり型の矢印ができますよ。

応用編

色の変更の仕方


矢印の色を変えるには、画面下にある色群のうち、好きな色を選べばOKです。
もしくは、
オブジェクト→フィル/ストローク
からでも同様にできます。

グラデーションの付け方


オブジェクト→フィル/ストロークを選ぶと、
画面右にフィルをいじれる画面が出てきます。
左から2つ目の「線形グラデーション」(図右の赤枠で囲ったところ)を選び、
その下の赤枠の「グラデーションを編集」を選択します。

すると、画面左にグラデーション編集ボタン(図左の赤枠で囲ったところ)がでますので、
左側の四角を選びます。

すると、作成した矢印にグラデーションの始点と終点がでます(図の赤丸で囲ったところ)。
この始点と終点をつけたいグラデーションの位置にドラッグしてもっていけば、グラデーションの完成です。

まとめ

いかがでしたでしょうか。
ノードの位置をいろいろ変えることで、自分の好きな矢印をつくることができますよ。
お試しください。

また、インクスケープを使うにあたって、参考書を読むと機能を体系だてて理解することができます。
私のおススメの本は「できるクリエイターInkscape独習ナビ

レッスン、リファレンス、練習問題の3構成で解説されているので、初めてInkscapeを本格的に学ぼうと思ったときに目からうろこな機能を使いこなす(というとおこがましいですが)ことができるようになりました。


楽天HPはこちら

おススメなので、インクスケープをもっと使いたい!という方は一読してみてください。

スポンサーリンク
目が疲れやすいと感じたら「アサイベリーアイ


最近パソコンやスマホを使い続けると目がしょぼしょぼしやすい…
集中してパソコンしていると目が疲れやすくなった…
というときにの原因の一つにアントシアニン不足が考えられます。

アントシアニンを手軽に補うならアサイベリーがおススメです。
アサイベリーにはアントシアニンが多い食材として有名なブルーベリーよりも4.6倍多くのアントシアニンが含まれています。

そのアサイベリーをふんだんに使ったサプリメントの「アサイベリーアイ」。
錠剤タイプのサプリメントなので、手軽にアントシアニンを摂取できます。

初回970円と他のアサイベリー系サプリよりも低価格。
しかも定期販売としては珍しく継続指定回数の制限がありません。
1回だけ試したい!など、気軽に試せるのは嬉しいです。