PR
Inkscapeで窓を描くLesson

Inkscapeで夜景の見える窓を描く

最初の記事から読む 最後の記事を読む
Inkscapeの3Dボックスツールでビルを描く
前回までのシリーズで3Dボックスからシンプルなアイソメトリック図のビルが出来上がりました。今回は「窓を描く」編で描いた夜空の見えるアーチ窓と、「ビルを描く」編で描いた夜景のビル群を組み合わせて、都会的な夜景の見える窓にしてみましょう。

一連の工程を動画にしております。6分半ほどの動画になっておりますので、お時間がありましたらご覧いただけたらと思います。

 

 

今回の作業では斬新なテクニックは登場しません。今までのおさらいです。ほぼ選択ツールしか使ってないです。(移動・重なり順変更・拡大縮小・回転・コピー・ペースト等で各パーツを合わせて調整する作業です。)

以前説明した機能に関しては記事のリンクを貼っておりますので、リンク先の解説を読んでいただけたらと思います。

作成したパーツをクリップグループに入れる

動画用に別々のファイルで作っていたので、ビルのファイルに他のファイルからコピーしたアーチ窓を貼り付けます。

ビルのファイルに窓を貼り付ける
ビルのファイルに窓を貼り付ける

 

貼り付けの際、オブジェクトを選択していない時は最前面に貼り付けられます。

何か選択状態だとその前面、グループモードで編集中だとグループ内に貼り付けられるので、オブジェクトの重なり順に注意して貼り付けましょう。

 

ビルの一つを選択ツールでドラッグして、アーチ窓の半分より下側に移動させます。この時、ビルの位置を自由に移動したいのでスナップ機能は無効にしておきます。

アーチ窓が前面、ビルが背面にあるのでビルの一部が隠れています。

「窓ガラス」(クリップグループの親グループ)の中にビルが含まれるように重なり順を変更します。

ビルのグループを一つ選択する
ビルのグループを一つ選択する
スナップ無効でビルをドラッグして移動
スナップ無効でビルをドラッグして移動
ビルの重なり順を変更する
ビルの重なり順を変更する
ビルの重なり順を変更した
ビルの重なり順を変更した

 

クリップグループについては以前の動画で解説しているのですが、簡単に説明すると、「Clip」グループ(切り抜き範囲)内のオブジェクトの形状で、その親グループ内のオブジェクトを切り抜いて表示するという機能です。

 

 

[レイヤーとオブジェクト]ダイアログで、はさみアイコンがついたクリップグループの親グループ「窓ガラス」の中に、ビルをドラッグして重なり順を変更しました。

(※親グループとClipグループ内パスに同じ「窓ガラス」というラベル名を付けてしまったので紛らわしいですが、グループはラベル名の先頭にフォルダのアイコン、パスはラベル名の先頭にパスのアイコンが付いているので見分けてください。)

 

「Clip」グループ内「窓ガラス」パスの範囲で、親グループ「窓ガラス」内にあるビルが切り抜き表示されるようになりました。

はみ出した部分は表示されていないですが、実際には元のビルが丸ごと残っています。

位置調整でビルを多少動かしても、はみ出した部分が切り抜き範囲内にフレームインして表示されるようになります。元から作っていたパーツの大きさ分は調整可能な余裕があります。

 

ビルの位置を調整する時に選択ツールで触って他の物を動かさないように、「窓外枠」・「窓内枠縦」・「窓内枠横」・「窓枠下」・「星」、「窓反射」にロックをかけました。

誤選択防止のためロックをかける
誤選択防止のためロックをかける

 

親グループをロックすると、その子グループもキャンバス(描画領域)上で選択ができなくなってしまうので、ビルの移動や位置調整を行うために「窓ガラス」グループにはロックをかけないでおきます。

 

実はロックをかける前に選択ツールでうっかり触って「窓反射」を動かしてしまったのですが、このような場合は[Ctrl]+[Z]で元に戻しましょう。

