読者です 読者をやめる 読者になる 読者になる

モーリーのメモ

プログラミングやCG作成等、アプリ開発を中心に情報を収集中!

BlenderとInkscapeでパネルを作る その1 - Inkscape編

Blender Incscape Mac

 今まではBlenderだけでパネルを作成したのですが、今度はInkscapeBlenderで連携してパネルを作成します。
 私がまだBlenderに慣れてないせいかもしれませんが、2Dの形状はInkscapeのほうが作りやすいです。
 
 今回はInkscapeで、下図の形状を作成します。
f:id:mmorley:20160118170928p:plain
 上が面の部分の形状で、下が飾り付きの枠の形状となります。
 
 この形状をBlenderに取り込んでさらに加工することで、最終的には下図のパネルを作成します。
f:id:mmorley:20160118170947p:plain
 
 今回の記事は、Inkscapeでの作業部分のみです。
 細かく手順を書いたので、Inkscapeの使い方を知りたい方に参考になればと思います。

使用環境

作成手順

1.Inkscapeを起動

 Inkscapeを起動します。

2.グリッドとスナップの設定

 今回のような幾何学的な形を作る場合は、グリッドを表示し、グリッドに従って描画するように設定すると便利です。

2-1.グリッドの表示
  1. メニューの『表示』-『ページグリッド』をクリック(またはキーボードの『#』を押下)
2-2.グリッドの間隔の設定

 グリッドの間隔は変更可能です。今回はデフォルトのままです。

  1. メニューの『ファイル』-『ドキュメントのプロパティ』をクリック(またはキーボードの『shift + control + d』を押下)
  2. 『ドキュメントのプロパティ』ウィンドウの『グリッド』タブで間隔等を設定

f:id:mmorley:20160114161926p:plain

2-3.スナップ機能

 グリッドに従って描画するには、スナップ機能をONにします。

  1. 画面右端の『スナップバー』を下図のように設定します。(縦長なので分割しています。)

f:id:mmorley:20160114172032p:plain
上図は左からそれぞれ下記のON/OFFボタンです。

  • 全てのスナップ機能のON/OFF
  • バウンディングボックスのスナップ機能のON/OFFのグループ
  • ノード/パス/ハンドルのスナップ機能のON/OFFのグループ
  • その他のポイントのスナップ機能のON/OFFのグループ
  • ページの境界/グリッド/ガイドのスナップ機能のON/OFF

3.角丸長方形(面用)を描画

  1. 矩形ツールf:id:mmorley:20160108180215p:plainをクリック(またはキーボードの『F4』を押下)
  2. キャンバスをドラッグし、適当な長方形を描画(サイズは次の手順で入力)
  3. 画面上部の『変更』に下記のように入力
    • 幅:300
    • 縦:100
    • 垂直半径:20
    • 単位:px
  4. カラーパレット(画面下部に並ぶ色見本)で青色(0000FF)をクリック
  5. 画面左下の『スタイルインジケーター』の『ストローク』の色部分を右クリックし、『ストロークを削除』をクリック

f:id:mmorley:20160115160805p:plain

4.角丸長方形をコピー(枠用)

  1. 『選択オブジェクトを複製』ボタンf:id:mmorley:20160113114909p:plainをクリック(またはキーボードの『control + d』を押下)
  2. 『選択ツールf:id:mmorley:20160113151604p:plainをクリック(またはキーボードの『F1』を押下)
  3. コピーした角丸長方形は、コピー元の上に重なっているので、重ならない位置にドラッグして移動

5.コピーした角丸長方形(枠用)の塗りを変更

 フィル(塗りつぶし)を"なし"に、ストローク(線)を黄色にし、線幅を6にします。

  1. カラーパレットで黄色(FFCC00)をクリック
  2. 画面左下の『スタイルインジケーター』の『フィル』の色部分を右クリックし、『フィルとストロークを交換』をクリック
    f:id:mmorley:20160113121845p:plain
  3. 『スタイルインジケーター』の『ストローク』の右の"数字の部分"を右クリックし、6を選択
    f:id:mmorley:20160113134509p:plain

6.枠用の角丸長方形のストロークをパスに変更

 後で装飾用のパスと合成するため、ストロークをパスに変更します。

  1. 画面上部のメニュー『パス』-『ストロークをパスに変更』をクリック(またはキーボードの『control + option + c』を押下)

7.円を描画

 装飾に使う円を描画します。

  1. 円/弧ツールf:id:mmorley:20160113135541p:plainをクリック(またはキーボードの『F5』を押下)
  2. キーボードの『control』を押下しながらキャンパスをドラッグし、"8 × 8px"の円を描画(サイズをステータスバーで確認しつつドラッグする)
    f:id:mmorley:20160115162500p:plain
  3. 下記のように塗りを設定

8.開いた半円を描画

 同じく装飾用に使う半円を描画します。

  1. 円/弧ツールをクリック(またはキーボードの『F5』を押下)
  2. キーボードの『control』を押下しながらキャンパスをドラッグし、"12 × 12px"の円を描画
  3. 画面上部の『変更』に下記のように入力(数値は入力後、キーボードの『Return』を押下)
    • 始点:90
    • 終点:270
    • 『弧(開いたシェイプ)に切り替え』をONにする
      f:id:mmorley:20160113143202p:plain
  4. 下記のように塗りを設定
  5. メニューの『パス』-『ストロークをパスに変更』をクリック(またはキーボードの『control + option + c』を押下)

f:id:mmorley:20160115205638p:plain

9.パスを統合

 手順7で描いた円と、手順8で描いた半円のパスを統合します。

  1. 『選択ツール』をクリック(またはキーボードの『F1』を押下)
  2. キーボードの『shift』を押しながら、円と半円をクリックして同時選択
  3. 『オブジェクトを整列および配置』f:id:mmorley:20160113164347p:plainをクリック(またはキーボードの『shift + control + a』を押下)
  4. 『整列と配置』ウインドウの『右端で揃える』と『下端で揃える』をクリック
    f:id:mmorley:20160113164356p:plain
  5. メニューの『オブジェクト』-『変形』をクリック(またはキーボードの『shift + control + m』を押下)
  6. 画面右の『変形』ウインドウの『移動』タブで下記のように入力し、『apply』をクリック
    • 水平:2px
    • 垂直:0
      f:id:mmorley:20160115173121p:plain
      下図のように円と半円が配置されます。
      f:id:mmorley:20160115174218p:plain
  7. メニューの『パス』-『統合』をクリック

 円と半円が結合した1つのオブジェクトになります。

10.飾りを作成

 手順9で作成した形状から飾りを作成します。

  1. 『選択オブジェクトを複製』ボタンをクリック(またはキーボードの『control + d』を押下)
  2. 『選択オブジェクトを水平方向に反転』f:id:mmorley:20160113170053p:plainをクリック(またはキーボードの『h』を押下)
  3. 『変形』ウインドウの『移動』タブで下記のように入力し、『apply』をクリック
    • 水平:-13px
    • 垂直:0
      f:id:mmorley:20160115180658p:plain
  4. 『選択ツール』をクリック(またはキーボードの『F1』を押下)
  5. キーボードの『shift』を押しながら、上図の2つ形状をクリックして選択
  6. メニューの『パス』-『統合』をクリック
  7. 『変形』ウインドウの『回転』タブで下記のように入力し、『apply』をクリック
    • 角度:45°
      f:id:mmorley:20160113171447p:plain
補足 グループ化している形状が含まれていると『統合』できません。

11.枠用の長丸長方形と飾りを統合

  1. 『選択ツール』をクリック(またはキーボードの『F1』を押下)
  2. キーボードの『shift』を押しながら、枠用の長丸長方形と飾りをクリックして選択
  3. 『整列と配置』ウインドウの『左端で揃える』と『上端で揃える』をクリック
  4. 『変形』ウインドウの『移動』タブで下記のように入力し、『apply』をクリック
    • 水平:3px
    • 垂直:-3px
      下図のようになります。
      f:id:mmorley:20160115181116p:plain
  5. 『選択ツール』をクリック(またはキーボードの『F1』を押下)
  6. 飾りをクリックして選択
  7. 『選択オブジェクトを複製』ボタンをクリック(またはキーボードの『control + d』を押下)
  8. 『選択オブジェクトを水平方向に反転』をクリック(またはキーボードの『h』を押下)
  9. キーボードの『shift』を押しながら、枠用の長丸長方形とコピーした飾りをクリックして選択
  10. 『整列と配置』ウインドウの『右端で揃える』をクリック
  11. コピー飾りだけをクリックして選択
  12. 『変形』ウインドウの『移動』タブで下記のように入力し、『apply』をクリック
    • 水平:-3px
    • 垂直:0px
      f:id:mmorley:20160115211644p:plain
  13. キーボードの『shift』を押しながら、左右に配置した2つ飾りをクリックして選択
  14. 『選択オブジェクトを複製』ボタンをクリック(またはキーボードの『control + d』を押下)
  15. 『選択オブジェクトを垂直方向に反転』f:id:mmorley:20160115211811p:plainをクリック(またはキーボードの『v』を押下)
  16. キーボードの『shift』を押しながら、枠用の長丸長方形をクリックして追加選択
  17. 『整列と配置』ウインドウの『下端で揃える』をクリック
  18. キーボードの『shift』を押しながら、枠用の長丸長方形をクリックして選択を解除
  19. 『変形』ウインドウの『移動』タブで下記のように入力し、『apply』をクリック
    • 水平:0px
    • 垂直:3px
  20. キーボードの『shift』を押しながら、枠用の長丸長方形と4つの飾りをクリックして選択
  21. メニューの『パス』-『統合』をクリック
    f:id:mmorley:20160115212206p:plain

12.Blender用に加工

 この後、作成したオブジェクトをBlenderで加工するのですが、穴の空いた形はBlenderで思うように処理されない場合があります。
 枠用の長丸長方形は穴の空いた形なので、1辺を切断して穴を無くします。

  1. 矩形ツールをクリック(またはキーボードの『F4』を押下)
  2. 枠用の長丸長方形の1辺を横切るように四角を描画
    f:id:mmorley:20160115215628p:plain
  3. 『選択ツール』をクリック(またはキーボードの『F1』を押下)
  4. キーボードの『shift』を押しながら、枠用の長丸長方形と四角をクリックして選択
  5. メニューの『パス』-『差分』をクリック

f:id:mmorley:20160115220035p:plain
上図の様に1辺が切断されます。

13.Blender用に保存

 Benderにインポートできる『プレーン SVG』形式で保存します。

  1. メニューの『ファイル』-『名前をつけて保存』をクリック(またはキーボードの『shift + control + s』を押下)
  2. 『ファイルの保存先を選択』ウインドウの右下の『ファイル形式の選択』をクリックし、『プレーン SVG(*.svg)』を選択
  3. ファイル名に"panel.svg(任意)"を入力し、保存先フォルダを選択した後、『Save』をクリック

f:id:mmorley:20160115220940p:plain
 
今回の作業は以上です。

今回の成果物

 作成したInkscapeファイル(プレーンSVG)です。
https://github.com/githubmorley/blog-files/blob/master/160119/panel.svg
リンク先のページ内の『Raw』を右クリックして、『リンク先を別名で保存』をクリックするとダウンロードできます。

あとがき

 Inkscapeではパスに線幅を持たせてストロークとして扱えますが、Blenderでは反映されません。『ストロークをパスに変更』という機能を使ってストロークの輪郭線をパスにしています。