トマシープが学ぶ

Unity/VR/AR/デザイン好きのミーハー 記事内容は自分用のメモです

バーチャルっぽいイラスト・イメージ表現を作ってみる【XD】

特徴

Pintarestにまとめました。

www.pinterest.jp

半透明にする

f:id:bibinbaleo:20200220120127p:plain

bae.dentsutec.co.jp

 

アウトラインを青っぽくする

同上

白や水色のドロップシャドウ(光ってる)

www.youtube.com

周りが白い

f:id:bibinbaleo:20200221130700p:plain

実際に出てくるときはそんなのないから、イメージ画像を作るときにあえてそうしている

f:id:bibinbaleo:20200221130658p:plain

青く光ってる

www.pinterest.jp

ぼわ~

単純なイラストのときはもっと誇張して周りにオーラーを出す。

天下のいらすとやさん。

f:id:bibinbaleo:20200220103714p:plain

オブジェクトの周りにオーラーが出てる+中身も少し白いもわもわ

 

メッシュ風

このイメージ!

f:id:bibinbaleo:20200221075517p:plain

www.caesarvr.com

これもポリゴンの線を入れている。

f:id:bibinbaleo:20200221131041p:plain

Zappar Launches ZapWork AR Studio 5 Full Creative Suite | BusinessWorldIT

これも!

www.pinterest.jp

 

この素材も背景に青いメッシュがある。

pixta.jp

イラレならスクリプトでできるらしい

speakerdeck.com

中に重ねる

人物の中にVRで見ている景色を重ねるの良い!

f:id:bibinbaleo:20200220121444p:plain

project.nikkeibp.co.jp

ぼわぼわ

景色の場合は周りをぼわぼわ

f:id:bibinbaleo:20200220103749p:plain

 

作る

f:id:bibinbaleo:20200220131328p:plain

自由の女神はこちらから

SILHOUETTE DESIGN – Just another WordPress site

メッシュ作る(Unity/Gimp/XD)

適当にXDで線引いてもメッシュっぽくはならない

f:id:bibinbaleo:20200220122400p:plain

自分でワイヤを書くの無理だったので、Unityで表示した。

f:id:bibinbaleo:20200221083911p:plain

GizmoのSelectionWireにチェックを入れると、オブジェクトを選んだ時に表示される。

 スクショする

f:id:bibinbaleo:20200221083906p:plain

f:id:bibinbaleo:20200221083908p:plain

 

f:id:bibinbaleo:20200221083914p:plain

f:id:bibinbaleo:20200221083921p:plain

白い部分を透過する。webでできるのありがてーー

www.peko-step.com

↓透過した

f:id:bibinbaleo:20200221090528p:plain

GIMP

線に色を付ける。XDの乗算とかだとうまくいかなかったので、無料のPhotoshopと言われているGIMPを使ってみた。

forest.watch.impress.co.jp

色のレイヤーを載せてLCh色モードにしたらそれっぽくなった。

f:id:bibinbaleo:20200221093434p:plain

f:id:bibinbaleo:20200221140113p:plain

線を太くする方法が分からなかったので、少しずらしたレイヤーを置いた

f:id:bibinbaleo:20200221093702p:plain

ちなみにGIMPにはレイヤーロック機能がないらしく、他のものをつかまないように動かすにはShiftを押しながらドラッグしたらよかった。

www.webdlab.com

f:id:bibinbaleo:20200221140056p:plain

XDで効果つける

これをイラストの形でマスク

f:id:bibinbaleo:20200221140538p:plain

背景のボヤーはXDの「オブジェクトのぼかし機能」で楕円をぼかしている。

f:id:bibinbaleo:20200221140945p:plain

f:id:bibinbaleo:20200221140811p:plain

自由の女神自体もぼかせる。

f:id:bibinbaleo:20200221140752p:plainf:id:bibinbaleo:20200221140905p:plain

オブジェクトぼかしできないシェイプもある。SVGかどうかの違いかな?

最後に

難しい