素材

inkscapeの基本機能だけで矢印を描く方法

今回はよく検索されている、inkscapeで矢印を作るための基本チュートリアルを紹介します。

GIMPのようにエクステンションを使わなくても基本機能だけで矢印を作ることができます。

では順番にどうぞ。

標準機能を使ったシンプルな矢印の描き方

まずはinkscapeが標準で用意している機能だけでシンプルな矢印を作ってみましょう。

真っ直ぐな直線の矢印

直線に矢がついた、いたって普通の矢印を描いていきます。

標準機能ではこの方法が基準になるので、まずは基本からサクッと理解しておきましょう。

直線を引く

2016-10-24_12h50_13_inkscape%e3%81%a7%e7%9f%a2%e5%8d%b0%e3%82%92%e6%8f%8f%e3%81%8f%e6%96%b9%e6%b3%95

鉛筆ツールで直線を引きます。

矢印の開始位置でクリックして、終点(矢印の矢)の位置でクリックして直線にします。

ドラッグ(クリックしたまま移動)すると手書きの線になってしまうので注意しましょう。

ストローク(線)のスタイルで矢印にする

2016-10-24_13h06_58_inkscape%e3%81%a7%e7%9f%a2%e5%8d%b0%e3%82%92%e6%8f%8f%e3%81%8f%e6%96%b9%e6%b3%95

[Shift+Ctrl+F]で「フィルストーク」の設定を開いて、「ストロークのスタイル」というタブに移動します。

線が細すぎて見えないので、線の幅を調整しておきます。

つぎにマーカーというプルダウンメニューから矢印を選びます。

マーカーはそれぞれ、直線の始点、中間点、終点に対応しています。

矢印を作ってから色を変えたり、大きさを変えたりという変更もできます。

ストロークの塗りから色を変える

2016-10-24_13h42_05_inkscape%e3%81%a7%e7%9f%a2%e5%8d%b0%e3%82%92%e6%8f%8f%e3%81%8f%e6%96%b9%e6%b3%95

「ストロークの塗り」のタブに移動して、色を変更すると、線と矢印の部分の色が変わります。

グラデーションやパターンで塗りつぶすこともできます。

ストロークの幅を変えると矢の大きさも変わる

2016-10-24_16h23_22_inkscape%e3%81%a7%e7%9f%a2%e5%8d%b0%e3%82%92%e6%8f%8f%e3%81%8f%e6%96%b9%e6%b3%95

ストローク幅を変化させると、マーカーで設定した矢の部分の大きさも一緒に変わります。

曲がったシンプルな矢印の描き方

直線の矢印の描き方で使った直線を、ベジェ曲線にするだけで、曲がった矢印もカンタンに作ることができます。

曲線を作る

2016-10-25_18h38_25_inkscape%e3%81%a7%e7%9f%a2%e5%8d%b0%e3%82%92%e6%8f%8f%e3%81%8f%e6%96%b9%e6%b3%95

ペンツールでベジェ曲線を作ります。

ベジェ曲線のノードとハンドル

2016-10-25_18h46_19_inkscape%e3%81%a7%e7%9f%a2%e5%8d%b0%e3%82%92%e6%8f%8f%e3%81%8f%e6%96%b9%e6%b3%95

ベジェ曲線ではノードとハンドルの位置で曲線が大きく変わります。

曲線は後でも編集できますが、参考までに今回の配置を載せておきます。

ストロークとマーカーを設定する

2016-10-25_18h52_19_inkscape%e3%81%a7%e7%9f%a2%e5%8d%b0%e3%82%92%e6%8f%8f%e3%81%8f%e6%96%b9%e6%b3%95

直線の場合と同じように、幅とマーカーを設定すると矢印になります。

矢の向きと曲線を合わせる

2016-10-25_19h26_25_inkscape%e3%81%a7%e7%9f%a2%e5%8d%b0%e3%82%92%e6%8f%8f%e3%81%8f%e6%96%b9%e6%b3%95

矢の向きが曲線の向きと合わなくなることがあります。

ハンドルの向きが矢の向きに影響してしまうのでこのようなことが起こります。

