Inkscapeで曲がった矢印を描く

ブログが作りたい!Inkscapeの使い方 > Inkscapeで曲がった矢印を描く

Inkscapeで曲がった矢印を描く

Inkscapeで曲がった矢印を描く

Inkscapeで曲がった矢印アイコンを作る

前回は、Inkscapeで直線の矢印を作成しましたが、今回は、曲がった矢印のアイコンを作成します。

もっと曲げとけば良かったかしら・・・などと思いつつ、曲がった矢印を描いてみることにしましょう。

▲ページの先頭に戻る

作成するアイコンのサンプル

次のような、曲がった矢印のアイコンを作成してみます。ちょい右曲がりですね。

曲がった矢印のアイコン

▲ページの先頭に戻る

Inkscapeで曲がった矢印を描く

1:Inkscapeで新規ファイルを作成

(01)

Inkscapeを起動して、新規ファイルを作成(「icon_64x64」)してください。今回は、曲線が分りやすいように大きめに作ります。

新規ドキュメント2が表示される

ファイルの新規作成方法が分からない場合は、記事『Inkscapeで円形を描いてみる』をご覧ください。

▲ページの先頭に戻る

2:Inkscapeで矢印を描く

(02)

左サイドのツールボックスの中から、「ベジエ」ツールを選択してください。

ベジエツールを選択

(03)

「ベジエ」ツールで、矢印の角や、曲げるポイントになるところを、クリックまたはドラッグしていきます。

おおよそ、矢印の形になるように、まずは点を 9個打ってみてください。(曲線にしたい箇所は、ドラッグです)

点を 9個クリック

ドラッグは、マウスのカーソルを少しすべらせるようにして、放してみましょう。棒っきれ(ハンドル)が出れば OKです。

(04)

最後に閉じるために、最初に打った点をクリックします。

最初に打った点の近くに、カーソルを近付けてみてください。四角い小さい赤いマークが表示されるはずです。

四角い小さい赤いマークが表示された状態で、クリックしてみてください。うまく閉じることができます。

10回目で閉じる

(05)

次のような、曲がった矢印が描けたかしら?(ちょっと、いびつかもしれませんけれど)

とりあえず、曲がった矢印が描けた

▲ページの先頭に戻る

3:矢印の形を整えましょう

(06)

現状、おそらく、きれいな形で矢印が描けていないと思います。点を移動させて、形を整えることにしましょう。

左サイドのツールボックスの中から、パス編集ツールを選択してください。

パス編集ツールを選択

(07)

各点は、自由にドラッグして移動できます。お好きなように変更してみてください。

各点を調整

(08)

形状の調整でよく分からないとすれば、前述(03)でドラッグして打った点ではないでしょうか?どうやって、曲線を変更するのか?ですね。

まずは、前述(03)でドラッグして打った点を、クリックしてみてください。

点をクリック

そうすると次のように、棒っきれ(ハンドル)が 2本、対称に表示されるはずです。

前述(03)で描いているときにも表示されていましたが、もう一度 表示したい場合は、パス編集ツールで点をクリックしてあげれば良いわけです。

ハンドルが 2本対称に表示される

(09)

で、この棒っきれ(ハンドル)は、次のようにドラッグすることで伸ばすことができます。

試してみていただくと分りますが、棒っきれ(ハンドル)を伸ばすと点の付近から隣の点まで、丸みが増すはずです。

ハンドルはドラッグすることで伸ばせる

また逆に、棒っきれ(ハンドル)を短くするほど、点の付近から隣の点まで、よりまっすぐな直線になるはずです。

ハンドルはドラッグすることで縮む

難しく考える必要はありません。ブルース・リー先生もこう言っています。「Don't Think. Feel!(考えるな、感じろ!)」

(10)

もちろん、伸縮だけでなく、ハンドルは好きな場所へ移動(ドラッグ)させることができます。

いろいろと、試してみてください。話を聞いているより、自分で動かしてみるほうが、よく分かるはずです。

ハンドルは好きな場所へ移動できる

あっちに持っていったり、こっちに持っていったりね。お好きなように遊んでみてください。

お好きなように遊んでみて

遊びすぎて変な形状になってしまったら、[ctrl]+[z]キーで戻せます。

▲ページの先頭に戻る

4:矢印に色をぬりましょう

(11)

矢印の形状が、「まぁ、こんなもんやろ」となったら、色をぬってください。

色ぬってみて

色のぬり方が分らない場合は、記事『Inkscapeで色をぬる』をご覧ください。

▲ページの先頭に戻る

5:ストロークの形状を変更する

(12)

それから、ストロークの形状を変更して、少し丸みをおびさせるのも良いかもしれません。