選択ツールで誤選択して移動した
選択ツールで誤選択して移動した
[Ctrl]+[Z]で元に戻した
[Ctrl]+[Z]で元に戻した

 

気付かない内にうっかり触って動かして、気付かないまま作業していたということもあるので、ロックはこまめにかけたり外したりしながら作業するのがおすすめです。

 

残りのビルも選択ツールで窓の位置に移動させます。

残りのビルを移動させて重なり順を変更する
残りのビルを移動させて重なり順を変更する
クリップグループの親グループに入れた
クリップグループの親グループに入れた

 

この時、ビルを移動する前にクリップグループの親グループ内に重なり順変更をすると、切り抜き範囲外となり、キャンバス(描画領域)上で見えなくなるのでご注意ください。

「窓ガラス」パスの範囲で切り抜かれると、下半分がほぼ見えないビルもあります。他のパーツと合わせた後で足りなかった部分を追加で作るより、多かった部分を削る方が楽ですよね。

パーツ同士を合わせて位置調整をしてみたら、パーツの大きさが足りなくて不自然な位置でぶつ切りになってしまった、ということもあるので見える範囲より少し大きめに作っておくのがおすすめです。

各パーツの大きさや位置を調整する

説明用の動画のために窓とビルは別々のファイルで作っていたので、他のパーツとのバランスを見ながら大きさ調整や位置調整をしています。

拡大縮小する時は選択ツールで[Ctrl]キーを押しながら縦横比固定します。

Ctrlで縦横比を固定して拡大縮小する
Ctrlで縦横比を固定して拡大縮小する

 

大体、下から二番目の窓内枠の位置までの範囲にビル群が収まるように調整しています。

この枠の位置までにビル群が収まるように調整する
この枠の位置までにビル群が収まるように調整する

 

バランスを見ながらビルの大きさや位置、重なり順を変更します。

窓が左右対称なので、ビルも左右になんとなく対称に置いています。

アルファベットの「M」のような形にするとバランスが良さそうです。

アルファベットの「M」のような形にビル群を配置する
アルファベットの「M」のような形にビル群を配置する

 

[レイヤーとオブジェクト]ダイアログで重なり順を変更します。

ドラッグする位置を間違えるとグループの中にグループが入ってしまうので気を付けましょう。

レイヤーとオブジェクトで重なり順を変更する時の注意点

ドラッグ操作で重なり順変更中に、グループの上で数秒マウスオーバー(ホバー)すると、閉じていたグループが自動で開きますのでご注意ください。

レイヤーとオブジェクトでグループの上でホバーすると自動で開く
レイヤーとオブジェクトでグループの上でホバーすると自動で開く

 

開いているグループに気付かず、その中にドラッグアンドドロップしてしまうと、階層の違うグループ(子グループ)所属になってしまいます。

開いたグループに気付かずドラッグ
開いたグループに気付かずドラッグ
違うグループに入れてしまった
違うグループに入れてしまった
元に戻してもう一度
元に戻してもう一度
位置を確認してドラッグアンドドロップ
位置を確認してドラッグアンドドロップ

 

[レイヤーとオブジェクト]ダイアログのインデント(字下げ)の位置で階層を確認できますので、よく確認してドラッグアンドドロップしましょう。

画面のスクロールが長くて一度で重なり順を変更できない場合は、何回かに分けて操作してもいいです。

選択ツールのツールコントロールバーに[最前面へ]・[前面へ]・[背面へ]・[最背面へ]などの機能もあるので、場合によって使い分けましょう。

 

ビルと合わせてみると星の位置が少し低かったのですが、星は後で位置調整するので、今は気にせずにビルの位置と大きさだけバランス良く見えるように調整しています。

ビルの位置がバランス良く見えるように調整する
ビルの位置がバランス良く見えるように調整する

 

ビルを窓の中に移動させ終わったので、ページ内が空きました。

