モーリーのメモ

アプリ開発等（プログラミング、CG作成）、興味を持ったことを実践してまとめるブログです。

モーリーのメモ

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

Blender Incscape Mac

　今まではBlenderだけでパネルを作成したのですが、今度はInkscapeとBlenderで連携してパネルを作成します。
　私がまだ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. メニューの『パス』-『統合』をクリック

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

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では反映されません。『ストロークをパスに変更』という機能を使ってストロークの輪郭線をパスにしています。