これを修正してみます。

ノードを追加する

2016-10-26_10h10_32_inkscape%e3%81%a7%e7%9f%a2%e5%8d%b0%e3%82%92%e6%8f%8f%e3%81%8f%e6%96%b9%e6%b3%95

ノードの追加は、すでにある2つのノードの間に1つだけノードを追加する機能です。

ノードツールのツールコントロールバーに表示されています。

ノードの調整

2016-10-26_10h21_24_inkscape%e3%81%a7%e7%9f%a2%e5%8d%b0%e3%82%92%e6%8f%8f%e3%81%8f%e6%96%b9%e6%b3%95

2つの中間位置くらいに新しいノードが追加されます。

追加したノードを矢の部分近くに移動します。

ハンドルの修正

2016-10-26_10h18_52_inkscape%e3%81%a7%e7%9f%a2%e5%8d%b0%e3%82%92%e6%8f%8f%e3%81%8f%e6%96%b9%e6%b3%95

追加したノードから伸びているハンドルの矢の側にある方を削除します。

[Ctrl]キーを押しながら対象のハンドルをクリックすると、ハンドルは消えます。

もう片方のハンドルは元の曲線に近くなるように伸ばしておきます。

2016-10-26_10h30_10_inkscape%e3%81%a7%e7%9f%a2%e5%8d%b0%e3%82%92%e6%8f%8f%e3%81%8f%e6%96%b9%e6%b3%95

最後にノードの追加で崩れたループしている部分を修正します。

ループの箇所にあるノードを選んで「対称にする」機能で修正します。

これできれいな矢印になりました。

もちろん色を変えたり、線幅を変えたりして直線のときと同じように修正することができます。

あとがき

inkscapeはパスの操作がやりやすいので、曲線を作ることもカンタンです。

さらにベクターグラフィックなので、後からの編集もカンタンです。

今回のようにパス操作ができれば、いくらでも素材づくりはできるので、ぜひ練習してみてください。

inkscapeのまとめページで他の記事も見てみませんか?

記事が気に入ったら
tipLog を "いいね!"
Facebookで更新情報をお届け。

tipLog

WordPressテーマ

WordPressテーマ「MAG(TCD036)」

スポンサードリンク

関連記事

  1. グラフィックデザイン

    inkscapeの使い方を集めたスキルアップのための日本語チュートリアル集

    このブログ内でのでinkscapeに関する記事をまとめてみました。…

  2. 素材

    inkscapeで「次へ」「前へ」「トップへ」のアイコン画像の作成をしてみた

    今まで「ページトップへ」のようなテキストリンクでページ内リンクを作成し…

  3. チュートリアル

    無料のURL短縮ツール「ClickScope」をサーバーに設置する方法

    コスト削減も兼ねて、無料のURL短縮ツール「ClickScope」をサ…

  4. レイアウト

    簡単にテキストレイアウトができるinkscapeの「テキストの流し込み」機能の使い方

    写真付きのパンフレットでよくあるテキストレイアウトには被写体を邪魔しな…

  5. レイアウト

    inkscapeの「整列と配置」でオブジェクトを綺麗に並べて表を作る方法

    inkscapeには整列と配置を調整するための機能があります。この…

  6. inkscape

    inkscapeでフローチャートを作る方法

    最近作り始めた資料でフローチャート様な、マインドマップの様なものを取り…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

CAPTCHA


スポンサードリンク

ピックアップ記事

おすすめの本

使用している素材

カテゴリー

 
  1. 素材

    無料でクオリティが高く、検索機能が利用できる画像素材サイト3選
  2. グラフィックデザイン

    フォトレタッチ・グラフィックデザインの無料ソフト「GIMP」(≒Photosho…
  3. タイポグラフィ

    読みやすい明朝体フリーフォント
  4. ブログ収益化

    脱初心者しませんか?Amazon・楽天のアフィリエイトを上手に活用するための予備…
  5. グラフィックデザイン

    レイアウトデザインに最適な無料ソフト「inkscape」(≒Illustrato…
PAGE TOP