Inkscape はページ外の場所もキャンバス(描画領域)なので、このまま作業を続けても問題ないのですが、せっかくなので、開いた場所は使いましょう。

[レイヤーとオブジェクト]ダイアログで「窓」グループを選択し、ページ内にドラッグして移動させます。

窓をページ内にドラッグして移動
窓をページ内にドラッグして移動

 

ズームアウト状態で見ると、ビルとビルの間隔が詰まり過ぎている感じがしました。

[レイヤーとオブジェクト]ダイアログから「窓ガラス」グループを[右クリック>グループへ入る]で、グループモードに入ってビルの位置調整をします。

右クリック>グループ窓ガラスへ入る
右クリック>グループ窓ガラスへ入る
グループモードでビルの位置を調整する
グループモードでビルの位置を調整する

 

「窓反射」が被っているとビルの配置が分かりにくかったので、[レイヤーとオブジェクト]ダイアログで非表示にして、ビルの位置を大きさを調整しました。

窓反射を非表示に
窓反射を非表示に
グループモードで右端のビルの位置を調整する
グループモードで右端のビルの位置を調整する
グループモードで右端のビルの位置を調整した
グループモードで右端のビルの位置を調整した

 

星の位置を調整します。「星」グループにはビルの位置調整の時に選択ツールで触って動かさないようにロックをかけていたので、[レイヤーとオブジェクト]ダイアログでロックを解除します。

[レイヤーとオブジェクト]ダイアログから「星」グループを[右クリック>グループへ入る]で、グループモードに入って星の位置調整をします。

星グループのロックを解除
星グループのロックを解除
右クリック>グループ星へ入る
右クリック>グループ星へ入る
ビルと重なっていた星を選択
ビルと重なっていた星を選択
ビルと重なっていた星を移動
ビルと重なっていた星を移動

 

最終的には、「星」グループの重なり順はビルの背面にした方がいいのですが、ビルの位置に合わせて星の位置調整がしやすいので今はこの重なり順にしています。

 

[レイヤーとオブジェクト]ダイアログで「窓反射」を表示状態に戻します。反射ありと反射なしで、印象が大きく変わりますね。

窓反射を表示状態に戻す
窓反射を表示状態に戻す

 

星の大きさや位置を調整します。引きで見たり寄りで見たりしながら、どちらかに偏らないようにまんべんなく星を散りばめていきます。

 

星をもう少し増やしたいので、今ある星を少し小さくします。

選択ツールの拡大縮小ハンドルで[Ctrl]を押しながら縦横比固定で縮小します。

今ある星をコピー、貼り付けして新しい星を増やしました。星は[星形ツール]で作成したシェイプ(基本図形)なので新規で作成してもいいですが、同じ設定の星で揃えたいのでコピーして貼り付けしています。

今ある星の大きさを変更する
今ある星の大きさを変更する
今ある星の大きさを変更した
今ある星の大きさを変更した
今ある星をコピーして貼り付けした
今ある星をコピーして貼り付けした
貼り付けた星を移動した
貼り付けた星を移動した

 

貼り付けの際はマウスカーソルの位置に注意してください。

 

 

コピーして貼り付けして使い回すと、全部同じ向きの星になってしまうので、選択ツールでオブジェクトをもう一度クリックして、回転ハンドルに切り替えて回転をかけます。

回転ハンドルに切り替えた
回転ハンドルに切り替えた
星を回転させた
星を回転させた

 

 

星の位置が決まったので、[レイヤーとオブジェクト]ダイアログで「星」グループをドラッグしてクリップグループの親グループ「窓ガラス」の中に入れました。

レイヤーとオブジェクトで星グループをドラッグ
レイヤーとオブジェクトで星グループをドラッグ
星グループを窓ガラスグループに入れた
星グループを窓ガラスグループに入れた

 

「星」グループが「窓ガラス」グループの所属になったので、「窓ガラス」グループを非表示に切り替えると「星」グループも同時に非表示になります。

