Inkscapeで矢印を描く

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

Inkscapeで矢印を描く

Inkscapeで矢印を描く

Inkscapeで矢印アイコンを作ってみる(1/3)

今回は、Inkscapeで、矢印のアイコンを作成します。

「ベジエ」ツールを使うので、今まで作ったアイコンよりは、少し難しいかもしれません。

それでは、矢印を描いてみることにしましょう。シリーズ全3回のうちの第1回目です。

▲ページの先頭に戻る

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

次のような、円形の中に矢印があるアイコンを作成してみます。

円形の中に矢印のアイコン(右向き) 円形の中に矢印のアイコン(上向き) 円形の中に矢印のアイコン(左向き) 円形の中に矢印のアイコン(下向き)

相変わらずシンプルですが、良かったらご一緒に。

▲ページの先頭に戻る

Inkscapeで矢印を描く

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

(01)

Inkscapeを起動して、新規ファイルを作成(「icon_32x32」)してください。

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

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

▲ページの先頭に戻る

2:Inkscapeで円形を描く

(02)

まず先に、円形を描いてしまいます。

左サイドのツールボックスの中から、円ツールを選択します。

円ツールを選択

(03)

ちゃちゃーっと、円形を描いてください。

左上から右下へドラッグ

円形の描き方が分らない人は、記事『Inkscapeで円形を描いてみる』が参考になるはずです。

▲ページの先頭に戻る

3:Inkscapeで矢印を描く

(04)

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

ベジエツールを選択

「ベジエ」ツールは、点を打ってオブジェクトを作成するツールです。GIMPで言うところのパスツールのようなものです。

(05)

「ベジエ」ツールで、矢印の角になるところをクリックしていきます。

おおよそ、矢印の形になるように、まずは点を 7個打って(クリックして)みてください。

点を 7個クリック

[ctrl]キーを押しながら、クリックすると角度が制限されるので、形成しやすいはずです。

(06)

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

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

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

8回目のクリックで閉じる

前述(03)で作成した円形の色が赤色の場合は、四角い小さい赤いマークが分りにくいかもしれません。分かりにくい場合は円形の色を変更してみてください。

(07)

また、円形と矢印の色が同じ場合、次のように「あれ?描いたはずなのに!?」と不安にさせられるかもしれませんが、点線で囲まれているのが分るはずです。大丈夫です。

色が同じ場合は分りにくい

(08)

矢印も好きなように、色を変更してください。

色を変更

ちなみに、ストローク(枠)の色をぬるときは、[shift]キーを押しながら、カラーパレットをクリックします。覚えていたかしら?

▲ページの先頭に戻る

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

(09)

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

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

パス編集ツールを選択

(10)

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

各点を調整

また、[shift]キーを押しながら点をクリックすると、同時に点を選択できます。ゆえに、ドラッグすると、点が一緒に動きます。

[shift]キーで同時に点を選択

失敗して、ひとつ前の状態に戻したい場合は、[ctrl]+[z]キーで戻すことができます。

(11)

あるいは、几帳面にきちっと矢印を整形したい場合は、XY座標値を入力してみましょう。

XY座標値を入力

参考の数値を以下に示します。パス編集ツールの状態で、点をクリックして入力、点をクリックして入力を 7回繰り返す方法です。

XY座標値の入力を繰り返す

 

X座標

Y座標

(1)

6

19

(2)

16

19

(3)

16

25

(4)

26

16

(5)

16

7

(6)

16

13

(7)

6

13

わざといびつな形にしても、おもしろいですけれど、曲がったことが大嫌いな原田泰造さんのような人は、座標値の入力を試してみてください。

▲ページの先頭に戻る

5:保存する

(12)

一度、SVG保存しておきましょう。お疲れさまでした。

▲ページの先頭に戻る

前の記事へ
次の記事へ

次回予告

次回のInkscapeは、今回作成した矢印のストローク部分をちょっといじってみます。

▲ページの先頭に戻る

関連記事

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

▲ページの先頭に戻る

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

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

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

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

コメントの投稿

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

トラックバック

http://kumacrow.blog111.fc2.com/tb.php/442-471907af
 | トップページ | 

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
ありのごとくあつまりて