素材

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の「テキストの流し込み」機能の使い方

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

  2. タイポグラフィ

    inkscapeのパス操作でテキストをポップにする方法

    特別なフォントを使わなくても、パス操作を使うことでポップな書体を作るこ…

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

    GIMPでトリミング画像に影をつけてサクッと立体感を生み出すチュートリアル

    写真から切抜きした画像単体では、立体感がなく物足りないような印象を受け…

  4. ウェブコーディング

    PHPで配列と文字列の変換をデータベースに応用する方法

    データベース検索などを利用するときに、$_POSTや$_GETで受け取…

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

    無料素材を集めてコラージュを作るチュートリアル

    デザインを独学で学ぶとき、何をすればいいかわからないということも多ので…

  6. チュートリアル

    デモ映像付き!GIMPで文字が読みやすい背景画像の作り方

    パワポのスライドやPDFの背景として写真を使うときに気をつけたいことを…

コメント

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

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

CAPTCHA


スポンサードリンク

ピックアップ記事

スポンサードリンク

カテゴリー

  ロゴマルシェ - LogoMarche   ボタンマルシェ - ButtonMarche
  1. グラフィックデザイン

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

    無料でクオリティが高く、検索機能が利用できる画像素材サイト3選
  3. ブログ収益化

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

    レイアウトデザインに最適な無料ソフト「inkscape」(≒Illustrato…
  5. グラフィックデザイン

    自作?外注?その前にコレ!ブログのロゴデザインをするなら「Logaster」を使…
PAGE TOP