ストロークの形状を変更

ストロークの形状を変更する方法が分らない場合は、記事『Inkscapeでストロークの形を変更する』をご覧ください。

▲ページの先頭に戻る

6:保存する

(13)

SVG保存しておきましょう。

(14)

さらに、pngで保存したい人は、エクスポート(png保存)してみてください。

png保存(エクスポート)の方法が分らない場合は、記事『Inkscapeでpng保存する』をご覧ください。

▲ページの先頭に戻る

前の記事へ
次の記事へ

次回予告

お疲れさまでした。いかがでしたか?曲がった矢印はうまいことできたかしら?もう大胆に「ギューン」と曲げたったらえぇんですわ。

さて、次回のInkscapeは、シンプルな桜の花のアイコンを作成します。もう九州地方では、桜がだいぶ咲いているようですよ。

▲ページの先頭に戻る

関連記事

画像編集ソフトInkscapeに関連する記事を、ご紹介します。

▲ページの先頭に戻る

作成日:2009/03/28 更新日:2009/03/28

コメントありがとうございます。

お手数ですが、コメント前に留意事項をご覧くださいませ。

また、現在ご質問にお答えする余裕がない状態にあります。よろしくお願いいたします。

No title

ああ、苦手なパスの操作・・・
タブレット+ペンマウスで手書きしちゃった方が早いって思うのは私だけ
でしょうか??
パスでの修正苦手なんですよね・・・(-_-;)
慣れなんでしょうが

カリグラフィツール

fuminchuさん、こんにちは!(・∀・)/
コメントありがとうございます。


絵を描く修練をしてきた人や、fuminchuさんみたいに、
絵のうまい人はタブ+ペンの方が楽かもしれませんね。(´ー`)


対して、パスを使うのは、再利用しやすいからかと思います。

一度 描いてしまえば、修正がしやすいし、
他の作品にも流用しやすい。

状況によって使い分けるのが良いのではないかしらん。


それで、Inkscapeのおもしろいところは、
タブ+ペンで描いた線を、パスにする機能があることです。

「カリグラフィツール」と言うそうですが、
ベジエツールのすぐ下にある項目です。

「パスめんどいぷー」と思う人が、
やはり多かったんでしょうね。

ニーズに応える開発者のエネルギーって、
ほんとすごいッス。(´Д`;)

コメントの投稿

内緒のときは、チェックしてください。

トラックバック

http://kumacrow.blog111.fc2.com/tb.php/446-f738c570
 | トップページ | 

FC2ブログの作り方・作成

GIMP2で画像を編集しよう

イラストが描ける Inkscape

初心者のためのSEO対策

Google Analytics入門

アクセス解析QLOOK

アイデアの作り方

超ビギナー向けHTML入門

超ビギナー向けのCSS入門

FC2ブログのカスタマイズ

初心者向けのCSS小技

Web制作に役立つ本

ブログでお小遣い稼ぎ

これはうまい!

誰にでも才能はあるのです

RSSフィード

プロフィール

KumaCrow(クマクロ)

KumaCrow

FC2ブログによるブログの作り方をご紹介しています。「初心者の人にも分かりやすく!」がモットーです。

Twitter KumaCrow

リンクフリー♪
フォローも、ふりっふり~

伝わる文章を書くコツ

最近の記事

最近のコメント

パソコン入門

アクセスの多かった記事

先月アクセスが多かった記事を、ご紹介します。

【1位】
GIMP2の使い方
【2位】
プリントスクリーンの方法
【3位】
GIMP2 パスの使い方
【4位】
GIMPとは?
【5位】
レイヤーとは?

初心者のデジカメ撮影術

ホームページ制作にJimdo

このブログの評価

自分を見つめなおす

ブログランキング

クリックしちゃいなよ!You、クリックしちゃいなよ!そして、Canして、Doしちゃいなよ!

FC2ブログランキングに参加してみませんか?見に来てくれる人が少しだけ増える・・・かもしれません。

FC2カウンター

ブログ開始(2007年7月)から、ユニークユーザ数が「のべ240万人」に達しました。いつもご覧いただきまして、ありがとうございます。(2011/01/05、FC2カウンター故障・データ消失により、10万人分くらいマイナスとなりました)

子どもの教育

最近のトラックバック

+++ お友達のブログ・お世話になっているサイトさま +++

ふわふわふわりん
無料ウェブ素材 Tyto-Style
海外のSEO対策・SEOツールをわかりやすく解説するブログ
日南商工会議所による情報化支援ブログ
気になるけど
聞き捨てならん!!
かちびと.net
ありのごとくあつまりて