Inkscapeで集中線を描く

Pocket

top


最近、アプリケーションの素材として集中線が必要になりInkscapeにて作成した事がありました。
その際、netを調べても描き方が説明されたページが見当たらなかったので備忘録代わりにブログに記録しておきます。

大ざっぱな作業手順は以下の通りです

  1. 三角形を作る
  2. タイルクローンで回転させる
  3. グラデーションを放物状にかける

それでは説明に入ります。

スクリーンショット 2012-10-19 15.20.43
先ず、四角形を作成します。
位置、サイズは後から調整しやすいようにX=100, Y=700, 幅=10, 高さ=40に手入力で修正します。

スクリーンショット 2012-10-19 15.21.17
三角形にするため、オブジェクトをパスに変換します。

スクリーンショット 2012-10-19 15.21.58
左上の頂点を削除します。

スクリーンショット 2012-10-19 16.08.42
おおぅ……

スクリーンショット 2012-10-19 15.22.19
ゆがんでいる辺の両頂点に対し、ノードを鋭角にするよう変更します。

スクリーンショット 2012-10-19 15.22.48
頂点のX座標を中間(105)に持ってきて二等辺三角形にします。

スクリーンショット 2012-10-19 15.23.12
中心点を今移動した頂点と同じ位置に変更します。

これで素材となる三角形が出来ました。この三角形を回転させることで放物線のように見せようという算段です。この段階で複製を作ってコピーしておいてもいいでしょう。

スクリーンショット 2012-10-19 15.23.41
メニューより、編集>クローン>タイルクローンを作成を選びタイルクローン作成ウィンドウを開きます。

スクリーンショット 2012-10-19 15.24.52
「保存したタイルのサイズと位置を使用する」はOFFに、また各種パラメータを初期化するためにリセットを押しておきます。

スクリーンショット 2012-10-19 15.26.22
シフトは0%でもオブジェクトの幅分シフトしてしまうので、-100%を指定して移動しないようにします。
「シフト」タブを選び水平シフトの値を変更します。

スクリーンショット 2012-10-19 16.04.50
オブジェクトを回転させるために「回転」タブを選び、列ごとの回転を30℃で指定し、行、列を1×12で指定します。
これによって三角形は30*12=360で一回りすることになります。

スクリーンショット 2012-10-19 16.11.08
右下の「作成」ボタンを押すと、12個の三角形クローンが作成されます。

スクリーンショット 2012-10-19 16.17.29
この時、オリジナル素材の三角形がクローンと重なってしまうため後にグラデーションをつけると色が変になってしまいます。
オリジナルは移動して待避しておきます。(削除はしないでください)

スクリーンショット 2012-10-19 16.30.12
操作を楽にするため、このタイミングでクローンを全て選択してグループ化しておきます。

ここからグラデーション作業に入ります。

スクリーンショット 2012-10-19 16.22.12
グラデーションをつける前に、白色を見やすくするため四角形で黒バックを作成します。
最背面に移動させ、操作に影響させないためオブジェクトをロックしておきます。(別レイヤーに作成しても良いでしょう)

スクリーンショット 2012-10-19 16.24.43
オリジナルを選択し、線形フィルカラーを線形グラデーションに変更します。

スクリーンショット 2012-10-19 16.25.53
クローンはオリジナルの変更が反映されるため、上図のように放射線にもグラデーションが適用されます。

スクリーンショット 2012-10-19 16.26.48
グラデーションの方向を横から縦に変更変更します。

スクリーンショット 2012-10-19 17.37.23
グラデーションを上から以下の三色で指定します。

  • オフセット0%, アルファ値0の白色
  • オフセット25%, アルファ値0の白色
  • オフセット100%, アルファ値128の白色

スクリーンショット 2012-10-19 16.35.14
グラデーションの背面に、背景となる色で円を追加します。

スクリーンショット 2012-10-19 16.35.23
黒の背景を取り除くとこのような感じになります。(ロックしたオブジェクトはメニューで「オブジェクト」->「全てのロックを解除」で再び操作出来ます)

以上で基本的な放物線の作成は完了です。
ここから重ねがけ、シャドウをつける等色々変化がつけられるかと思います。

sen2
一例として、このようなふきだしをつくる事も可能です。
作業手順はほぼ一緒です

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です