窓ガラスグループを非表示に切り替える前
窓ガラスグループを非表示に切り替える前
窓ガラスグループを非表示に切り替えると星グループも非表示になる
窓ガラスグループを非表示に切り替えると星グループも非表示になる

 

「星」グループがビルより前面になっていたので、「窓ガラス」グループ内で重なり順が一番下(背面)になるように[レイヤーとオブジェクト]ダイアログでドラッグして移動させました。

窓ガラスグループ内で重なり順を一番下にする
窓ガラスグループ内で重なり順を一番下にする
窓ガラスグループ内で重なり順を一番下にした
窓ガラスグループ内で重なり順を一番下にした

 

調整前後の比較

全体を眺めていてビルの位置が気になったので少しだけ調整します。

横の位置を動かさないで矢印キーで上下に動かします。

矢印キーで上下に調整中(1)
矢印キーで上下に調整中(1)
矢印キーで上下に調整中(2)
矢印キーで上下に調整中(2)
矢印キーで上下に調整中(3)
矢印キーで上下に調整中(3)
矢印キーで上下に調整中(4)
矢印キーで上下に調整中(4)
矢印キーで上下に調整中(5)
矢印キーで上下に調整中(5)
矢印キーで上下に調整中(6)
矢印キーで上下に調整中(6)

 

こういうちまちまとした調整をやっていると、だんだん何が正解なのか分からなくなってくることってありませんか?

どうにもこうにも何となくしっくり来ない、まだ何か違和感があるような気がするし、これでいいような気もしてくるし……傍から見ると大差ないかもしれない所で悩んでしまうことってありますよね。

今やっている調整が必要なのか、意味があるのか、違いがあるのか、分からなくなってきたら調整前と調整中、調整後の各段階で画像としてエクスポートして見比べてみるといいです。

 

 

動画ではInkscape の操作画面にエクスポートした画像を重ねて数秒で切り替えて比較しています。

開始時の窓
開始時の窓
ビルを配置した
ビルを配置した
ビルの間隔を調整
ビルの間隔を調整
できあがり
できあがり

 

実際に比較する時は、画像ビューアー(Windowsフォト等)で開いた画像ファイルを数秒で切り替えながらチェックしてみるのがおすすめです。比較してみて、「良くなってる」と感じた調整部分には意味がありますし、「大差ないな」と感じた調整部分はあまり意味がなかったということです。

作業中のファイル内に、調整前から調整後までの各段階のオブジェクトの複製を並べて比較するのもアリです。(作業中のファイルが重くなるとInkscape が不安定になるので、たくさん並べて比較したい場合は画像としてエクスポートしてビューアーで見比べた方が安定して作業できます。)

 

夜景の見える窓が出来上がりました。

できあがりと開始時の比較
できあがりと開始時の比較

 

今回の作業では選択ツールしか使っていないので、すぐに説明を書き終わると思っていたんですが結構な文字数になってしまいました。

作業的には簡単でも、こういうパーツを合わせて調整する作業って地味に手間がかかるので、じっと画面を見つめていると目も頭も疲れてしまいますよね。

そんな時は休憩を挟んで目と頭をリセットすると、それまで見えなかった違和感や、新たな気付きを発見できるかもしれません。

画像の切り替えによる比較も一度休憩を挟んだ方がより効果的です。

長々と書きましたが、結論として何が言いたいかというと、「調整作業はついつい悩んでしまいがちだけど、客観的に見ると大差ない所で悩んでいることもある。程々で切り上げることも大事!」ってことです。悩んだ方がいいものができることもあるし、難しいですけどね。作るものの利用目的や締め切りに応じて悩む時間は調整できるようになるといいですよね。

 

今回作った夜景の見える窓は、クリップグループを使用しているので、ブラウザ上で表示できるSVGファイルにするためにはもう少し作業が必要になります。

それについては後日説明いたしますのでお待ちいただけたらと思います。

タイトルとURLをコピーしました